CSS
css
css是cascading style sheets的简称，中文称层叠样式表，用来控制网页数据的表现，可以使用网页的表现与数据内容分离。
一、css的四种引入方式
1.行内式
行内式是再标记的style属性中设定css样式。这种方式没有体现出css 的优势。不推荐。
<p style="background-color: red">hello beijing </p>
2.嵌入式是将css样式几种写在网页的<head></head>标签对的<head></head>
标签中，格式如下：
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 p{ 6 background-color:yellow; 7 } 8 </style> 9 10 11 </head>
3.链接式
将一个css文件引入到HTML文件中
1 <link rel="stylesheet" href="mtstyle.css" type="text/css">
4.导入式
将一个独立的css文件引入到HTML文件中，导入式使用css规则引入外部css文件，
<style>标记也式写在<head> 标签中，使用的语法如下：
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 5 <style> 6 p{ 7 @import "sytyle.css";此处要注意.css文件的路径 8 } 9 </style> 10 </head>
注意：导入式会在整个网页中装在完后再装在css文件，因此这就导致了一个问题，如果网页比较大则
会出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
使用链家式时与导入式不同的是它会一网页文件主题装在前装在css文件，因此显示出来的网页从一开始就是带样式的效果的，
它不会像导入式那样先显示样式的网页，然后子啊显示有样式的网页，这是链接式的优点。
二、CSS选择器（Selector）
“选择器”指明了{}中的“样式”的作用对象，也就是”样式“作用于网页中的哪些元素。
1、基础选择器
* ：通用元素选择器，匹配任何元素 *{margin:0: padding:0;}
E : 标签选择器，匹配所有使用E标签的元素 p{ color :green; }
.info 和 E.info: class 选择器，匹配所有class属性中包含info的元素 .info{background:yello}
p.info {background:blue;}
# info和E#info id选择器，匹配所有id属性等于footer的元素 #info {backgroud:#ff0;}
p#info {background:#ff0:}
2、组合选择器
E,F 多元素选择器，同事匹配所有E元素或F元素，E和F之间用逗号分隔
如：div,p{color:#f00;}
E F 后代元素选择器，匹配所有术语E元素后代的F元素，E和F之间用空格分隔
li a {font-weight:bold:}
E>F 子元素选择器，匹配所有E元素的子元素F， div > p {color:#f00:}
注意嵌套规则：
1.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其他内联元素/
2.有几个特殊的块级元素只能包含内联元素，不能包含块级元素，如h1,h2,h3,h4,h5,h6,p,dt
3.li内可以包含div
4.块级元素与块级元素并列、内联元素与内联元素并列。
3、属性选择器
E[att] 匹配所有具有att属性E元素，不考虑他的值，（注意：E在此处可以省略，比如“【cheacked]".
以下同） p[title] {color: red;}
E[att=val] 匹配所有att属性等于”val“的E元素
div[class="error"] {color:red}
E[att~=val] 匹配所有att属性具有多个空格分隔的值，其中一个值等于”val"de
的E元素 td[class~="name"]{color:red;}
E[att~=val] 匹配属性值以指开头的每个元素 div[class^="test"]{background:blue;}
E[attr$=val] 匹配属性值以指结尾的每个元素 div[class$="test"]{background:blue;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:blue;}
4、伪类（pseudo-classes)
CSS伪类是用来给选择器添加一些特殊效果
anchor伪类：专用于控制链接的显示效果
a:link(没有接触过的链接),用于定义了链接的常规状态
a:hover(鼠标放在链接上的状态),用于产生视觉效果。
a:visited(访问过的链接),用于阅读文章，能清楚的判断已经访问过的链接。
a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的状态。
伪类选择器：伪类指的是标签的不同状态。
a ---> 点过状态，没有点过的状态，鼠标悬浮状态，激活状态
a:link {color:red;} 为访问的链接
a:visited{color:red;} 已访问的链接
a:hover{color:red;} 鼠标移动到链接上
a:active{color:red;} 选定的链接，格式：标签：伪类名称{css代码}
<style>
a:link{
color:red;
}
a:visited{
color: chartreuse;
}
a:hover{color: darkorchid;}
a:active{color:yellow;}
</style>
</head>
<body>
<a href="01-hello-world.html">hello world</a>
</body>
5、CSS优先级和继承
CSS优先级和继承所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则 相反权重，它的基本规则是： 1.内联样式表单位权重值最高 style="" ---------1000; 2.统计选择符中的ID属性个数。#id ---------------100； 3.统计选择符中的CLASS属性个数。 .class -----10; 4.统计选择符中的HTML标签名个数。 p ------------1;
按这些规则将数字符串逐位相加，就得到最终的权重，然后再比较取舍时按照从左到右的顺序逐位比较。
CSS的继承性：
继承时CSS的一个主要特征，他是依赖于祖先-后代的关系的。继承是一种机制，
它允许样式不仅可以应用某个特定的元素，还可以应用于它的后代，例如一个body定义了
的颜色值也会应用到段落的文本中。
body{color:red;} <p>hello beijing</p>
这段文字都继承了有body{color：red;} 样式定义的颜色。然而CSS继承性的权重时
非常低的，是比普通元素的权重还要低。
p{color>green}
返现只需要给加个颜色值盖掉它继承的样式颜色，由此可见：任何显示申明的规则都可以覆盖其继承样式。
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为社么能够这样，但CSS继承也是有限制的。
有一些属性不能被继承，如：before，margin，padding，background等。
符加说明：
1、文内的样式优先级为1，0，0，0，所以始终高于外部定义。这里文内样式指形如
<div style="color:red">blah</div>的样式，而尾部定义指经由<link>或<style>卷标定义的规则。</style>
2、有！important 声明的规则高于一切。
3、如果！important声明冲突，则比较优先权。
4、如果优先权一样，则按照再源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其他规则（比如全局选择符*定义规则。
三、CSS的常用属性
1、颜色属性
1 <div style="color:blueviolet">pppp</div>
2 <div style="color: darkgreen">jppppp</div>
3 <div style="color: #ffee33">ppppa</div>
4 <div style="color: rgb(255,0,0)"></div>
5 <div style="color: rgba(255,0,0,0.5)">aaa</div>
2、字体属性
1 font-size:20px/50%/larger
2 font-family:'lucida Bright'
3 font-weight: lighter/bold/border/
4 <h1 style="font-style: oblique">北京</h1>
3、背景属性
background-color:cornflowerblue
background-image:url('1.jpg');
background-repeat:no-repeat;(repeat:平铺满)
background-postion:right top(20px 20px):(横向:left center right) (纵向Ltop center bottom)
简写：<body style="bockground:20px 20px no-repeat #ff4 url('1.jpg')"></body>
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat:#ff4 url('1.jpg')"></div>
注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，
这是因为body为空，无法称其背景图片；另外，如果此时要设置一个width=100px,
你也看不出效果，除非你设置出html.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 span{
9 display:inline-block;
10 width:18px;
11 height: 20px;
12 background-image: url("11.jpg");
13 background-position: 0 -100px;
14 }
15 a:link{
16
17 </style>
18 </head>
19 <body>
20 <span></span>
4、文本属性
font-size:10px;
test-align:center;横向排列
line-height:200px; 文本行高 通俗的讲 文字高度加上文字上下的空白区域的高度5
50%:基于字体大小的百分比
vertical-align:-4px 设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效
text-indent:150px; 首行缩进
lentter-spacing:10px;
word-spacing:20px;
text-transform:capitalize;
5、边框属性
1 border-style:solid;
2 border-color:chartreuse;
3 border-width:20px;
4 简写：border:30px rebeccapurple solid;
6、列表属性
1 ul,ol{
2 list-stylej:decimal-leading-zero;
3 list-style:none;<br> list-style:circle;
4 list-style:upper-alpha;
5 list-style:disc;}
7、display属性
1 none
2 block
3 inline
4 display:inline-block 可做列表布局，其中的类似于图片间的间隙小bug可以通过如下蛇者解决：
5 #outer{
6 border:3px dashed;
7 word-spacing:-5px;
8 .....
9 }
浙公网安备 33010602011771号