CSS学习笔记（3）

陈潇奇 2022-10-16 09:21:39

属性：

1.文本属性

1.1 font -size

描述：字体大小

说明：单位是px，浏览器默认是16px，设计图常用字号是12px。

1.2 font-family

描述：字体

说明：当字体是中文字体、英文字体中有空格时，需加双引号；多个字体中间用逗号连接，先解析第1个字体，如果没有，解析第2个字体，以此类推。

1.3 color

描述：颜色

说明：color:red;color:#ff0;color:rgb(255,0,0);0-255。

1.4 font-weight

描述：加粗

说明：font-weight:bolder(更粗的)/bold(加粗)/normal(常规)/lighter(细的)

font-weight:100-900,100细体，400正常，700加粗，900更粗体

1.5 font-style

描述：倾斜

说明：font-style:italic(斜体字)/oblique(倾斜的文字，更倾斜)/normal(常规显示)。

1.6 text-align

    描述：文本水平对齐

说明：~:left(水平靠左)

~：right(水平靠右)；~：center(水平居中)；~:justify(水平两端对齐，但是只对多行起作用)。

1.7 line-height

描述：行高

说明：line-height的数据=height的数据，可以实现单行文本垂直居中

1.8 text-indent

描述：首行缩进

说明：text-indent可以取负值；text-indent属性只对第一行起作用(1em代表一个字符间距)

1.9 letter-spacing

描述：字间距

说明：控制文字和文字之间的间距

1.10 text-decoration

描述：文本修饰

说明：text-decoration:none没有/underline下划线/overline上划线/line-through删除线

1.11 font

描述：文字简写

说明：font是font-style,font-weight,font-size/line-height,font-family的简写。

font:italic 800 30px/80px"宋体";顺序不能改变，必须同时指定font-size和font-famil属性时才起作用。

1.12 text-transform

描述：检索大小写

说明：适用于英文，lowercase将英文全部转化为小写/capitalize单词首字母大写/uppercase将英文全部转化为大写/none 无效果。

总体功能演示：

代码：

<!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>文本属性</title>
    <style>
        .p1{
            font-size:16px ;
            /* color: red; */
            /* color:rgb(82, 57, 133)0-255,0最弱，255最强 */
            color:#14c145;
            /* font-weight:700;100-900,100细体，400正常，700加粗，900更粗体 */
            font-weight:bolder;
        }
        /* 十进制0-9 */
        /* 二进制01 */
        /* 十六进制0-9A-F */
        .p2{
            /* font-family:宋体; */
            font-family:草书,行书,宋体;
            font-style: italic;
        }
        h1{
            font-weight:lighter;/*可以让标题不是粗体*/
        }
        .box1{
            /* font:italic bold 20px/1em 宋体; */
            font: 20px/1em 宋体;/*顺序不能换，斜体粗体可以省略，但字体行高、字体大小和字体格式都不能省略*/
            text-align: right;
            width: 500px;
            height: 100px;
            background-color: yellow;
        }
        .box2{
            text-align:justify;
            /* 两端对齐，只能在多行文本用 */
            width: 500px;
            height: 100px;
            background-color: rgb(34, 255, 0);
        }
        .box3{
            width:500px;
            height: 100px;
            background-color: #14c145;
            line-height: 100px;
            text-align: center;
        }
        .box4{
            width:500px;
            height: 100px;
            background-color:aqua;
            line-height: 20px;/*行高*/
            /* text-transform:lowercase ;全部转换为小写 */
            /* text-transform: uppercase;全部转换为大写 */
            text-transform: capitalize;/*单词首字母大写*/
        }
        /* 文本间距：词间距，字符间距 */
        .p3{
            /* letter-spacing: 20px;字符间距 */
            text-indent: 2em;
            /* text-decoration: underline; 下划线*/
            /* text-decoration:line-through ; 删除线*/
            /* text-decoration:overline ;上划线 */
            /* text-decoration: none; 除去划线 */
            text-decoration:underline line-through overline ;/*可以一次设置多种划线，用空格隔开*/
        }
        .p4{
            letter-spacing: 10px;/*字符间距*/
            word-spacing: 10px;/*词间距，正值向右，负值向左*/
        }
    </style>
</head>
<body>
    <p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui voluptatem, architecto nobis saepe voluptatibus itaque praesentium adipisci dolorum repudiandae a fugit numquam officia repellendus, cum omnis atque laboriosam tempora accusantium.</p>
    <p class="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. A omnis rerum libero. Debitis id rerum reiciendis necessitatibus in deserunt veniam rem minus corrupti, consequatur qui, ducimus itaque cupiditate asperiores sit.</p>   
    <h1>标题</h1>
    <div class="box1">大家好,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, enim sapiente. Tempore vitae similique obcaecati. Pariatur quaerat sit saepe qui aliquid ipsum commodi fuga non unde, amet veritatis dicta natus.</div>
    <div class="box2">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos, optio sed facere consequatur accusantium qui commodi perferendis beatae sunt at ea repellendus nam iure natus, odio voluptatibus cupiditate tempore est?
    </div>
    <div class="box3">大家好</div>
    <div class="box4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quisquam voluptatum aspernatur esse hic beatae iusto error? Inventore dolor, aspernatur, et aliquid maiores eum sed exercitationem, accusantium laboriosam necessitatibus ullam?</div>
    <p class="p3">费曼技巧，亦同此理。对付一个知识枝节繁杂如发丝、富有内的想法，应该分而化之，切成小知识块，再逐个对
        付，你最终能填补所有的知识缺口，否则，这些缺口将阻挠你理解涵这个想法。</p>
    <p class="p4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum eligendi suscipit facere ut sed similique saepe quia, sunt quae, officiis at cumque adipisci aperiam tenetur ratione quas deleniti sequi cupiditate!</p>
</body>
</html>

效果：