网页设计CSS语法基础.ppt

11.1 CSS的概述 CSS的优点： （1）方便网页格式的修改，不需要逐一更新 （2）便于减少网页体积 （3）能使网页元素更准确的定位，轻松控制页面的布局 （4）良好的适应性，几乎在所有的浏览器上都可以使用 11.1.2 CSS的特性——层叠性 当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样式表中为p定义了如下样式： p { text-align: left;} 而在内部样式表中又定义了如下样式： p {font-size: 24px;} 那么最终网页内p标签的样式将为： p { text-align: left; font-size: 24px;}。 * * * * * * * * * * * * * * * * * * 11.4.3 编写外部的CSS 1．应用链入外部样式表方法在HTML文件内调用外部定义的CSS文件 网页效果 11.4.3 编写外部的CSS 2．应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件 （1）建立如下的HTML文件 html head title编写外部CSS文件/title style style=text/css @import url(11-4-2.css ); /style /head body h1 align=center编写外部CSS文件/h1 hr p在HTML文件中应用导入外部样式表方法调用外部CSS。/p /body /html 将同一文件夹下的11-4-2.css文件导入HTML文件中。 11.4.3 编写外部的CSS 2．应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件 （2）再建立单独的CSS文件：11-4-2.css h1{color:blue;font-size:30px;font-family:黑体} p{background:pink;color:black;font-size:20;font-family:宋体} 11.4.3 编写外部的CSS 2．应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件 网页效果 * * * * * * * * * * * * * * * * * * * * * * * * * * * * 11.2.2 CSS选择符类型 4．伪类 伪类的语法： 选择符名:伪类名称 在使用伪类的时候，要对应某个其他的选择符，这个选择符可以使用id选择符或者类选择符，但通常会将伪类定义在链接内容。伪类都有固定的写法，一般格式为英文的“:”加上伪类名称。 11.2.2 CSS选择符类型 html head style type=text/css a { /*设置超链接不带下划线*/ color: blue; text-decoration: none; /*文本修饰：无*/ } a:hover {/*鼠标在超链接上方停留时，带下划线 */ color: red; text-decoration:underline; /*文本修饰：下划线*/ } /style /head body a href=“a.htm 我是超链接，鼠标移动过来我就显示下划线/a /body /html 11.2.2 CSS选择符类型 网页效果 设置不带下划线的超链接 当鼠标移至超链接，就显示下划线并呈红色字体。 11.2.3 选择符的优先级 在应用选择符的过程中，可能会遇到同一个元素由不同选择符定义的情况，这时候就要考虑到选择符的优先级。 通常我们使用的选择符包括id选择符，类选择符，包含选择符和HTML标记选择符等。id选择符优先级最高，其次是类选择符。 11.2.3 选择符的优先级 !important语法主要用来提升样式规则的应用优先级。只要使用了!important语法声明，浏览器就会优先选择他声明的样式来显示。若想打破已定义的优先级顺序，可以使用!important声明。 例如： p{color:red !important} .blue{color:blue} #id1{color:yellow} 优先级 ① ③ ② 11.3 插入CSS样式表 11.3.1 链入外部样式表 11.3.2 内部样式表 11.3.3 嵌入样式表 11.3.4 导入外部样式表 11.3 插入CSS样式表 根据CSS文件的定义放置在HTML文件的位置的不同，分为头部、主体和外部。 CSS文件的定义在HTML文件头部的方法：内部样式表 CSS