CSS（层叠样式表）是前端开发中的重要组成部分，用于修饰网页的外观。本文详细介绍了CSS的基本概念，包括选择器、语法、样式应用方式（行内样式、内联样式、外部样式）以及优先级。同时，深入讲解了各种选择器的用法，如标签选择器、ID选择器、类选择器等，并涵盖了文本样式、盒子模型、列表样式等关键样式设置。此外，还讨论了CSS中的继承、透明度、溢出处理等特性，为初学者提供了全面的CSS知识框架。
CSS（前端三要素之一）
1.介绍
作用：修饰页面
css：层叠样式表
层叠：多个样式用于同一个元素
样式：color font-size
表：css代码，css文件
选择器 样式 布局
2.语法
声明
属性名：属性值
css中区分大小写，对大小写比较敏感
声明块
将多个声明放在一个 {} 里面，每个声明之间使用 ; 分隔
{
color：red；
fontsize：12px；
}
规则
选择器{
color：red；
}
注释：/ *注释内容* /
作用：1.记录你的编程思路
2.便于后期代码的维护
空白：可以在css代码中添加一些空白（空格、回撤），提高的代码的可读性
速写形式
padding：1px 2px 3px 4px；
padding-top
padding-left
padding-right
padding-bottom
如何在html中使用css
1.行内样式
将样式写在元素的style属性中
<div style='color:red;font-size:22px;'>
缺点：结构和样式没有分离
代码的复用率抵
优点：优先级高
2.内联样式
将代码写在head标签中的style标签中
<style>
选择器{
color：red，
font-size：19px；
}
<style>
缺点：代码的复用率不高
优点：结构和样式可以分离
3.外部样式
在外部定义一个后缀名为.css文件,zai head中使用link标签引入
优点：结构和样式可以分离
复用率提高
3.css选择器
作用：选择元素
核心选择器
① 标签选择器
div{
规则；
规则；
...
}
选中标签为div的所有元素
② id选择器
#id{
规则；
规则；
...
}
③ 类选择器
.class{
规则；
规则；
...
}
④ 普遍选择器
*
层次选择器
后代选择器
ul li{
规则；
规则；
...
}
子代选择器
.bottom > p{
规则；
规则；
...
}
选中class为bottom的直接子元素p
兄弟选择器
. beijing + li {
规则；
规则；
...
}
选中class为北京这个元素的下一个兄弟元素
一般同胞选择器
. beijing ~ li {
规则；
规则；
...
}
选中class为北京的所有兄弟元素
多选择器
① 逗号选择器
h1，h2，h3，.test{
规则；
规则；
...
}
选中h1,h2,h3/class为test的元素
② 组合选择器
a.baidu{
规则；
规则；
...
}
选中class为baidu的
属性选择器
[ atrr ]选中具有属性atrr的元素，不管属性的值为多少
[ atrr=val ]选中具有atrr属性，并且值为val
[ atrr^=val ]选中具有atrr属性，并且值以val开头
[ atrr $=val ]选中具有atrr属性，并且值以val结尾
[ atrr *=val ]选中具有atrr属性，并且值包含val结尾
[ atrr ~=val ]选中具有atrr属性，并且值以val结尾
伪类选择器
子代元素相关的伪类选择器
ul：first-child{
规则；
规则；
}
选中ul的第一个子元素
ul：last-child{
规则；
规则；
}
选中ul的最后一个子元素
ul：nth-child（参数）{
规则；
规则；
}
参数的取值：
1.数字
2.关键字（odd=>奇数，even=>偶数）
元素状态相关的
：hover 苏杭表悬停在上面时
：link
：visited
伪元素选择器
: : after 选中之后不存在的元素
: : before 选中之前不存在的元素
4.优先级
① 权重（特性值）
② 后面的样式会覆盖前面的样式
③ ！important
5.继承
6.单位
颜色
关键字 red、pink、teal
十六进制的值 #ffffff，#cccccc，#ff0000 #999999 #999
rgb函数 rgb（0，0，0），rgb（0~255，0~255，0~255）
rgba函数 rgba（0~255，0~255，0~255，0~1）
长度
绝对单位
px 像素
相对单位
em 相对于当前元素的字体大小
div font-size：12px 1em = 12px width：10em
rem 相对于html上的字体大小 1rem = 10px 10rem = 100px
选择器 + 样式（文本相关、字体、盒子、表格样式、列表样式）
文字相关的样式
文字相关的样式（可以被继承）
color 给文字指定颜色（关键字、十六进制、rgb、rgba）
font-family 给文本设置字体（字体栈、字体族）
serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif 无衬线的字体，笔画结尾是平滑的字体
monospace 等宽字体，用于代码，字体中每个字宽度相同
cursive 草书，这种字体有的有连笔，有的还有特殊的斜体效果。
fantasy 梦幻装饰字体 ，具有特殊艺术效果的字体
font-style 用于打开和关闭斜体
normal 【默认】正常字体，关闭斜体
italic 斜体
oblique 模拟斜体
font-weight 字体的粗细程度
normal 【默认】正常,400
bold 加粗字体,700
lighter 设置当前元素字体比父元素更细
bolder 设置当前元素字体比父元素更粗
100–900 数值类型的粗细程度（值越大字体越粗）
text-align 文本的排列方式
left 左对齐
center 居中
right 右对齐
text-transform 允许字体改变，文本变型
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
text-decoration（line、style、color）
设置或者取消文本修饰
速写属性 line style color
text-decoration-line线的种类
none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
text-decoration-style 线的样式
solid(实线)
wavy(波浪线)
dashed(虚线)
dotted(点状线)
double(双实线)
text-decoration-color 颜色
关键字、十六进制的值、rgb、rgba
text-shadow 文本的阴影
语法：
text-shadow: h-shadow v-shadow blur color;
none 取消所有阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。参阅 CSS 颜色值
列表样式
list-style
list-style-type 列表的类型
none 没有类型
disc 一个实心的小黑圆圈
circle 一个空心的小圆圈
square 一个方块
decimal 数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
decimal-leading-zero 十进制的值
list-style-image
none 没有图片
url（） 图片的路径
list-style-position
outside 【默认值】显示在主块外部
inside 显示在主块的内部
其他样式
cursor 调整光标悬浮到链接上的时候光标的形状
url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。鼠标样式栈 url('./images/zhankai.png'), help
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标
pointer 手型
crosshair十字交叉
wait 等待
help 帮助
move 移动
text 文本
line-height 行高
给元素设置行高等于盒子的高度，那么盒子中的文本将垂直居中
outline 环绕边框
类似于盒子的边框，但是不占空间
dispaly 控制盒子的显示方式
inline 行内显示，宽高无效（行内元素）
block 块级显示，宽高有效（块级元素）
inline-block 行内显示同时宽高有效（行内块）
none 不显示，不占据屏幕空间（隐藏）
visibility 显示与隐藏
hidden 隐藏，占据屏幕的空间
visible 显示
opacity 透明度 0~1之间的值
oveflow 溢出部分的处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
盒子相关的样式
每一个元素都是一个盒子
width 宽度
height 高度
padding：1px 2px 3px 4px 内边距
1px 2px
padding-top
padding-right
padding-bottom
padding-left
margin 外边距
margin-top
margin-right
margin-bottom
margin-left
border 边框
border-width 为元素指定边框的宽度
关键字 thin 、medium、thick
单位 px、em
border-style
none 不设置
hidden 隐藏
dotted 显示一系列的点
dashed 显示一系列小线段
solid 显示一条单一的实心直线
double 显示两条实心直线
groove 边框雕刻效果(与ridge相反)
ridge 与groove相反
inset 嵌入式边界框(与outset相反)
outset 突出的边界框
border-color
关键字、十六进制、rgb函数、rgba函数
background 为元素设置背景
background-color 为元素设置一种颜色
background-image 为元素设置一个背景图片
background-size 设置背景的大小
background-repeat 设置背景图片的重复方式
background-origin 设定背景的起始点
background-clip 设定背景的覆盖范围
background-attachment 设置背景图片的固定点
background-position 设置为背景图像初始位置，可以实现图片精灵
background 背景设置的速记写法
border-radius 为元素指定圆角
盒子模型
所有的元素都可以看做一个盒子
内容盒子（w3c盒子、标准盒子）
box-sizing：content-box
width = 内容的宽度
边框盒子（怪异盒子、IE盒子）
box-sizing:border-box
width = 内容 + padding + border
扫一扫
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
