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>
  </head>
  <style>
    body{
//设置背景颜色
      background-color:deepskyblue;
//设置字体颜色
      color: floralwhite;
    }
//设置h1标签居中
    h1{
      text-align: center;
    }
  </style>
  <body>
<h1>学习web 前端鸡数课程</h1>
  </body>
</html>

1.1.2 类选择器

在定义类选择器时，需要用点号和类名来定义，而在使用该类选择器时，需要在使用该类选择器的元素标签中，增加 class="类名"的属性，表示该标签使用了指定的类选择器。

1.1.3 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

在定义 id 选择器时，需要用 “#” 号和 id 名来定义选择器，而在使用该 id 选择器时，需要在 HTML 标签元素中，增加 id="id 名"的属性（不包括 “#” 号），指定这个 HTML 元素的 id，这个 id 在 HTML 文档中是唯一的

1.1.4选择器的优先级

在CSS中选择器的优先级为：id选择器>类选择器>标签选择器

2.背景样式

背景样式属性用于定义 HTML 元素的背景色、背景图片，同时还可以进行背景定位、背景图片重复、背景图片固定.。

下面来介绍几个背景属性：

background-color：可以给指定标签元素设置背景色。
background-image：属性可以把图像插入背景。
background-size：属性可以给背景图设置大小。
background-position：可以改变图像在背景中的位置。
background-repeat：用来设置背景图像是否平铺。

可取值	描述
repeat	背景图像将在垂直方向和水平方向重复（默认值）
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次

3文本属性

文本属性用于定义文本的样式，通过文本属性，可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等.

属性	可取值	描述
line-height	normal、number、length、%	设置行高
text-indent	length、%	设置文本缩进
text-align	left、right、center、justify、start、end	设置对齐方式
letter-spacing	normal、length	设置字符间距
text-decoration	line、color、style、thickness	设置文本修饰
white-space	normal、pre、nowrap、pre-wrap、pre-line、break-spaces	规定如何处理空白
line-break	auto、loose、normal、strict、anywhere、unset	处理如何断开带有标点符号的文本的行

其中最常用的文本属性 line-height 和 text-decoration。

3.1line-height的使用

line-height的行间距实际上是和font-size有关的如果给定是x%取值的话，就是font-size*百分之x。

3.2text-decoration 的使用

text-decoration 属性用于设置文本的装饰线，例如给文本加下划线、中划线、波浪线等。可取值具体说明如下：

text-decoration-line 设置线的位置，可取值包含：underline（下划线）、overline（上划线）、line-through（中划线）。
text-decoration-color 设置线的颜色。
text-decoration-style 设置线的样式，可取值包含：wavy（波浪线）、solid（实线）、dashed（虚线）。
text-decoration-thickness 设置线的粗细。

4.字体属性

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：

属性	可取值	描述
font	font-style、font-variant、font-weight、font-size（或 line-height）、font-family	在一个声明中设置所有的字体属性
font-family	字体名称、inherit	设置字体类型
font-size	xx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit	设置字体大小
font-weight	normal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）	设置字体粗细
font-style	normal、italic、oblique、inherit	设置字体风格

5.链接中的伪类

在 CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。

链接有以下四个状态。这四种状态也称之为超链接的伪类。

状态	效果
a:link	普通的、未被访问的链接。
a:hover	鼠标指针位于链接的上方。
a:active	链接被单击的时刻。
a:visited	用户已访问的链接。

对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active

6.列表样式

属性	可取值	描述
list-style	list-style-type、list-style-position、list-style-image	在一个声明中设置所有的列表属性
list-style-image	URL、none	设置图像为列表项标志
list-style-position	inside、outside、inherit	设置列表中列表项标志的位置
list-style-type	disc（默认）、circle、square、decimal 等	设置列表项标志的类型

7.盒子模型

盒子模型就是用来装 HTML 元素的盒子，它用于描述一个装有 HTML 元素的矩形盒子。该模型包括边框（border）、内边距（padding）、内容（content）、外边距（margin）、宽和高等属性，下图显示了盒模型的结构。

区域	功能
内容区	内容区在模型的中心包含了盒子内的信息也就是 HTML 元素。这些元素可以是文本、图片等。
内边距	内边距是内容区和边框之间的空间，可以被看作是内容区的背景区域。
边框	边框用于标识盒子的边界，介于内边距和外边距之间。
外边距	外边距位于边框外部，是边框与周围之间的空间

7.1padding

padding 属性是一个复合属性，代表我们盒子模型中的填充，也就是内容区域外部的空白区域。

其使用格式如下所示：

padding: 上右下左;

padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top: thin solid red;
        border-right: medium dotted green;
        border-bottom: dashed thick blue;
        border-left: double 6px yellow;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>
      在当今社会中，Web已经成为网络信息共享和发布的主要形式。
      要想开发Web应用系统，就必须掌握前端技术。
      本书从HTML、CSS和JavaScript三个方面系统地介绍了Web前端开发。
    </p>
  </body>
</html>

7.2margin

margin 属性是用来设置元素的外边距的。

其使用格式如下：

margin: 上边距 右边距 下边距 左边距;

也可以省略写。

当左右边距值相同时，写法如下：

margin: 上边距 左右边距 下边距;

当上下边距值相同，左右边距值相同时，写法如下：

margin: 上下边距 左右边距;

当上下左右边距值均相同时，写法如下：

margin: 属性值;

从上面的内容，我们可以看出 margin 属性是个复合属性，我们可以分开设置上下左右的边距，写法如下：

/*上边距*/
margin-top: 属性值;
/*左边距*/
margin-left: 属性值;
/*右边距*/
margin-right: 属性值;
/*下边距*/
margin-bottom: 属性值;

看一组例子！

在修改上下左右的边距后。

7.3border

border 属性用于设置元素的边框属性，其用法如下所示：

border: border-width border-style border-color;

属性值说明如下：

border-width：是边框宽度，宽度一般用数值即可。
border-style：是边框线的样式，一般有 solid（实线）、dotted（圆点）、dashed（虚线）、double（双横线）。
border-color：是边框线的颜色。

border、border-width、border-style、border-color 都是复合属性，我们也可以单独设置某条边框的样式。

例如，border-color 可以写成：

border-top-color: 上边框颜色;
border-right-color: 右边框颜色;
border-bottom-color: 下边框颜色;
border-left-color: 左边框颜色;

<!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>
      p {
        border-top-style: solid;
        border-right-style: dotted;
        border-bottom-style: dashed;
        border-left-style: double;
      }
    </style>
  </head>
  <body>
    <p>
      在当今社会中，Web 已经成为网络信息共享和发布的主要形式。 要想开发 Web
      应用系统，就必须掌握前端技术。 本书从 HTML、CSS 和 JavaScript
      三个方面系统地介绍了 Web 前端开发。
    </p>
  </body>
</html>

8.display属性

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。

display 属性值的说明如下表所示。

属性值	说明
block	元素以块级方式展示。
inline	元素以内联方式展示。
inline-block	元素以内联块的方式展示。
none	隐藏元素。

8.1block属性

block 属性值可以让行内元素以块级元素的方式显示在页面上。

display: block;

8.2inline-block 属性值

我们的块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点.

其使用格式如下：

display: inline-block;

那么到底在哪些情况下可以用到这个属性呢？

比如，我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。相当于把a标签的位置撑起来

8.3none属性值。

设置这个值以后，会使内容不显示，看看是不是没有了。

9.浮动和定位

9.1.浮动

我们使用 float 属性指定元素沿其容器的左侧或右侧放置，浮动布局常见取值如下：

left（左浮动）
right（右浮动）

使用格式如下所示：

float: left|right;

9.2定位

我们使用 position 属性来对元素的位置进行控制，定位布局可以分为以下四种：

静态定位（inherit）
相对定位（relative）
绝对定位（absolute）
固定定位（fixed）

其中，一般的标签元素不加任何定位属性时，默认都属于静态定位。

9.2.1固定定位

fixed 属性值用于固定定位，被固定的元素不会随着滚动条的拖动而改变位置。

position: fixed;

绝对定位的元素在滚动的时候位置是不会发生变化的

9.2.2相对定位

相对定位是该元素的位置相对于它原始的位置来计算的。position 属性为我们提供了 relative 属性值来设置元素的相对属性。

position: relative;

9.2.3绝对定位

绝对定位，能把元素精确地放在任意位置。position 属性为我们提供了 absolute 属性值来设置元素的相对属性。

position: absolute;

left，top，right属性可以给元素像素值以实现绝对定位

10.css新特性

10.1css3新增选择器

10.1.1属性选择器

属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。

在 CSS3 中新增了三种属性选择器，如下所示：

选择器	描述
E[attr^=“xx”]	选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。
E[attr$=“xx”]	选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。
E[attr*=“xx”]	选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。

10.1.2子元素伪类选择器

子元素伪类选择器就是选择某元素的子元素的一种选择器。

在 CSS3 中，有以下几种子元素伪类选择器：

选择器	描述
E:first-child	选择元素 E 的第一个子元素。
E:last-child	选择元素 E 的最后一个子元素。
E:nth-child(n)	选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。
E:only-child	选择元素 E 下唯一的子元素。
E:first-of-type	选择父元素下第一个 E 类型的子元素。
E:last-of-type	选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)	选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。
E:only-of-type	选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)	选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)	选择所有 E 元素倒数的第 n 个为 E 的子元素。

10.1.3UI伪类选择器

UI 伪类选择器是通过元素的状态来选择的一种选择器。

在 CSS3 中有以下几种 UI 伪类选择器。

选择器	描述
:focus	给获取焦点的元素设置样式。
::selection	给页面中被选中的文本内容设置样式。
:checked	给被选中的单选框或者复选框设置样式。
:enabled	给可用的表单设置样式。
:disabled	给不可用的表单设置样式。
:read-only	给只读表单设置样式。
:read-write	给可读写的表单元素设置样式。
:valid	验证有效。（可以使用对邮箱的验证）
:invalid	验证无效。

10.2文本阴影

某些时候我们想让字体看起来更立体，更具艺术性，让人眼前一亮，可以给文字使用文本阴影属性。

在 CSS3 中，我们使用 text-shadow 属性来给文本内容添加阴影的效果。

text-shadow: x-offset y-offset blur color;

x-offset 是沿 x 轴方向的偏移距离，允许负值，必须参数。
y-offset 是沿 y 轴方向的偏移距离，允许负值，必须参数。
blur 是阴影的模糊程度，可选参数。
color 是阴影的颜色，可选参数。

10.3文本溢出

text-overflow 属性可以设置超长文本省略显示，其语法如下所示：

text-overflow: clip|ellipsis;

10.4圆角边款

在 CSS3 中，使用 border-radius 属性来设置圆角边框。

border-radius 属性的值表示圆角的直径，可以设置四个值，其值的顺序为：左上角，右上角，右下角，左下角。

其语法格式为：

border-radius: 取值;

我们也可以分开设置四个角的属性值，语法如下所示：

border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;

10.5盒子阴影

ox-shadow 属性可以用来设置一个或多个下拉阴影的框，视觉效果就像是盒子有了阴影一样。

其语法格式为：

box-shadow: h-shadow v-shadow blur spread color inset;

其属性值的意义如下所示：

值	说明
h-shadow	必选，水平阴影的位置，允许负值。
v-shadow	必选，垂直阴影的位置，允许负值。
blur	可选，模糊距离。
spread	可选，阴影的大小。
color	可选，阴影的颜色。
inset	可选，将外部阴影改为内部阴影。

10.6背景新属性

在 CSS3 中增加了背景属性，我们可以更加灵活地设置背景图片。

这里给大家介绍以下新增的背景属性：

10.6.1background-size

background-size 属性可以用来控制背景图像的显示大小。语法如下：

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为 auto（自动）。
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为"auto（自动）" 。
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

10.6.2background-image

10.6.3background-position

10.6.4background-repeat

在 CSS3 中，background-image 属性的属性值可以包含多个图片的地址。语法如下：

/*图片地址*/
background-image: url(), url(), ..., url();

若想让图片放在我们想要的位置，可以使用 background-position 属性设置图片显示的位置。语法如下：

/*图片显示的位置*/
background-position: position1, position2, ..., positionN;

若想要设置图片是否重复显示在页面上，我们可以添加 background-repeat 属性。语法如下：

/*图片是否重复*/
background-repeat: repeat1, repeat2, ..., repeatN;

10.7渐变属性

10.7.1线性渐变

线性渐变是向下、向上、向左、向右、对角方向的颜色渐变。

其语法格式为：

background-image: linear-gradient(side-or-corner|angle, linear-color-stop);

参数说明如下：

side-or-corner 是描述渐变线的起始位置，它包含两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。
angle 是用角度值来指定渐变的方向。
linear-color-stop 是设置渐变的颜色值。

10.7.2径向渐变

径向渐变是由元素中间定义的渐变。

其语法格式为：

background-image: radial-gradient(shape, color-stop);

参数说明如下：

shape 设置渐变的形状，其取值有 circle（圆形）和 ellipse（椭圆）。
color-stop 设置某个确定位置的颜色值。

11.弹性盒子

在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。

flex 主要由两个轴来控制布局，如下图所示。

main axis 是主轴，该轴的开始为 main start，结束为 main end。
cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
flex item 是 flex 容器中的元素。

11.1flex-direction

flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。

其语法格式为：

flex-direction: row | row-reverse | column | column-reverse;

其属性值的意义如下所示：

属性值	描述
row	横向从左到右排列（左对齐），默认的排列方式。
row-reverse	反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column	纵向排列
column-reverse	反转纵向排列，从后往前排，最后一项排在最上面。

11.2flex-wrap

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

其语法格式为：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

其属性值的意义如下所示：

属性值	描述
nowrap	默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse	反转 wrap 排列。

11.3align-items

align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

其语法格式为：

align-items: flex-start | flex-end | center | baseline | stretch;

其属性值的意义如下所示：

属性值	描述
flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center	弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与 `flex-start` 等效。其它情况下，该值将参与基线对齐。
stretch	如果指定侧轴大小的属性值为 `auto`，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 `min/max-width/height` 属性的限制。

11.4align-content

align-content 属性可以用于控制多行的对齐方式，如果只有一行则不会起作用。

其语法格式为：

align-content: flex-start | flex-end | center | space-between | space-around |
  stretch;

属性值	描述
stretch	默认。各行将会伸展以占用剩余的空间。
flex-start	各行向弹性盒容器的起始位置堆叠。
flex-end	各行向弹性盒容器的结束位置堆叠。
center	各行向弹性盒容器的中间位置堆叠。
space-between	各行在弹性盒容器中平均分布。
space-around	各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。