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