学习内容：
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选择器>元素选择器
内联引用>内部引用>外部引用
推荐使用外部引用样式表，可以使代码更简洁
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>20 <p title="hello">hello</p>21 <p href="#">link</p>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>3.常用属性值
font-family: 规定字体样式
font-weight: 规定字体粗细
font-size：规定字体大小
font-style: 规定字体是否倾斜
text-decoration: 字体装饰，如下划线等
text-align: 字体对齐
text-transform: 字体大小写
2018年2月3号
CSS第一课
原文地址：https://www.cnblogs.com/whwjava/p/8410609.html