项目3网页布局.ppt

芜湖职业技术学院 * 项目3 网页布局 《HTML5网页设计与实现》 『作 者』徐 琴 『时 间』2015.6 网页布局——学习情境 小黄通过前一个项目的学习掌握了HTML5基本知识，根据刘总的要求，开始着手建设网页，需要搭建网页的基本结构，也就是布局。 * 认识CSS * Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。它可以控制页面的外观，并且将文档的表现部分与内容隔开。它给我们带来很多好处，如避免重复、更容易维护和为不同目的，使用不同的样式而内容相同。 认识CSS CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 selector {property: value} CSS注释以/*开始，以*/结束。 * 选择器 浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。而这结合的依据就来自于CSS的选择器（selector）。CSS选择器有多种类型，如标签选择器、类选择器、通用选择器和组合选择器等。 * 选择器 * 元素选择器 文档的元素是最基本也是最常见的选择器。元素选择器又称为类型选择器（type selector）。如h2 {color:blue;}，该代码将h2级别的标题设置为蓝色。该元素可以是html文档中所有的标签元素，甚至是html本身，如：html {color:red;}，文本会呈现红色。 选择器 * 类选择器 通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。在写样式表时，类选择器是以英文句号（.）开头的。 如下面p标签元素具有class属性： p class=key 在一个CSS样式表中，下面的规则会使所有class属性等于key的元素文字颜色为绿色。 .key { color: green; } 选择器 * ID选择器 需要注意的是：每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。 例如下面规则会使id等于principal的元素字体大小为20px： #principal{ font-size:20px; } 选择器 * 通用选择器 通用选择器用一个星号“*”表示，它的作用是匹配所有的可用元素。 *{ padding:0; margin:0; } 伪类选择器 CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比较常见的链接状态就是要使用伪类选择器来实现。 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ * 伪元素选择器 CSS伪类用于向某些选择器添加特殊的效果，而伪元素(Pseudo-elements)用于将特殊的效果添加到某些选择器。如： style pi:first-child {color: red} /style p i第一个i/i i第二个i/i /p * 属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。 例如，将所有包含标题（title）的所有元素变成红色，可以用以下代码： style *[title]{ color: red; } /style p这里没有title属性/p a href=# title=title1这里是具有title属性的链接。/a * CSS属性 CSS属性可以分为字体属性、颜色及背景属性、文本属性、方框属性等。 * 属性 描述 color 设置文字颜色 font-family 设置字体 font-size 设置字体大小 font-style 设置字形样式（正常或斜体） font-weight 设置是否加粗 text-align 设置文本水平对齐方式 text-decoration 设置文本修改 background 设置背景 background-color 设置背景颜色 background-position 设置背景固定位置 CSS属性 background-repeat 设置背景是否重复 width 设置宽度 height 设置高