CSS学习总结_css大作业结论-CSDN博客

本文链接：https://blog.csdn.net/qq_53069622/article/details/125168751

一.CSS简介

1.何为CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

提示：在 Internet 早期阶段（CSS大量使用之前），页面的内容和样式都由 HTML 来负责，这是一个相当糟糕的问题。

万维网联盟 W3C（World Wide Web Consortium）意识到这个问题，于1997年推出 CSS 1.0（当前最新的版本是 CSS3），正式推动了内容（HTML）和表现（CSS）的分离，人们开始可以把所有的布局和样式代码从 HTML 中移除放入到 CSS 中。

2.使用CSS的原因

（1）实现内容与样式的分离，便于团队开发

（2）样式复用，便于网站的后期维护

（3）页面的精确控制，让页面更精美

3.CSS的作用

（1）页面外观美化

（2）布局和定位

二、基本用法

1.CSS语法

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

示例：

/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p{
  color:red;
  text-align:center;  /* 文本居中 */
}

选择器介绍

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。

id选择器

/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。

提示：你还记得HTML中，元素的id值必须唯一吗？所以，id 选择器适用范围只有一个元素。

class选择器

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。
如下所示的页面：

<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

提示：由上例可看出，元素的class值可以多个，也可以重复。因此，实际应用中，class 选择器应用非常普遍。

2.CSS的应用方式

我们一般有三种方法：外部样式，内部样式，内联样式

2.1外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签或 @import指令引入

使用 link标签链接外部样式文件

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

提示：type属性可以省略

@import 指令导入外部样式文件

<style>
	@import "CSS样式文件路径";
	@import url(CSS样式文件路径);
</style>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.内部样式 */
		p{
			color:blue;
		}
	</style>
	<!-- link链接外部样式文件 -->
	<!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> -->
	<!-- 3.import导入外部样式文件 -->
	<style>
		/* @import "style/hello.css" */
		@import url(style/hello.css);
	</style>
</head>
<body>
	<p>welcome to CSS!</p>
	<p>欢迎来到CSS课堂!</p>
	<hr>
	<h2 style="color:red;">WEB前段工程师</h2>
	<h2>JAVA开发工程师</h2>
	<hr>
	<div>嘿嘿</div>
	<div>哈哈</div>
</body>
</html>

效果：
在这里插入图片描述

2.2内部样式

我们也可以将样式放在 HTML 文件中，这称为内部样式表。如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

注意：在元素中引入了< style >标签，放入了样式。

提示：一般而言，只有页面的样式规则较少时可采用这种方式。

2.3内联样式

所谓内联样式，就是直接把样式规则直接写到要应用的元素中，如：

<h3 style="color:green;">I am a heading</h3>

提示：内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。

2.4级联的优先级

前面我们学习了三种使用样式的方式，如果某元素如

在外部、内部及内联样式中都被设置color:red;、color:green;、color:blue;，那么到底是什么颜色，也即到底哪个有效呢？
这就涉及样式的优先级问题，从高到低分别是：

内联样式
内部样式或外部样式
浏览器缺省样式

加粗样式 提示：其实，一句话可总结为哪个样式定义离元素的距离近，哪个就生效。

3.常用CSS属性

3.1.字体属性

设置字体相关的样式
在这里插入图片描述
CSS 使用font-family属性定义文本的字体系列

p { font-family: "微软雅黑"; }
div { font-family: Arial, "Microsoft Yahei", 微软雅黑; }

多个字体时各个字体用英文逗号分开
遇见多个单词组成的有空格的用引号进行包含单双引号都可以
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体： body {
font-family:“MicrosoftYaHei”, tahoma, arial, “Hiragino Sans GB”; }

CSS使用font-size属性定义字体大小

p {
	font-size: 20px;	
}

px(像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小不要默认大小

CSS使用font-weight属性设置文本字体的粗细

p {
	font-weight: bold;
}

在这里插入图片描述
CSS使用font-style属性设置文本的风格

p{
	font-style: normal;
}

在这里插入图片描述
注意：平时我们很少给文字加斜体，反而要给斜体标签(em，i)改为不倾斜字体。

字体复合属性：字体属性可以把以上文字样式综合来写，这样可以更节约代码，如：

body {
	font: font-style font-weight font-size/line-height font-family;
}
 div {
        font: italic 700 16px 'Microsoft YaHei'
    }

注意：

使用font属性时，==必须按上面语法格式中的顺序书写，不能更换顺序，==并且各个属性间以空格隔开。
不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。

3.2文本属性

在这里插入图片描述
color的四种写法

颜色名称：使用英文单词
16进制的RGB值：#RRGGBB
特定情况下可以缩写

#FFFFFF--->#FFF 白色 
#000000--->#000 黑色 
#FF0000--->#F00 红色 
#00FF00--->#0F0 绿色 
#0000FF--->#00F 蓝色 
#CCCCCC--->#CCC 灰色 
#FF7300--->无法简写

注意:不区分大小写

rgb函数：rgb(red,green,blue)

每种颜色的取值范围，[0,255]

rgb(255,0,0)----->红 
rgb(0,255,0)----->绿 
rgb(0,0,255)----->蓝

rgba函数：rbga(red,green,blue,alpha)

可以设置透明度，alpha取值范围：[0,1] 0表示完全透明 1表示完全不透明

rgba(255,0,0,1)----->纯红 
rgba(255,0,0,0.5)---->红色半透明

网页选用一种耐看、易用、符合心意的配色是不容易的，尤其在没有专业设计师时。幸好，即使没有美学基础，但有一些已经调配好的配色方案我们可以直接使用。去ColorDrop或 LOL Corlors 挑选你网站的配色吧

3.3背景属性

在这里插入图片描述

background-color 属性定义了元素的背景颜色

background-color:颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色

background-image 属性描述了元素的背景图像。

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

background-image : none | url (url)

background-repeat: repeat | no-repeat | repeat-x | repeat-y
在这里插入图片描述
注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号。

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性

background-repeat: repeat | no-repeat | repeat-x | repeat-y

在这里插入图片描述
利用 background-position 属性可以改变图片在背景中的位置

background-position: x y;

参数代表的意思是：
x 坐标和 y 坐标。可以使用方位名词或者精确单位
在这里插入图片描述

参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

background-attachment 后期可以制作视差滚动的效果

background-attachment : scroll | fixed

在这里插入图片描述

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量. 当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;

注意：这是实际开发中，我们更提倡的写法

3.4列表属性

在这里插入图片描述
list-style-type
取值：none、disc、circle、square、decimal

此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了

list-style
简写属性：list-style:list-style-type|list-style-image|list-style-position

书写顺序没有要求

3.5表格属性

常用属性

尺寸属性（width height）
边框属性（border）
文本格式化属性（font-size color …）
背景属性（background）
框模型属性（margin不能用在 td 上，只能用在 table 上）
vertical-align：top / center / bottom （很少用）

特有属性

边框合并

属性：border-collapse
在这里插入图片描述

边框边距

作用：设置单元格四周的距离

属性：border-spacing
在这里插入图片描述

4.盒子模型

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容。

border边框
content 内容
padding内边距
外边距 margin

border边框
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式边框颜色
语法：

border : border-width || border-style || border-color

边框简写：

border: 1px solid red; 没有顺序

边框分开写法：

border-top: 1px solid red;
/* 只设定上边框， 其余同理 */

在这里插入图片描述
CSS 边框属性允许你指定一个元素边框的样式和颜色。
边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线表格的细线边框（控制表格表格边框变细）
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。 collapse 单词是合并的意思，border-collapse: collapse; 表示相邻边框合并在一起

语法：

border-collapse:collapse;

合并前：
在这里插入图片描述
合并后：

边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1.测量盒子大小的时候,不量边框.

2.如果测量的时候包含了边框,则需要 width/height 减去边框宽度
内边距（padding）
padding 属性用于设置内边距，即边框与内容之间的距离。
在这里插入图片描述 padding 属性（简写属性）可以有一到四个值。

当我们给盒子指定 padding 值之后，发生了 2 件事情：

1.内容和边框有了距离，添加了内边距。

2.padding影响了盒子实际大小。也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
padding影响盒子好处：
不直接给盒子宽度，可以用padding给一行字数不一的标签整齐！（如果直接设置宽度，只能设置多个宽度，才能整齐，这里起到auto的作用）
padding内边距可以撑开盒子,我们可以做非常巧妙的运用. 因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适.

外边距（margin）
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
在这里插入图片描述
margin 简写方式代表的意义跟 padding 完全一致

外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度（width）。
盒子左右的外边距都设置为 auto 。

.header{ width:960px; margin:0 auto;}

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

5.定位方式

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
static
设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

relative
设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移
试试如下的代码：

<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>
<!-- CSS -->
.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}

fixed
设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
如下的代码将会在浏览器右下角固定放置一个按钮元素：

<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div>
<div class="example-fixed">这个按钮是固定的</div>
<!-- CSS -->
.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}

absolute
设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。

注意：绝对定位此处可能有些混淆，请留意其是仍是相对的，不过是相对最近的父元素

试试如下的代码：

<!-- HTML -->
<div class="example-relative">这是父元素，有 relative 定位属性
  <div class="example-absolute">
    这是子元素，有 absolute 定位属性
  </div>
</div>
<!-- CSS -->
.example-relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
  position: absolute;
  top: 80px;
  right: 5px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(218, 73, 16);
}

6.溢出

什么是 css 元素溢出
当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过 overflow属性来完成。

overflow 的设置项：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

示例代码：

<style>
    .box1{
        width: 100px;
        height: 200px;
        background: red;
        /* 在父级上设置子元素溢出的部分如何显示 */
        /* overflow: hidden; */
        overflow: auto;
    }
    .box2{
        width: 50px;
        height: 300px;
        background: yellow;
    }
</style>

<div class="box1">
    <div class="box2">hello</div>
</div>

7.浮动

浮动的作用
早期的作用：图文环绕
现在的作用：网页布局
场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
在这里插入图片描述
浮动的代码
属性名： float
属性值：

浮动的特点

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置相当于从地面飘到了空中
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果

一行可以显示多个
可以设置宽高
注意：浮动的元素不能通过text-align:center或者margin:0 auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浮动的标签  顶对齐 */
        /* 浮动: 在一行排列, 宽高生效 -- 浮动后的标签具备行内块特点 */
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;

            float: left;

            margin-top: 50px;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: skyblue;

            float: left;

            /* 因为有浮动, 不能生效 - 盒子无法水平居中 */
            margin: 0 auto;
        }

        .three {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

在这里插入图片描述

浮动的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 0 auto;

            width: 1226px;
            height: 614px;
            /* background-color: pink; */
        }

        .left {
            float: left;

            width: 234px;
            height: 614px;
            background-color: #800080;
        }

        .right {
            float: right;

            width: 978px;
            height: 614px;
            /* background-color: green; */
        }

        ul {

            /* 去掉列表的符号 */
            list-style: none;
        }

        .right li {
            float: left;

            margin-right: 14px;
            margin-bottom: 14px;

            width: 234px;
            height: 300px;
            background-color: #87ceeb;
        }

        /* 如果父级的宽度不够, 子级会自动换行 */
        /* 第四个li和第八个li右侧间距清除 */
        .right li:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

清除浮动的介绍

直接设置父元素高度

特点：
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

额外标签法

操作：

在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

单伪元素清除法

操作：用伪元素替代了额外标签
基本写法：

.clearfix::after{
	content:'':
	display: block;
	clear:both;
	}

补充写法：

.clearfix::after{
	content:'':
	display: block;
	clear:both;
	/* 补充代码，在网页中看不到伪元素*/
	height: 0;
	Visibility: hidden;
	}

优点：项目中使用，直接给标签加类即可清除浮

双伪元素清除法

操作：

.clearfix::before,
.clearfix::after{
	     content: '';
	     display: table;
	 }
	 .clearfix::after{
	     clear: both;
	 }

优点：项目中使用，直接给标签加类即可清除浮动

8.不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：
在这里插入图片描述

9.组合选择器

前面我们学习了 CSS有三种选择器：元素、id 和 class 。但我们也可以进行组合，以得到简洁精确的选择。
下面我们介绍两种组合选择器。

后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
参见如下代码：

<html>
<head>
  <style>
    .haha p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

段落1、2、3都将有黄色的背景，而段落4、5没有。
子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接

元素。
参见如下代码：

<html>
<head>
  <style>
    .haha > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha.</p>
    <span>
        <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

10.伪类和伪元素

1、伪类

概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于

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

分类：

状态伪类
结构性伪类

1、状态伪类：基于元素当前状态进行选择的
元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

常见的状态伪类

:link 应用于未被访问过的链接；

:hover 应用于鼠标悬停到的元素；

:active 应用于被激活的元素；

:visited 应用于被访问过的链接，与:link互斥。

:focus 应用于拥有键盘输入焦点的元素。

实例

<!DOCTYPE html>
<html>
<head>
<style>
/* 未访问的链接 */
a:link {
  color: red;
}
 
/* 已访问的链接  */
a:visited {
  color: green;
}
 
/* 鼠标悬停链接  */
a:hover {
  color: hotpink;
}
 
/* 已选择的链接*/
a:active {
  color: blue;
}
</style>
</head>
<body>
 
<p><a href="">这是一个链接</a></p>
 
</body>
</html>

注意：

这几个伪类同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，造成效果失效！

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。(意思是必须先写a:link 和 a:visited再写 :hover）

a:active 必须在 CSS 定义中的 a:hover 之后才能生效。(意思是必须先写a:hover再写 :active）

另外伪类名称对大小写并不敏感
伪类和 CSS 类

当您将鼠标悬停在类highlight上时，会改变颜色：

a.highlight:hover {
  color: red;
}

悬停在

上

div:hover {
  background-color: blue;
}

把鼠标悬停到 < div > 元素以显示 < h1 >元素（类似工具提示的效果）

h1 {
  display: none;
  background-color: green;
  padding: 25px;
}
 
div:hover h1 {
  display: block;
}

2、结构性伪类：css3新增选择器

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

实例

选择器匹配p元素的第一个子元素：

p:first-child {
  color: red;
}
<p>你好</p>
<p>好啊</p>

匹配所有 < p > 元素中的首个 < i > 元素:

p i:first-child {
  color: blue;
}
 
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
 
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

段落2变成蓝色

语法解释：p:nth-child(3),P标签的父元素是body，body的第3个子元素是“段落2。”所以段落2”，颜色变成了蓝色

p:nth-child(3)
{
background:blue;
}
 
<body>
 
<h1>今天学习伪类和伪元素</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
 
 
</body>

2、伪元素

概念：创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

它可以用于

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

所有的伪元素
在这里插入图片描述
注意： CSS3 规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 ( :: )，伪类使用一个冒号 ( : )

示例：
为所有 < p > 元素中的首行添加样式：

p::first-line {
  color: #ff0000;
  font-size:16px;
}

设置所有 < p > 元素中文本的首字母格式：

p::first-letter {
  color: red;
  font-size: 16px;
}

CSS学习总结

文章目录

一.CSS简介

1.何为CSS

2.使用CSS的原因

3.CSS的作用

二、基本用法

1.CSS语法

选择器介绍

2.CSS的应用方式

2.1外部样式

2.2内部样式

2.3内联样式

2.4级联的优先级

3.常用CSS属性

3.1.字体属性

3.2文本属性

3.3背景属性

3.4列表属性

3.5表格属性

4.盒子模型

5.定位方式

6.溢出

7.浮动

8.不透明度

9.组合选择器

10.伪类和伪元素