div{font-size:12px;红色;}Documentflow文档流，即HTML元素会按照它们在标记中出现的顺序从页面顶部“流动”到底部。元素显示元素块级元素相互堆叠并沿着页面向下运行，每个元素都在其自己的行上。块级元素框将扩展到与父元素相同的宽度。所有块级元素的父元素都是body，它的宽度默认和浏览器窗口一样宽（当然有小的margin）。行中的元素相互并列，只有在没有足够的空间让它们并列时才会折叠到下一行。内联元素框“收缩包装”其内容，并尽可能紧密。可替换元素和不可替换元素可替换元素可替换元素是指浏览器根据元素的标签和属性来决定元素的具体显示内容。替换元素通常具有固有尺寸，因此它们具有可以设置的宽度和高度。例如：，如果不指定img的宽高，则按照内部尺寸显示，也可以通过设置宽高来显示图片。不可替换元素大多数元素是不可替换元素，即它们的内容直接呈现给浏览器。给文档添加样式的三种方式内联样式内联样式是写在HTML标签上的样式，例如：在html文档的head元素中，例如：div{font-size:12px;红色;}linkstyle将样式表文件引入当前文档，例如：link其他样式样式表@importurl(css/style2.css)@import指令必须出现在样式表中其他样式之前，否则不会加载@import引用的样式表。CSS命名约定CSS规则由选择器和声明组成。选择器用于指示要被规则选择的元素，声明由两部分组成：属性和值。该属性指示元素样式的哪个方面受到影响，值是该属性的新状态。p{color:red;}p:selector{color:red;}:declarationcolor:attributered:valuepair这个基本结构，有3种扩展方式：一条规则中包含多个声明p{color:red;字体大小：12px；font-weight:bold;}多个选择器组合h1,h2,h3{color:red;font-weight:bold;}多个规则应用于一个选择器h1,h2,h3{color:red;font-weight:bold;}h3{font-style:italic;}特定元素选择器上下文选择器：一组以空格分隔的标签名称，用于选择指定祖先元素的后代标签。articlep{font-size:14px;}只有作为article后代的p元素才会应用以下样式。**特殊上下文选择器**子选择器>标签1>标签2，标签2必须是标签1的子元素。section>h2{font-weight:bold;}*紧挨着兄弟选择器+标签1+标签2,label2必须紧跟其兄弟标签1.h2+p{font-size:14px;}*一般兄弟选择器~label1~label2,label2必须跟随（不一定跟随）其兄弟标签1.h2~a{color:red;}*通用选择器\*匹配任何元素。*{保证金：0;padding:0;}ID和类选择器同一页面中的每个id属性只能使用一次。同一个页面可以有多个相同的类，一个类的作用是标识一组具有相同特征的元素。
#nav{width:100%;}.logo{width:80px;height:80px;}属性选择器属性名选择器标签名[属性名]选择任何带有属性名的标签名。img[title]{border:1pxsolidgreen;}属性值选择器标签名[attributename="attributevalue"]选择任何标签名的属性名其值为属性值。img[title="flower"]{border:1pxsolidred;}html5中属性值的引号可以加也可以不加将贴在标签上的标记。伪类有两种类型：UI伪类和结构伪类。UI伪类UI（UserInterface，用户界面）伪类会在HTML元素处于某种状态时应用CSS样式。Link伪类LinknotyetclickedvisitedLinkhasbeenclickedhover鼠标悬停在链接上active链接被点击a:link{color:red;}a:visited{color:blue;}a:hover{color:green;}a:active{color:yellow;}:focus伪类当表单中的文本字段获得焦点时input:focus{border:1pxsolidred;}:target伪类如果用户点击指向另一个元素的链接在页面上，然后该元素是目标，可以使用:target伪类来选择。例如：当用户点击链接重定向到一个ID为more的元素时，为该元素添加红色背景。
