/*这是注释*/

Hello world.

p {color: "red";}

#i1 {
  background-color: red;
}

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

* {
  color: white;
}

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

/*选择所有父级是 
 元素的 
 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}


毗邻选择器

/*选择所有紧接着
元素之后的
元素*/
div+p {
  margin: 5px;
}


弟弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

属性选择器


/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}



/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}
不怎么常用的属性选择器

分组和嵌套
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 
例如：


div, p {
  color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。
通常，我们会分两行来写，更清晰:


div,
p {
  color: red;
}

嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
  color: red;
}



伪类选择器


/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}


伪元素选择器
first-letter
常用的给首字母设置特殊样式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每个
元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每个
元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

before和after多用于清除浮动。
选择器的优先级
CSS继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
  color: red;
}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
  color: green;
}

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
选择器的优先级
我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？
其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
万不得已可以使用!important
CSS属性相关
宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
字体属性
文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
 
简单实例：


body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体大小

p {
  font-size: 14px;
}

如果设置成inherit表示继承父元素的字体大小值。
字重（粗细） 
font-weight用来设置字体的字重（粗细）。


值
描述



normal
默认值，标准粗细


bold
粗体


bolder
更粗


lighter
更细


100~900
设置具体粗细，400等同于normal，而700等同于bold


inherit
继承父元素字体的粗细值




文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：


十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如:  red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
文字属性
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。


值
描述



left
左边对齐 默认值


right
右对齐


center
居中对齐


justify
两端对齐



文字装饰
text-decoration 属性用来给文字添加特殊效果。


值
描述



none
默认。定义标准的文本。


underline
定义文本下的一条线。


overline
定义文本上的一条线。


line-through
定义穿过文本下的一条线。


inherit
继承父元素的text-decoration属性的值。



常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

首行缩进
将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

背景属性


/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(‘1.jpg‘);
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/


支持简写：

background:#ffffff url(‘1.png‘) no-repeat right top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
 参考链接点我
一个有趣的例子：



    

    

    




鼠标滚动背景不动


　　
边框
边框属性 

border-width
border-style
border-color


#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

通常使用简写方式：

#i1 {
  border: 2px solid red;
}

边框样式


值
描述



none
无边框。


dotted
点状虚线边框。


dashed
矩形虚线边框。


solid
实线边框。



 
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：


#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}


border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
display属性
用于控制HTML元素的显示效果。


值
意义


display:"none"
HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。


display:"block"
默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。


display:"inline"
按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。


display:"inline-block"
使元素同时具有行内元素和块级元素的特点。


 
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
 CSS盒子模型


margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

padding:           用于控制内容与边框之间的距离；   

Border(边框):     围绕在内边距和内容外的边框。

Content(内容):   盒子的内容，显示文本和图像。

看图吧：

margin外边距


.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}


推荐使用简写：

.margin-test {
  margin: 5px 10px 15px 20px;
}

顺序：上右下左
常见居中：

.mycenter {
  margin: 0 auto;
}

padding内填充


.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}


推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左
补充padding的常用简写方式：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

float
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动&