CSS

/*这是注释*/

Hello world.

p {color: "red";}

#test {background-color: red;}

.center {text-align:center;}

p.center {text-align:center;}

* {
  color: white;
}

#d1 p {
    color: pink;
}

我是嵌套在div中的P标签
我是嵌套在div中的span标签
我是嵌套在div中的div中的P标签
我是嵌套在div中的div中的span标签

#d1>p {
    color: green;
}

我是嵌套在div中的P标签
我是嵌套在div中的span标签
我是嵌套在div中的div中的P标签
我是嵌套在div中的div中的span标签

/*选择所有紧挨着
元素之后的
元素*/
div+p {
    color: red;
}


 


0000
1111
2222

HTML例子

 
结果：

0000
1111
2222

④弟弟选择器

/*div后面所有的兄弟p标签*/
#div~p {
  color: red;
}


 HTM例子


div
p1
p2

HTM例子

 


div
p1
p2

组合选择器总结：
　　1. 后代选择器(空格)
　　2. 儿子选择器(>)
　　3. 毗邻选择器(+)
　　4. 弟弟选择器(~)
3.属性选择器


/*用于选取带有指定属性的元素*/
p[class] {
    color: red
}

/*用于选取带有指定属性和值的元素*/
p[class="c1"] {
    color: green
}





带有class属性值为1的p标签
带有class属性值为2的p标签

 HTML例子

 

结果1：

带有class属性值为1的p标签
带有class属性值为2的p标签

结果2：

带有class属性值为1的p标签
带有class属性值为2的p标签

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

div, p {
  color: red;
}

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

div,
p {
  color: red;
}

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

.c1 p {
  color: red;
}

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

body {
  color: red;
}

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

p {
  color: green;
}

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

除此之外还可以通过添加 !important 方式来强制让样式生效，但并不推荐使用。因为如果过多的使用 !important 会使样式文件混乱不易维护。
 万不得已可以使用 !important 

p {
    color: green!important;
}

样式文件优先级：
　　内联样式(直接在标签里面写style)优先级最高
　　选择器都一样的情况下，谁靠近标签谁就生效
　　选择器不同时，计算权重来判断
6.伪类选择器
CSS伪类是用来给选择器添加一些特殊效果；专用于控制链接的显示效果。
a:link（没有接触过的链接），用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态），用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态），用于表现鼠标按下时的链接状态。


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

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

/* 鼠标移动到链接上（用的最多） */
a:hover {
  color: #FF00FF
} 

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

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


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

/*p标签里的首字母设置为48像素且字体为红色*/
p:first-letter {
  font-size: 48px;
  color: red;
}

before

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

after

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

 before和after多用于清除浮动。
CSS属性相关
1.宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
2.字体属性
指定字体系列
font-family属性可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

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

字体大小：如果设置成 inherit 表示继承父元素的字体大小值。

p {
  font-size: 14px;
}

字重（粗细）ʍ