CSS3
2020-07-07 23:12:04 56 举报AI智能生成
CSS最强总结
作者其他创作
大纲/内容
概述
用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
拥有对网页对象和模型样式编辑的能力。
css是可以把页面布局，字体布局，背景颜色，字体颜色修改
使用
内链样式 只需要在标签里面写入style="属性： 即可使用scc
外链样式
新建css文件，在文件中编辑，但是必须在html的head中用Link引入css，
并在html标签中写上Class属性
并在html标签中写上Class属性
常用选择器
*
全局选择器，选择所有的html标签进行样式添加
.
类选择器，选择class名相同的标签进行样式添加
#
id选择器，选择id名相同的标签进行样式添加，id是唯一的
div
标签选择器，选择所有同样的标签进行样式添加
idv,p
把div和p的所有标签进行样式添加
li[index]
选择li标签下有index属性的标签
li[index=a]
选择li标签下有index属性的标签并且值为a
a:hover
定义鼠标悬浮在链接上时的样式
a:active
定义鼠标点击链接时的样式
a:link
定义正常链接的样式
a:visited
定义已访问过链接的样式
常用属性
background设置背景颜色，图片
背景图重复
background-repeat：
no-repeat 不重复
repeat 重复(默认)
repeat-x 延x轴平铺
repeat-y 延y轴平铺
no-repeat 不重复
repeat 重复(默认)
repeat-x 延x轴平铺
repeat-y 延y轴平铺
背景的合写：不区分顺序
background：red url(img/123.png) no-repeat 10px 20px;
background：10px 50px url(img/bg.png) no-repeat red;
background：10px 50px url(img/bg.png) no-repeat red;
最常用的书写顺序：
background:url(img/bg.png) no-repeat 10px 50px #ccc;
border设置边框宽度，颜色
合写：
border：1px solid red；
宽度 线性 颜色
宽度 线性 颜色
分写：
宽度：
border-width:1px;
border-width:1px;
线性：
border-style： solid 实线
dotted 点化线
dashed 虚线
border-style： solid 实线
dotted 点化线
dashed 虚线
颜色：
border-color：
border-color：
border的四个方向：
border-top/right/bottom/left:1px solid red;
border-top/right/bottom/left:1px solid red;
color设置字体颜色
font-size设置字体大小
字体大小：
font-size：14px；(浏览器默认的字体大小16px)
font-size：14px；(浏览器默认的字体大小16px)
字体系列：
font-family：
font-family：
划线：
text-decoration：overline 上划线/顶划线
line-through 中划线/删除线
underline 下划线(在a标签默认)
none 无(除a标签之外默认)
text-decoration：overline 上划线/顶划线
line-through 中划线/删除线
underline 下划线(在a标签默认)
none 无(除a标签之外默认)
text-align水平对齐left居左(默认)center居中right居右
line-height垂直对齐（只要高度和行高一样就可以实现居中）
行内元素，块元素，行内块元素
行内元素
不支持宽高，共处一行，受空格和换行的影响
标签：span，a，b，strong，i，em
块元素
支持宽高，独占一行，不受空格和换行影响
标签：div，p，h1-h6
行内块元素
支持宽高，共处一行，受空格和换行的影响
标签：img
元素互相转换使用display属性
display：inline；块变成行内
display：inline-block;变成行内块
display：block；行内变成块(大多都是行内变成块)(可以控制元素显示)
display：none；隐藏元素
display：inline-block;变成行内块
display：block；行内变成块(大多都是行内变成块)(可以控制元素显示)
display：none；隐藏元素
盒子模型
所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。
一个div就是一个盒子
边距
内边距（padding）
Padding （填充）属性定义元素边框与元素内容之间的空间
外边距（margin）
围绕在元素边框的空白区域是外边距。
浮动
左浮动
float:left左浮动
右浮动
float:right右浮动
清浮动
给浮动元素父级加overflow：hidden
弊端：溢出隐藏，可能会带来不便。
给浮动元素下面加：<br style="clear:both;" />
弊端：需要手动改变html代码，麻烦
给浮动元素父级加clearfix：
.clearfix:after{ display:block; content:''; clear:both;}
.clearfix{zoom:1;}
.clearfix:after{ display:block; content:''; clear:both;}
.clearfix{zoom:1;}
定位
固定定位
position：fixed； top：10px； left：20px；
特点：
1.完全脱离文档流
2.改变元素类型
3.参照物：屏幕可视区
1.完全脱离文档流
2.改变元素类型
3.参照物：屏幕可视区
绝对定位
position:absolute; top:50%; left:50%;
特点：
1.完全脱离文档流
2.使元素支持宽高，改变元素类型
1.完全脱离文档流
2.使元素支持宽高，改变元素类型
3.参照物：
如果父级有定位，参照物就是定位父级
如果父级没有定位，参照物是body
如果父级有定位，参照物就是定位父级
如果父级没有定位，参照物是body
相对定位
position：relative；
作用：加给定位元素的父级
特点：
1.不脱离文档流
2.不改变元素类型
3.参照物：自己
1.不脱离文档流
2.不改变元素类型
3.参照物：自己
层级
z-index
就像 （Ｘ Ｙ Ｚ）轴中的ｚ轴，数值越高，层级越高，越先显示
遮罩
可以将与遮罩层相链接的图形中的图像遮盖起来。
opacity:0-1,数值越大，透明度越低
注意：
1.同级元素一个浮动，其他的都要浮动
2.浮动元素能设置宽高，尽量设置宽高
1.同级元素一个浮动，其他的都要浮动
2.浮动元素能设置宽高，尽量设置宽高
普通元素 < 浮动元素 < 定位元素 < z-index
0 条评论
下一页
