1、块级标签结构的搭建,学习目标,1、css简介2、样式以及样式的优先级3、css语法4、标签分类5、常见网页排版布局6、注释,1.1、CSS简介,CSS：Cascading Style Sheets 层叠样式表，WEB标准中的表现标准语言，主要对网页信息的显示进行控制。（修饰网页信息的显示样式）,包含font相关的属性，颜色与背景，文字相关属性，box相关属性,样式表结构,在css2上略微改动，删除了浏览器不支持的属性,目前推荐遵循的是W3C发布的CSS3.0.用来表现XHTML或者XML等样式文件的计算机语言,1.2 CSS3和CSS2对比,（1）模块化结构CSS3采用分工协作的模块化结构，避
2、免浏览器产生的某个模块支持完全的情况。（2）CSS3代码简洁，性能效果兼顾（3）CSS3数据精简实用许多css2要用图片做效果，而css3直接用代码编写（4）CSS3广泛适用于微信活动页面开发,2. CSS样式,（1）内部样式表（2）外部样式表（3）内联样式表（行内样式、嵌入式样式）,2.1 内部样式表,语法：/*css语句*/,注：使用style标记创建样式时，最好将该标记写在;,2.2 外部样式表,（1）创建外部样式表新建文件：xxx.csscharset utf-8;（2）导入外部样式表方法1：说明：使用link元素导入外部样式表时，需要将该元素写在文档头部，即与中。方法2：说明：和im
3、port之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束；,2.2 link和import导入外部样式区别,（1）老祖宗的差别link属于XHTML标签，而import是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它事情，比如定义RSS、定义rel连接属性等，import只能加载css。（2）加载顺序的差别当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览import加载CSS的页面时开始会没有样式。（3）兼容性的差别import是CSS2.1提出
4、的，所以老的浏览器不支持，import只在IE5以上的才能识别，而link标签无此问题。（4）使用DOM控制样式差别当使用javascript控制dom去改变样式的时候，只能使用link标签，因为import不是dom可以控制的.,2.3 行内样式表,语法：,2.4 样式的优先级,内联样式表优先级别最高内部样式表与外部样式表的优先级和书写的顺序的顺序有关，后书写的优先级别高,3.1 CSS语法,语法：,说明：（1）每个CSS样式由3个部分组成，选择器，属性和值。（2）属性必须放在花括号中，属性和属性值用冒号连接。（3）每条声明用分号结束。（4）当一个属性有多个属性值的时候，属性值与属性值不分先
5、后顺序。（5）在书写样式过程中，空格、换行等操作不影响属性显示。,选择器,声明（属性和值）,3.2 简单属性使用,（1）color：颜色规定颜色值为颜色单词名称例如（red）或者十六进制值的颜色例如（#ff0000）或者为rgb值的颜色例如（rgb(255, 0, 0)）（2）width：宽度设置元素的宽度值，值为数字；单位为px（像素)、em（字符）、%（百分比）；默认值为auto（自动，通过浏览器自动计算出宽度值单位为像素）像素在浏览器中的概念： 像素数决定元素或文字在浏览器中显示的大小或位置，页面中的最小计量单位为1个像素，即1px。（3）height：高度设置元素的高度值，值为数字；单
6、位为px（像素)、em（字符）、%（百分比）；默认值为auto（自动，通过浏览器自动计算出宽度值单位为像素）（4）background-color：背景颜色背景颜色；规定颜色值为颜色单词名称例如（red）或者十六进制值得颜色例如（#ff0000）或者为rgb值的颜色例如（rgb(255, 0, 0)）。可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。,4、标签分类,（1）块级元素（block-level elements）（2）内联元素（行内元素、inline elements）（3）内联块级元素（inline-block）,标签从表面上分为单标签和双标签，单标签
7、功能单一、不能嵌套。双标签功能多样化，可以嵌套。标签又分为块级元素和内联元素（行内元素）。,4.1 块级元素,1、块状元素在网页中就是以块（元素显示为矩形区域）的形式显示。常用的块状元素：div、dl、dt、dd、ol、ul、li、fieldset、（h1h6）、p、form、hr、colgroup、col、table、tr、td等。2、默认情况，块状元素都会占一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。3、块状元素都可以定义自己的宽度和高度，不设置宽度的时候，默认与父级元素一样宽。4、块状元素一般都作为其他元素的容器，它可以容纳其它内联元
8、素和其它块状元素。我们可以把这种容器比喻为一个盒子。,为段落标签，一般被用于装载段落文字，并且标签中不可以包含块级元素。 h1h6为最常用的结构元素，常备用于分割页面区域，以及功能模块。,Div当成模块来用,4.1 块级元素,4.2 内联元素,1、常见的内联元素如：a,span,i,em,strong,b等2、内联元素的表现形式是始终以行内逐个进行显示；3、内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；4、内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,backgrou
9、nd等属性，但个别属性不能正确显示;对于盒子模型属性部分支持,4.2 内联元素（行内元素）,4.3 内联块级元素,1、内联块(行内块)级元素是块级元素和内联元素的混合体。inline-block元素设置宽度和高度，2、内联块级元素属于内联元素，不会独占一行，而是会和其他inline元素和inline-block元素在同一行按从左至右的顺序显示。3、常见的内联块级元素：img、textarea、input、select、iframe等。,内联块级元素的使用场合：导航菜单,4.4 元素类型转换,display属性,4.5 行内块级元素案例,实现如下图所示导航条效果,5 常见网页排版布局,6、注释,HTML注释CSS注释/* 注释内容 */,
