CSS核心
一:字体类属性
1:font-family:字体类型;
{font-family:字体1,字体2,字体3;}
例如:body{font-family:"微软雅黑","宋体";}
浏览器首先会寻找字体1、如存在就使用字体1来显示内容,如果在字体1不存在的情况下,则会寻找字体2,如果字体2存在,便使用字体2来显示内容,如果字体2不存在,则会寻找字体3;以此类推。如果所设置的字体都不存在,则调用系统默认的字体显示。
当字体是中文字体时,需要加双引号;
当英文字体中有空格时,需加双引号;"Tim Roman"
2:文本大小:{font-size:数值;}
div{font-size:12px;}
属性值为数值型时,必须给属性值加单位,属性值为0除外。
默认情况下,1em=16px; 0.75em=12px;
3:文本颜色:{color:颜色值;}
div{color:red;}
颜色值可以使用十六进制表示颜色值;也可以使用表示颜色的英文单词或者是使用rgb/rgba.rgb的颜色取值范围分别是(0~255),a的取值是(0~1)
4:字体加粗:{font-weight:border/bold/normal/100-900;}
div{font-weight:bold;}
5:字体倾斜:font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(取消倾斜,常规显示);
div{font-style:italic;}
6:字体的复合式写法:
font:style variant weight size family;
总体设置字体,按以上顺序;style和weight可以互换位置,size和family不可和其他属性位置互换;
div{font:normal normal bold 24px "黑体";}
7:文字属性简写:font:12px/1.5em "宋体";
font:font-size/line-height font-family;
8:水平对齐方式:
{text-align:left/right/center/justify;}
justify对内容以上两边界线对齐显示
9:垂直对齐方式
{vertical-align:top/bottom/middle;}
10:行高
{line-height:normal/数值;}
当单行文本的行高等于容器高时,可实现单行文本在容器垂直方向居中对齐;
当单行文本的行高小于行高小于容器行高时,可实现单行文本在容器垂直居中以上任意位置的定位;
当单行文本的行高大于容器高时,可实现单行文本在容器垂直居中以下任意位置的定位。
11:文本修饰:
text-decoration:none/underline/overline/line-through/blink
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
blink:闪烁
12:首行缩进:text-indent:数值
设置第一行的缩进值,负值是向前进,也可以设置百分比
13:文本阴影 {text-shadow}
div{text-shadow:5px 5px 5px #ff0000;};分别表示:水平偏移值,垂直偏移值,模糊的半径,阴影颜色
二:列表类属性
1:定义列表符号样式:
list-style-type:disc(实心圆)/circle(空心圆)/square(方块)/none(去掉列表符号);
2:使用图片作为列表符号:
list-style-image:url(所使用图片的路径及全称);
3:定义列表符号的位置:
list-style-position:outside(外边)/inside(里边);
4:list-style:none;去掉列表样式。
三:背景属性
background-resize:数值/百分比/auto/cover/contain
数值:设置背景图片的高度和宽度
第一个设置宽度,第二个设置高度;如果只是设置一个值,第二个值会被设为auto。
Cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
Contain:把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
background-size兼容IE的写法
background-image:url(图片路径);
background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="图片路径",sizingMethod='scale');
四:浮动属性
文档流:默认的元素内容在浏览器窗口中从上到下,从左到右依次排列。块状元素独占一行,行内元素在一排中紧紧相连。
float:定义网页中其它文本如何环绕该元素。有三个属性值:left:元素活动浮动在文本左面;right:元素浮动在右面;none:默认值,不浮动。
当给元素设置float值为left或right后,该元素就会脱离文档流,其原来所占的区域就会被其后面的元素所占据。
浮动的三大显著特征:
1:DIV块元素失去块状换行显示特征,变为行内元素(可以设置宽高)。
2:紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示
3:占据行内元素的空间,导致行内元素围绕显示。
清除浮动方法:
1:clear:如果前一个元素在左浮动或右浮动,则换行以区隔,只对块级元素有效。(不建议使用)
属性值:
none:允许两边都可以有浮动对象
both:清除两边浮动
left:清除左边浮动
right:清除右边浮动
2:给父元素添加overflow:hidden可以解决高度塌陷(但是不建议使用)
3:使用:after清除浮动(推荐使用:很多大公司都在使用,比如阿里粑粑)
.clearfix:after{
display:block;
content:".";
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:1;
}
优秀不够,必须卓越。