css引入、选择器总结.ppt

1、对于标签选择器，可以同时对几个标签选择器定义样式；例如，代码中的h1，h2 * * * * CSS+DIV网页样式与布局 Page ? * Div+css的概述 传统的网页布局是使用表格，代码比较混乱，缺乏结构性。 现在的网页整体布局使用CSS+DIV来构建，代码看起来比较有层次感。 一定要重视标签的语义！ 常用语义标签 1.标题标签：h1~h6。 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承载的是样式。 内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击。 DIV的概念 　1. DIV 是标签的一种，使用它的方法跟使用其他标签的方法一样。 2.作用：将HTML文档分割为独立的、不同的部分（块）。 3. 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 P/P 是一样的。 DIV的概念 DIV本身就是容器，它可以嵌套所有标签，包括它自己。 5. 注意：div标签不能嵌套在段落元素pdiv/div/p中。 span的概念 span：行内元素（内联元素） 在行内定义一个区域，也就是一行内可以被 span 划分成好几个区域，从而实现某种特定效果。 SPAN 和 DIV 的区别 SPAN 和 DIV 的区别在于： （1）DIV(division)是一个块级元素，可以包含段落、标题、表格等。 （2）SPAN是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容。 二、CSS基础语法 1、CSS语法由三部分组成：选择器、声明（属性和值） Page ? * body:选择器; font-size:相应标签的属性; 12px:属性值; 注：多个声明之间用“;”隔开。 body {font-size:12px；color: #000; } 2、注意事项 可读性更好的写法，使代码有层次感； Page ? * p { font-size:12px； color: #000; } CSS样式对大小写不敏感，但在选择器中对class和id名称敏感； 注释符号 /* 注释内容 */ 引入CSS 1、外部样式表:先建立外部样式表文件(.css)写CSS代码，然后在head内使用link标签.链接。 Page ? * head title标题名/title link rel=“stylesheet” href=“test.css” type=“text/css”/head rel：指定链接的是样式表-- stylesheet ； type：指定链接类型是text/css; { font-size:50px; color:red; background:green; } Css文件： 引入CSS 2. 嵌入（内部）样式表：直接在head标签内插入 style.../style块对象，这里面写的都是CSS代码！不能使用HTML的注释方法，以及任何HTML标记！ Page ? * html headstyle type=“text/css” p {font-size: 30px; font-weight: bold; color: red;} div {font-size: 20px; font-weight: bold; color: blue;}/style /head body/body 引入CSS 3、内联样式：在任意一个HTML标记中使用style属性，在style属性中使用样式属性。 Page ? * p style=“font-size:20px;color:red;border:1px solid blue; 这是一段话 /p 注意：不推荐使用该方式！将结构与表现混杂在一起 ，丧失样式表原有的优势！ 课本练习：P10 4. 多重样式表的叠加 如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突时会以最后定义的为准！ 注：依照后定义优先原则， 优先级：内联样式内部样式外部样式 Page ? * 三、CSS选择器 1、标签选择器 2、ID选择器； 3、类选择器； 4、包含选择器； 5、组合选择器； 6、其他（通用、伪类选择器） Page ? * CSS选择器-续 1、标