本文详细介绍了层叠样式表(CSS)的基础概念，包括书写位置、规则、引入方式、选择器（如标签、类、ID、通配符、复合选择器、伪类和伪元素），以及简单样式（文字控制、颜色和背景）、布局和调试工具的使用。还讨论了CSS的继承性和层叠性原理。
一.定义
1.层叠样式表
是一种样式表语言，用来描述HTML文档的呈现（美化内容）。
2.书写位置
title标签下方（head标签内：浏览器、搜索引擎需要的信息）添加style双标签，style标签里面书写css代码。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color:blue;
font-size: 12px;
}
</style>
</head>
<body>
<p>css初体验</p>
</body>注:(1)px:像素
(2)属性+值:键值对（成对出现）
3.书写规则
选择器{属性名:属性值;}
二.引入方式
1.内部样式表(学习使用)
CSS代码写在style标签里面
2.外部样式表(开发使用,最常用)
CSS代码写在单独的CSS文件中(.css)
在HTML使用link标签引用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../web/link.css">
</head>
<body>
<p>这是一个p标签</p>
<div>这是一个div标签</div>
</body>
p {
color: blue;
}注:(1)link(单标签)引入外部样式表(css文件);rel:关系:样式表
3.行内样式(配合JavaScript使用)
css写到标签的style属性值里
<div style="color: red;font-size:20px;"></div>这是一个div标签</div>格式:<标签 style="css属性:值;">
三.选择器
1.标签选择器
以标签名命名:选中同名的标签设置相同的样式(不能差异化).
2.类选择器
查找标签,差异化设置标签的显示效果,可以给多个标签使用.
步骤:(1)style中定义类选择器: .类名
(2)使用类选择器:标签添加class=类名(无.)
<style>
.red{
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<div class="red">这是一个div标签</div>注:一个标签设置多个属性格式:<标签 class="类名1 类名2">(类名用空格隔开)
开发习惯:见名知意,多个单词连用时用-连接.
3.id选择器
作用:查找标签,差异化设置标签的显示效果.(多用类选择器)
场景:id选择器一般配合JavaScript使用,很少用于设置css样式.
步骤:(1)定义id选择器: #id名
(2)使用:标签添加id="id名"
<style>
#red{
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<div id="red">这是一个div标签</div>
</body>注:同一个id选择器在一个页面中只能选择一次
4.通配符选择器
作用 :查找页面所有标签,设置相同样式.
标志: *, 不需要调用,浏览器自动查找页面所有标签,设置相同的样式.
<style>
*{
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<div>这是一个div标签</div>
</body>应用:清除标签的默认样式,应用时单独设置.
5.复合选择器
定义:由两个或多个基础选择器,通过不同方式组合而成.
作用:更准确,更高效的选择目标标签(元素).
(1)后代选择器
选中某元素的后代元素
写法:父选择器 子选择器{CSS属性}
父子选择器之间用空格隔开
(2)子代选择器
选中某元素的子代元素
写法:父选择器>子选择器{CSS属性}
父子选择器之间用>隔开
(3)并集选择器
选中多组标签设置相同的样式
写法:选择器1,选择器2,...,选择器N{CSS属性}
选择器之间用,隔开(建议各选择器之间换行)
(4)交集选择器
选中同时满足多个条件的元素
写法:选择器1选择器2{CSS属性}
选择器之间连写,没有任何符号(类选择器本身带.需要写)
注:如果交集选择器中有标签选择器,标签选择器必须写在最前面
<style>
.highlight.intro {
/* 这里写交集选择器选中的元素样式 */
background-color: yellow; /* 背景色为黄色 */
font-weight: bold; /* 字体加粗 */
}
</style>
</head>
<body>
<div class="container">
<p class="intro">这是一段介绍性的文字。</p >
<p class="content">这是一段主要内容。</p >
<div class="highlight intro">这段文字既是高亮显示又是介绍性的。</div>
<div class="highlight content">这段文字是高亮显示的主要内容。</div>
</div>
</body>6.伪类选择器
伪类表示元素状态,选中元素某个状态设置样式
鼠标悬停状态(鼠标悬停时样式发生改变)写法: 选择器:hover 被控制的选择器{CSS属性}
(并集选择器需要注意,每个:hover只能给最近的一个选择器或标签赋效果)
伪类-超链接
超链接有四个状态
| 选择器 | 作用 |
| :link | 访问前 |
| :visited | 访问后 |
| :hover | 鼠标悬停 |
| :active | 点击时(激活,松开后默认样式恢复) |
注:如果要给超链接设置以上四个状态,需要按LVHA的顺序书写.
结构伪类选择器
根据元素的结构关系查找元素.
| 选择器 | 说明 |
| E:first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E元素 |
| E:nth-child(N) | 查找第N个E元素(第一个元素N值为1) |
:nthchild(公式)
根据元素的结构关系查找多个元素.
| 功能 | 公式(n从0开始) |
| 第偶数个标签 | 2n |
| 奇数标签 | 2n+1;2n-1 |
| 找到5的倍数的标签 | 5n |
| 找到第五个以后的标签 | n+5 |
| 找到第五个以前的标签 | -n+5 |
<style>
li:nth-child(2n) {
background-color: #fff;
}
</style>
</head>
<body>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>7.伪元素选择器
创建虚拟元素(伪元素),用来摆放装饰性的内容.
| 选择器 | 说明 |
| E::before | 在E元素里面最前面添加一个伪元素 |
| E::after | 在E元素里面最后面添加一个伪元素 |
注:
- 必须设置content:" "属性,用来设置伪元素的内容,如果没有内容,则引号留空即可.(没有content属性,其他属性不生效,即伪元素选择器不生效)
- 伪元素默认是行内显示模式(尺寸由内容撑开,加宽高不生效,转换display:inline-block;)
- 权重和标签选择器相同(伪元素相当于虚拟标签,与标签选择器权重相同)
<style>
div::before{
content:"文本2";
}
div::after{
content: "文本3";
}
</style>
</head>
<body>
<div>文本</div>
</body>8.应用:画盒子
相关属性:
| 属性名 | 作用 |
| width | 宽度 |
| height | 高度 |
| background-color | 背景色 |
选择器:差异化设置样式--类选择器
<style>
.small{
width: 100px;
height: 100px;
background-color: orange;
}
.big{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="small">div1</div>
<div class="big">div2</div>
</body>四.简单样式
1.文字控制属性
| 描述 | 属性 | 属性值 | ||
| 字体大小 | font-size | 文字尺寸 PC端最常用的单位:(像素单位)px | ||
| 字体粗细 | font-weight | (1)数字(开发使用) | 正常:400 | |
| 加粗:700 | ||||
| (2)英文关键字 | 正常:normal | |||
| 加粗:bold | ||||
| 字体倾斜 | font-style | 正常:nomal | ||
| 倾斜:italic(em标签默认倾斜) | ||||
| 行高 | 上间距 | line-height | (1)数字+px | |
| 文本高度 | ||||
| 下间距 | (2)数字(表示当前标签font-size属性值的倍数) | |||
| 字体族 | font-family | 字体名 | ||
| 字体复合属性 | font(设置网页公共样式) | |||
| 文本缩进 | text-indent | (1)数字+px (2)数字+em(推荐:1em=当前标签字号大小) | ||
| 文本对齐(标签位置不变) | text-align | left:左对齐(默认) center:居中对齐 right:右对齐 | ||
| 修饰线 | text-decoration | none:无 underline:下划线 line-through:删除线 overline:上划线 | ||
| 颜色 | color | |||
行高:
垂直居中:行高属性值等于盒子(区域)高度属性值.
格式:line-height:(区域高度line)px;
注:只适用于单行居中
字体族:
可以书写多个字体名,用逗号隔开,执行顺序是从左到右依次查找.
复合属性:
属性的简写方式,一个属性对应多个值的写法,各个属性之间用空格隔开.
font:是否倾斜 是否加粗 字号/行高(两个属性之间用/隔开) 字体(必须顺序书写)
注:字号和字体值必须书写,否则属性不生效.
文本对齐:
本质是控制内容的对齐方式,属性要设置给内容的父级.
图片对齐:将图片放进相应区域<div>,将该区域选择设置样式.
2.颜色
3.背景属性
(1)背景图(background-image)
属性名:background-image(bgi)
属性值:url
<style>
div {
width: 400px;
height: 400px;
background-image: url(../anqilalongnianxianding.jpg);
}
</style>
(2)背景图平铺方式(background-repeat)
属性名:background-repeat(bgr)
属性值
| 属性值 | 效果 |
| no-repeat | 不平铺 |
| repeat | 平铺(默认效果) |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
<style>
div {
width: 400px;
height: 400px;
background-image: url(../anqilalongnianxianding.jpg);;
background-repeat: no-repeat;
}
</style>(3)背景图位置(background-position)
属性名:background-position(bgp)
属性值:水平方向位置,垂直方向位置
a.关键字
| 关键字 | 位置 |
| left | 左侧 |
| right | 右侧 |
| center | 居中 |
| top | 顶部 |
| bottom | 底部 |
b. 坐标(数字+px,整数向右,负数向左)
background-position: 0 0;
background-position: left top;注:关键字和坐标数字可以混用.
关键字取值方式写法,可以颠倒取值顺序.
可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方向为居中.
background-position: left;
background-position: 300px;
background-position: 100px bottom;(4)背景图缩放
属性名`:background-size(bgz)
常用属性值:
a.关键字
- cover:等比例缩放背景图片以完全覆盖背景区,可能图片部分看不见
- contain:等比例缩放背景图片以完全装入背景图,可能背景区部分空白
<style>
div {
width: 500px;
height: 300px;
background-color: #fff;
background-image: url(../anqilalongnianxianding.jpg);;
background-size: cover;
}
</style>b.百分比:根据盒子尺寸计算图片大小
(100%:图片宽度和盒子宽度一样,图片高度按照图片比例等比例缩放)
c.数字+单位(例如:px)
(5)背景图固定
属性名:background-attachment(bga)
属性值:fixed
<style>
div {
width: 500px;
height: 300px;
background-color: #fff;
background-image: url(../anqilalongnianxianding.jpg);;
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>(6)背景符合属性
属性名:background(bg)
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(除位置和缩放之间用/隔开之外,其余用空格隔开各个属性,不区分顺序)
<style>
div {
width: 300px;
height: 500px;
background: pink url(../anqilalongnianxianding.jpg) no-repeat left center/contain;
}
</style>标签特定的显示方式
作用:布局网页的时候根据标签的显示模式选择合适的标签摆放内容.
a.块级元素:(1)独占一行(2)宽度默认是父级的100%(3)添加宽高属性生效
例:div标签
b.行内元素:(1)一行可以共存多个(2)尺寸由内容撑开(3)加宽高不生效
例:span标签
c.行内块元素:(1)一行可以共存多个(2)默认尺寸由内容撑开(3)加宽高可以生效
例:img标签
<style>
div {
width: 100px;
height: 100px;
}
.a1 {
background-color: blue;
}
.a2 {
background-color: red;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 块元素 -->
<div class="a1">div 标签</div>
<div class="a2">div 标签</div>
<!-- 行内元素 -->
<span>span 标签</span><span>span 标签</span>
<!-- 行内块元素 -->
<img src="../anqilalongnianxianding.jpg" alt="">
<img src="../anqilalongnianxianding.jpg" alt="">
</body>转换显示模式
属性名:display
属性值:
| 属性值 | 效果 |
| block | 块级 |
| inline-block | 行内块 |
| inline | 行内 |
综合实例1:
<style>
div:hover {
background-color: #608dd9;
}
div {
width: 200px;
height: 80px;
background-color: #3064bb;
font-size: 18px;
text-align: center;
line-height: 80px;
}
a {
color: aliceblue;
text-decoration: none;
}
</style>
</head>
<body>
<div><a href="#">HTML</a></div>
<div><a href="#">CSS</a></div>
<div><a href="#">JavaScript</a></div>
<div><a href="#">Vue</a></div>
<div><a href="#">React</a></div>
</body>五.调试工具
作用:检查,调试代码;帮助程序员发现代码问题,解决问题.
1.打开调试工具
(1)浏览器窗口内任意位置/选中标签--鼠标右键--检查
(2)F12
2.使用调试工具
六.CSS属性
作用:化简代码/定位问题,并解决问题
1.继承性
子集标签默认继承父级的文字控制属性
注:局部优先于全局
(例1:body标签中设置的颜色属性,在子标签a标签并没有显示,而是显示默认颜色(因为是自己的样式:就近原则),除此之外的字号加粗等可以显示.
例2:h1标签有默认的字体大小,不显示父类.)
2.层叠性
特点:
(1)相同的属性会覆盖:后面CSS属性覆盖前面的CSS属性
(2)不同的属性会叠加:不同的CSS属性都生效
<style>
div {
color: red;
font-size: 30px;
}
div {
color: blue;
font-weight: 700;
}
</style>
</head>
<body>
<div>div标签</div>优先级
也叫权重,当一个标签使用了多个选择器时,基于不同种类的选择器的匹配标准.
(1)规则:选择优先级高的样式生效.
(2)公式:通配符选择器<标签<类<id<行内<!important (选中标签范围越大,优先级越低)
(3)!important:提权选择器,把优先级提到最高,需要谨慎使用.
<style>
* {
color: red !important;
}
div {
color: blue;
}
.box {
color: green;
}
#text {
color: yellow;
}
</style>
</head>
<body>
<div class="box" id="text">div标签</div>
</body>写法:加在需要提权的属性的分号之前,属性值单词后有空格隔开.
(4)叠加计算规则
叠加计算:如果是复合选择器,则需要权重叠加计算.
原则:
- 从优先级高的到低的依次比较选个数,同一级个数多的优先级高,如果个数相同,则向优先级其次的比较
- !important权重最高
- 继承权重最低,可以覆盖!important
<style>
.a1 .a2 div {
color: red;
}
div #box3{
color: blue;
}
#box1 .a3 {
color: green;
}
</style>
</head>
<body>
<div id="box1" class="a3">
<div id="box2" class="a2">
<div id="box3" class="a3">
文本颜色
</div>
</div>
</div>
</body><style>
div p {
font-style: italic;
}
.father {
font-style:normal;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
文本
</p>
</div>
</body>补充
1411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
