CSS入门学习 —（全基础合集）

最新推荐文章于 2024-05-30 08:41:06 发布

lerrel1

最新推荐文章于 2024-05-30 08:41:06 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/lerrel1/article/details/131974883

版权

CSS基础

一. CSS概述

CSS ( Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式，字体，间距和颜色等的计算机语言，CSS 文件扩展名为 .css。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS 指层叠样式表 (Cascading Style Sheets)；

样式定义如何显示 HTML 元素；
样式通常存储在样式表中；
把样式添加到 HTML 中，是为了解决内容与表现分离的问题；
外部样式表可以极大提高工作效率；
外部样式表通常存储在 CSS 文件中；
多个样式定义可层叠为一个；

二. CSS引入规则

2.1 CSS语法

CSS 规则由两个主要的部分构成：选择器[核心]，以及一条或多条声明[规则]：

选择器通常是您需要改变样式的HTML元素(我们可以通过各种选择器灵性的选择页面的各种元素)。
每条样式声明由一个属性[样式属性]和一个值[样式值]组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明总以大括号({})括起来。

注：为了让CSS可读性更强，你可以每行只描述一个属性.

2.2 三种CSS样式引入规则

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

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

内联样式(Inline style)

行内样式(内联样式)引入规则：样式写在标签的style属性中行内样式的语法规则:
该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内样式。

其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用(部分样式)。

注：行内式也是通过标记的属性来控制样式的，由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种

方法。只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。

行内样式的语法规则:

<div style="font-size: 30px; color: brown;">孙悟空</div>

内部样式表(Internal style sheet)

内嵌[内部]样式引入规则：样式放在head或body标签的style标签中:
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用style标签在文档头部定义内部样式表；

**注：**内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。

但如果在一个网站，不建议使用这中方式，因为它不能充分发挥CSS代码的重用优势。

内嵌样式的语法规则:

<head>
    <style>
        p {
            font-size: 50px;
            color: blue;
        }
    </style>
</head>
<body>
    <p>猪八戒</p>
</body>

外部样式表(External style sheet)

外部样式[链入式]引入规则：一个单独的样式文件,存放我们的样式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过like标记将外部样式表文件链接到HTML文档中。

注：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个

站点的外观。每个页面使用 link标签链接到样式表。link标签在文档的头部。

链入式的语法规则:

<head>
    <like href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>

该语法中， link标记需要放在head头部标记中，并且必须指定 link 标记的三个属性。如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要制定为”text/css“，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件。

注：不要在属性值与单位之间留有空格

样式引入优先级

一般情况下，优先级如下：

内联样式（Inline style） >内部样式（Internal style sheet） =外部样式（External style sheet）> 浏览器默认样式

浏览器从上往下读取数据，所以内部样式和外部样式谁更靠下，谁优先级高（就近原则）

2.3 CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束。

  /* p {
            font-size: 50px;
            color: blue;
        } */

三. 基本选择器

3.1 元素选择器

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

 p {
      font-size: 50px;
      color: blue;
 }

3.2 id选择器

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

  #book1{
       text-align: center;
       color: blue;
  }
  #book2{
       text-align: left;
       color: blueviolet;
  }
 <p id="book1">西游记</p>
 <p id="book2">红楼梦</p>

3.3 类选择器

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

.center{
     text-align: right;
     color: yellowgreen;
}
 <div class="center">水浒传</div>

你还可以指定只有特定的 HTML 元素会受类的影响。

div.center{
        text-align: right;
        color: yellowgreen;
}
<div class="center">水浒传</div>
<div class="center">三国演义</div>

HTML 元素也可以引用多个类。

 .center{
     font-size: 50px;
 }
.large{
     color: yellowgreen;
 }
  <p class="center large">lianggelei</p>

3.4 通用选择器

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

 *{
   text-align: center;
   color: aquamarine;
  }

3.5 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

 p,div{
     text-align: center;
     color: violet;
}

四. 组合选择符

4.1 后代选择器

后代选择器用于选取某元素的后代元素。

 div p{
     color: brown;
 }
 <div>
      <p>擎天柱</p>
 </div>

4.2 子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

 div>p{
     color: brown;
 }
 <div>
       <p>擎天柱</p>（可以选择）
 </div>
 <div>
       <span><p>红蜘蛛</p></span>（不可以选择）
 </div>

4.3 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

div+p{
     color: brown;
 }
 <div>
        <p>擎天柱</p>（不可以选择）
 </div>
 <p>救护车</p>（可以选择）
 <p>大黄蜂</p>（不可以选择）

4.4 后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。

div~p{
     color: brown;
 }
 <div>
        <p>擎天柱</p>（不可以选择）
 </div>
 <p>救护车</p>（可以选择）
 <p>大黄蜂</p>（可以选择）

五. 属性选择器

5.1 [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

 a[target] {
      background-color: red;
 }
 <a href="https://www.baidu.com" target>百度</a>（选择）
 <a href="https://www.taobao.com" target>淘宝</a>（选择）
 <a href="https://www.jd.com">京东</a>（不选择）

5.2 [attribute=“value”]选择器

[attribute=“value”] 选择器用于选取带有指定属性和值的元素。

 a[target="_blank"] {
      background-color: red;
 }
  <a href="https://www.baidu.com" target="_blank">百度</a>（选择）
  <a href="https://www.taobao.com" target="_top">淘宝</a>（不选择）
  <a href="https://www.jd.com">京东</a>（不选择）

5.3 设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

 input[name="username"]{
            width: 200px;
            margin-bottom: 10px;
            background-color: green;
 }
 input[type="submit"]{
            width: 50px;
            margin-left: 50px;
            display: block;
 }
 <input type="text" name="username">
 <input type="submit">

六. CSS三大机制

6.1 CSS样式来源

CSS中的样式一共有三种来源：创作人员、读者和用户代理（浏览器）
权重排序：

（1）创作人员的样式 > 读者人员的样式 > 用户代理的默认样式

（2）标记为重要声明（!important）的读者样式 > 一切样式

6.2 CSS三大机制

CSS的三大机制是：特殊性[冲突]、继承、层叠。样式最终的呈现由层叠机制决定，但层叠与特殊性、继承又有关系。

6.2.1 特殊性

所谓的特殊性，其实是CSS样式一种计算声明权重的规则。

选择器类型：

ID	#id
class	.class
标签p
通用	*****
属性	[type=“text”]
伪类	:hover
伪元素	::first-line
子选择器，相邻选择器

权重计算规则:

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

继承的样式没有权值

注意：!important，权值为10000

重要性！important:有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志。

6.2.2 继承

CSS还有一个继承机制，即样式不仅会应用到指定的样式，而且会应用到其后代的元素。

继承的机制需要注意的点:

并不是所有的属性都可以继承，一般情况下，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承。

能被继承的属性大多数是和内容相关的

6.2.3 层叠

文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠;

七. 文本

7.1 文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 red
十六进制值 - 每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。写法为 # 号后跟三个或六个十六进制字符。
RGB 值 - 比如 rgb(255, 0, 0) 每个参数定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到100%）

7.2 文本对齐

text-align 属性用于设置文本的水平对齐方式

text-align: center;（居中对齐）
text-align: left;  （居左对齐）
text-align: right; （居右对齐）
text-align: justify;（拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的）

7.3 垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

vertical-align常用属性值

baseline：默认值，元素放置在父元素的基线上。
top：把元素的顶端与行中最高元素的顶端对齐；
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。

vertical-align: top;     （顶端对齐）
vertical-align: middle;  （中部对齐）
vertical-align: bottom;  （底部对齐）
vertical-align: baseline;（基线对齐）

7.4 文本装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none;        （删除下划线）
text-decoration: overline;    （上划线）
text-decoration: line-through;（删除线）
text-decoration: underline;   （下划线）

7.5 文本缩进

text-indent 属性用于指定文本第一行的缩进。

text-indent: 2em;（缩进两个字体长度）

7.6 字符间距

letter-spacing 属性用于指定文本中字符之间的间距。

letter-spacing: 12px;（字符间有12像素的间距）

7.7 文本阴影

text-shadow 属性为文本添加阴影。

text-shadow: 2px（水平阴影）2px（垂直阴影）5px（模糊效果）red;（向阴影添加颜色）

八. 字体

8.1 font-family属性

font-family 属性应包含多个字体名称作为备用字体，以确保浏览器/操作系统之间的最大兼容性。字体名称应以逗号分隔。

注：如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。

8.2 字体样式

font-style 属性主要用于指定斜体文本。

font-style: normal; （文本正常显示）
font-style: italic; （文本以斜体显示）

8.3 字体粗细

font-weight 属性指定字体的粗细。

font-weight: normal;（文本正常显示）
font-weight: bold;  （文本加粗显示）

8.4 字体大小

font-size 属性设置文本的大小。

font-size 值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小
不允许用户在所有浏览器设置中更改文本大小（可访问性不佳）
当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

注：如果未指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小：
如果你使用了像素，则仍然可以使用缩放工具来调整整个页面的大小。（但文本大小不会随着页面大小改变而改变）

以em设置字体大小

W3C 建议使用 em 尺寸单位。
1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”。

这样，文本大小将遵循浏览器窗口的大小。当调整浏览器窗口的大小时，字体大小将会缩放。

注：视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。

九. 盒子模型

9.1 盒模型概述

CSS 盒模型实质上是一个包围每个 HTML 元素的盒子。它包括：外边距、边框、内边距以及实际的内容。

对不同部分的说明：

内容 - 盒的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。

盒模型允许我们在元素周围添加边框，并定义元素之间的空间。

注：可以通过将元素的margin 和 padding 设置为零来覆盖这些浏览器样式。也可以使用通用选择器对所有元素进行设置：

* {
   margin: 0;
   padding: 0;
}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，

但是会增加元素框的总尺寸。

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
外边距可以是负值，而且在很多情况下都要使用负值的外边距。

9.2 宽度和高度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

auto - 浏览器计算高度和宽度（默认）
length - 以 px、cm 等定义高度/宽度
% - 以包含块的百分比定义高度/宽度

 /* .box{
            height: 200px;   （高度固定，但宽度会随着窗口变化而变化）
            width: 50%;
            background-color: powderblue;
        } */

 /* .box{
            height: 100px;  （高度和宽度固定，不会随窗口变化而变化）
            width: 500px;
            background-color: powderblue;
        } */

9.3 内边距

padding 属性用于在任何定义的边界内的元素内容周围生成空间。

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top （上内边距）
padding-right （右内边距）
padding-bottom （下内边距）
padding-left （左内边距）

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距

注：不允许负值

    .box{
            padding-top: 50px;
            padding-right: 30px;
            padding-bottom: 10px;
            padding-left: 80px;
            color: white;
            background-color: red;
            display: inline-block;
        }

为了缩减代码，可以在一个属性中指定多个内边距属性。

padding: 25px 50px 75px 100px; ：上内边距是 25px；右内边距是 50px；下内边距是75px；左内边距是100px。
padding: 25px 50px 75px; ：上内边距是 25px；右和左内边距是 50px；下内边距是75px。
padding: 25px 50px; ：上和下内边距是 25px；右和左内边距是 50px。
padding: 25px; ：四个内边距都是 25px。

 /* .box{
            padding: 25px 50px 75px 100px;（上内边距是25px，右内边距是50px，下内边距是75px，左内边距是100px）
            display: inline-block;
        } */
        /* .box{
            padding: 25px 50px 75px;（上内边距是25px，左右内边距是50px，下内边距是75px）
            display: inline-block;
        } */
        /* .box{
            padding: 25px 50px;（上下内边距是25px，左右内边距是50px）
            display: inline-block;
        } */
        /* .box{
            padding: 25px;（四个内边距都是25px）
            display: inline-block;
        } */

如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。
若要将宽度保持为设定值，无论填充量如何，那么你可以使用 box-sizing: border-box; 属性。

这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。

IE盒子模型的范围包括margin、border、padding、content,不同的是，IE盒子模型的content部分包含了padding和border.

（box-sizing: border-box;）

.box{
     width: 300px;
     height: 300px;
     padding: 30px;
     margin: 30px;
     box-sizing: border-box;
     color: aliceblue;
     background-color: red;
     display: inline-block;
    }

9.4 边框

border 属性允许你指定元素边框的样式、宽度和颜色。

边框类型

border-style 属性指定要显示的边框类型。

 /*（点状边框） */
/* border-style: dotted; */

/* （虚线边框） */
/* border-style: dashed; */

/* （实线边框） */
/* border-style: solid;   */

/* （双线边框） */
/* border-style: double;   */

/* （无边框） */
/* border-style: none; */  

/* （混合边框） */
/* border-style: dotted dashed solid double;   */

边框宽度

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

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

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

.box {
border-style: solid;
border-width: 5px 20px; /* 上边框和下边框为 5px，左右边框为 20px */
}
.box {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

边框颜色

border-color 属性用于设置四个边框的颜色。

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

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

9.5 外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top （上外边距）

margin-right （右外边距）

margin-bottom（下外边距）

margin-left （左外边距）

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距

注：允许负值

为了缩减代码，可以在一个属性中指定多个外边距属性。

margin: 25px 50px 75px 100px; ：上外边距是 25px；右外边距是 50px；下外边距是 75px；左外边距是 100px。
margin: 25px 50px 75px; ：上外边距是 25px；右和左外边距是 50px；下外边距是 75px。
margin: 25px 50px; ：上和下外边距是25px；右和左外边距是 50px。
margin: 25px; ：四个外边距都是 25px。

你可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配

9.6 外边距合并

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

**注：**只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内元素、浮动元素或绝对定位之间的外边距不会合并。

9.7 BFC—块级格式化上下文

将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。

实现BFC属性的方法

浮动元素，float 除 none 以外的值
定位元素，position的值不是static或者relative。
display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、

table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inlinegrid

overflow 除了 visible 以外的值（hidden，auto，scroll）
根元素<html> 就是一个 BFC

BFC的作用

1、避免外边距重叠（防止margin塌陷）

margin塌陷的意思：给两个div设置相同的属性，那么两个div之间的间隙应该是margin-bottom+margin-top的外边距，但是没有设置BFC属性，块的上外边距和下外边距会合并为单个边距，取最大值，如果margin相等则仅为一个，这就是外边距重叠（margin塌陷）。

     /* .box{
            overflow: hidden;
        } */
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            margin-bottom: 50px;
            /* (display: inline-block;)  */     
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-top: 30px;
        }
        
        
 <div class="box">
        <div class="box1"></div>
</div> 
        <div class="box2"></div>

2、用于清除浮动

当给一个父元素设置边框，内部元素会将父元素撑起来，但是如果内部元素设置了 float属性，则该父元素会失去支撑，

从而没有高度。设置了浮动属性的子元素，父元素失去支撑。通过给父元素设置BFC属性，来实现清除浮动

 .parent{
     border: 5px solid red;
     overflow: hidden;
        }
    .son{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        float: left;
        }
        
   <div class="parent">
        <div class="son"></div>
   </div>

3、阻止元素被浮动元素覆盖

当前一个兄弟元素设置了浮动属性时，后一个兄弟元素会跑到前一个兄弟元素的位置去，从而后一个兄弟元素被覆盖。

通过给被影响的兄弟元素设置BFC属性，来解决被覆盖的情况

 .box1 {
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;
        }
.box2 {
            width: 400px;
            height: 400px;
            background-color: green;
            overflow: hidden;
        }
        
    <div class="box1"></div>
    <div class="box2"></div>

9.8 解决外边距塌陷

满足以下条件就会产生外边距塌陷现象：

子元素在父元素里面
子元素中有margin-top或者margin-bottom值

解决方案：

第一种：给父元素增加内边距padding值
第二种方式：父元素增加边框border值
第三种方式：父元素增加overflow：hidden
第四种方式：给父元素或者子元素增加浮动，让其脱离标准流都可以
第五种：将父元素转变为行内块元素，display：inline-block
第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位
第七种：给父盒子增加flex或者inline-flex

十. 定位

10.1 position属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static
relative
fixed
absolute
sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根

据不同的 position 值，它们的工作方式也不同。

10.2 position：static；

HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

 .box1{
            position: sticky;
            top: 100px; （不起作用）
            left: 100px;（不起作用）
            background-color: red;
            border: 1px solid red;
        }

10.3 position：relative；

position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。
不会对其余内容进行调整来适应元素留下的任何空间。

.box1 {
            position: relative;
            left: 300px;
            top：300px
            border: 1px solid red;
            background-color: red;
            width: 300px;
            height: 300px;
        }

10.4 position：absolute；

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位）。
如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

   .father{
            position: relative;
            left: 300px;
            top：300px
            border: 1px solid red;
            background-color: red;
            width: 300px;
            height: 300px;
          }

    .son{
           /*相对于父元素的位置而移动*/
           border: 1px solid orange;          
           position: absolute;
           left: 100px;
           top: 100px;
           background-color: orange;
           width: 100px;
           height: 100px;
         }

10.5 position：fixed；

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。（固定定位）
top、right、bottom 和left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。

 .box1{
           /*位置不会随着页面滚动而发生改变*/
            position: fixed;          
            top: 100px;
            left: 100px;
            background-color: red;
            border: 1px solid red;
        }

10.6 position：sticky；

position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对和固定之间切换。起先它会被相对定位，

直到在视口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置。

.box1{
            position: sticky;
            top: 0;
            background-color: red;
            border: 1px solid red;
        }

10.7 重叠元素

在对元素进行定位时，它们可以与其他元素重叠。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面，谁大谁在上面）。
元素可以设置正或负的堆叠顺序。

 /* 重叠元素 */
   .box1{
            position: absolute;
            border: 1px solid red;
            background-color: red;
            width: 300px;
            height: 300px;
            z-index: 1;
        }
  .box2{
            position: absolute;
            border: 1px solid orange;
            background-color: orange;
            width: 100px;
            height: 100px;
            z-index: 0;
        }

重叠元素案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* *{
            margin: 0;
            padding: 0;
        } */
        .box{ position: relative;
              width: 640px;
              height: 274px;
        }
        .box p{
            position: absolute;
            box-sizing: border-box;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgb(0, 0, 0,0.3);
            color: white;
            padding: 5px 10px;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/img.jpg" alt="斗破苍穹">
        <p>斗破苍穹第三季官宣：新版纳兰嫣然被点赞</p>
    </div>
</body>
</html>

十一. 背景图像

background-image 属性指定用作元素背景的图像。

注：使用背景图像时，请使用不会干扰文本的图像。

 div{
       background-image: url(img/paper.jpg);
       width: 700px;
       height: 500px;
    }

11.1 背景重复

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

水平重复背景图像： background-repeat: repeat-x;

垂直重复背景图像： background-repeat: repeat-y;

不重复背景图像：background-repeat: no-repeat;

11.2 背景位置

background-position 属性用于指定背景图像的位置。

 div{
       background-image: url(img/paper.jpg);
       width: 700px;
       height: 500px;
       background-possition：right top;
    }

11.3 简写背景属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

div {             /*颜色*/     /*图片位置*/        /*背景重复*/ /*背景位置*/
      background: #ececec url("objective_bg.png") no-repeat right top;
    }

11.4 图像精灵

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽。

图像精灵示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div a{
            display: inline-block;
            width: 44px;
            height: 44px;
            background-image: url(img/navsprites_hover.gif);
        }
        .home{
            background-position: 0 0; 
        }
        .next{
            background-position: -45px 0px;
        }
        .prev{
            background-position: -90px 0px;
        }
        .home:hover{
            background-position: 0 -45px;
        }
        .next:hover{
            background-position: -45px -45px;
        }
        .prev:hover{
            background-position: -90px -45px;
        }
    </style>
</head>
<body>
    <div>
        <a class="home" href="#"></a>
        <a class="next" href="#"></a>
        <a class="prev" href="#"></a>
    </div>
</body>
</html>

十二. 浮动和清除

12.1 float属性

float 属性用于定位和格式化内容，

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（默认值）

12.2 clear属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素（默认值）
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。

您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

12.3 clearfix

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

我们可以向包含元素添加 overflow: auto; ，来解决此问题：

12.4 浮动实例

导航菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            background-color: gray;
            height: 50px;
            text-align: center;
            line-height: 50px;
            padding-left: 0;
        }

        ul li a {
            text-decoration: none;
            color: white;
            float: left;
            width: 100px;
        }

        a:hover {
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="https://www.baidu.com  ">网站首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">新闻中心</a></li>
        <li><a href="#">产品中心</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

</html>

Web布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header{
            background-color: gray;
            color: white;
            padding: 10px 10px;
        }
        main nav ul{
            list-style: none;
            float: left;
            width: 15%;
            margin-right: 50px;
        }
        main  nav ul li{
            background-color: skyblue;
            padding: 15px 6px;
            margin: 10px;
            color: white;
            
        }
        main section{
            width: 60%;
            float: left;
        }
        footer{
            clear: both;
            background-color: gray;
            color: white;
            padding: 40px 40px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <header>
        <h1>北京市</h1>
    </header>
    <main>
        <nav>
            <ul>
                <li>历史沿革</li>
                <li>行政区划</li>
                <li>地理环境</li>
                <li>自然资源</li>
            </ul>
        </nav>
        <section>
            <h2>简介</h2>
            <p>北京（Beijing），简称“京”，古称燕京、北平，是中华人民共和国的首都、直辖市、国家中
                心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新
                中心，截至2020年，全市下辖16个区，总面积16410.54平方千米。2021年末，北京市常住
                人口2188.6万人，比上年末减少0.4万人。2021年，北京市全年实现地区生产总值40269.6亿
                元，按不变价格计算，比上年增长8.5％。全市人均地区生产总值为18.4万元。</p>
        </section>
    </main>
    <footer>
        百度百科
    </footer>
</body>
</html>

12.5 CSS清除浮动影响的方式

（1）给父级元素单独定义高度（height）

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用

（2）在标签结尾处(前)加空div标签clear:both

原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/*父元素定义after伪元素清除浮动*/
        .box{
            border: 2px solid rebeccapurple;
            width: 500px;
        }
        .box::after{
            content: "";
            clear: both;
            display: block;
            visibility: hidden;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }
        .box3{
            width: 500px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="box3">box3</div>
</body>
</html>

（3）父级div定义伪元素:after和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。

（4）父级div定义overflow:hidden

原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

（5）父级div定义overflow:auto

原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

圣杯布局和双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            padding: 0 100px;
            border: 1px solid red;
            overflow: hidden;
        }

        .left,.right {
            width: 100px;
            height: 200px;
        }

        .center {
            height: 500px;
            background-color: skyblue;
            float: left;
            width: 100%;
        }

        .left {
            background-color: red;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }

        .right {
            background-color: green;
            float: left;
            margin-left: -100px;
            position: relative;
            right: -100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="center">中间内容，宽度自适应改变</div>
        <div class="left">左侧内容</div>
        <div class="right">右侧内容</div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .container {
            border: 1px solid red;
            overflow: hidden;
        }

        .left,.right {
            width: 100px;
            height: 200px;
        }

        .left {
            background-color: red;
            float: left;
            margin-left: -100%;
        }

        .right {
            background-color: green;
            float: left;
            margin-left: -100px;
        }
        .center{
            float: left;
            width: 100%;
        }
        .inner{
            margin: 0 100px;
            background-color: skyblue;
            height: 500px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="center">
            <div class="inner">中间内容，宽度自适应改变</div>
        </div>
        <div class="left">左侧内容</div>
        <div class="right">右侧内容</div>
    </div>
</body>

</html>

十三. css对齐方式

13.1 元素居中对齐

要水平居中对齐一个元素, 可以使用 margin: auto;或margin:0 auto。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

13.2 文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

.center {
    text-align: center;
    border: 3px solid green;
}

13.3 左右对齐-使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

提示:当使用 position 来对齐元素时, 通常元素会设置 margin 和 padding 。

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

13.4 左右对齐-使用浮动方式

我们也可以使用 float 属性来对齐元素:

.right {
   float: right;
   width: 300px;
   border: 3px solid #73AD21;
   padding: 10px;
}

13.5 文本垂直居中对齐-使用padding

.center {
    padding: 70px 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

13.6 文本垂直居中对齐-使用line-height

line-height和height保持一致即可；

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

十四. display属性

14.1 隐藏元素

visibility:hidden; 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

display:none; 可以隐藏某个元素，且隐藏的元素不会占用任何空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 2px solid rebeccapurple;  
        }
        p{
            display: none;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>隐藏元素</p>
    </div>
</body>
</html>

14.2 块元素,内联元素和行内块元素

把块元素设置为内联元素：

li {
   display: inline;
}

把内联元素设置为块元素：

span {
   display: block;
}

把元素设置为行内块元素

{
display：inline-block
}

十五. 伪类

伪类用于定义元素的特殊状态。

它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

        /* 未访问的链接 */
         a:link{
            color: yellow;
        } 
        /* 已访问的链接 */
         a:visited{
            color: red;
        } 
        /* 鼠标悬停时的样式 */
         a:hover{
            color: orange;
        } 
        /* 激活时的样式 */
         a:active{
            color: green;
        }

注:first-child 伪类匹配其父元素中的第一个子元素。

十六. 伪元素

伪元素用于设置元素指定部分的样式。

它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1::before{
            content: "hello";
        }
    </style>
</head>
<body>
    <h1>伪元素内容</h1>
</body>
</html>

十七. 超链接

17.1 设置链接样式

链接可以使用任何 CSS 属性来设置样式。

此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

  /* 未访问的链接 */
         a:link{
            color: yellow;
        } 
        /* 已访问的链接 */
         a:visited{
            color: red;
        } 
        /* 鼠标悬停时的样式 */
         a:hover{
            color: orange;
        } 
        /* 激活时的样式 */
         a:active{
            color: green;
        }

如果为多个链接状态设置样式，请遵循如下顺序规则：

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

17.2 文本装饰

text-decoration 属性主要用于从链接中删除下划线。

a {
   text-decoration: none;
}

17.3 背景色

background-color 属性可用于指定链接的背景色。

a{
  background-color：red
}

17.4 链接按钮

我们可以组合多个 CSS 属性，将链接显示为框/按钮。

a {
   color: white;
   padding: 14px 25px;
   text-decoration: none;
   display: inline-block;
   background-color: red;
}
/*鼠标悬停时颜色改变*/
a:hover{
   background-color: green;
}

十八. css列表

18.1 HTML列表和CSS列表属性

在 HTML 中，列表主要有两种类型：

无序列表（ul）- 列表项用的是项目符号标记
有序列表（ol）- 列表项用的是数字或字母标记

18.2 不同的列表项目标记

list-style-type 属性指定列表项标记的类型。

ul {
   list-style-type: circle;
}
ul {
   list-style-type: square;
}
ol {
   list-style-type: upper-roman;
}
ol {
   list-style-type: lower-alpha;
}

18.3 图像作为列表标记项

list-style-image 属性将图像指定为列表项标记：

 ul{
    list-style-image: url(img/objective_bg.png);
   }

18.4 删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。

请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 ul 或 ol 中添加 margin:0 和 padding:0 ：

18.5 设置列表的颜色样式

我们还可以使用颜色设置列表样式。

添加到 ol 或 ul标记的任何样式都会影响整个列表，而添加到 li 标记的属性将影响各个列表项：

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            background-color: #3399ff;
            padding: 30px;
        }
        ul li{
            background-color: #cce5ff;
            padding: 5px 10px;
            margin-left: 30px;
            margin-bottom: 15px;
        }
        ul li:last-child{
            margin-bottom: 0;
        }
        ol {
            background-color: #ff9999;
            padding: 20px;
        }
        ol li{
            background-color: #ffe5e5;
            padding: 5px;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        ol li:last-child{
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>篮球</li>
        <li>羽毛球</li>
        <li>乒乓球</li>
    </ul>
    <ol>
        <li>篮球</li>
        <li>羽毛球</li>
        <li>乒乓球</li>
    </ol>
</body>
</html>

十九. CSS表格

使用 CSS 可以极大地改善 HTML 表格的外观：

19.1 边框

如需在 CSS 中设置表格边框，请使用 border 属性。

border-collapse 属性设置是否将表格边框折叠为单一边框：

如果只希望表格周围有边框，则仅需为 table 指定 border 属性：

19.2 宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

19.3 水平对齐

text-align 属性设置 th 或 td 中内容的水平对齐方式（左、右或居中）。

默认情况下，th 元素的内容居中对齐，而 td 元素的内容左对齐。

要使 td元素的内容也居中对齐，请使用 text-align: center;

td {
   text-align: center;
}

19.4 垂直对齐

vertical-align 属性设置 th 或 td中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐是居中（th 和 td 元素都是）。

td {
   height: 50px;
   vertical-align: bottom;
}

19.5 表格内边框

如需控制边框和表格内容之间的间距，请在 th 和 td 元素上使用 padding 属性：

th, td {
     padding: 15px;
     text-align: left;
}

19.6 水平分割线

向 th 和 td 添加 border-bottom 属性，以实现水平分隔线：

th, td {
     border-bottom: 1px solid #ddd;
}

19.7 可悬停列表

在 tr 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

tr:hover {
      background-color: #f5f5f5;
}

19.8 条纹表格

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数(even)或奇数(odd)表行添加 background-color ：

tr:nth-child(even) {
      background-color: #f2f2f2;
}

19.9 表格颜色

使用 background-color: 和 color: 为表格添加的背景颜色和文本颜色：

th {
  background-color: black;
  color: white;
}

二十. 表单

通过使用 CSS，可以极大地改善 HTML 表单的外观：

20.1 设置输入框的样式

使用 width 属性来确定输入框的宽度：

input {
     width: 100%;
     border: 1px solid #cccccc;
}

上例适用于所有 input 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器：

input[type=text] - 将仅选择文本字段
input[type=password] - 将仅选择密码字段
input[type=number] - 将仅选择数字字段

20.2 填充输入框

使用 padding 属性在文本字段内添加空间：

input[type=text] {
     width: 100%;
     padding: 12px 20px;
     margin: 8px 0;
     box-sizing: border-box;
}

注：将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距和最终的边框。

20.3 带边框的输入框

请使用 border 属性更改边框的粗细和颜色，并使用 border-radius 属性添加圆角：

input[type="text"].around {
     width: 100%;
     padding: 12px 20px;
     margin: 8px 0;
     box-sizing: border-box;
     border: 2px solid red;
     border-radius: 4px;
    /*如果仅需要下边框，请使用 border-bottom 属性
      border-bottom: 2px solid red;*/
}

20.4 彩色的输入框

请使用 background-color 属性为输入添加背景色，并使用 color 属性更改文本颜色：

input[type="text"] {
     width: 100%;
     padding: 12px 20px;
     margin: 8px 0;
     box-sizing: border-box;
     background-color: MediumSeaGreen;
     color: white;
     border: none;
}

20.5 获得焦点的输入框

默认情况下，某些浏览器在获得焦点(单击)时会在输入框周围添加蓝色轮廓。你可以通过向输入框添加 outline: none; 来消除此行为。

input[type="text"] {
       width: 100%;
       padding: 12px 20px;
       margin: 8px 0;
       box-sizing: border-box;
       outline: none;
}

使用 :focus 选择器可以在输入字段获得焦点时为其设置样式：

input[type="text"]:focus {
       background-color: lightblue;
       border: 3px solid #555;
}

20.6 带有图标/图像的输入框

如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。

还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间

input[type="text"] {
     width: 100%;
     height: 46px;
     box-sizing: border-box;
     border: 2px solid #cccccc;
     border-radius: 4px;
     background-color: white;
     background-image: url('img/searchicon.png');
     background-position: 10px 10px;
     background-repeat: no-repeat;
     padding-left: 40px;
}

20.7 设置文本域的样式

使用 resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）：

textarea {
   width: 100%;
   height: 150px;
   padding: 12px 20px;
   box-sizing: border-box;
   border: 2px solid #ccc;
   border-radius: 4px;
   background-color: #f8f8f8;
   resize: none;
}

20.8 设置输入按钮的样式

示例

input[type="button"],
input[type="submit"],
input[type="reset"] {
   background-color: green;
   border: none;
   color: white;
   padding: 16px 32px;
   text-decoration: none;
   margin: 4px 2px;
   cursor: pointer;
}

二十一. 轮廓

21.1 轮廓样式

outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

21.2 轮廓宽度

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）

p {
outline-style: solid;
outline-color: red;
}
p.ex1 {
outline-width: thin;
}
p.ex2 
outline-width: medium;
}
p.ex3 {
outline-width: thick;
}
p.ex4 {
outline-width: 4px;
}

21.3 轮廓颜色

outline-color 属性用于设置轮廓的颜色。

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

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

/*红色的实线轮廓*/
p.ex1 {
outline-width: 3px;
outline-style: solid;
outline-color: red;
}
/*蓝色的点状轮廓*/
p.ex2 {
outline-width: 3px;
outline-style: dotted;
outline-color: blue;
}
/*灰色的凸边轮廓*/
p.ex3 {
outline-width: 3px;
outline-style: outset;
outline-color: grey;
}

下例使用 outline-color: invert ，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的：

p.ex4 {
   outline-width: 3px;
   outline-style: solid;
   outline-color: invert;
}

21.4 简写属性

outline 属性是用于设置以下各个轮廓属性的简写属性：

outline-width
outline-style （必需）
outline-color

             /*宽度*/  /*样式*/  /*颜色*/
p { outline: thick    soild     pink; }

21.5 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

/*边框边缘外25px的轮廓*/
p {
   margin: 50px;
   border: 1px solid black;
   background: yellow;
   outline: 2px solid red;
   outline-offset: 25px;
}

二十二. 尺寸

22.1 设置高度和宽度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

22.2 高度和宽度值

height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。

示例

/*元素的高度为200像素，宽度为 50％*/
div.percent {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

/*此元素的高度为100px，宽度为500px*/
div.fixed {
   height: 100px;
   width: 500px;
   background-color: powderblue;
}

22.3 max-width和 min-width

max-width 属性用于设置元素的最大宽度。max-height 属性可以设置元素的最大高度。

min-width 属性用于设置元素的最小宽度。min-height 属性可以设置元素的最小高度。(在设计响应式表格时，min-width 会更显作用。)

可以用长度值或包含块的百分比来指定 max-width和min-width。也可以将其设置为 none(默认值。意味着没有最大宽度)。

二十三. 媒体类型

23.1 CSS3引入了媒体类型

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式）
分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机提供定制的样式表。

23.2 媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         body{
            background-color: pink;
        }
        @media screen and (min-width:480px){
            body{
            background-color: lightgreen;
        }     
        }       
    </style>
     <link rel="stylesheet" media="screen and (min-width:800px)" href="../css/large.css">
     <link rel="stylesheet" media="screen and (max-width:800px)" href="../css/small.css">
</head>

<body>
    <h1>hello</h1>
</body>
</html>

23.3 CSS3媒体类型

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

23.4 菜单的媒体查询

使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

示例

.topnav {
    overflow: hidden;
    background-color: #dddddd;
}
.topnav a {
    color: #333333;
    line-height: 50px;
    float: left;
    display: block;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
}
.topnav a.on {
    color: white;
    background-color: darkcyan;
}

@media screen and (max-width: 600px) {
    .topnav a {
        text-align: left;
        line-height: 40px;
        float: none;
        width: 100%;
    }
}

23.5 列的媒体查询

媒体查询的常见用法是创建弹性布局。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 0 10px;
            height: 40px;
            width: calc(25% - 20px);
            line-height: 40px;
            text-align: center;
            background-color: gainsboro;
            float: left;
        }

        @media screen and (max-width:1000px) {
            div{
                width: calc(50% - 20px);
            } 
        }

        @media screen and (max-width:700px){
            div{
                width: 100%;
            }
        }
    </style>
</head>
<body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
</body>
</html>

二十四. !important规则

CSS 中的 !important 规则用于增加样式的权重。

!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

使用建议：

一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important

二十五. CSS变量

CSS变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名,并使用特定的var()来问。

25.1 CSS变量的用途

(1) CSS可以减轻工作的复杂性，更方便修改和添加。不需要额外的编译。

(2) 变量本身是包含语义的信息。使CSS文件变得更易读和容易理解。

25.2 什么是CSS变量

CSS变量当前有两种形式：

变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数

使用函数var(–main-size) 会返回–main-size对应的值。

自定义属性，这些属性使用–where的特殊格式作为名字

–main-size:30px; 即声明一个CSS语句，意思是：将30px赋值给–main-size变量。

注意：自定义属性和常规属性一样，只作用在当前层级，如果没有特别定义则将从其父元素继承其值。

25.3 变量的声明

声明变量之前，变量名之前要加上两个连字符（–）

body{
   --head-color:#ada5f3;
   --foot-color:#da56d4:
}

注意：变量名的大小写敏感

变量的作用域

一个变量的作用域是其对应的选择器的作用范围，div选择器对应div的范围，

全局的变量通常放在根元素 :root里面，确保任何选择器都可以读取它们。

（一）声明一个局部变量

 .div{
          font-size: var(--mysize,50px);
          background-color: var(--mycolor,red);
     }

（二）声明一个全局变量

 :root{
          --mysize: 50px;
          --mycolor: green;

:root 这个伪类选择器匹配的是文档树的根元素。对于HTML来说,:root表示的是html根元素,除了优先级更高以外,与html元素选择器同。

注：使用全局变量（在全局中声明以后，其他选择器也可以调用）

25.4 var()函数

（一） var( )函数用以读取变量，var（变量名）

（二） var()函数还可以使用第二个参数，表示变量的默认值。如果这个变量不存在，就会使用这个默认值

注意：第二个参数不处理内部的逗号或是空格，都视为参数的一部分

（三） var()函数还可以用在变量的声明

注意：变量只能用作属性值，不能用作属性名；

lerrel1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS入门学习 —（全基础合集）

CSS ( Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式，字体，间距和颜色等的计算机语言
复制链接

扫一扫