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;
固定定位
0~999
z-index
opacity: 0.5;
透明度
定位
CSS在网页中的应用
CSS1.0
CSS2.0
浮动,定位
CSS2.1
圆角,阴影,动画...... 浏览器兼容性~
CSS3.0
CSS的发展史
CSS的优势
CSS概念
style标签
CSS基本语法
<h1 style=\"color: red\">我是标题</h1>
行内样式
<style> h1{ color: blue; } </style>
内部样式
<link rel=\"stylesheet\" href=\"style.css\">
链接式
<style> @import url(\"style.css\"); </style>
子主题
导入式
外部样式
3种引入方式
h1{ color: #FF0000; }
标签
#qinqiang{ color: #4059f1; }
id
.qinqiang{ color: cornflowerblue; }
class
基本选择器
body p{ background: #FF0000; }
后代选择器
body>p{ background: gold;}
子选择器
/*相邻兄弟选择器 :只有一个,相邻(向下)*/ .active + p{ background: blueviolet; }
相邻兄弟选择器
/*通用选择器 : 当前选中元素的向下的所有兄弟元素*/ .active~p{ background: green; }
通用选择器
层次选择器
p:nth-child(1){ background: blue; }
/*选中p1 :定位到父元素,选择当前的第一个元素 选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!*/
结构伪类选择器
/*选中href中以pdf结尾的元素*/ a[href$=pdf]{ background: cyan; }
/* 属性名,属性名 = 属性值(正则) = 绝对等于 *= 包含这个元素 ^= 以这个开头 $= 以这个结尾
属性选择器
高级选择器
CSS的选择器
初识及入门
标准文档流
网页布局
block
inline
inline-block
display
左浮动
右浮动
浮动 float
left
right
both
none
clear
清除浮动
空div
父元素高度
overflow
父类添加一个伪类:after
解决父级边框塌陷的问题
inline-block-float区别
浮动
CSS
0 条评论
回复 删除
下一页