CSS学习（1） - 选择器与背景颜色

CSS学习（1） - 选择器与背景颜色

category: 编程世界
date: 2023/04/13
status: Published
summary: CSS学习总结，普通选择器的常见的几种类型，CSS的颜色属性和不同的背景操作等。
tags: CSS, 前端
type: Post

CSS的组成

css由选择器和声明块组成。

body 和 p 都是选择器，其中 : 前面的叫做属性，后面的叫做属性值，可以根据他们来设置HTML标签的样式。

body{
    background-color: lightblue;
}
p{
    font-family: 'verdana';
    font-size: 20px;
}

css选择器的种类：

• 简单选择器（根据名称、id、类来选取元素）
• 组合器选择器（根据它们之间的特定关系来选取元素）
• 伪类选择器（根据特定状态选取元素）
• 伪元素选择器（选取元素的一部分并设置其样式）
• 属性选择器（根据属性或属性值来选取元素）

首先我们来了解最简单的选择器种类：

元素选择器 根据标签元素来选择HTML元素。

这就是一个最简单的元素选择器，选择的是 的标签中的元素。

body{
    background-color: lightblue;
}

---

id选择器 根据HTML元素的id来选择：

元素id在页面中是唯一的，使用前需要增加一个 # 号，因此根据这个唯一的id来选择特定的元素标签。id不能以数字开头

#pra{
    color: red;
    text-align: center;
}
...
<p id="pra">这段受影响</p>
<p>这段不受影响</p>

---

类选择器 根据特定的class类来选择元素：

如果需要特定的class元素，则在前面需要加一个 . 标记。

.pra2{
    color: burlywood;
    font-size: 30px;
}
...
<p class="pra2">这段受class影响</p>

---

指定特定的HTML元素受class的影响：

h1.pra2 表示只有 h1标题的pra2类受影响； p.pra2 表示只有p段落的pra2类受影响

h1.pra2{
    color: black;
    text-align: center;
}
p.pra2{
    color: burlywood;
    font-size: 30px;
}
...
<h1 class="pra2">我是标题，我受h1.pra2影响</h1>
<p class="pra2">我是段落，我受p.pra2影响</p>

---

嵌套影响：

p.large{
    font-size: 50px;
}
p.color{
    color: red;
}
...
<p class="large">large影响</p>
<p class="large color">large和color共同影响</p>

---

通用选择器 会影响界面上的每一个标签：使用 * 进行标识。

---

分组选择器 对于多个不同的标签具有相同的属性与值：

则可以对选择器进行分组，使用 ， 分割每个标签。

h1,h2,p{
	  color: red;
	  text-align: center;
}

---

CSS的引入

我们有三种方法来在html中使用css样式表

1. 外部CSS
2. 内部CSS
3. 行内CSS

---

外部css：

在 head 的 link 中包含对CSS样式表的引入。

link的rel指示这是一个样式表，type表示是css样式，并且在href中指定了css源文件。

外部CSS文件：

body{
    background-color: lightblue;
}
p{
    color: green;
    font-size: 20px;
}

HTML文件：
<link rel="stylesheet" type="text/css" href="1.css">

---

内部css：上节的全部内容都是内容的css，即在head中的 style 中进行定义。

---

行内css：为单一的元素定义样式，在单一的标签内使用 style 定义即可。

---

注意样式表的优先级：

1. 行内样式（在 HTML 元素中）
2. 外部和内部样式表（在 head 部分）
3. 浏览器默认样式

总的来说：

1. 行内CSS > 内部CSS >外部CSS

---

CSS注释

使用 /**/ 进行注释

body{
    /*这是一段注释*/
    background-color: lightblue;
}

HTML注释：

<!-- HTML注释-->
<link rel="stylesheet" type="text/css" href="1.css">

---

CSS颜色

设置背景颜色: background-color

设置文本颜色: color

设置边框颜色: border

指定颜色的方式：

1. RGB
2. HEX
3. hsl：使用色相，饱和度，明度来表示颜色。
4. rgba：rgb基础上，可以指定透明度。
5. hsla：hsl基础上，可以指定透明度。

技巧：RGB使用三个相同的值可以得到不同的灰阶颜色

---

CSS背景

指定背景颜色: background-color

---

指定背景图片: **backgrounD-image**

插入url链接即可。

background-image: url("XXX.png");

在水平或者垂直方向重复图片：

同理使用repeat-x 或者repeat-y，或者只显示一次图片: no-repeat

background-repeat: repeat-y; 

指定图片的放置位置: background-position :

left ，right，top，或者指定其他位置

background-position: top;

指定图片是否跟随页面滚动: background-attachment

scroll表示滚动；fixed表示固定

background-attachment: scroll;

背景属性可以简写：必须严格按照顺序

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

---