CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
1 ‘‘‘2 ????????selector {3 ??????????????????property: value;4 ??????????????????property: value;5 ?????????????... ?property: value6 ??????????7 ??????????}8 ??????????9 ‘‘‘例如：
1 h1 {color:red; font-size:14px;}css的四种引入方式
1.行内式
行内式是在标记的style属性中设定CSS样式,不是独立的两部分造成html和css混淆。这种方式没有体现出CSS的优势，不推荐使用。
1 <p style="background-color: rebeccapurple">hello sun</p>
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
1 <head>2 ????<meta charset="UTF-8">3 ????<title>Title</title>4 ????<style>5 ????????p{6 ????????????background-color: #2b99ff;7 ????????}8 ????</style>9 </head>3 链接式
将一个.css文件引入到HTML文件中
1 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.导入式（了解）
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
1 <style type="text/css">2 ??3 ??????????@import"mystyle.css"; 此处要注意.css文件的路径4 ??5 </style>
注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象链接式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
css选择器
基本选择器
组合选择器
1 E,F ??多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 ?????:div,p { color:#f00; }2 ??3 E F ??后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝4 ??5 E > F ??子元素选择器，匹配所有E元素的子元素F ???????????:div > p { color:#f00; }6 ???7 E + F ??毗邻元素选择器，匹配所有紧随E元素之后的同级元素F ?:div + p { color:#f00; }8 ??9 E ~ F ??普通兄弟选择器（以破折号分隔） ????????????????:.div1 ~ p{font-size: 30px; }注意，关于标签嵌套：
一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。
属性选择器
1 E[att] ?????????匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。 2 ????????????????比如“[cheacked]”。以下同。） ??p[title] { color:#f00; } 3 ???4 ???5 E[att=val] ?????匹配所有att属性等于“val”的E元素 ??div[class=”error”] { color:#f00; } 6 ???7 ???8 E[att~=val] ????匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 9 ????????????????td[class~=”name”] { color:#f00; }10 ??11 E[attr^=val] ???匹配属性值以指定值开头的每个元素 ??????????????????12 ????????????????div[class^="test"]{background:#ffff00;}13 ??14 E[attr$=val] ???匹配属性值以指定值结尾的每个元素 ???div[class$="test"]{background:#ffff00;}15 ??16 E[attr*=val] ???匹配属性值中包含指定值的每个元素 ???div[class*="test"]{background:#ffff00;}伪类
anchor伪类：专用于控制链接的显示效果
1 ‘‘‘ 2 ????????a:link（没有接触过的链接）,用于定义了链接的常规状态。 3 ??4 ????????a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 5 ??????????6 ????????a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 7 ??????????8 ????????a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。 9 ?????????10 ????????伪类选择器 : 伪类指的是标签的不同状态:11 ?????????12 ???????????????????a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态13 ?????????14 ????????a:link {color: #FF0000} /* 未访问的链接 */15 ?????????16 ????????a:visited {color: #00FF00} /* 已访问的链接 */17 ?????????18 ????????a:hover {color: #FF00FF} /* 鼠标移动到链接上 */19 ?????????20 ????????a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }21 ?22 ‘‘‘ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ??7 ????<style> 8 ??9 ???????.top{10 ???????????background-color: rebeccapurple;11 ???????????width: 100px;12 ???????????height: 100px;13 ???????}14 ????????.bottom{15 ????????????background-color: green;16 ????????????width: 100px;17 ????????????height: 100px;18 ????????}19 ?20 ????????.outer:hover .bottom{21 ????????????background-color: yellow;22 ????????}23 ?24 ????????注意:一定是outer:hover ?控制outer里某一个标签,否则无效25 ?26 ????????.top:hover .bottom{27 ????????????background-color: yellow;28 ????????}29 ????</style>30 </head>31 <body>32 ?33 <div class="outer">34 ????<div class="top">top</div>35 ????<div class="bottom">bottom</div>36 </div>37 ?38 ?39 </body>40 </html>before after伪类
1 :before ???p:before ??????在每个<p>元素之前插入内容 ???2 ?:after ????p:after ???????在每个<p>元素之后插入内容 ???3 ?4 例：p:before{content:"hello";color:red;display: block;}选择器的优先级
css的继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
body{color:red;} ??????<p>hellosun</p>这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
1 p{color:green}发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
1 div{2 ??border:1px solid #2223 }4 ?5 <div>hello <p>sun</p> </div>css的优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
1 1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。2 ????3 2、有!important声明的规则高于一切。4 ?5 3、如果!important声明冲突，则比较优先权。6 ?7 4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。8 ?9 5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
css属性操作
css text
文本颜色：color
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
RGB颜色查询对照表因为兼容性问题，色阶板功能只能在IE浏览器中运行RGB颜色对照表#FFFFFF ???????#FFFFF0 ???????#FFFFE0 ???????#FFFF00#FFFAFA ???????#FFFAF0 ???????#FFFACD ???????#FFF8DC#FFF68F ???????#FFF5EE ???????#FFF0F5 ???????#FFEFDB#FFEFD5 ???????#FFEC8B ???????#FFEBCD ???????#FFE7BA#FFE4E1 ???????#FFE4C4 ???????#FFE4B5 ???????#FFE1FF#FFDEAD ???????#FFDAB9 ???????#FFD700 ???????#FFD39B#FFC1C1 ???????#FFC125 ???????#FFC0CB ???????#FFBBFF#FFB90F ???????#FFB6C1 ???????#FFB5C5 ???????#FFAEB9#FFA54F ???????#FFA500 ???????#FFA07A ???????#FF8C69#FF8C00 ???????#FF83FA ???????#FF82AB ???????#FF8247#FF7F50 ???????#FF7F24 ???????#FF7F00 ???????#FF7256#FF6EB4 ???????#FF6A6A ???????#FF69B4 ???????#FF6347#FF4500 ???????#FF4040 ???????#FF3E96 ???????#FF34B3#FF3030 ???????#FF1493 ???????#FF00FF ???????#FF0000#FDF5E6 ???????#FCFCFC ???????#FAFAFA ???????#FAFAD2#FAF0E6 ???????#FAEBD7 ???????#FA8072 ???????#F8F8FF#F7F7F7 ???????#F5FFFA ???????#F5F5F5 ???????#F5F5DC#F5DEB3 ???????#F4F4F4 ???????#F4A460 ???????#F2F2F2#F0FFFF ???????#F0FFF0 ???????#F0F8FF ???????#F0F0F0#F0E68C ???????#F08080 ???????#EEEEE0 ???????#EEEED1#EEEE00 ???????#EEE9E9 ???????#EEE9BF ???????#EEE8CD#EEE8AA ???????#EEE685 ???????#EEE5DE ???????#EEE0E5#EEDFCC ???????#EEDC82 ???????#EED8AE ???????#EED5D2#EED5B7 ???????#EED2EE ???????#EECFA1 ???????#EECBAD#EEC900 ???????#EEC591 ???????#EEB4B4 ???????#EEB422#EEAEEE ???????#EEAD0E ???????#EEA9B8 ???????#EEA2AD#EE9A49 ???????#EE9A00 ???????#EE9572 ???????#EE82EE#EE8262 ???????#EE7AE9 ???????#EE799F ???????#EE7942#EE7621 ???????#EE7600 ???????#EE6AA7 ???????#EE6A50#EE6363 ???????#EE5C42 ???????#EE4000 ???????#EE3B3B#EE3A8C ???????#EE30A7 ???????#EE2C2C ???????#EE1289#EE00EE ???????#EE0000 ???????#EDEDED ???????#EBEBEB#EAEAEA ???????#E9967A ???????#E8E8E8 ???????#E6E6FA#E5E5E5 ???????#E3E3E3 ???????#E0FFFF ???????#E0EEEE#E0EEE0 ???????#E0E0E0 ???????#E066FF ???????#DEDEDE#DEB887 ???????#DDA0DD ???????#DCDCDC ???????#DC143C#DBDBDB ???????#DB7093 ???????#DAA520 ???????#DA70D6#D9D9D9 ???????#D8BFD8 ???????#D6D6D6 ???????#D4D4D4#D3D3D3 ???????#D2B48C ???????#D2691E ???????#D1EEEE#D1D1D1 ???????#D15FEE ???????#D02090 ???????#CFCFCF#CDCDC1 ???????#CDCDB4 ???????#CDCD00 ???????#CDC9C9#CDC9A5 ???????#CDC8B1 ???????#CDC673 ???????#CDC5BF#CDC1C5 ???????#CDC0B0 ???????#CDBE70 ???????#CDBA96#CDB7B5 ???????#CDB79E ???????#CDB5CD ???????#CDB38B#CDAF95 ???????#CDAD00 ???????#CDAA7D ???????#CD9B9B#CD9B1D ???????#CD96CD ???????#CD950C ???????#CD919E#CD8C95 ???????#CD853F ???????#CD8500 ???????#CD8162#CD7054 ???????#CD69C9 ???????#CD6889 ???????#CD6839#CD661D ???????#CD6600 ???????#CD6090 ???????#CD5C5C#CD5B45 ???????#CD5555 ???????#CD4F39 ???????#CD3700#CD3333 ???????#CD3278 ???????#CD2990 ???????#CD2626#CD1076 ???????#CD00CD ???????#CD0000 ???????#CCCCCC#CAFF70 ???????#CAE1FF ???????#C9C9C9 ???????#C7C7C7#C71585 ???????#C6E2FF ???????#C67171 ???????#C5C1AA#C4C4C4 ???????#C2C2C2 ???????#C1FFC1 ???????#C1CDCD#C1CDC1 ???????#C1C1C1 ???????#C0FF3E ???????#BFEFFF#BFBFBF ???????#BF3EFF ???????#BEBEBE ???????#BDBDBD#BDB76B ???????#BCEE68 ???????#BCD2EE ???????#BC8F8F#BBFFFF ???????#BABABA ???????#BA55D3 ???????#B9D3EE#B8B8B8 ???????#B8860B ???????#B7B7B7 ???????#B5B5B5#B4EEB4 ???????#B4CDCD ???????#B452CD ???????#B3EE3A#B3B3B3 ???????#B2DFEE ???????#B23AEE ???????#B22222#B0E2FF ???????#B0E0E6 ???????#B0C4DE ???????#B0B0B0#B03060 ???????#AEEEEE ???????#ADFF2F ???????#ADD8E6#ADADAD ???????#ABABAB ???????#AB82FF ???????#AAAAAA#A9A9A9 ???????#A8A8A8 ???????#A6A6A6 ???????#A52A2A#A4D3EE ???????#A3A3A3 ???????#A2CD5A ???????#A2B5CD#A1A1A1 ???????#A0522D ???????#A020F0 ???????#9FB6CD#9F79EE ???????#9E9E9E ???????#9C9C9C ???????#9BCD9B#9B30FF ???????#9AFF9A ???????#9ACD32 ???????#9AC0CD#9A32CD ???????#999999 ???????#9932CC ???????#98FB98#98F5FF ???????#97FFFF ???????#96CDCD ???????#969696#949494 ???????#9400D3 ???????#9370DB ???????#919191#912CEE ???????#90EE90 ???????#8FBC8F ???????#8F8F8F#8EE5EE ???????#8E8E8E ???????#8E8E38 ???????#8E388E#8DEEEE ???????#8DB6CD ???????#8C8C8C ???????#8B8B83#8B8B7A ???????#8B8B00 ???????#8B8989 ???????#8B8970#8B8878 ???????#8B8682 ???????#8B864E ???????#8B8386#8B8378 ???????#8B814C ???????#8B7E66 ???????#8B7D7B#8B7D6B ???????#8B7B8B ???????#8B795E ???????#8B7765#8B7500 ???????#8B7355 ???????#8B6969 ???????#8B6914#8B668B ???????#8B6508 ???????#8B636C ???????#8B5F65#8B5A2B ???????#8B5A00 ???????#8B5742 ???????#8B4C39#8B4789 ???????#8B475D ???????#8B4726 ???????#8B4513#8B4500 ???????#8B3E2F ???????#8B3A62 ???????#8B3A3A#8B3626 ???????#8B2500 ???????#8B2323 ???????#8B2252#8B1C62 ???????#8B1A1A ???????#8B0A50 ???????#8B008B#8B0000 ???????#8A8A8A ???????#8A2BE2 ???????#8968CD#87CEFF ???????#87CEFA ???????#87CEEB ???????#878787#858585 ???????#848484 ???????#8470FF ???????#838B8B#838B83 ???????#836FFF ???????#828282 ???????#7FFFD4#7FFF00 ???????#7F7F7F ???????#7EC0EE ???????#7D9EC0#7D7D7D ???????#7D26CD ???????#7CFC00 ???????#7CCD7C#7B68EE ???????#7AC5CD ???????#7A8B8B ???????#7A7A7A#7A67EE ???????#7A378B ???????#79CDCD ???????#787878#778899 ???????#76EEC6 ???????#76EE00 ???????#757575#737373 ???????#71C671 ???????#7171C6 ???????#708090#707070 ???????#6E8B3D ???????#6E7B8B ???????#6E6E6E#6CA6CD ???????#6C7B8B ???????#6B8E23 ???????#6B6B6B#6A5ACD ???????#698B69 ???????#698B22 ???????#696969#6959CD ???????#68838B ???????#68228B ???????#66CDAA#66CD00 ???????#668B8B ???????#666666 ???????#6495ED#63B8FF ???????#636363 ???????#616161 ???????#607B8B#5F9EA0 ???????#5E5E5E ???????#5D478B ???????#5CACEE#5C5C5C ???????#5B5B5B ???????#595959 ???????#575757#556B2F ???????#555555 ???????#551A8B ???????#54FF9F#548B54 ???????#545454 ???????#53868B ???????#528B8B#525252 ???????#515151 ???????#4F94CD ???????#4F4F4F#4EEE94 ???????#4D4D4D ???????#4B0082 ???????#4A708B#4A4A4A ???????#48D1CC ???????#4876FF ???????#483D8B#474747 ???????#473C8B ???????#4682B4 ???????#458B74#458B00 ???????#454545 ???????#43CD80 ???????#436EEE#424242 ???????#4169E1 ???????#40E0D0 ???????#404040#3D3D3D ???????#3CB371 ???????#3B3B3B ???????#3A5FCD#388E8E ???????#383838 ???????#36648B ???????#363636#333333 ???????#32CD32 ???????#303030 ???????#2F4F4F#2E8B57 ???????#2E2E2E ???????#2B2B2B ???????#292929#282828 ???????#27408B ???????#262626 ???????#242424#228B22 ???????#218868 ???????#212121 ???????#20B2AA#1F1F1F ???????#1E90FF ???????#1E1E1E ???????#1C86EE#1C1C1C ???????#1A1A1A ???????#191970 ???????#1874CD#171717 ???????#141414 ???????#121212 ???????#104E8B#0F0F0F ???????#0D0D0D ???????#0A0A0A ???????#080808#050505 ???????#030303 ???????#00FFFF ???????#00FF7F#00FF00 ???????#00FA9A ???????#00F5FF ???????#00EEEE#00EE76 ???????#00EE00 ???????#00E5EE ???????#00CED1#00CDCD ???????#00CD66 ???????#00CD00 ???????#00C5CD#00BFFF ???????#00B2EE ???????#009ACD ???????#008B8B#008B45 ???????#008B00 ???????#00868B ???????#00688B#006400 ???????#0000FF ???????#0000EE ???????#0000CD#0000AA ???????#00008B ???????#000080 ???????#000000
颜色的名称 - 如: red
1 p { color: rebeccapurple; ?}水平对齐方式
text-align 属性规定元素中的文本的水平对齐方式。
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>css</title> 6 <style> 7 ????????h1 {text-align:center;} 8 ????????p.publish_time {text-align:right;} 9 ????????p.content {text-align:justify;}10 </style>11 </head>12 ?13 <body>14 <h1>CSS text-align 水平居中</h1>15 <p class="publish_time">2017 年 5 月 17 号</p>16 <p class="content">17 ????有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时，18 ????跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。”19 ????几天后，他又垂头丧气回到教堂，同样跪着祈祷：“上帝啊，为何不让我中彩票？我愿意更谦卑地来20 ????服侍你，求您让我中一次彩票吧！阿门。”又过了几天，他再次出现在教堂，同样重复他的祈祷。如此周而21 ????复始，不间断地祈求着。到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！22 ????只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声23 ????音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p>24 <p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>25 </body>26 ?27 </html>文本其它属性
1 /* 2 ??3 ??4 font-size: 10px; 5 ??6 line-height: 200px; ??文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 7 ??8 vertical-align:－4px ?设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 9 ?10 ?11 text-decoration:none ??????text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线12 ?13 font-family: ‘Lucida Bright‘14 ?15 font-weight: lighter/bold/border/16 ?17 font-style: oblique18 ?19 text-indent: 150px; ?????首行缩进150px20 ?21 letter-spacing: 10px; ?字母间距22 ?23 word-spacing: 20px; ?单词间距24 ?25 text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写26 ?27 ?28 */
CSS
原文地址：https://www.cnblogs.com/sun1994/p/8137120.html