可以将css样式编写到style属性中，这种称为内联样式，它只对当前元素的内容器起作用，不方便复用，结构和表现耦合，不方便后期维护
<p style="color:red;font-size:40px;">也可以将css样式编写到head标签的style标签里面，通过指定 元素，然后为所有选中的元素设置严实，进一步复用，结构和表现相对解耦
<style type="text/css"> p{ color:red; font-size:40px; } </style>将样式表写到外部的css文件中，然后通过link标签来引入外部的css文件，这样使得结构和标签完全分离，这样可以利用浏览器的缓存,加快用户访问速度。提高用户体验
<link rel="stylesheet" type="text/css" href="style.css" />
块元素：独占一行 div、p、h标签
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它其中的元素设置任何的样式， div元素主要是对页面进行布局的
span是一个内联元素（行内元素），只占自身的大小的元素，不会独占一行 a、img、iframe、span， span没有任何的语义，span标签专门用来选中元素，然后设置元素
块元素主要用来做页面中的布局，内联元素主要用来选中文本，设置文本样式，一般情况，使用块级元素去包含内两元素，而不会使用内联元素包含一个块级元素
注意：a标签可以用来包含任何元素，除了它自己本身
p元素不可以包含其他任何的块级元素
/* * 元素选择器 * 作用：通过元素选择器可以选则页面中的所有指定元素 * 语法：标签名 {} */ p{ color: red; } h1{ color: red; } /* * id选择器 * - 通过元素的id属性值选中唯一的一个元素 * - 语法： * #id属性值 {} */ #p1{ font-size: 20px; } /* * 类选择器 * - 通过元素的class属性值选中一组元素 * - 语法： * .class属性值{} */ .p2{ color: red; } .hello{ font-size: 50px; } /* * 选择器分组(并集选择器) * - 通过选择器分组可以同时选中多个选择器对应的元素 * - 语法：选择器1,选择器2,选择器N{} */ #p1 , .p2 , h1{ background-color: yellow; } /* * 通配选择器 * - 他可以用来选中页面中的所有的元素 * 语法：*{} */ *{ color: red; } /* * 为拥有class p3 span元素设置一个背景颜色为黄色 * * 复合选择器（交集选择器） * - 作用： * - 可以选中同时满足多个选择器的元素 * - 语法： * - 选择器1选择器2选择器N{} */ span.p3{ background-color: yellow; } /* * 为div中的span设置一个颜色为绿色 * 后代元素选择器 * - 作用： * - 选中指定元素的指定后代元素 * - 语法： * 祖先元素 后代元素{} */ #d1 span{ color: greenyellow; } /* * 选中id为d1的div中的p元素中的span元素 */ #d1 p span{ font-size: 50px; } /* * 为div的子元素span设置一个背景颜色为黄色 * 子元素选择器 * - 作用： * - 选中指定父元素的指定子元素 * - 语法： * 父元素 > 子元素 * * IE6及以下的浏览器不支持子元素选择器 */ div > span{ background-color: yellow; }
转载于:https://www.cnblogs.com/lzb0803/p/9010655.html
