CSS Class 1
学习内容：
1.CSS的引入方式：
（1）内联样式表
直接在标签内引用，引入方式 <标签名 style="样式1:值;样式2:值">，样式之间用分号分隔
1 <p style="color: red; font-szie: 12px;">这是红色，12px大小的字</p>
（2）内部样式表
在head标签之间添加，引入方式如下：
1 <html> 2 <head> 3 <style> 4 h1 { 5 color: red; 6 } 7 </style> 8 </head>
<body>
<h1>这是红色字体</h1>
</body>
9 </html>
内部样式表是通过选择器来定义样式，常用的选择器种类有id选择器、class选择器、元素选择器
（a）id选择器：#id名称，名称可自定义，且同一名称的id选择器在单个html页面中只能使用一次
1 <html> 2 <head> 3 <style> 4 #red { 5 color: red; 6 } 7 </style> 8 </head> 9 <body> 10 <h1 id="red">这是红色字体</h1> 11 </body> 12 13 </html>
（b）class选择器：.class名称，名称可自定义，同一名称class选择器在单个html页面中可使用多次
1 <html> 2 <head> 3 <style> 4 .red { 5 color: red; 6 } 7 </style> 8 </head> 9 <body> 10 <h1 class="red">这是红色字体</h1> 11 </body> 12 </html>
（c）元素选择器：选择器名为标签名称，设置后，html当中的所有该标签都会自动应用定义的样式
1 <html> 2 <head> 3 <style> 4 p { 5 color: blue; 6 } 7 </style> 8 </head> 9 <body> 10 <p>这是蓝色字体</p> 11 </body> 12 13 </html>
（3）.外部引用样式表
1 <head> 2 <link rel="stylesheet" type= "text/css" href="123.css"> 3 </head>
PS：属性之间一定要用分号分隔，否则会导致下一个相邻的属性不起作用，同一属性的多个属性值用空格分隔
样式表生效的优先级：
id选择器>class选择器>元素选择器
内联引用>内部引用>外部引用
css注释方式为/**/
推荐使用外部引用样式表，可以使代码更简洁
2.选择器常用的使用方式
（1）后代选择器
1 <html> 2 <head> 3 <style> 4 strong {
color: red; 5 } 6 </style> 7 </head> 8 9 <body> 10 <p>this is
<strong>my</strong> world!
</p> 11 </body> 12 </html>
strong标签之间的字变为红色，取代其原有的加粗效果
（2）多类选择器
1 <html> 2 <head> 3 <style> 4 .p1 { 5 color: blue; 6 } 7 .p2 { 8 font-size: 30px; 9 } 10 .p1.p2 { 11 font-style: italic; 12 } 13 </style> 14 </head> 15 16 <body> 17 <p class="p1">abc</p> 18 <p class="p2">def</p> 19 <p class="p1 p2">jhi</p> 20 </body> 21 </html>
使用class="p1 p2"的p标签同时拥有选择器p1 p2的特性，以及选择器.p1.p2独有特性
（3）子元素选择器
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>无标题文档</title> 5 <style> 6 p i {color: blue;} 7 </style> 8 </head> 9 10 <body> 11 <p>this is<i>my</i>world!</p> 12 </body> 13 </html>
该选择器只有p标签下的i标签才会生效
（4）子选择器
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> p.i {color: blue;} .i p {color: red;} </style> </head> <body> <div class="i"> <p>this is my world!</p> <!--这是红色字体--> </div> <p class="i">class后面跟标签名，则效果只对引用了该class标签中的元素生效，如果是标签.class,则只对该标签生效，其他标签引用不起作用。</p> <div class="i">生效了吗？ class没生效</div> </body> </html>
（5）属性选择器
1 <html> 2 <head> 3 <style> 4 [title="hello"] { 5 color: red; 6 } 7 [href] { 8 font-size: 70px; 9 } 10 [title~="hello"] { 11 font-size: 40px; 12 } 13 </style> 14 </head> 15 16 <body> 17 <p title="hell">hello</p> 18 <p title="hllo">hello</p> 19 <p title="hello world">hello</p> <!--这是40px字体--> 20 <p title="hello">hello</p> <!--这是红色 40px字体--> 21 <p href="#">link</p> <!--这是70px字体--> 22 <p>属性值必须完全匹配，如果p中的href后面有链接，而CSS中的href没有，那么不会生效</p> 23 <p>部分属性选择器[属性名~="匹配值"]，只要属性中含有匹配值即可生效，不许完全匹配。</p> 24 </body> 25 </html>
（6）相邻兄弟选择器
1 <html> 2 <head> 3 <style> 4 li+li {color: red;} 5 </style> 6 </head> 7 8 <body> 9 <div> 10 <ul> 11 <li>a</li> 12 <li>b</li> <!--生效--> 13 <li>c</li> <!--生效--> 14 </ul> 15 <ol> 16 <li>d</li> <!--不生效--> 17 <li>e</li> 18 <li>f</li> 19 </ol> 20 </div> 21 <p>只有拥有相同父类，相邻的元素会生效</p> 22 </body> 23 </html>
7.选择器分组，可以给一组选择器指定相同的样式
1 <hrml> 2 <head> 3 <style> 4 h2, h3, h4 { 5 color: red; 6 } 7 </style> 8 </head> 9 <body> 10 <h2>这是红色</h2> 11 <h3>这是红色</h3> 12 <h4>这是红色</h4> 13 </body> 14 </html>
3.常用属性值
font-family: 规定字体样式
font-weight: 规定字体粗细
font-size：规定字体大小
font-style: 规定字体是否倾斜
color:字体颜色
text-decoration: 字体装饰，如下划线等
text-align: 字体对齐
text-transform: 字体大小写
text-indent:首行缩进
line-height:行高
8. * 星号 通配符，可以为所有页面所有标签设置属性，一般用在样式表开头来添加全页面默认属性
1 <style> 2 * { 3 margin: 0px; 4 padding: 0px; 5 } 6 </style>
PS：在class选择器里使用height 和 width属性时，尽量使用百分比来设置，可以增强通用性，比如要设置如下的部分
这三个标题的宽高，宽度不同，但高度相同，在使用div进行布局时，完全可以采用设置一个固定的高度，然后宽度采用百分比，比如98%，那么即使各个标题间宽度不同，其宽度也会根据其父级div的宽度来确定自己的宽度，可用同一个class来进行设置
2018年2月3号
