css语法标准
css通过选择来选中元素，通过一系列的属性名和属性值来修饰元素，这里的属性名和属性值之间用 : 隔开，没一组css属性之间用 ; 隔开。
div {
width:100px;
height:100px;
background-color:red;
}
css属性
关于文本样式的属性
p {
font-size:20px;
font-weight: bold;
font-family: arial;
font-style: italic;
color: red;
}
font-size属性
用于设置文字的大小，文字大小在没有设置的情况下，默认是16px。浏览器是根据文字的==高度而不是宽度==来判定文字的大小的。
px：px是像素值，是一个相对单位，电脑屏幕是又无穷多个像素点组成，一个像素代表一个颜色单元，但是不同电脑的像素点的大小是不一样的，所以这里的px是一个相对单位。
font-weight属性
用于设置文字的粗细程度，默认值normal大概是400，它的取值是100~900，700 = blod，此时和我们的strong标签相似，表示加粗显示。lingter、normal、blod、bloder分别表示不同的粗细程度，blod和bloder需要字体当中有相应的设置
font-family属性
该属性用来设置字体样式，最常用的字体是arial字体。当属性是英文的时候不用引号，==写中文的是后需要加引号==
font-style属性
该属性用来设置文字是否采用斜体正常的是normal,italic 表示采用斜体展示,说明了em操作的就是font-style的italic属性。
color属性
该属性用来设置字体颜色，设置颜色的属性值有三种形式：
- 英文单词： red 、 black、 blue 等
- 颜色代码: 三位十六进制组成光学三源色 每一个的值的取值范围是00~ff。例如#ffffff表示黑色，如果三个单独的颜色值对应的属性是XX这种形式，可以省略。
#ff0055=#f05 - 颜色函数：通过rgb(xx, xx, xx) 函数来设置颜色属性，和第二种含义相同，r（red）、g（green）、b（blue）函数值取值为0 ~ 255 例如红色：rgb（255,0,0）；
text-indent属性
一般用于设置首行文字缩进，同样也可让输入框的文字缩进，值可以有两个单位px , em
- px 虽然是一个相对长度，但是在设备没有改变的情况下，他可以当作绝对单位来处理
- em 是纯粹的相对长度了，它的大小就是相对于当前元素字体的大小，所以一般的首行文字缩进都是选择的是2em，两个文字大小。
text-align属性
该属性用于设置文本元素的位置，有三种值，center - 文字左右居中， left - 文字左对齐， right - 文字右对齐
具有文本属性的元素水平居中对齐的操作
<div>
<p>我想站在div的最中间</p>
</div>
div{
width: 300px;
line-height: 100px;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
}
text-decoration属性
该属性用来添加文本修饰,<del></del>标签就可以使用line-through设置的, a标签默认的下划线就是使用underline实现的, 可以设置：underline(下划线)、overline(上划线)、line-through(中划线)、none(没有)
cursor属性
该属性用来设置鼠标移入时，鼠标的样式，例如a 标签自带了鼠标移入时变成小手的样式, cursor:pointer
伪类选择器
通过伪类选择器，我们可以给一些选择出来的元素达到一些特定的效果，比如，我们给一个a加上hover可以让一个元素让他在一个特定的效果
a:hover { color: red; text-decoration: none; font-size: 20px; }
- 这里可以实现当我们鼠标移入到a标签上面的时候，它变色变大并且下滑线消失
- 伪类的权重是10和class是一样的
盒模型
先介绍三个属性
- 盒子边框：
border: 1px solid #ccc;
这是一个复合属性: border-width, border-style: solid(实线)\dotted(点状虚线)\dashed(条状虚线), border-color ,每一个属性还是复合属性, 通过上下左右来区分border-left-xxx \ border-right-xxx \ border-top-xxx \ border-bottom-xxx
使用border属性来画一个三角形,说明了边框和边框之间是有一条有比例的线分割开的,这里也可以使用复合属性的不同取值画出不一样的三角形
<div></div>
div{
width: 0px;
height: 0px;
/*这里的transparent是透明色,就是不显示颜色*/
border: 100px solid transparent;
border-left-color: red;
}
- 内边距
padding: 10px;复合属性，pangding(top - right - bottom - left) ==顺时针方向设置== - 外边距
margin: 10px;复合属性，margin(top - right - bottom - left)
- 设置一个值： 表示上下左右四个值
- 设置两个值： a , b；a表示上下，b表示右左
- 设置三个值： a，b，c；a表示上，b表示右左，c表示下
- 设置四个值： a，b，c，d；a表示上，b表示右，c表示下，d表示左
盒子的组成部分 = 盒子壁(border) + 内边距(padding) + 盒子内容(width + height)
盒子模型的组成不封 = 盒子壁(border) + 内边距(padding) + 盒子内容区(width + height) + 外边距(margin)
盒模型计算问题
我们现在一个盒子有10px的margin、5px的border、10px 20px 30px 40px的padding和100px的content，那么这个盒子的宽高分别是多少呢？
答案：
width = 5px * 2 + 20px + 40px + 100px = 170px;
height = 5px * 2 + 10px + 30px + 100px = 150px;
这里margin的值并不计入到盒子大小的计算当中。
所以这里是：
width = 100px(width) + 5px * 2 (border) + 20px (padding-right) +40px(padding - left);
height = 100px(height) + 5px * 2(border) + 10px(padding - top) + 30px(padding -bottom);
