css
css语法
css规则由两个主要的部分构成:选择器,以及一条或多条声明
CSS声明总是以分号(;)结束,声明总以大括号({})括起来:
css背景
css背景属性用于定义html元素的背景。
css属性定义背景效果:
- background-color //定义元素的背景颜色,默认覆盖border+padding+content
- background-image //定义元素的背景图像,默认覆盖padding+content且背景图像进行平铺重复显示,以覆盖整个元素实体。
- background-repeat //定义平铺方向,属性值(no-repeat)不平铺。
- background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。默认值scroll
- background-position //设置背景图像的起始位置。默认值0% 0% 。如果只设置一个,第二个值默认center。
注意:背景属性可简写,简写顺序如上列出顺序
css文本格式
text-decorator属性用来设置或删除文本的装饰。主要用来删除链接的下划线。
a {text-decorator:none;}
css字体
css字体属性定义字体,加粗,大小,文字样式。
css轮廓
轮廓(outline)是绘制与元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline属性指定元素轮廓的样式、颜色和宽度。
注意:outline是不占空间的,既不会增加额外的width或height。(这样不会导致浏览器渲染时出现reflow或是repaint)。
css显示
display:none //隐藏元素后,不占原位置
visibility:hidden //隐藏元素后,仍占用原位置。
css居中显示
1.块级水平居中 --- (margin:0 auto)
前提:元素不能有浮动的属性且必须设置宽度,否则这个属性就会失效。
2,非块级元素水平居中 ---(text-align:center)
前提:元素没有浮动的情况下且为行内元素或者行内块元素,然后再其父元素添加text-align:center。
3.利用flex布局的容器属性justify-content:center 和align-items:center实现垂直水平居中。
4.利用定位(子绝父相),并且margin值减去自己宽高的一半
核心代码(需要居中的元素添加该代码):
top:50%;left:50%;margin-top:负的自身高度的一半;margin-left:负的自身宽度的一半;
前提:必须设置自己的宽高。
5.利用定位(子绝父相)和transform
核心代码(需要居中的元素添加该代码):
top:50%;left:50%;transform:translate(-50%,-50%);
注意:transform是css3属性,有兼容性问题,translate(-50%,-50%)中的百分比是相对自身宽高。
6.利用定位(子绝父相),并且margin:auto
核心代码(需要居中的元素添加该代码):
top:0;right:0;bottom:0;left:0;margin:auto;
css选择器
相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同的父元素。
div+p 表示选择div元素后面紧跟的第一个兄弟p元素
后续兄弟选择器可选择指定元素后相邻的所有兄弟元素。
div~p 表示选取了div元素之后的所有的相邻兄弟元素<p>