第3章 使用CSS技术美化网页.pptVIP

* * * 3.3 【案例6】搜索页面 并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性： 边框属性 内/外边距属性 背景属性 定位属性 布局属性 元素宽高属性 2、CSS层叠性和继承性 3.3 【案例6】搜索页面 3、CSS优先级 网页制作时，对统一元素，应用不同的背景，会出现什么情况？ 思考 background-color:pink; background-color:blue; background-color:red; 【结论】 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。 3.3 【案例6】搜索页面 3、CSS优先级 来看一个例子： p class=father id=header strong class=blue文本的颜色/strong /p p strong{ color:black} /*权重为:1+1*/ strong.blue{ color:green;} /*权重为:1+10*/ .father strong{ color:yellow} /*权重为:10+1*/ p.father strong{ color:orange;} /*权重为:1+10+1*/ p.father .blue{ color:gold;} /*权重为:1+10+10*/ #header strong{ color:pink;} /*权重为:100+1*/ #header strong.blue{ color:red;} /*权重为:100+1+10*/ 对应的权重值： 3.3 【案例6】搜索页面 3、CSS优先级 继承样式的权重为0。 行内样式优先。 权重相同时，CSS遵循就近原则。 CSS定义了一个!important命令，该命令被赋予最大的优先级。 在考虑权重时，初学者还需要注意一些特殊的情况，具体如下： 案例实现 效果图 3.3 【案例6】搜索页面 * * * * * * * * * * * * * * * * * * * * * * * * * * 3.1 【案例4】文字Logo 4、CSS基础选择器 通配符选择器 通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下： 通配符选择器 标记选择器 类选择器 id选择器 *{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 案例实现 效果图 3.1 【案例4】文字Logo 3.2 【案例5】美食专题栏目 “专题栏目”是网页信息的一种重要表现形式，通常围绕某一个特定的主题，进行较全面、深入的报道。本节将通过CSS字体样式及CSS文本外观样式制作一个专题栏目。 3.2 【案例5】美食专题栏目 美食专题栏目效果图 案例效果图 3.2 【案例5】美食专题栏目 知识引入 美食专题栏目案例知识点 3.2 【案例5】美食专题栏目 1、CSS字体样式属性 1 font-size属性用于设置字号。 2 font-family属性用于设置字体。 3 font-weight属性用于定义字体的粗细。 4 font-style属性用于定义字体风格。 5 font综合属性用于综合设置字体样式。 6 @font-face属性是CSS3的新增属性，用于定义服务器字体。 3.2 【案例5】美食专题栏目 1、CSS字体样式属性 font-size属性 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下表所示： font-size属性 相对长度单位 说明 em 相对于当前对象内文本的字体尺寸 px 像素，最常用，推荐使用 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 3.2 【案例5】美食专题栏目 1、CSS字体样式属性 font-family属性 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。 font-family属性 p{ font-family:微软雅黑;} 例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码： 3.2 【案例5】美食专题栏目 1、CSS字体样式属性 font-weight属性 font-weight属性用于定义字体