CSS基础入门：环境配置、样式类型与选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46093544/article/details/130021435

什么是CSS

CSS（Cascading Style Sheets），翻译成中文是层叠样式表，是一个控制与显示html元素的声明式编程语言，可以通过编写CSS控制网页的显示效果。

环境搭建

使用VSCode作为代码编辑器编写CSS代码。需要安装两个插件：

安装Live Server（具有实时加载功能的小型服务器）。
安装HTML CSS Support（CSS语法提示与自动补全工具）。

第一段CSS代码

一段简单的CSS代码如下：

h1 {
	width: 600px;
	height: 1200px;
	margin: auto;
}

其中，h1被称为选择器，指向对应的html标签。大括号中的每一条语句被称为一条声明，声明由声明由两部分组成，左侧的被称为属性，右侧的被称为属性值。属性与属性值之间以冒号分隔，声明之间以分号分隔。整个当前代码合起来被称作一条CSS规则。

样式类型

CSS的样式分为内联样式、内部样式和外部样式3种。

内联样式

将CSS直接写在html元素上面。使用style属性，没有选择器，直接进行声明。

<p style="color:red;">Hello World</p>

内联样式仅仅对当前html元素有效。

内部样式

将CSS写在html文件中head标签的最底部。使用style属性，内部可以有一条或多条CSS规则。

<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>
        .box {
            width: 600px;
            height: 1200px;
        }
        h1 {
            width: 300px;
            height: 500px
        }
    </style>
</head>

内部样式仅仅针对当前页面有效。

外部样式

将CSS单独写入一个.css文件，并在html中通过link标签引用该外部CSS文件的方式使用。link标签的rel（relation）属性指示当前文档与被链接文档之间的关系，这里为“stylesheet”，表示被链接文档是一个层叠样式表。href属性则指明CSS文件的所在路径。link标签一般也放置在head标签的最底部。

<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>
    <link rel="stylesheet" href="style.css">
</head>

外部样式最为常用，虽然引入的样式也仅仅对当前html文件有效，但其他的html文件也可以通过外部样式引用该CSS文件。

注释

在style标签内部，或单独的.css文件中，CSS可以使用/**/进行单行注释和多行注释。

/* 这是一条单行注释 */
/* 
    这是一条
    多行注释
*/

在html文件中，也可以使用html语言的注释。

<!-- 这是一条html风格的注释 -->

选择器（Selector）

选择器的作用是选中所有对应的html元素。

类型选择器

类型选择器直接写html标签的名称（如h1、h2、p、a等），类型选择器的作用是选择页面上所有该类型的标签。

/* 将所有h1标签内容设为蓝色 */
h1 {
    color:blue;
}
/* 将所有h2标签内容设为红色 */
h2 {
    color:red;
}

    <h1>我的第一个h1标签</h1>
    <h2>我的第二个h1标签</h1>
    <h2>我的第三个h1标签</h1>

在这里插入图片描述

类选择器

类选择器以“.”开头。

/* 将所有my_para类内容设为绿色 */
.my_para {
    color:green;
}

类选择器在html中对应的内容需要通过添加class属性来指定。

<p class="my_para">我是一个段落</p>

在这里插入图片描述

id选择器

id选择器以“#”开头。

/* 将所有id为my_p的内容设为橙色 */
#my_p {
    color:orange;
}

html文件中对应内容通过添加id来指定。

<p id="my_p">我是一个段落</p>

在这里插入图片描述

属性选择器

/* 将所有p标签带title属性的内容设为红色 */
p[title] {
    color:red;
}

<p title="my_para">我是一个段落</p>
<p>我也是一个段落</p>

在这里插入图片描述
也可以指定属性的值：

/* 将所有p标签且title属性为s的内容设为红色 */
p[title="s"] {
    color:red;
}

通用选择器

“*”是CSS中的通配符，可以代表所有元素。

/* 将所有元素内容设为黑色 */
* {
    color:black;
}

组合使用

多个标签合并

若多个标签的样式相同，则可以进行合并：

/* 将所有h1和h2的内容的字体大小设为20 */
h1,h2 {
    font-size:20px;
}

多个类型选择器合并

也可以将多个类型的选择器组合来进行选择：

/* 将所有a标签且id为s的内容设为灰色 */
a#s {
    color:grey;
}

父子组合选择器

父子组合用于指定在html中嵌套的内容。

/* 将所有div标签内部p标签内容设为黄绿色 */
div p {
    color:yellowgreen;
}

空格表示div标签和p标签是父子关系。

	<div>
        <p>我是一个段落</p>
    </div>

优先级（Priority）

简单总结有4条：

相同的规则按照加载顺序，写在后面的优先级更高

/* 将所有h2标签内容设为红色（被覆盖） */
h2 {
    color:red;
}
/* 将所有h2标签内容设为蓝色（执行） */
h2 {
    color:blue;
}

此时h2标签内容为蓝色。
内部样式和外部样式的优先级之间没有高低关系，它们的优先级取决于style标签和link标签的先后顺序：

<!-- 此时style靠后，优先级更高，h2标签内容为绿色 -->
<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>
    <link rel="stylesheet" href="style.css">
    <style>
        h2 {
            color:green;
        }
    </style>
</head>

<!-- 此时link靠后，优先级更高，h2标签内容为蓝色 -->
<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>
        h2 {
            color:green;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>

继承下来的样式优先级永远低于直接指定的样式

当我们像如下这样指定了div样式后，若div内部的子标签h1、h2和h3没有指定样式，则会继承div的样式：

	<div>
        <h1>我是个h1标题</h1>
        <h2>我是个h2标题</h2>
        <h3>我是个h3标题</h3>
    </div>

/* 将div标签内容设为黄绿色 */
div {
    color:yellowgreen;
}

在这里插入图片描述
当对h1、h2单独指定了样式后，则会优先使用自己的样式，而不会继承父标签div的样式：

/* 将所有h1标签内容设为蓝色 */
h1 {
    color:blue;
}
/* 将所有h2标签内容设为红色 */
h2 {
    color:red;
}
/* 将div标签内容设为黄绿色 */
div {
    color:yellowgreen;
}

在这里插入图片描述

内联样式优先级最高，除非添加!important

内联样式有着最高的优先级。

<h1 style="color:grey;font-size: 20px;">我是个h1标题</h1>

当一个内容指定了内联样式后，所有其他的样式指定都会被覆盖。除非该样式有属性末尾添加!important，此时该添加了!important属性的样式优先级最高。

/* 将所有h1标签内容设为蓝色，字体大小设为50 */
h1 {
	/* 颜色属性添加了!important，h1字体颜色为蓝色 */
    color: blue !important;
    /* 字体大小属性没有添加!important，h1字体大小为20 */
    font-size: 50px;
}

类型选择器 < 类选择器 < id选择器

这一条比较好理解，不再赘述。

盒子模型（Box Model）

CSS盒子模型的观点是：所有的html元素都可以看作是一个盒子，包括边距、边框、填充和实际内容。盒子模型这一术语主要在设计和布局时使用。
盒子模型概念图

Margin(外边距) ：清除边框外的区域，外边距是透明的。
Border(边框) ：围绕在内边距和内容外的边框。
Padding(内边距) ：清除内容周围的区域，内边距是透明的。
Content(内容) ：盒子的内容，显示文本和图像。

以div为例：

    <div class="box">
        Content(内容)
    </div>

.box {
    width: 500px;
    height: 500px;
    background-color: red;
    border: 3px solid blue;

    padding: 20px;
}

这样，我们就在浏览器中得到了一个盒子模型：
在这里插入图片描述
我们添加更多的属性：

.box {
    width: 500px;
    height: 500px;
    background-color: red;
    border: 3px solid blue;

    /* 方法1：指定全部4条边 */
    padding: 20px;
    /* 方法2：依次指定4条边 */
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 8px;
    /* 方法3：分别指定4条边，顺序为“上右下左”，也就是顺时针顺序 */
    padding: 10px 9px 8px 7px;

    margin: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
    margin-right: 9px;
}