css引入、选择器

1、CSS+DIV网页样式与布局Page 1Div+css的概述 传统的网页布局是使用表格，代码比较混乱，缺乏结构性。 现在的网页整体布局使用CSS+DIV来构建，代码看起来比较有层次感。 一定要重视标签的语义！常用语义标签1.标题标签：h1h6。 2.列表标签：ul、ol和dl。 3.表单标签：input、textarea、select等。4.表格标签：table、tr、td等。5.强调语义标签：strong、em等。6.引用标签：blockquote、cite等。7.代码标识标签：abbr、code等。DIV+CSS布局 DIV+CSS布局div承载的是内容，而css承载的是样式。 内容和样式

2、的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击。DIV的概念1. DIV 是标签的一种，使用它的方法跟使用其他标签的方法一样。2.作用：将HTML文档分割为独立的、不同的部分（块）。 3. 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。DIV的概念 DIV本身就是容器，它可以嵌套所有标签，包括它自己。5. 注意：标签不能嵌套在段落元素中。span的概念 ：行内元素（内联元素） 在行内定义一个区域，也就是一行内可以被 划分成好几个区域，从而实现某种特定效果。SPAN 和 DIV 的区别 SPAN 和 DIV 的区别在于： （1）DIV(divi

3、sion)是一个块级元素，可以包含段落、标题、表格等。 （2）是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容。二、CSS基础语法1、CSS语法由三部分组成：选择器、声明（属性和值）Page 9body:选择器选择器;font-size:相应标签的属性相应标签的属性;12px:属性值属性值;注：多个声明之间用注：多个声明之间用“;”隔开。隔开。body font-size:12px；color: #000; 2、注意事项可读性更好的写法，使代码有层次感；Page 10p font-size:12px； color: #000; CSSCSS样式对大小写不敏感，但在选择器中对样式对

4、大小写不敏感，但在选择器中对classclass和和idid名称敏感；名称敏感；注释符号注释符号 / /* * 注释内容注释内容 * */ /引入CSS1、外部样式表:先建立外部样式表文件(.css)写CSS代码，然后在head内使用link标签.链接。Page 11 标题名标题名 rel：指定链接的是样式表：指定链接的是样式表- stylesheet ；type：指定链接类型是：指定链接类型是text/css;font-size:50px;color:red;background:green;Css文件：文件：引入CSS2. 嵌入（内部）样式表：直接在标签内插入.块对象，这里面写的都是CSS

5、代码！不能使用HTML的注释方法，以及任何HTML标记！Page 12 p font-size: 30px; font-weight: bold; color: red; div font-size: 20px; font-weight: bold; color: blue; 引入CSS3、内联样式：在任意一个HTML标记中使用style属性，在style属性中使用样式属性。Page 13这是一段话 注意：注意：不推荐使用该方式！将结构与表现混杂在一起不推荐使用该方式！将结构与表现混杂在一起，丧失样式表原有的优势！，丧失样式表原有的优势！课本练习：课本练习：P10P104. 多重样式表的叠加

6、如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突时会以最后定义的为准！注：依照后定义优先原则， 优先级：内联样式内部样式外部样式Page 14三、CSS选择器1、标签选择器2、ID选择器；3、类选择器；4、包含选择器；5、组合选择器；6、其他（通用、伪类选择器）Page 15CSS选择器-续1、标签选择器：以HTML标签作为选择器 ，用来改变一个指定标签的样式，任何一个HTML元素都可以是一个CSS的选择符。Page 16div line-height: 20px; font-size: 12px;p font-size:20px; width:200px;

7、语法：HTML标签名属性：值；CSS选择器-续2、ID选择器选择器：为指定为指定 id 的的 HTML 标签应用样式标签应用样式,以以#来定义。来定义。Page 17注：在同一个页面中，注：在同一个页面中，id名字是唯一的，不能相同。名字是唯一的，不能相同。#div1 width:200px; height:200px; background-color:#0000FF; 优先级：优先级：ID选择器选择器类选择器类选择器HTML选择器选择器CSS选择器-续3、类(class)选择器：以.号定义；Page 18.div2 width:200px; height:200px; background

8、-color:#000000; 语法：标签名.类名属性：值； 或者.类名属性：值； 两个知识点：1.两种语法的使用 2.同一个标 签可以定义多个类名，中间用空格隔开。CSS选择器-续4、包含/关联/后代/派生 选择器:通过依据元素之间的嵌套关系来定义样式。用空格隔开。Page 19这是这是p段落段落div p font-size:20px;background:yellow; 优先级：包含选择器优先级：包含选择器id选择器选择器语法：父标签 子标签属性：值；CSS选择器-续5、组合选择器：对多个选择器进行定义样式。选择器之间用逗号隔开。Page 20这是这是h1标题标题这是这是p段落段落h1,

9、p,#div1 font-size:20px;background:yellow; 优先级：组合选择器优先级：组合选择器=HTML选择器，冲突时由位置决定。选择器，冲突时由位置决定。语法：选择器1,选择器2属性：值；CSS选择器-续Page 216、其他、其他(1)通用选择器通用选择器:对页面上所有元素应用样式对页面上所有元素应用样式,用用*号表号表 示示.* border:3px solid red;优先级：优先级：HTML选择器选择器通用选择器通用选择器CSS选择器-续Page 226、其他、其他a:link colora:link color : : #FF0000 /#FF0000 /* * 未访问的链接未访问的链接 * */ / a:visited colora:visited color : : #00FF00 /#00FF00 /* * 已访问的链接已访问的链接 * */ / a:hover colora:hover color : : #FF00FF /#FF00FF /* * 鼠标移动到链接上鼠标移动到链接上 * */ / a:active colora:active color : #0000FF /: #0000FF /* * 选定的链接选定的链接 * */ / (2)伪类伪类:用于向用于向和和标签添加特殊的效果。标签添加特