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