CSS基础（2）

发布日期: 2022-10-12

更新日期: 2023-03-03

文章字数: 634

阅读时长: 2 分

阅读次数:

每日一记

字体样式

font-size        字体大小     单位是px，浏览器默认是16px,设计图常用字号是12px

font-family      字体         当字体是中文字体、英文字体中有空格时，需加双引号 
                              多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体，以此类推 

color            颜色         color:red;color:#ff0；color:rgb(255,0,0)；0-255 

font-weight      加粗         font-weight:bolder(更粗的)/bold（加粗）/normal（常规） 
                              font-weight:100-900；100-500不加粗 600-900加粗 

font-style       倾斜         font-style:italic(斜体字)/oblique(oblique倾斜的文字)/normal（常规显示）；

text-align       文本水平对齐  text-align: left;       水平靠左
                              text-align：right;     水平靠右 
                              text-align：cente;     水平居中 
                              text-align: justify;    水平2端对齐，但是只对多行起作用
text-transform   单词大小写    uppercase全部大写,lowercase全部小写,none无定义,capitalize首字母大写

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            font-size:13px;
        }
        .p2{
            font-family:宋体,等等等;    #逗号间隔，从左到右依次使用
        }
    </style>
</head>
<body>
    <p class="p1 p2">
        内容
    </p>
</body>
</html>

字体总结:
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋 _GB2312 FangSong_GB2312
楷体 _GB2312 KaiTi_GB2312

字体颜色

1.
color:rgb(255,0,0)
0最弱255最强
2.
十六进制0~~9，A~~F
color:ffffff #每两个对应上面的一组，0是最弱f是最强，相同的可以只写一次

文本修饰

line-height          行高        line-height的数据=height的数据，可以实现单行文本垂直居中 
text-indent          首行缩进    text-indent可以取负值； text-indent属性只对第一行起作用 
letter-spacing       字间距      控制文字和文字之间的间距 
text-decoration      文本修饰    text-decoration:  none没有/underline下划线/overline上划线/line-through删除线 
font                 文字简写    font是font-style  font-weight font-size/line-height font-family的简写。 
                                font:italic 800 30px/80px"宋体”;   

注意！！！对于font————顺序不能改变,必须同时指定font-size和font-family属性时才起作用