css基础属性

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属性

该属性用来设置字体颜色，设置颜色的属性值有三种形式：

1. 英文单词： red 、 black、 blue 等
2. 颜色代码: 三位十六进制组成光学三源色 每一个的值的取值范围是00~ff。例如#ffffff表示黑色，如果三个单独的颜色值对应的属性是XX这种形式，可以省略。 #ff0055 = #f05
3. 颜色函数：通过rgb(xx, xx, xx) 函数来设置颜色属性，和第二种含义相同，r（red）、g（green）、b（blue）函数值取值为0 ~ 255 例如红色：rgb（255,0,0）；

text-indent属性

一般用于设置首行文字缩进，同样也可让输入框的文字缩进，值可以有两个单位px , em

• 1. px 虽然是一个相对长度，但是在设备没有改变的情况下，他可以当作绝对单位来处理
  2. 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;
}

使用border画三角形

• 内边距padding: 10px; 复合属性，pangding(top - right - bottom - left) ==顺时针方向设置==
• 外边距margin: 10px; 复合属性，margin(top - right - bottom - left)

1. 设置一个值： 表示上下左右四个值
2. 设置两个值： a , b；a表示上下，b表示右左
3. 设置三个值： a，b，c；a表示上，b表示右左，c表示下
4. 设置四个值： 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);