CSS3基础

第4章CSS3基础※理解CSS语法；※掌握CSS使用方式；※掌握常用的CSS的属性；※会熟练使用CSS常用属性设置文本样式。4.1案例：学院新闻详情页面2第4章CSS基础4.1案例：学院新闻详情页面34.2知识准备CSS功能强大，CSS的样式能实现比HTML更多的网页元素样式，几乎能定义所有的网页元素。现在所有漂亮的网页几乎都使用了CSS，CSS已经成为网页设计必不可少的工具之一。很多站点都为自己的网页添加了各种酷炫的CSS效果。54.2.1初识CSSCSS（CascadingStyleSheet，层叠样式表）是由W3C的CSS工作组创建和维护的。它是一种不需要编译、可直接由浏览器执行的标记性语言，用于格式化网页的标准格式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。CSS能将样式的定义与HTML文件结构分离。对于由几百个网页组成的大型网站来说，要使所有的网页样式风格统一，可以定义一个CSS样式表文件，几百个网页都调用这个样式表文件即可。如果要修改网页的样式，只需修改CSS样式表文件就可以了。6CSS2CSS1CSS3伴随着HTML的发展，CSS的各种版本也应运而生。CSS的发展主要有三个版本，介绍如下：4.2.2CSS发展历史74.2.3引入CSS样式行内式链入外部样式表内嵌式行内式：（1）通过style可以设置标记的样式。（2）属性指的是CSS属性，不同于HTML标记的属性。一般用。（3）属性和属性值之间用分隔；多个属性之间用隔开，属性值后的分号可以。：标记style=属性：属性值；属性：属性值；...内容/标记名是通过设置元素的样式84.2.3引入CSS样式行内式链入外部样式表内嵌式内嵌式：headstyletype=text/css选择器1{属性：属性值；属性：属性值；...}/*注释内容*/选择器2{属性：属性值；属性：属性值；...}....../style/head也叫，是将样式代码写在头部标记中，并且用标记定义。94.2.3引入CSS样式行内式链入外部样式表内嵌式内嵌式：（1）style标记一般位于head标记中。（2）用于指定CSS样式作用的HTML对象，有标记选择器、类选择器和ID选择器等。选择器的详细内容会在本章后面介绍。（3）为CSS的注释符号，用于说明该行代码的作用。注释内容显示在网页上。104.2.3引入CSS样式行内式链入外部样式表内嵌式内嵌式内嵌式CSS样式只对其所在的HTML页面有效。因此，如果只有时，使用。但如果网站有，则应使用。114.2.3引入CSS样式行内式链入外部样式表内嵌式链入外部样式表：headlinkhref=外部样式表文件路径rel=stylesheettype=text/css//head是指将所有的CSS样式放入一个以为扩展名的外部样式表文件中，通过将外部样式表文件链接到HTML文件中。124.2.3引入CSS样式：（1）link标记一般位于head标记中。（2）link标记必须指定以下属性：：定义所链接的外部样式表文件的URL。：定义被链接的文件是样式表文件。：定义所链接文档的类型为text/css，即CSS文档。行内式链入外部样式表内嵌式链入外部样式表134.2.3引入CSS样式•链接外部样式表的是可以被HTML页面链接使用。最实用•该种方式实现了，使得网页的前期制作和后期维护都十分方便。行内式链入外部样式表内嵌式链入外部样式表144.2.4CSS选择器标记选择器ID选择器交集选择器并集选择器后代选择器类选择器标记选择器所有的都可以作为，例如，body、h1~h6、p、ul、li、strong等。标记选择器定义的样式能自动应用到网页中的相应元素上。标记名称{属性：属性值；属性：属性值；...}通配符选择器标记选择器是指用HTML标记名称作为选择器，为页面中的该类标记指定统一的CSS样式。154.2.4CSS选择器标记选择器ID选择器交集选择器并集选择器后代选择器类选择器标记选择器通配符选择器标记选择器最大的是能快速为页面中的标记统一样式，同时这也是它的，不能设计。p{font-size:12px;/*设置文字大小*/color:#666;/*设置文字颜色*/font-family:微软雅黑;/*设置字体*/}p{font-size:12px;color:#666;font-family:微软雅黑;}完全等价164.2.4CSS选择器标记选择器ID选择器交集选择器并集选择器后代选择器类选择器类选择器（1）使用类选择器定义的CSS样式，需要设置为其指定样式。（2）类选择器的最大优势是可以为元素定义。.类名称{属性：属性值；属性：属性值；...}通配符选择器指定的样式可以被网页上的标记元素所选用。类选择器以“”开始，其后跟类名称。174.2.4CSS选择器标记选择器ID选择器交集选择器并集选择器后代选择器类选择器类选择器通配符选择器（1）多个标记可以使用同一个类名，使不同的标记指定相同的样式。（2）的第个字符使用，并且严格，一般采用表示。184.2.4CSS选择器标记选择器ID选择器交集选择器并集选择器后代选择器类选择器ID选择器（1）即为HTML元素的，是的。（2）ID选择器定义的样式能自动应用到网页中的某一个元素上。（3）ID选择器常用于DIV布局时给页面上的块定义样式时使用。#ID名称{属性：属性值；属性：属性值；...}通配符选择器用于对某个元素定义单独的样式。ID选择器以“#”开始。194.2.4CSS选择器标记选择器ID选择器交集选择器并集选择器后代选择器类选择器交集选择器交集选择器是为了简化样式表代码的编写而采用的选择器。初学者如果对此选择器不能熟练应用，完全可以创建一个来代替使用交集选择器。标记名称.类名称{属性：属性值；属性：属性值；...}通配符选择器由个选择器构成，第个是，第个是，表示二者各自元素范围的交集。两个选择器之间有空格。204.2.4CSS选择器标记选择器ID选择器交集选择器并集选择器后代选择器类选择器并集选择器通配符选择器由各个选择器通过连接而成。任何形式的选择器（标记选择器、类选择器、ID选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。214.2.4CSS选择器标记选择器ID选择器交集选择器并集选择器后代选择器类选择器后代选择器通配符选择器也叫包含选择器，用于对容器对象中的子对象进行控制，使其他容器对象中的同名子对象不受影响。后代选择器书写时将写在，写在，中间用分隔。若容器对象有时，则。通配符选择器22标记选择器ID选择器交集选择器并集选择器后代选择器类选择器通配符选择器用“”表示，它是所有选择器作用范围是最广的，能匹配页面中的元素。*{属性：属性值；属性：属性值；...}设置页面中所有元素的外边距和内边距属性的代码如下：*{margin:0;padding:0;}4.2.4CSS选择器23第2章介绍了常用的HTML文本标记，为了更好地控制文本标记显示的样式，CSS提供了相应的文本设置属性。4.2.5CSS常用文本属性属性说明font-family设置字体font-size设置字号font-weight设置字体的粗细font-style设置字体的倾斜@font-face用于定义服务器字体，是CSS3新增属性text-decoration设置文本是否添加下划线、删除线等color设置文本颜色text-align设置文本的水平对齐方式text-indent设置段落的首行缩进line-height设置行高text-shadow设置文字的阴影效果，是CSS3新增属性text-overflow设置元素内溢出文本的处理，是CSS3新增属性244.2.5CSS常用文本属性font-familyfont-weightfont-style@font-facetext-decorationfont-sizetext-alignfont-familycolortext-indentline-heighttext-shadowtext-overflow用于设置。网页中常用的字体有宋体、微软雅黑、黑体等。例如，p{font-family:微软雅黑;}可以同时指定字体，中间以隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。1、font-family254.2.5CSS常用文本属性font-familyfont-weightfont-style@font-facetext-decorationfont-sizetext-alignfont-familycolortext-indentline-heighttext-shadowtext-overflow1、font-family（1）字体之间使用隔开。（2）需要加下的引号，英文字体一般需要加引号。（3）如果字体名中包含、、等符号，则该字体必须加（4）尽量使用系统，保证在任何用户的浏览器中都能正确显示。262、font-sizefont-size属性用于设置，一般用为单位表示字号大小。例如，p{font-size:12px;}最适合网页显示的字号大小为一般为左右。对于标题或其他需要强调的地方可以适当设置较大的字号。页脚和辅助信息可以用小一些的字号。4.2.5CSS常用文本属性font-familyfont-weightfont-style@font-facetext-decorationfont-sizetext-alignfont-sizecolortext-indentline-heighttext-shadowtext-overflow27属性用于定义字体的。常用的属性值为和，用来表示或显示的字体。例如：p{font-weight:bold;}/*设置段落文本为粗体显示*/h2{font-weight:normal;}/*设置标题文本为正常显示*/3、font-weight4.2.5CSS常用文本属性font-familyfont-weightfont-style@font-facetext-decorationfont-sizetext-alignfont-weightcolortext-indentline-heighttext-shadowtext-overflow28用于定义，如设置、或字体，其可用属性值如下：：默认值，浏览器会显示的字体样式。：浏览器会显示的字体样式。：浏览器会显示的字体样式。4、font-style4.2.5CSS常用文本属性font-familyfont-weightfont-style@font-facetext-decorationfont-sizetext-alignfont-stylecolortext-indentline-heighttext-shadowtext-overflow29italic和oblique都是向右倾斜的文字，但区别在于italic是指斜体字，而oblique是倾斜的文字，对于没有斜体的字体应该使用oblique属性值来实现倾斜的文字效果。4、font-style4.2.5CSS常用文本属性font-familyfont-weightfont-style@font-facetext-decorationfont-sizetext-alignfont-stylecolortext-indentline-heighttext-shadowtext-overflow30@font-face属性是CSS3新增属性，用于。通过该属性，开发者可以在网页中使用任何喜欢的字体，而不管用户计算机是否安装这些字体。5、@font-face4.2.5CSS常用文本属性font-familyfont-weightfont-style@font-facetext-decorationfont-sizetext-align@font-facecolortext-inden