前端之CSS
1. css介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
2.css语法
2.1 css实例
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
2.2 css注释
/*注释内容*/
2.3 css的几种引入方式
2.3.1 行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
2.3.2 内部样式
嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
2.3.3 外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
2.4 css选择器
2.4.1 基本选择器
元素选择器
p {color:"red";}
ID选择器
#il {background-cplpr:red;}
类选择器
.c1 {font-size:14px;}
p .c1{color:red;}
注意:
样式类名不要用数字开头（因为有的浏览器可能不认）
标签中的class属性如果有多个，要用空格分隔。
通用选择器
* {color:white;}
2.4.2 组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/
li a {color:green;}
儿子选择器
/* 选择所有父级是<div>元素的<p>元素 */
div>p {font-family:"Arial Black",arial-black,cursive;}
毗邻选择器
/* 选择所有紧接着<div>元素之后的<p>元素 */
div+p {margin:5px;}
弟弟选择器
/* li后面所有的兄弟p标签 */
#li~p {border:2px solid royalblue;}
2.4.3 属性选择器
/* 用于选取带有指定属性的元素 */
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;
}
2.4.4 分组和嵌套
-
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div,p {color:red;}/*为div标签和p标签统一设置字体为红色。*/ -
嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有P标签设置字体颜色为红色。
.c1 p {color:red;}
2.4.5 伪类选择器
/*未访问的链接*/
a:link {color:red;}
/*鼠标移动到链接上*/
a:hover {color:blue}
/*选定的链接*/
a:active {color:red}
/*已访问的链接*/
a:visited {color:red}
/*input 输入框获取焦点的样式*/
input:focus {outline:none;background-color:#eee;}
2.4.6 伪元素选择器
first-letter
常用的给首字母设置特殊样式：
p:first-letter{font-size:48px;color:red;}
before
/*在每个<p>元素之前插入内容*/
p:before{cotent:"*",color:red;}
after
/*在每个<p>元素之后插入内容*/
p:after{content:"[?]";color:blue;}
before和after多用清楚浮动
2.4.7 选择器的优先级
css继承
继承是css的一个主要特征，它是依赖于祖先-后代的关系。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
body{color:red;}
此时页面上所用标签都会继承body的字体颜色。然而css继承性的权重是非常低的，是比普通元素的权重还是低的0.
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p {color:green;}
此外，继承是css重要的一部分，我们甚至不用去考虑它为什么能够这样，但css继承也是有限制的。有一些属性不能被继承，如：border，margin，padding，background等。
选择器的优先级
我们上面学了很多的选择器，也就是说在一个html页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？
其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
除此之外还可以通过添加!important方式来强制让样式生效，但不推荐 使用。因为如果过多的使用!important会使样式文件混乱不易维护。
万不得已可以使用！important
2.5 css属性相关
2.5.1 宽和高
width 属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
2.5.2 字体属性
文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
简单实例：
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }
字体大小
p 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之间。