CSS常用属性

常用字体属性

Chrome浏览器支持的最小文字为12px，默认的文字大小为16px，并且0px会自动消失
不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，==不要使用默认大小==
通常以给body设置front-size属性，这样body中的其他属性就都可以继承了

字体族

属性名：front-family
语法

div{
    front-family:"STCaiyun","Microsoft YaHei",sans-serif
}

字体风格

属性名：font-style
常用值

normal：正常（默认值）
italic：斜体（使用字体自带的斜体效果）
oblique：斜体（强制倾斜产生斜体效果）

实现斜体时，更推荐使用italic

语法

div{
    font-style:italic;
}

字体粗细

属性名：font-weight
常用值

关键字

lighter：细
normal：正常
bold：粗

数值

100 ~ 300等同于lighter，400 ~ 500 等同于normal，600及以上等同于bold

语法

div{
    font-weight:bold;
}

div{
    font-weight:600;
}

字体符合写法

属性名：font，可以把上述字体样式合并成一个属性
编写规则

字体大小，字体族必须都写上
字体族必须是最后一位，字体大小必须是倒数第二位
各个属性间用空格隔开

实际开发中更推荐复合写法，但这也不是绝对的，比如只是想设置字体大小，那就直接用font-size

常用的文本属性

文本颜色

开发中常用的是: rgb/rgba或HEX/HEXA(十六进制)

文本间距

字母间距: letter-spacing
单词间距: word-spacing(通过空格识别词)
属性值为像素(px) ,正值让间距增大,负值让间距缩小

文本修饰

属性名:text-decoration
可选值:

none: 无装饰线(常用)
underline:下划线(常用)
overline: 上划线
line-through : 删除线

可搭配如下值使用:

dotted: 虚线
wavy: 波浪线
也可指定颜色

举例

a{
    text-decoration:none;
}

文本缩进

属性名:text-indent
属性值:css中的长度单位,例如:px
举例:

div {
	text-indent:40px;
}

文本对齐

水平

属性名:text-align
常用值:
1. left : 左对齐(默认值)
2. right : 右对齐
3. center :居中对齐
举例

div{
    text-align: center;
}

行高

属性名 : ==line-height==
可选值
1. normal:由浏览器根据文字大小决定的一个默认值
2. 像素(px)
3. 数字:参考自身的front-size的倍数(==常用==)
4. 百分比:参考自身front-size的百分比
由于字体设计的原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感
```
div{
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
}
```

文本对齐

属性名：vertical-align

.test{
    vertical-align:top;
}

常用列表属性

复合属性：list-style：

    <style>
        ul {
            list-style: decimal,inside;
        }
        li {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li>《震惊！》</li>
        <li>《你真帅》</li>
        <li>《好吧》</li>
    </ul>
</body>

表格属性

属性： border

表格独有属性

背景属性

属性：background

鼠标相关的属性

属性名：cursor