《最新CSS基础课件ppt.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS基础4.1CSS的概念CSS（CascadingStyleSheet），中文译为层叠样式表，是用于控制网页内容的外观（样式），并允许将样式信息和网页内容分离的一种标记语言。HTML与CSS的关系是“结构”与“表现”的关系，即HTML确定网页的结构，CSS设置网页的表现形式。利用CSS样式可以制作出丰富多彩的网页效果，从精确的页面布局、定位到特定的字体和样式，功能非常强大。CSS历经了CSS1、CSS2、CSS2.1和CSS3四个版本。4.2CSS的基本语法CSS的一个核心特征，就是能够很容易地向HTML文件中的所有同类型的标记应用一组样式。例如，

2、让HTML页面中所有

标记中的文字都显示为红色，可以应用以下规则：h1{color:red;/*文字颜色为红色*/}1.行内样式行内样式是所有引用CSS样式方法中最为直接的一种，它直接在HTML页面的元素中添加style属性，然后在style属性值中直接定义样式，例如：中原洛科三周年庆典

3、式用：标记包含，放在当前HTML页面的标记之间，这样定义的样式就可以应用到当前页面中。【例4-1】在HTML页面中加入内嵌样式示例。h1{font-size:14px;/*文字大小为14像素*/color:blue;/*文字颜色为蓝色*/}3.链接样式链接样式是在HTML页面的标记之间使用标记引用一个外部的CSS样式表文件。例如：

4、css“type="text/css“rel="stylesheet">表示将index.css样式表文件链接到当前页面中，对页面中相应的对象进行样式控制。注意：如果HTML文件与其链接的CSS文件不在同一个目录下，则要在标记的href属性后写上CSS样式文件的正确路径。4.导入样式在HTML文件中导入CSS样式文件，需在在HTML文件的标记中可以导入多个样式文件，而且在一个CSS样式文件内也可以导入其他的样式文件。另外，在使用@import命令时，一定要放在其他CSS规则的前面，否则将不起作用。4.2.3CSS注释在CSS样式文件中，注释的内容要放在“/*”与“*/”之间，可以是单行也可以是多行。例如：/*下面是对

标记使用的CSS样式*/h1{color:gray;}/*下面是对

标记使用的CSS样式*/p{color:blue;font-size:12px;font-weight:bold;/*设置文字加粗*/background-color:green

6、;/*设置背景色为绿色*/}4.3选择器选择器是CSS样式中很重要的概念，用来定位CSS样式代码控制的对象，从而实现各种效果。通常有如下几类：1.基本选择器(标记、类别和ID选择器)2.复合选择器3.伪类和伪元素选择器4.3.1基本选择器1.标记选择器CSS标记选择器就是用来声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的选择器名称，基本格式如下：标记名称{属性1:属性值1;属性2:属性值2;……}例如:p{color:gray;font-size:25px;background-color:green;}4.3.1基本选择器1

7、.标记选择器CSS对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS样式代码生效。注意：可以用*表示HTML文件中所有的标记。*{background-color:#006633;}表示把当前页面中所有标记元素的背景颜色设置为#006633。4.3.1基本选择器2.类别选择器标记选择器一旦声明，HTML文件中所有的相应标记都会产生变化。如果希望其中的某一个标记不产生相应的变化，这时需要为标记定义一个class属性，引入类别（class）选择器，多个标记的class属性的属性值可以相

8、同。类别（class）选择器的名称由用户自己定义，基本格式如下：.类别名称{属性1:属性值1;