CSS+DIV学习笔记(史上最实用的CSS笔记)
DIV归纳
DIV归纳1.文件中只调用过一次的用id（占位的可以用class）2.反复用的用class3.尽量使用继承父级属性4.文字部分两端用<p></p>5.标题用<h></h>6.使用<dl><dt><dd></dd></dt></dl>设置属性7.空连接不要连接#8.尽量减少多余代码9.尽量减少css中新建样式10.文档中不要出现border(边)11.图片标签alt="xx"（无意义的图片标签使用alt=""）12.换行用<br></br>13.翻转的图片name要用有意义的名称14.所有id名要有意义15.“<”要用“&glt”代替16.空格用“ ”代替17.div要有结尾，例如<div id="index"> <!-- /index --></div>18.在文件里不能出现物理属性值19.图片必须有长和宽。
例如：<img src="images/localnavi_07.gif" width="3" height="10" alt="" />20.如果需要居中显示，要在外面设一个居中的，里面的要设置居左或居右，否则在火狐浏览器中无法正常显示21.javascript要在外部调用22.<body>中不要出现其他属性，如需要则在外部调用。
第6章Div标签与CSS样式表(4)-CSS语法
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
CSS超全笔记（适合新手入门）
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
DIV+CSS布局使用的个人心得
DIV+CSS布局使⽤的个⼈⼼得⽹站制作离不开⽹页布局就是说DIV+CSS都会涉及到的，以下是⼯作中总结的⼀些技巧，留下备⽤，也可以学习。
1、ul：默认的ul的margin和padding不是0，如果在导航中⽤到了左浮动的li，往往会把外部的div撑⼤，导致页⾯变形，改成：ul{margin:0px; padding:0px;}2、img：（1）这⾥牵涉的不同浏览器的问题，ie6⾥显⽰的图⽚height总是要⼤于准确值，这⾥就需要我们记住下⾯这⼀点 img{ display：block}；（2）页⾯中最好不要⽤⼤块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些⼤的⽹站，现在都尽量把背景统⼀放到⼀张图⽚上，⽤background-postion来取得背景。
（3）最好的格式就是gif格式，即确保了背景透明，在ie6中⼜不会有阴影，有时gif图⽚会有锯齿，这就需要我们保存成web格式，设置⼀下matter，matter的值⽤背景颜⾊的值越相近越好。
3、overflow：有时⼀些公司的注册协议都是很长，这就⽤到了overflow，可以把div的style⾥加上这个：overflow：auto4、float：有时候⼀些div会挤到页⾯的上⽅，这⾥可能就是浮动引起的，可以加上clear：both。
5、div：height等于1px的div，在ie6中可能并不是1px，在这个div的style⾥加上font-size：1px;这样就ok了。
6、id和class：当⼀个样式在页⾯中多次使⽤时，不要⽤id，要⽤class，要使⽤js的时候，样式最好不要⽤id，因为id要留给js使⽤。
7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。
有⼀点，visited与hover的顺序⼀定不能倒换，否则ie6中会⼤⼤的问题。
十天学会DIV+CSS-7
标准之路首页CSS 版式布局DIV+CSS 教程DIV+CSS 实例常用代码站长杂谈技术文档资源下载图片素材今天我们开始学习《十天学会web 标准(div+css)》的html 列表，包含以下内容和知识点：⏹横向列表菜单 ⏹用图片美化的横向导航 ⏹css Sprites一、横向列表菜单前边学习过纵向导航菜单，又学习了float 属性，那么要实现横向导航菜单是不是很简单了，只需要列就可实现了。
把第四节的代码拿过来直接用，修改后的代码如下：提示：可以先修改部分代码后再运行 第七天 横向导航菜单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/x html1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { border: 1px solid #CCC; height:26px; background: #eee;}#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; }</style></head><body>运行代码复制代码最主要就是用float让li向右浮动后，实现横向排列，具体步骤不再赘述。
CSS知识点总结
CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。
css总结笔记
css总结笔记
CSS 是层叠样式表的缩写，是一种用于设计和布局网页的编程语言。
以下是CSS 总结笔记的全文:
一、CSS 的概述
CSS 用于设计和布局网页，可以让网页变得更加生动、美观和易读。
CSS 可以用于网页的头部、主体和底部，以及用于网页的各个部分。
二、CSS 的语法
CSS 的语法包括选择器、属性和值等。
选择器用于选择网页中的元素，属性和值用于设置元素的样式。
三、CSS 的样式
CSS 的样式包括颜色、字体、大小、边框、背景等。
通过设置这些样式，可以让网页变得更加美观。
四、CSS 的应用场景
CSS 的应用场景包括网页的布局、元素的样式设置和网页的颜色搭配等。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
五、CSS 的兼容性
CSS 在不同的浏览器中有不同的兼容性问题。
为了解决这个问题，可以使用CSS 的媒体查询和伪元素等方法。
六、CSS 的优化
CSS 的优化可以提高网页的加载速度和用户体验。
可以通过减少重排、减少重写和压缩 CSS 等方式进行优化。
七、CSS 的拓展
CSS 还有很多拓展功能，如响应式设计、动画效果、Web 组件等。
通过使用CSS，可以让网页变得更加生动、美观和易读。
八、CSS 的总结
CSS 是网页设计中不可或缺的一部分。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
在学习 CSS 时，需要熟练掌握语法、样式和应用场景，并了解 CSS 的兼容性和拓展功能。
div+css笔记
DIV+CSS学习笔记Div是用于存放内容（文字，图片，元素）的容器Css是用于指定在div中的内容如何显示，包括这些内容的位置和外观快速入门案例（体验案例）：Css.html:<!--引入我的css--><link rel="stylesheet" type="text/css" href="my.css"></head><body><div class="style1"><img src="F:\photo\QzonePic\0.jpg" width="200"></div></body>My.css:.style1{/*宽度*/width:400px;height:300px;background-color:silver;border:1px solid red;margin-left:400px;margin-top:250px;padding-top:50px;padding-left:50px;}Css中常用的四种选择器1、类选择器（class选择器）基本使用.类选择器{属性名:属性值;…}2、.id选择器基本使用：#id选择器{属性名:属性值;…}案例：/*id选择器的使用*/#id1{background-color:silver;font-size:"40px";}3、Html元素选择器基本使用某个html元素{属性名:属性值;…}4、通配符选择器该选择器可以用到所有的html元素，但是其优先权最低基本使用*{属性名:属性值;…}☞css文件可以使用在各种文件（php、html、jsp、asp...）四个选择器优先级如下：id选择器 > class选择器 > html选择器 > 通配符选择器案例：我们希望所有的超链接（1）默认样式是黑色，24px。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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;****在定义盒子的宽度时，要考虑盒子的内填充，边框，边界的存在。