温馨提示：这篇文章已超过436天没有更新，请注意相关的内容是否还可用！

摘要：，，本篇文章是关于CSS学习笔记的基础教程第一篇，介绍了CSS的基本概念、语法以及使用方法。文章详细解释了CSS的选择器、样式规则等基础知识，并提供了相关示例。通过学习本文，读者可以掌握CSS的基本操作和应用，为后续的网页设计和布局打下坚实的基础。

1、CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。






CSS

body{
background-color: #EDEDED;
}
/* 标题h1样式 */
h1{
color: #333333;
text-align: center;
font-size: 20px;
}
/* 段落样式 */
p{
font-size: 15px;
color: #666666;
/* 字体 */
font-family: Verdana;
}



我的第一个CSS示例
这是一个段落

2、CSS选择器

2.1 什么是CSS选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类：

（1）简单选择器（根据名称、id、类来选取元素）

（2）组合器选择器（根据它们之间的特定关系来选取元素）

（3）伪类选择器（根据特定状态选取元素）

（4）伪元素选择器（选取元素的一部分并设置其样式）

（5）属性选择器（根据属性或属性值来选取元素）

2.2 CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

h1{
color: #333333;
text-align: center;
font-size: 20px;
}

2.3 CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

id 名称不能以数字开头






CSS

body {
background-color: #EDEDED;
}
#para1 {
text-align: left;
color: red;
}




这部分受id选择器控制

2.4 CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

类名不能以数字开头！






CSS

body {
background-color: #EDEDED;
}
p.center{
text-align:left;
color: aqua;
}
p.size {
font-size: 20px;
}




这个标题不受影响
这个段落受类选择器影响
这个段落受多个类选择器影响

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第2张

2.5 CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。






CSS

body {
background-color: #EDEDED;
}
/* 通用选择器 影响页面中的每一个元素 */
*{
color: blue;
text-align: center;
}



这个段落受通用选择器影响

2.6 CSS 分组选择器

最好对选择器进行分组，以最大程度地缩减代码。

如需对选择器进行分组，请用逗号来分隔每个选择器。






CSS

body {
background-color: #EDEDED;
}
/* 分组选择器 */
h1,h2,p{
text-align: left;
color: brown;
}



Hello
你好
段落

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第3张

3、CSS的使用

有三种插入样式表的方法：

外部 CSS
内部 CSS

行内 CSS

3.1 外部CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
每张 HTML 页面必须在 head 部分的元素内包含对外部样式表文件的引用。
外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

Document

Hello

段落内容

baseStyle.css:

h1{
text-align: center;
font-size: 20px;
color: #333333;
}
p{
text-align: left;
font-size: 15px;
color: #666666;
}

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第4张

注意：请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;

3.2 内部 CSS




body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}



This is a heading
This is a paragraph.

3.3 行内CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。

Document

Hello

段落内容

3.4 多个样式表

内部+外部+行内多种样式一起使用
最终效果为最后声明的样式

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

（1）行内样式（在 HTML 元素中）

（2）外部和内部样式表（在 head 部分）

（3）浏览器默认样式

示例一：此时h1的颜色为后声明的orange






Document


h1{
color: orange;
}



Hello
段落内容

baseStyle.css:

h1{
text-align: center;
font-size: 20px;
color: #333333;
}
p{
text-align: left;
font-size: 15px;
color: #666666;
}

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第5张

示例二：此时h1的颜色为baseStyle.css中定义的#333333






Document

h1{
color: orange;
}




Hello
段落内容

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第6张

4、CSS 背景

background-color
background-image
background-repeat
background-attachment

background-position

4.1 背景颜色： background-color

指定元素的背景色






Document

body{
background-color: orange;
/* background-color: #EDEDED; */
/* background-color: rgb(255,0,0); */
}
h1{
background-color: bisque;
}



Hello
段落内容

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第7张

4.2 背景图像：background-image

指定用作元素背景的图像。

默认情况下，background-image 属性在水平和垂直方向上都重复图像。






Document

body{
background-image: url(imgs/login_bg.png);
}



Hello
段落内容

图片资源文件为：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第8张

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第9张

4.2.2 背景重复：background-repeat

4.2.2.1 仅在水平方向上重复：background-repeat: repeat-x;






Document

body{
background-image: url(imgs/login_bg.png);
/* 仅在水平方向上重复 */
background-repeat: repeat-x;
}



Hello
段落内容

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第10张

4.2.2…2 仅在垂直方向上重复：background-repeat: repeat-y;

4.2.2.3 不重复background-repeat: no-repeat;






Document

body{
background-image: url(imgs/login_bg.png);
background-repeat: no-repeat;
}



Hello
段落内容

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第11张

4.2.3 背景图像位置：background-position






Document

body{
background-image: url(imgs/login_bg.png);
background-repeat: no-repeat;
background-position: left top;
}



Hello
段落内容

4.2.4 CSS 背景附着：background-attachment

属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

4.2.4.1 背景固定，不随页面滚动 background-attachment: fixed;

页面内容滚动，图片一直位于设置的左上角

Document body{ background-image: url(imgs/login_bg.png); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; } p{ font-size: 40px; }

Hello

段落内容1

段落内容2

段落内容3

段落内容4

段落内容5

段落内容6

段落内容7

段落内容8

段落内容9

段落内容10

段落内容11

段落内容12

段落内容13

段落内容14

段落内容15

段落内容16

段落内容17

段落内容18

段落内容19

段落内容20

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第12张

4.2.4.2 背景不固定，随页面滚动 background-attachment: scroll;

4.3 CSS background - 简写属性

按照如下顺序进行简化：

background-color
background-image
background-repeat
background-attachment

background-position

body {
background-color: orange;
background-image: url(imgs/login_bg.png);
/* 重复样式 */
background-repeat: no-repeat;
/* 是否随页面内容滚动 */
background-attachment: scroll;
/* 位置 */
background-position: left top;
}

简化为：

body{
background: orange url(imgs/login_bg.png) no-repeat fixed left top;
}

4.4 所有 CSS 背景属性

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第13张

5、CSS边框： border

5.1 边框种类

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框

hidden - 定义隐藏边框




p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}



border-style 属性
此属性规定要显示的边框类型：
点状边框。
虚线边框。
实线边框。
双线边框。
凹槽边框。
垄状边框。
3D inset 边框。
3D outset 边框。
无边框。
隐藏边框。
混合边框。

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第14张

5.2 边框宽度： border-width

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick






边框

p.one {
border-style: dotted;
border-width: 5;
}
/* 上下边框10 左右为20 */
p.two{
border-style: double;
border-width: 10px 20px;
}
/* 上右下左各不一样 */
p.three{
border-style:solid;
border-width: 10px 15px 20px 25px;
}



这个段落有边框
这个段落边框宽度不一样
这个段落边框宽度都不一样

运行效果：

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第15张

5.3 边框宽度：border-color

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”

transparent






边框

/* 四个边框相同宽度 */
p.one {
border-style: dotted;
border-width: 5;
border-color: red;
}
/* 上下边框10 左右为20 */
p.two{
border-style: double;
border-width: 10px 20px;
/* 左右为粉色 山下为蓝色 */
border-color: pink blue;
}
/* 上右下左各不一样 */
p.three{
border-style:solid;
border-width: 10px 15px 20px 25px;
border-color: pink red blue black;
}



这个段落有边框
这个段落边框宽度不一样
这个段落边框宽度都不一样

5.4 CSS 边框各边

border-top-style
border-right-style
border-bottom-style

border-left-style

p.one {
/* border-style: dotted; */
border-width: 5;
border-color: red;
/* border-color: hsl(0, 100%, 50%); */
/* border-color: rgb(255, 0, 0); */
/* border-color: #ff0000; */
/* 不同边 不同样式 */
border-top-style:dotted ;
border-right-style:double;
border-bottom-style: groove;
border-left-style: inherit;
}

简化写法：




body {
text-align: center;
}
/* 四个值 */
p.four {
border-style: dotted solid double dashed;
}
/* 三个值 */
p.three {
border-style: dotted solid double;
}
/* 两个值 */
p.two {
border-style: dotted solid;
}
/* 一个值 */
p.one {
border-style: dotted;
}



单独的边框
四种不同的边框样式。
三种不同的边框样式。
两种不同的边框样式。
一种边框样式。

5.5 CSS 简写边框属性

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）

border-color

p {
border: 5px solid red;
}

或者：

p {
border-left: 6px solid red;
background-color: lightgrey;
}

5.6 CSS 圆角边框：border-radius

5.7 所有 CSS 边框属性

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）第16张

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）

1、CSS语法

2、CSS选择器

2.1 什么是CSS选择器

2.2 CSS 元素选择器

2.3 CSS id 选择器

2.4 CSS 类选择器

2.5 CSS 通用选择器

2.6 CSS 分组选择器

3、CSS的使用

3.1 外部CSS

3.2 内部 CSS

3.3 行内CSS

3.4 多个样式表

4、CSS 背景

4.1 背景颜色： background-color

4.2 背景图像：background-image

4.2.2 背景重复：background-repeat

4.2.2.1 仅在水平方向上重复：background-repeat: repeat-x;

4.2.2…2 仅在垂直方向上重复：background-repeat: repeat-y;

4.2.2.3 不重复background-repeat: no-repeat;

4.2.3 背景图像位置：background-position

4.2.4 CSS 背景附着：background-attachment

4.2.4.1 背景固定，不随页面滚动 background-attachment: fixed;

4.2.4.2 背景不固定，随页面滚动 background-attachment: scroll;

4.3 CSS background - 简写属性

4.4 所有 CSS 背景属性

5、CSS边框： border

5.1 边框种类

5.2 边框宽度： border-width

5.3 边框宽度：border-color

5.4 CSS 边框各边

5.5 CSS 简写边框属性

5.6 CSS 圆角边框：border-radius

5.7 所有 CSS 边框属性

相关阅读

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

« 2025年7月 »
一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

CSS学习笔记之基础教程（一），CSS基础教程学习笔记（一）

1、CSS语法

我的第一个CSS示例

2、CSS选择器

2.1 什么是CSS选择器

2.2 CSS 元素选择器

2.3 CSS id 选择器

2.4 CSS 类选择器

这个标题不受影响

2.5 CSS 通用选择器

2.6 CSS 分组选择器

Hello

你好

3、CSS的使用

3.1 外部CSS

Hello

3.2 内部 CSS

This is a heading

3.3 行内CSS

Hello

3.4 多个样式表

Hello

Hello

4、CSS 背景

4.1 背景颜色： background-color

Hello

4.2 背景图像：background-image

Hello

4.2.2 背景重复：background-repeat

4.2.2.1 仅在水平方向上重复：background-repeat: repeat-x;

Hello

4.2.2…2 仅在垂直方向上重复：background-repeat: repeat-y;

4.2.2.3 不重复background-repeat: no-repeat;

Hello

4.2.3 背景图像位置：background-position

Hello

4.2.4 CSS 背景附着：background-attachment

4.2.4.1 背景固定，不随页面滚动 background-attachment: fixed;

Hello

4.2.4.2 背景不固定，随页面滚动 background-attachment: scroll;

4.3 CSS background - 简写属性

4.4 所有 CSS 背景属性

5、CSS边框： border

5.1 边框种类

border-style 属性

5.2 边框宽度： border-width

5.3 边框宽度 ：border-color

5.4 CSS 边框各边

单独的边框

5.5 CSS 简写边框属性

5.6 CSS 圆角边框 ：border-radius

5.7 所有 CSS 边框属性

相关阅读

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

5.3 边框宽度：border-color

5.6 CSS 圆角边框：border-radius