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