CSS基础教程：样式引入与选择器详解-优快云博客

CSS，层叠样式表 (Cascading Style Sheets)。层叠指的是针对一个 html 的元素\标签，可以同时应用多组 CSS 样式，多组样式叠加在一起；而样式是用来描述一个网页中的内容大小、位置、间距、颜色、字体、边框、背景等信息的。CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。

2. CSS的引入方式

1. 内部样式：直接把 CSS嵌入到 HTML 中，放到 style 标签里。

<body>
    <div class = "one">
        <div class = "two">1</div>
        <div class = "three">2</div>
        <div class = "four">3</div>
    </div>

    <style>
        .one{
            margin-top: 100px;
            width: 200px;
            height: 300px;
            background-color: aqua;
        }

        .two{
            width: 50px;
            height: 50px;
        }

        .three{
            width: 50px;
            height: 100px;
        }

        .four{
            width: 50px;
            height: 150px;
        }
    </style>
        
</body>

2. 外部样式：把 CSS 写成一个单独的 .css 文件，由 html 通过 link 标签引入过来

通过 link 标签把 css 文件引入进来：

<link rel="stylesheet" href="cssdemo.css">

css 文件内容为:

div{
    .four{
        color: red;
    }
}

外部样式是实际开发中最常使用的方式，实现了样式和结构的彻底分离。

3. 内联样式：直接把 CSS 属性写到元素的 style 属性内

<div style="color: pink; font-size: 150px; ">brand new world</div>

3. CSS 选择器

CSS中，选中页面指定的标签元素，才能设置元素的属性。px，像素，计算机里用来描述尺寸的重要单位，每台计算机都有推荐的屏幕显示像素大小：

3.1 基础选择器

选择器{ }里面，是一些具体的 CSS 属性，以键值对的方式组织，键值对之间，使用；来分割，而键和值之间，使用：来分割。

3.1.1 标签选择器

使用相同标签名，就可以把页面中所有同名的标签元素都选中！但这很难针对某个元素进行个性化定制。如前面使用过的 div 标签：

<div>{
     ......
}

3.1.2 类选择器

CSS 使用 .类名来创建一个类，这个类名对应一组 CSS 属性，再让指定的 html 元素调用这个类名即可。这里的类与 Java 中的类没有任何关系！

<body>
    <div class = "one">
        <div class = "two">1</div>
        <div class = "three">2</div>
        <div class = "four">3</div>
    </div>

    <style>
        .one{
            margin-top: 100px;
            width: 200px;
            height: 300px;
            background-color: aqua;
        }

        .two{
            width: 50px;
            height: 50px;
        }
    </style>
</body>

3.1.3 id 选择器

可以给一个 html 标签写一个 id 属性，这个属性的值，将作为标签的“身份标识”，在页面中是唯一的。同样可以通过 id 选择器，把这个指定元素获取到。

3.1.4 通配符选择器

使用 * 的定义，选中所有标签

* {
     color: red;
 }

3.2 复合选择器

复合选择器由多个基础选择器构成，这里只介绍一个，那便是后代选择器，是把上述三种选择器进行组合，体现出“标签的层析结构”。

    <div class="beverages">
        <h2>谷粒多</h2>
        <h3>红豆花生</h3>
    </div> 


    <style>
        .beverages h2{
            color: bisque;
        }

        .beverages h3{
            color: blueviolet;
        }
     </style>

4. CSS 字体设置

 <div class = "chocolate">
        <h3>巧克力</h3>
 </div>


<style>
        .chocolate h3{
            /* 字体设置*/
            font-family: '微软雅黑';
            /* 字体大小 */
            font-size: 40px;
            /* 字体粗细 */
            font-weight: 900;
            /* 字体样式，是否倾斜 */
            font-style: italic;

        }
</style>

粗细的取值范围在 100 ~ 900。

5. CSS 文本属性

   <div class = "chocolate">
        <h3>巧克力</h3>
        哟嚯!!快来吃巧克力拉 ~ ~ ~ <p></p>
        哟嚯!!快来吃巧克力拉 ~ ~ ~ 
    </div>

 <style>
        .chocolate{
            font-size: 40px;
            /* 文本颜色 */
            color: red;
            /* 文本对齐 左对齐 left，右对齐 right，居中对齐 center */
            text-align: center;
            /* 文本装饰 加下划线之类的 */
            text-decoration: underline;
            /* 文本缩进 首行缩进多大空间 */
            text-indent: 50px;
            /* 行间距 */
            line-height: 100px;

        }
</style>

文本属性中，color 的值有多种写法，一种是直接写一些表示颜色的单词，第二种是使用 rgb 的方式，三个参数，各表示红、绿、蓝的混合比例。第三种是使用十六进制的方式来表示。这里介绍以下如何通过 rgb 来获取自己想要的任何颜色。

当当当当~答案就是使用 qq 截图！！

.beverages h2{
            color: rgb(255,192,153);
}

6. CSS 背景设置

<div class="one">吴京</div>

    <style>
        .one{
            font-size: 50px;
            width: 1600px;
            height: 950px;

            /* 背景颜色 */
            background-color: pink;
            /* 背景图片链接 */
            background-image: url(wujing.jpeg);
            /* 图片摆放位置 */
            background-position: center ;
            /* 图片是否平铺 */
            background-repeat: no-repeat;
            /* 图片大小 */
            background-size: 900px 800px;
        }
    </style>

7. CSS 的 display 属性

前面介绍过的所有 html 标签中，在不显示指定 display 的时候，都会有默认的 display 值，其中 h1 - h6、p、div、ul、ol、table等默认的都是 block ，即块级元素；而 a、span、b 默认是 inline，也就是行内元素。块级元素默认独占一行，可以设置尺寸，而行内元素默认不独占一行，不能设置尺寸。有时根据需要，将行内元素设置成块级元素。