CSS
2023-03-22 20:28:14 0 举报AI智能生成
CSS流程图
作者其他创作
大纲/内容
美化网页
字体
font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色
文本
文本对齐的方式 text-align = center
首行缩进 text-indent : 2em;
行高 line-height
装饰 text-decoration:
文本图片水平对齐 vertical-align : middle
超链接伪类
hover
列表样式
list-style
背景样式
背景颜色
背景图片
background-repeat:
渐变
https://www.grabient.com/
...
盒子模型
边框 border
内边距 padding
外边距 margin
盒子模型尺寸计算
border + margin + padding + 内容元素
box-size
圆角边框
border-radius:
阴影
box-shadow:
定位
相对定位
position: relative;
绝对定位
position: absolute;
固定定位
position: fixed;
z-index
0~999
透明度
opacity: 0.5;
初识及入门
CSS概念
CSS在网页中的应用
CSS的发展史
CSS1.0
CSS2.0
DIV（块） + CSS,HTML 与 CSS 结构分离的思想，网页变得简单，SEO
CSS2.1
浮动，定位
CSS3.0
圆角，阴影，动画...... 浏览器兼容性~
CSS的优势
CSS基本语法
style标签
3种引入方式
行内样式
<h1 style="color: red">我是标题</h1>
内部样式
<style>
h1{
color: blue;
}
</style>
h1{
color: blue;
}
</style>
外部样式
链接式
<link rel="stylesheet" href="style.css">
导入式
子主题
<style>
@import url("style.css");
</style>
@import url("style.css");
</style>
CSS的选择器
基本选择器
标签
h1{
color: #FF0000;
}
color: #FF0000;
}
id
#qinqiang{
color: #4059f1;
}
color: #4059f1;
}
class
.qinqiang{
color: cornflowerblue;
}
color: cornflowerblue;
}
高级选择器
层次选择器
后代选择器
body p{
background: #FF0000;
}
background: #FF0000;
}
子选择器
body>p{
background: gold;
}
background: gold;
}
相邻兄弟选择器
/*相邻兄弟选择器 ：只有一个，相邻（向下）*/
.active + p{
background: blueviolet;
}
.active + p{
background: blueviolet;
}
通用选择器
/*通用选择器 : 当前选中元素的向下的所有兄弟元素*/
.active~p{
background: green;
}
.active~p{
background: green;
}
结构伪类选择器
/*选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1){
background: blue;
}
background: blue;
}
属性选择器
/* 属性名，属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
/*选中href中以pdf结尾的元素*/
a[href$=pdf]{
background: cyan;
}
a[href$=pdf]{
background: cyan;
}
浮动
网页布局
标准文档流
display
block
inline
inline-block
浮动 float
左浮动
右浮动
清除浮动
clear
left
right
both
none
解决父级边框塌陷的问题
空div
父元素高度
子主题
overflow
父类添加一个伪类：after
inline-block-float区别
0 条评论
下一页
