首页 思维导图 详情

CSS

2023-03-22 20:28:14 0 举报
仅支持查看
AI智能生成
CSS流程图
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>
内部样式
&lt;style&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h1{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;blue;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
外部样式
链接式
&lt;link&nbsp;rel="stylesheet"&nbsp;href="style.css"&gt;
导入式
子主题
&nbsp; &lt;style&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;@import&nbsp;url("style.css");<br>&nbsp;&nbsp;&lt;/style&gt;
CSS的选择器
基本选择器
标签
h1{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#FF0000;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>
id
#qinqiang{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#4059f1;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
class
.qinqiang{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;cornflowerblue;<br>&nbsp;&nbsp;&nbsp;&nbsp;}
高级选择器
层次选择器
后代选择器
body&nbsp;p{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#FF0000;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
子选择器
body&gt;p{<br>&nbsp;&nbsp;background:&nbsp;gold;<br>}
相邻兄弟选择器
/*相邻兄弟选择器&nbsp;：只有一个，相邻（向下）*/<br>&nbsp;&nbsp;&nbsp;&nbsp;.active&nbsp;+&nbsp;p{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blueviolet;<br>&nbsp;&nbsp;&nbsp;&nbsp;}
通用选择器
/*通用选择器&nbsp;:&nbsp;当前选中元素的向下的所有兄弟元素*/<br>&nbsp;&nbsp;&nbsp;&nbsp;.active~p{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;green;<br>&nbsp;&nbsp;&nbsp;&nbsp;}
结构伪类选择器
/*选中p1&nbsp;：定位到父元素，选择当前的第一个元素<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！<br>*/<br>
p:nth-child(1){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blue;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
属性选择器
/*&nbsp;属性名，属性名&nbsp;=&nbsp;属性值（正则）<br>&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;绝对等于<br>&nbsp;&nbsp;&nbsp;&nbsp;*=&nbsp;&nbsp;包含这个元素<br>&nbsp;&nbsp;&nbsp;&nbsp;^=&nbsp;&nbsp;以这个开头<br>&nbsp;&nbsp;&nbsp;&nbsp;$=&nbsp;&nbsp;以这个结尾
/*选中href中以pdf结尾的元素*/<br>&nbsp;&nbsp;&nbsp;&nbsp;a[href$=pdf]{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;cyan;<br>&nbsp;&nbsp;&nbsp;&nbsp;}
浮动
网页布局
标准文档流
display
block
inline
inline-block
浮动 float
左浮动
右浮动
清除浮动
clear
left
right
both
none
解决父级边框塌陷的问题
空div
父元素高度
子主题
overflow
父类添加一个伪类：after
inline-block-float区别
评论
0 条评论
下一页
为你推荐
查看更多
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS层叠样式表
CSS层叠样式表