🌱博客主页：大寄一场.

🌱系列专栏：

概念

background-color ( 背景颜色 )

background-image (背景图片)

background-repeat (控制背景平铺)

background-size (控制背景图片大小)

文本相关属性

text-indent ( 缩进文本 )

text-align ( 文本对齐方式 )

概念

CSS是：层叠样式表，作用是将HTML组件，的内容和样式分开，由HTML标签定义显示内容，由CSS 定义显示样式。

css定义语法：

/*
CSS语法：
选择器 {
样式属性: 属性值;
[样式属性: 属性值;]
...
}
*/
p {
background-color: lightblue;
}

引入方式

1- 内部（内联）样式表

内部（内联）样式表：在页面中使用<style>标签定义样式信息

作用域：本页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p {
                 background-color: lightblue;
              }
        </style>
    </head>
    <body>
        <p> 段落文本1 </p>
        <p> 段落文本2 </p>
        <div> div 文本</div>
    </body>
</html>

2- 行内样式（嵌入样式）

行内样式（嵌入样式）：在标签中指定style属性，从而指定标签的样式

作用域：本标签

<p style="color:red;"> 段落文本1 </p>

3- 外部样式

外部样式：在页面面引入外部定义的*.css文件

作用域：所有引入了css文件的页面

<head>
    <link rel="stylesheet" href="./css/main.css" />
</head>

以上三种引入样式优先级：就近原则。

如果样式有冲突，谁的设置离标签越近，则生效越优先，没有样式则会叠加（层叠的意义）

常用CSS选择器：

CSS样式选择方式，决定了CSS属性样式为谁（标签组件）设定

1- 元素（标签）名选择器：

元素（标签）名选择器：使用标签名称作为选择

p, div {
        background-color: lightblue;
        }

2- 类别选择器：

类别选择器： .类别的格式进行选择

/*类别选择器，选择： 指定了标签的class属性 */
.even {
background-color: lightblue;
}
.odd{
background-color: lightgray;
}

3-ID选择器

ID选择器：#ID值的格式进行选择

/* id选择器，选择： 指定了标签的id属性 优先于别的选择器*/
#div4 {
background-color: red;
}

4- 包含关系选择器

包含关系选择器：根据元素的关系进行选择

/* 包含关系： 设定div 包含的 span标签的样式 */
div span{
color: red;
}

5- 子元素选择器

子元素选择器：指定子元素的选择器

/* 直接子元素关系 */
div > span{
color: blue;
}

6- 属性选择器

/* 属性选择器 */
/* 含有name属性的 */
[name] {
background-color: red;
}
/* 选择name属性='input2'的 */
[name='input2'] {
background-color: red;
}
/* 选择那么属性值包含3字符的 */
[name*='3'] {
background-color: red;
}

7- 伪类选择器

伪类选择器：元素自带的状态类型

/* 当鼠标在input组件上悬停时样式 */
input:hover{
background-color: blue;
}
/* 当input组件得到焦点时样式 */
input:focus{
background-color: green;
}

CSS三大特性

层叠性

层叠性是指当一个标签被设置了多个重复的样式时，一个属性会覆盖另外一个属性。
主要遵循的原则是就近原则，在不考虑优先级情况下，在多个样式中最终生效的样式是离标签最近的样式。
注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会进行合并。

继承性

继承性是指当子标签没有设置样式时，会继承父标签的样式。
比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。
可继承的属性：字体系列属性（字体系列、字体颜色、字体大小、字体粗细、字体风等...）、文本系列属性（文本缩进、文本水平对齐、行高、字间隔、字符间距、文本颜色[a元素除外]等...）
注意：子标签不会继承父标签的宽度、高度、边距属性

优先级

! important 关键字 > 行内样式 (元素自身style设置属性) > id选择器 > 伪类选择器 > 类选择器 (class) >

标签名选择器 > 通配符选择器 > 继承的样式。(按照从左到右的顺序，优先级是从高到低)

优先级高的规则会忽视层叠性，忽视就近原则去定义样式。比如定义!important，即使行内样式离得近，最终生效的还是! important 标注的属性。

单位基础

尺寸

%：百分比是元素相对于父元素在对应尺寸上的百分比值

px：px (pixel,像素)是一个相对单位，相对的是设备像素(device pixel)。通过设备像素比可以获取1px 在设备上真实的使用的设备像素。

颜色

(颜色名) 颜色名称 (比如： red、blue、pink)

rgb(red, green, blue) rgb颜色函数，此函数接受以下所述的三个参数：

red:此参数用于定义红色的强度。它是介于0到255之间的整数值，或者是介于0％到100％之间的百分

比值。

green:此参数用于定义绿色的强度。它是介于0到255之间的整数值，或者是介于0％到100％之间的百

分比值。

blue:此参数用于定义蓝色的强度。它是介于0到255之间的整数值，或者是介于0％到100％之间的百分

比值。

rgba(red, green, blue，alpha) rgba颜色函数是 rgb 颜色值的扩展，此函数接受以下所述的四个参数：

RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

red:此参数用于定义红色的强度。它是介于0到255之间的整数值。

green:此参数用于定义绿色的强度。它是介于0到255之间的整数值。

blue:此参数用于定义蓝色的强度。它是介于0到255之间的整数值。

alpha：此参数用于定义颜色的不透明度。它介于0到1之间（0为完全透明1为完全不透明）。

十六进制值颜色 十六进制值其实就是将rgb函数中，red、green、blue 0到255的取值转化为00到FF。例

#ff00ee。

.box {
color: #00aaee;
}

注意：若十六进颜色r、g、b的值全都两位相等则可以进行缩写：例 #ff00aa 可缩写为 #f0a；#ffffff

可缩写为 #fff。

常用属性

盒子模型：每个元素都有的模型结构

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS

basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及

属性（例如颜色、背景、边框尺寸…）。

每个盒子由四个部分：边距（margin），边框（border），填充（padding），和实际内容（content）

我们可以通过浏览器的开发者工具观察页面的元素，会发现每个元素都是一个盒子

编辑

内容 content

概念：由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内

容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认

颜色为透明）或背景图像。

如果 box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、

max-width、height、min-height，和 max-height 控制。

内边距 padding

概念：由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它

的尺寸是 padding-box 宽度和 padding-box 高度。

内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性

padding 控制。

div {
padding: 5px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}

外边距 margin

由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度和

margin-box 高度。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性

margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚

div {
margin: 5px ;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
}

边框 border

概念：由外边距边界限制，内间距外部区域，是容纳边框的区域。

边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，

那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max

height 属性控制。

假如盒子上设有背景（background-color 或 background-image），背景颜色将会一直延伸至边框的

外沿，背景图片在边框的内沿。此默认表现可通过 CSS 属性 background-clip 来改变。

div {
/* border: 5px solid black; */
border-top: 5px solid black;
border-bottom: 5px solid black;
border-left: 5px solid black;
border-right: 5px solid black;
}

display

概念：display 属性可以设置元素的内部和外部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型可以控制其子元素的布局（例如：grid 或 flex）。

1. 【块级元素】block 元素生成一个块元素作用域，在正常流中生成元素前后的换行符（独占一行）。可

以设置 width、 height、 margin 和 padding 属性。

2. 【行内元素】inline 该元素是个内联元素，这些元素不会在其前后生成换行符（不会独占一行）。在正常流中，如果有空间，下一个元素将位于同一行上。设置width,height属性无效。内联元素的margin属性只在水平方向会生效而padding（除了padding-top）都会生效。

3. 【行内块元素】inline-block 元素生成一个行内块元素。它将与周围的内容一起流动，元素不再独占一行但元素具有block的属性，可设置width、 height、 margin 和 padding 属性。

请注意，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）

则由 line-height 属性决定，即使边框和内边距仍会显示在内容周围。

元素分类：

1- 块级元素(block)：自动占满一行，可以设定其大小

例如：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、table、header、section、footer

2- 行内元素(inline)：不会充满一行，宽度由内容多少决定，高度由字体大小决定，不能设定其大小；

例如：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q （短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

3- 行内块级元素（inline-block): 不会占满一行，而且可以设定其大小；

例如：img 、input 、td

可以通过 display属性设置一个元素的分类；

原则：块级元素可以包含行内元素，而行内元素不能包含块级元素；

div {
/* inline、blick、inline-block、none */
display: inline-block;
width: 200px;
height: 200px;
}

CSS背景样式属性

background-color ( 背景颜色 )

属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的 <color> 值。背景色扩展到元素的内容和内边距的中 。

div {
background-color: red;
}
div {
background-color: rgb(0, 160, 220);
}
div {
background-color: rgba(0, 160, 220, 0.6);
}
div {
background-color: #FFCC00;
}
div {
background-color: #FC0;
}

background-image (背景图片)

通过 background-image 属性允许在元素的背景中显示图像。

默认情况下，大图不会缩小以适应元素，因此我们只能看到它的一部分，而小图则是平铺以填充方框。

背景颜色和背景图片可以同时设置，背景图片会在背景颜色上方

.box {
background-image: url(balloons.jpg);
}

background-repeat (控制背景平铺)

使用 background-repeat 属性可以控制图像的平铺行为

.box {
background-image: url(balloons.jpg);
background-repeat: no-repeat | repeat-x | repeat-y | repeat;
}

no-repeat：不重复平铺图片。
repeat-x：水平重复平铺图片。
repeat-y：垂直重复平铺图片。
repeat (默认)：在两个方向重复平铺图片。

background-size (控制背景图片大小)

通过 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景.

.box {
background-image: url(balloons.jpg);
background-size: <width> <height> | cover | contain;
}

<width> <height> 分别设置图片的宽度高度可以是长度或百分比值，如果只设置一个值该值将会设
置图片宽度，高度按图片比例进行缩放。
cover: 保证宽高比的情况下放大图片占满盒子区域。在这种情况下，有些图像可能会跳出盒子外。
contain: 保证宽高比的情况下适应盒子区域。在这种情况下，有些可能在图像的任何一边或顶部和底部出现间隙。

文本相关属性

介绍：在 CSS 中可以通过设置文本属性定义文本的外观。如：改变文本的颜色、字符间距，对齐文本，装饰

文本，对文本进行缩进，等等。

text-indent ( 缩进文本 )

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {
text-indent: 5em;
}

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换

元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随

该行的其余文本移动。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

text-align ( 文本对齐方式 )

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。

p {
text-align: center;
}

left(默认)：把文本排列到左边。
right：把文本排列到右边。
center：把文本排列到中间。
justify：实现两端对齐文本效果。（常用于打印输出）
inherit：规定应该从父元素继承 text-align 属性的值。

color ( 文本颜色 )

这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）

p {
color: #fc0
}

color_name：规定颜色值为颜色名称的颜色（比如 red）。
hex_number：规定颜色值为十六进制值的颜色（比如 #ff0000）。
rgb_number：规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
hsl_number：规定颜色值为 rgb 代码的颜色（比如 hsl(180,100%,50%)）。
inherit：规定应该从父元素继承颜色。

line-height (行高)

该属性设置行间的距离（行高）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中

基线之间的最小距离而不是最大距离。不允许使用负值。

编辑

.small {
line-height:90%
}

normal(默认)：设置合理的行间距。
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length：设置固定的行间距。
%：基于当前字体尺寸的百分比行间距。
inherit：规定应该从父元素继承 line-height 属性的值。

字体相关

font-family ( 字体系列 )

font-family 规定元素的字体系列。

p {
font-family:"Times New Roman",Georgia,Serif;
}

有两种类型的字体系列名称：

指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。

通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”

字体优雅降级:

使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示

任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。

当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。

例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字

体，那么可以这样写：

p {
font-family: Helvetica, sans-serif;
}

通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。

font-style ( 字体风格 )

font-style 属性定义字体的风格,设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体

p.normal {
font-style:normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

normal (默认):浏览器显示一个标准的字体样式。
italic：浏览器会显示一个斜体的字体样式。
oblique：浏览器会显示一个倾斜的字体样式。

inherit：规定应该从父元素继承字体样式。

注意：Italic是使用了文字本身的斜体字体，oblique是让没有斜体字体的文字做倾斜处理。所以有少量

的不常用字体没有斜体属性，如果我们使用Italic则会没有效果。

font-weight ( 字体加粗 )

font-weight 属性设置文本的粗细。该属性用于设置显示元素的文本中所用的字体加粗。

p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}

normal(默认值)：定义标准的字符。
bold：定义粗体字符。
bolder：定义更粗的字符。
lighter：定义更细的字符。
100~900：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。(该属性值只有整百)
inherit：规定应该从父元素继承字体的粗细。

字体粗细属性是根据用户电脑上安装的字体相应匹配改变的。在很多情况下，由于系统作了最相近的

匹配，因此看不出不同的 font-weight 值有什么区别

font-size ( 字体大小 )

该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框

高或矮（通常会矮）。

h1 {
font-size: 250%;
}
h2 {
font-size: 2rem;
}
p {
font-size: 18px;
}

length：把 font-size 设置为一个固定的值。
%：把 font-size 设置为基于父元素的一个百分比值。

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML+CSS+JS 学习笔记（二）———CSS

概念

引入方式

1- 内部（内联）样式表

2- 行内样式（嵌入样式）

3- 外部样式

常用CSS选择器：

1- 元素（标签）名选择器：

2- 类别选择器：

3-ID选择器

4- 包含关系选择器

5- 子元素选择器

6- 属性选择器

7- 伪类选择器

CSS三大特性

层叠性

继承性

优先级

单位基础

尺寸

颜色

常用属性

内容 content

内边距 padding

外边距 margin

边框 border

display

元素分类：

CSS背景样式属性

background-color ( 背景颜色 )

background-image (背景图片)

background-repeat (控制背景平铺)

background-size (控制背景图片大小)

文本相关属性

text-indent ( 缩进文本 )

text-align ( 文本对齐方式 )

color ( 文本颜色 )

line-height (行高)

字体相关

font-family ( 字体系列 )

font-style ( 字体风格 )

font-weight ( 字体加粗 )

font-size ( 字体大小 )

热门文章

最新文章

相关课程

相关电子书

相关实验场景