内联式适用情况:局部特殊化——一部分
<span style="color:red; font-size:18px;">text</span>嵌入式适用情况:统一标签样式格式——一个网页
<style type="text/css"> span{color:bule; font-size:19px;} </style>外联式适用情况:方便代码重用和管理——多个网页
<link herf="kkk.css" rel="stylesheet" type="text/css">REL属性用于定义链接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用
样式的继承 样式的层叠
继承是指标签的样式可以由子代继承，但有些标签是不能继承的，eg：border。
特殊性指用用权重来确定最后起作用的样式，id=100，class=10，标签=1，继承=0.1；
层叠指当权重相同时，后面的样式覆盖前面的样式。 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
后面的样式会覆盖前面的样式，这是程序的运行顺序。这里程序先运行红色，显示红色；然后再运行绿色，显示绿色，显然绿色把红色覆盖掉了，后面粉色又把绿色覆盖掉了，等到运行到要装饰的标签时，显示的是粉色。 谁离待装饰的标签越近，就用谁的样式 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）在代码中的位置就相当于粉色>绿色>红色。 内联样式表（在标签内部，离待装饰标签最近）> 嵌入样式表（在当前文件中，在二者之间）> 外部样式表（在外部文件中，离待装饰标签最远）
让文字环绕着图片： img { float:right; }
清除浮动 clear:both
类型选择器
群组选择器
通用选择器
类选择器
ID选择器
属性选择器
li[data-album] { border: 1px solid #ccc; margin-left: 1px; margin-bottom: 1px; } li[data-album~="single"] img {} li[data-album="multiple"] img {} li[data-album] img {} li[data-album^="single"] img {} li [data-album$="single"] img {} li [data-album*="single"] img {} img[alt*="Viva"] { border-radius: 50% } img[src$="imges/"] { border-radius: 50% } img[src^=".jpg"] { border-radius: 50% }伪类选择器
a:link { color: #000; } a:visited { color: #fff; } li:hover { background-color: #eee; } li:active { background-color: #000; } li:active a { color: #fff; } li:target { background: #eee; } #search:focus { outline: none; border: 2px solid #129fea; } #search:disabled { background: #f5f5f5; } /*伪类：nth-child :nth-child(1) 父元素的第一个子元素 :nth-child(odd)奇数子元素 :nth-child(even)偶数子元素 :nth-child(an+b)a,b为整数，2n+1，从1开始隔2个 */ /* li:nth-child(odd) img{ border-radius: 50%; } */ /* 伪类： 倒过来选择nth-last-child() */ /* li:nth-last-child(odd) img{ border-radius: 50%; } */ /* :nth-child(1) li:first-child img{ border-radius: 50%; } li:last-child img{ border-radius: 50%; } */ /* :first-of-type :nth-of-type(1) :last-of-type :nth-last-of-type(1) */ /* p:first-of-type{ background-color: #fcebbd; color: #af9540; padding: 20px; } */ /* li:nth-of-type(1){ background-color: #fcebbd; color: #af9540; padding: 20px; } */ /* :only-child :first-child:last-child :nth-child(1):nth-last-child(1) :only-of-type :first-of-type:last-of-type :nth-of-ytpe(1):nth-last-of-type(1) */ /*:empty*/ /* div:empty{ width: 170px; height: 170px; background-color: #eee; } */ /*:not()*/ /*选择不是第一个*/ /* li:not(:first-child) img{ border-radius: 50%; } */ /* 第一行 ::first-line ::first-letter */ /* p::first-line { font-weight: bold; } */ p::first-letter { color: #0e90d2; font-size: 30px; float: left; letter-spacing: 5px; } /* ::before ::after */ /* h1::before{ content: 'before'; font-size: 15px; color: #666; } h1::after{ content: 'sunny'; color: pink; } */ /*后裔*/ /* div.container img{ border-radius: 50%; } div.container *img{ border-radius: 50%; } */ /*儿子*/ /* div.container >img{ border-radius: 50%; } */ /*兄弟*/ h1+h2 {} h2~h3 {}“`
