CSS层叠样式表-CFANZ编程社区

HTML的局限性：只关注内容的语义。
CSS：层叠样式表，CSS样式表或级联样式表。
CSS也是一种标记语言，主要用于设置HTML页面中的文本内容，图片的外形以及版面的布局和外观显示样式。

CSS的构成：选择器以及一条或多条声明（属性：值;）。

<!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>CSS规范</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式 {改什么样的样式} */
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>CSS语法规范</p>
</body>
</html>

CSS代码风格：紧凑格式、展开格式。

选择器：根据不同需求把不同的标签选出来，选择标签用的。
标签选择器（元素选择器）：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签制定统一的CSS样式。
```
标签名{
    属性1:属性值1;
    属性2:属性值2;
    ...
}
```

类选择器：差异化选择不同的标签，单独一个或者几个标签。

<style>
         /* 
            .类名{
                属性1:属性值1;
                属性2:属性值2;
                ...
            }
            
            样式点定义，结构类（class）调用，一个或多个，开发最常用
         */
        
    .red {
            color: red;
        }
</style>

    <li class="red">白桃沁雪</li>
    <li class="red">烟雨江南</li>
    <li>蜜桃乌龙</li>

类选择器-多类名：一个标签制定多个类名，多个类名之间用空格隔开。

<style>    
        .box {
            width: 100px;
            height: 100px;
        }

        .yellow {
            background-color: yellow;
        }

        .green {
            /* width: 100px;
            height: 100px; */
            background-color: green;
        }
</style>

    /* 各个类名中间用空格隔开*/
    <div class="box yellow"></div>
    <div class="box green"></div>
    <div class="box yellow"></div>

id选择器：以id属性来设置id选择器，#来定义。

<style>
    /* 
             #id名{
                属性1:属性值1;
                属性2:属性值2;
                ...
            }
            样式#定义，结构id调用，只能调用一次，别人切勿使用
         */

        #pink {
            color: pink;
        }
</style>

        <div id="pink">id选择器</div>

通配符选择器：标识选取页面中所有元素（标签），使用*定义。

<style>
    /* 
             #* {
                属性1:属性值1;
                属性2:属性值2;
                ...
            }
            不需要调用，自动就给所有的元素使用样式
         */

        * {
            color: red;
        }
</style>

        <div>1</div>
        <div>2</div>

font- family：定义文本的字体系列。

<style>
    p {
        font-family:"微软雅黑";
    }

    div {
        font-family:"Microsoft YaHei","微软雅黑";
    }
</style>

font-size：字体大小

<style>
    /* 标题标签需要单独指定文字大小 */
    p {
        font-size:20px;
    }
</style>

font-weight：字体粗细

<style>
    p {
        /*
           bold:加粗
           light:细体 
           normal:默认值,400 
         */
        font-weight:700;
        /*700等价于bold，加粗 */
    }
</style>

font-style：字体样式

<style>
    p {
        /*
           normal:默认值,浏览器会显示标准的字体样式
           italic:浏览器会显示斜体的字体样式
         */
        font-style:normal;
    }
</style>

字体复合属性：不需要设置的属性可以省略（取默认值），但必须保留font-size和font- family属性，否则font属性将不起作用。

<style>
    div {
        /*
           font:font-style font-weight font-size/line-weight font-family;
         */
        font:italic 700 16px 'Microsoft yahei';
    }
</style>

文本颜色：color
对齐文本：text-align，水平对齐。center、left、right
```
<style>
    p {
        text-align:left;
    }
</style>
```
装饰文本：text- decoration

文本缩进：text-indent，文本的首行缩进

<style>
    p {
        text-indent:2em;
        /*  em是一个相对单位，是当前元素1个文字的大小 */
    }
</style>

行间距：line-height，可以控制文字与行之间的距离

<style>
    p {
        line-height:20px;
        /*  上间距+文本高度+下间距 */
    }
</style>

CSS的三种样式表：行内样式表（行内式），内部样式表（嵌入式），外部样式表（链接式）。

/*行内样式表*/
<style>
    p {
        color:pink;
        font-size:12px;
    }
</style>

/*内部样式表*/
<p style="color:pink; font-size:12px"></p>

/*外部样式表*/
/*
    1.建立.css文件
    2.在HTML页面中，使用<link>标签引入这个文件
*/
<link rel="stylesheet" href="css文件路径">