【精选】CSS入门必看知识点大合集

CSS简介

CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

CSS文件后缀名为.css

CSS用于HTML文档中元素样式的定义

为什么需要CSS

使用css的唯一目的就是让网页具有美观一致的页面

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

<!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>
        h3 {
            color: red;
            font-size: 50px;
        }
    </style>
</head>

<body>

    <h3>标题标签</h3>
    
</body>

</html>

CSS的引入方式

内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 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>
<body>
    <p style="color: red;font-size: 30px;">我是P标签</p>
</body>
</html>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

温馨提示

单个页面内的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>
        p{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>我是第一个P标签</p>
    <p>我是第二个P标签</p>
</body>
</html>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部

<link rel="stylesheet" type="text/css" href="xxx.css">

选择器一

在这里插入图片描述

CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

<style>
       *{
   			margin: 0;
   			padding: 0;
 		}
</style>

<!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>
        *{
            color: red;
        }
    </style>
</head>

<body>
    
    <p>第一个p标签</p>
    <p>第二个p标签</p>
    <p>第三个p标签</p>
    <p>第四个p标签</p>
    <p>第五个p标签</p>
    <h1>一级标题</h1>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <ul>
        <li>我</li>
        <li>是</li>
        <li>郭</li>
        <li>家</li>
        <li>旗</li>
    </ul>

</body>
</html>

元素选择器

HTML文档中的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

<style>
       p{
  		font-size:14px;
		}
</style>

<!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{
            color: red;
        }
    </style>
</head>
<body>
    <p>第一个P标签</p>
    <p>第二个P标签</p>
    <p>第三个P标签</p>
    <p>第四个P标签</p>
    <h3>三级标题</h3>
</body>
</html>

再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器

<style>
        span{
            color: green;
        }
</style>

<p>学完了<span>前端</span>，继续学Java</p>
span{
    color: red;
}

温馨提示

所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
无论这个标签藏的多深，一定能够被选择上
选择的所有，而不是一个

类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用

优点

灵活

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
    width:800px;
}

class属性的特点

类选择器可以被多种标签使用
类名不能以数字开头
同一个标签可以使用多个类选择器。用空格隔开

<h3 class="classone  classtwo">我是一个h3啊</h3>
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>  // 错误

<!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>
        
            .red{
                color: red;
            }
            .green{
                color: green;
            }
            .size{
                font-size: 50px;
            }

    </style>
</head>
<body>
    
    <p class="red size">第一个P标签</p>
    <p class="green">第二个P标签</p>
    <p>第三个P标签</p>
    
</body>
</html>

选择器二

ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义

<!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>
        #one{
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">第一个P标签</p>
    <p>第二个P标签</p>
    <p>第三个P标签</p>
</body>
</html>

<h2 id="mytitle">你好</h2>

<style>
        #mytitle{
            color: red;
        }
</style>

特别强调

ID是唯一的
ID不能以数字开头

合并选择器

语法：选择器1,选择器2,...{ }

作用：提取共同的样式，减少重复代码

<style>
        .p,.san{
            color: red;
        }
    </style>

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

字体属性

在这里插入图片描述

CSS字体属性定义字体，颜色、大小，加粗，文字样式

color文本的颜色

规定文本的颜色

div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

font-size文本的大小

设置文本的大小

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

温馨提示

chrome浏览器接受最小字体是12px

font-weight文本的粗细

设置文本的粗细

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗 400等同默认，而700等同于bold

H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

font-style文本的字体样式

指定文本的字体样式

值	描述
normal	默认值
italic	定义斜体字

font-family字体

font-family属性指定一个元素的字体

温馨提示

每个值用逗号分开

如果字体名称包含空格，它必须加上引号

font-family:"Microsoft YaHei","Simsun","SimHei";

<!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{
            color: #ff0000;
            font-size: 30px;
            font-weight: 700;
            font-style: italic;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <p>我是P标签</p>
</body>
</html>

背景属性

CSS背景属性主要有以下几个

属性	描述
background-color	设置背景颜色
background-image	设置背景图片
background-position	设置背景图片显示位置
background-repeat	设置背景图片如何填充
background-size	设置背景图片大小属性

background-color背景颜色

该属性设置背景颜色

<div class="box"></div>
.box{
  width: 300px;
  height: 300px;
  background-color: palevioletred;
}

background-image背景图像

设置元素的背景图像

元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

<div class="box"></div>
.box{
  width: 600px;
  height: 600px;
  background-image: url("images/img1.jpg");
}

background-repeat设置如何平铺背景图像

该属性设置如何平铺背景图像

值	说明
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

.box{
  width: 600px;
  height: 600px;
  background-color: #fcc;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
}

background-size设置背景图像的大小

该属性设置背景图像的大小

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

.box{
  width: 600px;
  height: 600px;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

background-position设置背景图像的起始位置

该属性设置背景图像的起始位置，其默认值是：0% 0%

值	说明
left top	左上角
left center	左中
left bottom	左下
right top	右上角
right center	右中
right bottom	右下
center top	中上
center center	中中
center bottom	中下
x% y%	第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0%
xpos ypos	单位是像素

.box{
  width: 600px;
  height: 600px;
  background-color: #fcc;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

<!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{
            width: 500px;
            height: 500px;
            background-color: #ffff00;
        }
        .box2{
            width: 1000px;
            height: 1000px;
            background-image: url("1.webp");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

文本属性

text-align元素文本的水平对齐方式

指定元素文本的水平对齐方式

值	描述
left	文本居左排列，默认值
right	把文本排列到右边
center	把文本排列到中间

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

text-decoration下划线、上划线、删除线

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等

值	描述
underline	定义下划线
overline	定义上划线
line-through	定义删除线

h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

text-transform控制文本的大小写

text-transform 属性控制文本的大小写

值	描述
captialize	定义每个单词开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

text-indent首行文本的缩进

text-indent 属性规定文本块中首行文本的缩进

p{
    text-indent:50px;
}

温馨提示

负值是允许的。如果值是负数，将第一行左缩进

<!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>
        .p1{
            text-align: center;
            text-decoration: underline;
            text-transform: lowercase;
        }

        .p2{
            text-indent: 30px;
        }
    </style>
</head>
<body>
    <p class="p1">这是一个P标签</p>

    <p class="p2">元素的背景是元素的总大小，包括填充和边界（不包括外边距）。
        默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，
        如果图像大小超过元素大小从图像的左上角显示元素大小的那部分</p>
</body>
</html>

表格属性

使用 CSS 可以使 HTML 表格更美观

表格边框

指定CSS表格边框，使用border属性

table, td { 
  border: 1px solid black; 
}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

表格宽度和高度

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

table { width:100%; } 
td { height:50px; }

表格文字对齐

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式，向左，右，或中心

td { text-align:right; }

垂直对齐属性设置垂直对齐

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

表格填充

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

td { padding:15px; }

表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色

table, td, th { border:1px solid green; }  //边框颜色
td { background-color:green; color:white; } //背景颜色  字体颜色

<!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>
    table, td { 
    	border: 3px solid black; //表格边框
    }
    table{
        border-collapse: collapse;//表格边框折叠*
    }
    table{
        width: 500px;//表格宽度
        
    }
    td{
        text-align: center;//表格内文本对齐方式
        padding: 10px;//表格填充
    }
    td{
        background-color: aqua;color: brown;//表格背景颜色与字体颜色
    }

    </style>
</head>
<body>
   <table>
    <tr>
        <td>文本框</td>
        <td>文本框</td>
        <td>文本框</td>
    </tr>
    <tr>
        <td>文本框</td>
        <td>文本框</td>
        <td>文本框</td>
    </tr>
    <tr>
        <td>文本框</td>
        <td>文本框</td>
        <td>文本框</td>
    </tr>
   </table>
</body>
</html>

关系选择器

关系选择器分类

后代选择器
子代选择器
相邻兄弟选择器
通用兄弟选择器

后代选择器

定义

选择所有被E元素包含的F元素，中间用空格隔开

语法

E F{}

<ul>
   <li>宝马</li>
   <li>奔驰</li>
</ul>
 <ol>
   <li>奥迪</li>
</ol>

ul li{
  color:green;
}

<!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 li{
            color: #00ff00;
        }
    </style>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>
            蔬菜
            <ol>
                <li>黄瓜</li>
                <li>茄子</li>
            </ol>
        </li>
    </ul>
</body>
</html>

子代选择器

定义

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

语法

E>F{}

<div> 
  <a href="#">子元素1</a>
  <p> <a href="#">孙元素</a> </p>
  <a href="#">子元素2</a>
</div>

div>a{
  color:red
}

<!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{
            color:red
            }
    </style>
</head>
<body>
    <div> 
        <a href="#">子元素1</a>
        <p> <a href="#">孙元素</a> </p>
        <a href="#">子元素2</a>
      </div>
      
</body>
</html>

相邻兄弟选择器

定义

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

语法

E+F{}

<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>

h1+p{
  color:red;
}

<!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+p{
            color:#00ffff;
        }
    </style>
</head>
<body>
    <h1>h1元素</h1> 
    <p>第一个元素</p> 
    <p>第二个元素</p>
</body>
</html>

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

语法

E~F{}

<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>

h1~p{
  color:red;
}

<!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~p{
            color:#00ffff;
        }
    </style>
</head>
<body>
    <h1>h1元素</h1> 
    <p>第一个元素</p> 
    <p>第二个元素</p>
</body>
</html>