CSS层叠样式表
2023-06-01 23:02:56 8 举报AI智能生成
CSS层叠样式表
作者其他创作
大纲/内容
概念
Cascading Style Sheet
css代码写法
选择器类型 {css属性: 属性值;}
h1 {color:red;}
css引入方式
1.head标签的style标签里写
2.内敛样式sytle属性
3.head中通过link标签引入外部css文件
CSS选择器
1.基本选择器
元素选择器
语法
html标签名 {
css属性:属性值;
}
css属性:属性值;
}
<style>
div {
color: red;
}
</style>
div {
color: red;
}
</style>
id选择器
语法
#id属性对应的value {
css属性: 属性值;
}
css属性: 属性值;
}
注意: id对应的值不能重复
类选择器
语法
.class属性对应的value {
css属性: 属性值;
}
css属性: 属性值;
}
注意: class对应的值可以重复；
通过标签名.的方式可以控制类选择器的作用域
通过标签名.的方式可以控制类选择器的作用域
通用选择器
语法
* {
css属性: 属性值;
}
css属性: 属性值;
}
不常用，就不举例了
2.属性选择器
标签的属性名来查找
语法
[标签属性名] {
css属性: 属性值;
}
css属性: 属性值;
}
标签名[标签属性名] 方式查找
语法
标签名[标签属性名] {
css属性: 属性值;
}
css属性: 属性值;
}
[标签属性名=属性值] 方式查找
语法
[标签属性名=属性值] {
css属性: 属性值;
}
css属性: 属性值;
}
标签名[标签属性名=属性值] 方式查找
语法
标签名[标签属性名=属性值] {
css属性: 属性值;
}
css属性: 属性值;
}
3.组合选择器
后代选择器(空格)
语法
选择器 选择器 {
css属性: 属性值;
}
css属性: 属性值;
}
/* 后代选择器 */
div a[id=baidu] {
text-decoration: none;
color: yellow;
}
div a[id=baidu] {
text-decoration: none;
color: yellow;
}
注：后代选择使用空格分隔，匹配选择器1范围内的所有选择器2，
当有多个后代选择器时，也只会匹配最后一级的标签
当有多个后代选择器时，也只会匹配最后一级的标签
儿子选择器(>)
语法
标签1>标签2 {
css属性: 属性值;
}
css属性: 属性值;
}
注：匹配标签1的儿子 标签2
毗邻选择器(+)
语法
标签1+标签2 {
css属性: 属性值;
}
css属性: 属性值;
}
注：匹配紧挨着标签1的兄弟标签2
弟弟选择器(~)
语法
选择器～选择器2,选择器3, ... {
css属性: 属性值;
}
css属性: 属性值;
}
注：匹配紧挨着选择器1的弟弟选择器2；
4.选择器分组(,)
多个选择器设置相同css样式的时候，可以使用分组来简化代码，选择器之间使用逗号分隔
语法
选择器1, 选择器2, ... {
css属性: 属性值;
}
css属性: 属性值;
}
5.伪类选择器
主要用在a标签和input标签
语法:
标签名:属性名 {
属性名: 属性值;
}
属性名: 属性值;
}
属性:
link
未访问的链接
语法
a:link {
color: #FF0000
}
color: #FF0000
}
visited
已访问的链接
语法
a:visited {
color: #00FF00
}
color: #00FF00
}
hover
鼠标hover效果
语法
a:hover {
color: #FF00FF
}
color: #FF00FF
}
active
选定连接，鼠标点下去还没抬起来的瞬间，可以让a标签变颜色
语法
a:active {
color: #0000FF
}
color: #0000FF
}
focus
input输入框获取焦点时的样式
语法
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
#outline: none;
background-color: #eee; #框里面的背景色
}
6.伪元素选择器
目前主要用在div和p标签
语法
标签名:属性名 {
属性名: 属性值;
}
属性名: 属性值;
}
属性
first-letter
匹配首字母
before
在标签前面插入内容
content属性: 插入的内容;
after
在标签后面插入内容
content属性: 插入的内容;
语法
标签名: 属性{
css属性: 属性值;
}
css属性: 属性值;
}
7.选择器的优先级
继承选择器
优先级0
元素选择器
优先级1
类选择器
优先级10
id选择器
优先级100
内敛样式(标签内的style属性)
优先级1000
选择器属性被 !important关键字装饰
优先级最高，了解，一般不用
color: red! important;
总结：
优先级数字越大，越优先显示其效果，优先级相同的，显示后定义的选择器对应样式；
CSS属性
1.宽度和高度、颜色
width
宽度
height
高度
color
颜色
a标签的颜色只有选中才生效
注意事项：只有块级标签可以设置宽度和高度；内敛标签标签的高度和宽度是由内容决定的；
宽度和高度的单位是像素：px
宽度和高度的单位是像素：px
语法
div {
width: 200px;
height: 200px;
background-color: pink;
color: green;
}
width: 200px;
height: 200px;
background-color: pink;
color: green;
}
2.字体属性
font-family
字体
语法
.c1 {
/*浏览器渲染时，根据顺序匹配字体，匹配到就使用*/
font-family: '楷体', '宋体', '微软雅黑';
}
/*浏览器渲染时，根据顺序匹配字体，匹配到就使用*/
font-family: '楷体', '宋体', '微软雅黑';
}
fong-size
字体大小，单位像素:px，浏览器字体默认大小16px;
语法
.c1 {
font-size: 32px;
}
font-size: 32px;
}
color
字体颜色
color: red;
color: rgb(0, 0, 0)
color: rgba(255, 255, 255, 0.3); # 最后一位是透明度：0～1之间的数字
color:#78FFC9;
语法
.c1 {
color: red;
}
color: red;
}
font-weight
字体粗细
数值值
normal 默认值，标准粗细
bold 加粗
bolder 更粗
lighter 更细
100~900: 设置具体粗细，400等同于normal, 700等同于bold
3.文字属性
test-align
文字对齐方式
属性
left
左对齐，默认值
right
右对齐
center
居中对齐
text-decoration
文字装饰
属性
none
定义标准的文本，可以给a标签去掉下划线
underline
定义文本下的一条线
overline
定义文本上的一条线
line-through
text-ident
首行缩进，单位像素
首行缩进2个字符
p {
test-ident: 32px;
}
test-ident: 32px;
}
4.背景属性
background-color
背景颜色
background-image
背景图片
语法
div {
background-image: url('图片路径');
}
background-image: url('图片路径');
}
background-repeat
图片是否平铺
background-repeat: no-repeat; /*背景图片是否平铺-否*/
background-position
图片相对于选择器对应标签的位置, 单位像素
background-position: center center; /*背景图片居中*/
位置参数
left
right
center
bottom
底部
top
顶部
100px, 50px
相对于标签，左边100px, 上面50px
background-attachment
fixed
固定在屏幕的某个位置
背景属性简写方式
background: 颜色 图片路径 是否平铺 图片位置
background:red url('图片路径') no-repeat right top;
5.边框属性(border)
border-style
边框样式
solid
实线
dashed
虚线
border-color
边框颜色
border-width
边框宽度
简写: border: deeppink solid 5px;
支持控制边框的四个边
border-left-style
border-left-color
border-left-width
top, right, bottom, left
border-radius
边框四个角的角度， 50% 就是圆形
border-radius: 50%
圆形
border-bottom-left-radius
左下角
border-bottom-right-radius
右下角
border-top-left-radius
左上角
border-top-right-radius
右上角
6.display属性
用途：
1.隐藏标签，并且不占用之前的空间
2.将块级标签变成内敛标签
3.使元素同时具备内敛标签和块级标签的特性，但不会独占一行；例如 可以设置宽度、高度
属性值
none
隐藏标签，并且不占用之前的空间，一般结合js使用
inline
将标签设置为内敛标签
inline-block
将标签设置为同时具有内敛标签和块级标签的特性，比如可以设置宽度和高度
子主题
block
默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
7.visibility属性
可见性
属性
hidden
隐藏标签
visibility: hidden;
隐藏标签，但是占用原空间
display:none;
隐藏标签，并且不占用原空间
8.盒子模型
content
内容区域
padding
内边距, content到内边框之间的距离
属性
padding-top
padding-right
padding-bottom
padding-left
padding: 10px 20px;
上下内边距10px, 左右内边距20px
padding: 10px 20px 30px 40px;
上边距10px,右边距20px, 下边距30px, 左边距40px;
border
边框
border: 10px red solid;
边框宽度10px, 红色, 实线
margin
外边距， 标签和上下左右标签之间的距离
属性
margin-top
margin-right
margin-bootom
margin-left
margin: 10px 20px;
距离左右标签外边距 10px， 上下标签外边距20px;
margin: 10px 20px 30px 40px;
距离上标签外边距10px, 右标签20px, 下标签30px, 左标签40px；
注意:
1. 垂直方向如果两个标签都设置了margin外边距,取两者最大的值;
2.水平方向如果两个标签都设置了margin外边距,取两者的合计值;
9.float 浮动属性
标签向父级别元素两边浮动
属性
float: left;
向左侧浮动
float: right;
向右侧浮动
注意
浮动会造成父级标签塌陷问题
解决方式：
1.父级标签设置宽度和高度
2.使用伪元素选择器after 清除浮动；
div, div:after {
width: 100%;
background-color: lightgrey;
content: '';
display: block;
clear: both; /* 清除父级标签浮动*/
}
width: 100%;
background-color: lightgrey;
content: '';
display: block;
clear: both; /* 清除父级标签浮动*/
}
3.clear属性
left
标签左侧不允许浮动
right
标签右侧不允许浮动
both
标签左右两侧都不允许浮动
10.overflow溢出属性
处理文字从标签content区域溢出时的效果
属性
visible
默认值,内容不会被修剪，会呈现在元素框之外
hidden
内容会被修剪,并且被修剪的内容是不可见的
scroll
内容会被修剪，浏览器会显示滚动条以便查看其余内容
auto
内容会被修剪，浏览器会显示滚动条以便查看其余内容
11.圆形头像案例
思路：
1.父级标签设置overflow:hidden属性，隐藏溢出部分
2.弟弟选择器，设置img标签的宽度和高度，单位百分比；
总结：width,height宽度和高度设置的时候，width:100%; height:100%;这种写法,
它的宽度和高度是按照父级标签的百分比来计算的。
它的宽度和高度是按照父级标签的百分比来计算的。
12.相对定位和绝对定位(position)
属性
relative
相对定位
保留原来的空间位置，相对自己原来的位置移动，以左上角为基准
absolute
绝对定位
不保留自己原来的位置，按照父级标签或者祖先级标签中设置了position:relative的标签的位置进行移动；
如果找不到设置了position:relative属性的标签，就按照body标签来移动
如果找不到设置了position:relative属性的标签，就按照body标签来移动
fixed
固定位置，相对于浏览器
回到顶部按钮会使用
移动方向
top
相对于顶部，往下移动,如果为负数，则往上移动
rigth
相对于右侧，往左侧移动，如果为负数，则忘右侧移动
botom
相对于底部，往上移动,如果为负数，则往下移动
left
相对于左侧，往右侧移动，如果为负数，则忘左侧移动
相对定位：
绝对定位
13.设置锚点-回到顶部
锚点标签
position: fixed;
固定定位，位置根据浏览器窗口确定；
inline-height: 标签的高度;
高度和标签高度相同时，标签内容会垂直居中
a标签的属性href='#锚点标签id'
0 条评论
下一页
