CSS 学习笔记1、理解web标准的含义----为什么要用web标准*****将内容与样式分离*****2、web标准三部分与对应技术：结构--XHTML 表现--CSS 行为--JavaScript3、静态页面：XHTML+CSS4、理解表现与结构分离（1）内容：制作者放在页面真正想要让访问者浏览的信息（2）结构：是内容更加具有逻辑性和易用性（类似于标题正文列表）（3）用于修饰内容的外观的样式的东西（4）行为：对内容的交互及操作效果5、(1)使用XHTML结构化内容（2）使用CSS表现化内容（3）使用Javascript行为化内容：如果实用程序控制网页中的某些内容，为了标语区分，给内容加上一个唯一的标示符，我们称为ID。
<h1 id="main">标题</h1>（4）用javascript控制：用CSS再单独为id为main的元素加一个样式，就是加一个类.blue{background:blue;}6、网页开发的小工具火狐浏览器下的firebug插件左边html 右边CSS7、作为前端工作：要兼容的浏览器，IE6/7/8/9，火狐，谷歌等8、CSS:Cascading Style Sheets 层叠样式表可以作为html xhtml xml 的样式9、网页是否有CSS样式，测试--改变文字大小10、CSS语法结构body{font-size:12px;}body 表示我们想要控制的范围--针对的对象font--size表示样式的属性，就是是什么样的12px就是样式的值--属性的值格式：选择符{属性：属性值}11、CSS定义的技巧（1）为了将来的CSS代码优化，建议所有的属性值后面都要带上“；”（2）某些xhtml标签有自己默认的CSS属性值例如：h1 标签就有自己的属性值自动加粗字号较大（3）为了兼容主流的浏览器，为了统一效果，建议我们在设置时将所有元素的CSS属性，重置为标准的。
（4）不同的浏览器有各自不同的CSS属性值----要命的，就是浏览器的兼容（5）想用一个比较特殊的字体，怎么办？--将其转化为图片分中英文字体，设置字体的顺序，英文字体设置在前，中文设置在后font-family："Arial"，"宋体"（6）CSS编辑工具---用什么都行12、技巧：想让文字在垂直方向上居中，将行高设置为元素的高度。
*****文字的内容不能超过元素的宽度！！也就是不能换行****13、CSS可以重新设置XHTML的默认值。
14、CSS应用给网页的方式就相当于给人怎么去穿衣服15、网页中加CSS的方式有四种：（1）内联样式表：举例<pstyle="font-size:16px;color:red;">kjsklfjkasj</p>应用于一个标签（2）嵌入式样式表：<style></style>标签嵌入到HTML文件的头部中<head>标记内，举例：<style type="text/css">body{background:white;color:black;}</style>应用于一类标签（3）外部链接式样式表（推荐）将CSS样式写到一个单独的文件中style.css ,要使用的网页，只需要调用即可。
这才是我们学习XHTML+CSS的核心。
将结构与样式分离。
举例：<link href="stlyle.css" rel="stlyesheet" type="text/css">应用于所有网页的方法（4）导入式样式表：也是将样式写到一个文件中，再导入到网页中。
语法：<style>@import url("style.css");</style>****导入式与嵌入式相类似，都是将样式加入到网页里。
缺点：会占用html空间，有些浏览器解析会有问题。
浏览器会最后读取@import 中的内容将不同的CSS样式导入到一个CSS样式文件中@import url("sytle.css")@import url("style2.css")16、CSS选择符的类型我们相对网页中的某一个元素或者某一些元素、设置样式---可以通过不同的CSS选择符来实现什么是选择符---就是你要控制的对象（1）标签选择符---针对html标签如果要修改的是html标签的样式，以html标签为选择符，标签选择符（类型选择符）例如：要控制网页中的所有P标签：p{属性：值}（2）ID选择符---针对某一个id只想针对某一个元素进行控制，使用ID选择符，id在网页中具有唯一性。
也就是在网页中只出现一次的内容。
#ID名称{属性：值}例如：<p id="two">正文</p>#two{font-weight：bold;font-size:24px;}（3）类选择符---针对某一类，或则会某一些元素，他们的样式是相同的。
针对某一类元素设置相同的样式：.类名称{属性：值}类定义后还要通过class=”类名“应用于元素例如：.warning{color:red;}<p class="warning">文字</p><div class="warning">文字</div>同时给某个元素应用多个类（给一个人穿一件”大号“的”红色“的”女士“衣服）****同一个元素，应用多个类，类名与类名之间用空格隔开class=”类1 类2“*****注意：类名或者ID名不要以数字开头，应以英文字母开头*****17、CSS样式的特点（1）继承：网页中的子元素会继承父元素的某些样式。
因为有些子元素本身就有默认值，所以它就不用父元素的值。
给父元素设置样式，子元素也会继承该样式效果<body>是父元素，<p>是它的子元素（2）层叠：网页中子元素定义了与父元素相同的样式，子元素会把父元素的样式覆盖。
后面的样式会覆盖前面的样式。
18、CSS样式的优先权：当样式有冲突时，听谁？（1）四种方式的优先权：内联式>嵌入式>外链式（<link href="style.css" rel="stylesheet" style="text/css"）>导入式（@import url("style.css")）（2）就近原则作用范围越小，优先权越高离要修饰目标越近的样式优先权越高。
（3）选择符之间的优先级：行内>id>class>标签选择符特殊情况：我们可以提升某个属性的权限。
我们可以采用!important 语法来提升(IE 6 不支持) 例如：p{color：red !important;}p{color:green;}总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的19、****IEtest工具也有兼容性问题，在win7下打不开IE6-----解决：下载绿色版IE6---不用安装直接用20、常用的文字、文本控制的CSS样式<em>文字默认倾斜</em>***不同浏览器默认值不一样，需要注意CSS的默认值。
***尽量使用通用属性，不用存在兼容性差别的属性，如blink（闪烁）属性具有兼容性问题wordspacing:对汉字无效，英文字母、数字、空格等有效。
无兼容性问题。
21、CSS控制元素的某种状态--CSS伪类****如果，鼠标放上效果不起作用，请修改链接状态的顺序 L-V-H-A 举例：<style type="text/css">a:link{text-decoration:none;color:black;}a:visited{text-decoration:line-through;color:green;}a:hover{text-decoration:underline;color:blue;}a:active{text-decoration:overline;color:green;}</style>未访问的链接 a:link{color:#FF0000}已访问的链接 a:visited{color:#00FF00}鼠标移动到链接上 a:hover{color:#FF00FF}鼠标按下链接 a:active{color:#0000FF}自定义链接的CSS类a.类名称:状态CSS伪类用于像某些选择器添加特殊效果语法：选择符：伪类名称{属性：值}例如：a:hover{color:#FF00FF;text-decoration:underline;}:focus 设置对象在成为输入焦点（该对象的onfucs事件发生）时的样式（IE6/7不支持）22、CSS选择符命名，规范---语义化命名驼峰命名法:除第一个单词的首字母小写外，其余所有单词首字母都大写 headerBlock（优选）帕斯卡命名法：与驼峰相似，区别就是所有单词的首字母都大写。
匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀最常用的是驼峰命名法和帕斯卡命名法。
23、CSS选择符详解1)、标签选择符：针对html标签2)、id选择符：针对页面中只出现一次的内容，id3)、类选择符：针对某些元素，相同的样式，重复样式****默认情况下某些html元素本身有自己的默认值4)、控制所有元素----使用通配符---*通配选择符：*{属性：值}，用于定义所有html元素*的作用范围很广，但是它的效率最低。
（慎用）*{margin：0；padding：0}//重置所有元素的外边距和内边距为0，大网站不用！5)、选择符的嵌套使用----包含选择符前端开发的极限就是代码非常的精简！如果我们针对某个元素的子元素进行控制，可以使用嵌套的方式，不必再为子元素设置ID父元素 子元素{属性：值}6)、选择符分组（集体控制）多个选择符会有一些相同的样式，这个时候我们就可以把这些选择符组成一个组：选择符1，选择符2，选择符3，......例如：h1,h2,h3,strong:{font-weight:nomal;}***以下两种用的较少***7)、标签指定式选择符：如果既想使用id或class，也同时想使用标签选择符例如：p#six{backgroud:grey;}8)、组合选择符：将以上选择符进行组合使用例如：h1 .p1,#content h1{}CSS选择符就是表示你将把你定义的样式用给谁24、CSS盒子模型详解从内到外：content padding border margin1、盒子中的内容content2、盒子的边框border3、盒子的边框与内容的距离，成为填充--padding 内边距，内补丁4、多个盒子存在，盒子与盒子之间的举例，称为边界--margin 外边距，外补丁整个盒子模型在页面中所占的实际宽度=左边界+左边框+左填充+内容+右填充+右边框+右边界24、CSS盒子相关属性（1）内容属性：内容本身的宽/高=width/height（2）内填充属性：内容与边框之间的属性=padding如果是四个参数都有，表示：上右下左（顺时针方向）举例：padding：20px 0 0 20px;****在定义盒子的宽度时，要考虑盒子的内填充，边框，边界的存在。