CSS(基本格式化属性)

一、字体属性

font-family 字体系列;font-family:”宋体”,Arial,sans-serif。对于要显示的文字,先采用宋体,若不成功,才采用Arial,依次类推
font-size 字体大小
font-style 字形,取值默认值为normal,italic或oblique,两个都为斜体
font-weight 字体粗细值,normal为默认值,bold、bolder(更粗)、lighter(更细)或100,200到900,对应从最细到最粗。normal等于400,bold等于700
font-variant 指定字体变体。取值small-caps,normal(默认值)。small-caps表示小体大写。即文本中的小写字母看着和大写字母一样,只是比他小一点。
font 上面所有的综合写法,属性之间空格隔开,可以省略属性,但是出现顺序必须是:font-weight,fontvariant,font-style,font-size,line-height,font-family
text-transform 指文本转换,取值为capitalize(单词首字母大写),uppercase(所有字母都大写),lowercase(所有字母都大写),none。
text-decoration 文本修饰,取值为none,underline(下划线),overline(上划线),line-through(添加删除线),blink(添加闪烁效果)
color 指定前景色。指定颜色方式:颜色名,#rrggbb,rgb(r,g,b),rgb(r%,g%,b%)
颜色名 十六种标准颜色名(aqua或cyan,black,blue,fuchsiamagenta,gray,green,lime,Maroon,navy,olive,purple,red,silver,teal,white,yellow)
#rrggbb rr,gg,bb分别表示颜色中的红绿蓝含量,各个取值为00~ff。
rgb(r,g,b) 十进制表示,每位取值为0~255的十进制数
rgb(r%,g%,b%) 百分百表示颜色含量,例如rgb(50%,0,50%)相当于RGB(128,0,128)
**经常写的font属性:** font:12px/200% “宋体”;当行高为数字,没有单位是。行高为字体大小与该数字的相乘的倍数。 等价于 font:12px/24px “宋体”;

二、文本属性


text-align 指定文字水平对齐方式。取值为left(默认),right,center或justify(实现两端对齐文本效果),inherit(父级继承)
vertical-align 指定垂直对齐方式,即定义行内元素的基线相对于该元素所在行的基线的垂直对齐。取值:baseline,sub,super,top,text-top,middle,bottom,text-bottom或长度值
text-indent 首行缩进值,取值为长度值。经常用于网站大型logo,表面是图片,实际上是文字,便于浏览器搜索。用text-indent:-9999em将其隐藏。
line-height 行高(即行间距),是指文本块中两行基线之间的距离。取值为normal或长度值,inherit。
letter-spacing 字符间距
word-spacing 字间距。用于英文
white-space 元素间空白的处理方式。取值为normal(空白被忽略)、pre(空白被保留)、nowrap(文本不会换行)

line-height
CSS中,所有的行,都有行高。盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的。
为了严格保证字在行里面居中,有一个约定: 行高、字号,一般都是偶数。这样,它们的差,就是偶数,就能够被2整除。

CSS(基本格式化属性)_第1张图片

三、背景属性

同一个元素的背景图片会覆盖背景颜色。

background-color 指定背景色
background-image 指定背景图片
background-position 指定背景图片初始位置
background-repeat 指定背景图片是否重复。取值为repeat(默认值),repeat-x,repeat-y或no-repeat
background-attachment 指定背景图片是否随内容一起滚动,取值为scroll(默认值,滚动)或fixed。
background 综合属性


background-position:背景定位属性,可以用于CSS精灵图片。
1、采用数字值单位:background-position:向右移动量 向下移动量;可以为负值。
2、采用单词:background-position:center center;居中
描述左右的词儿: left、 center、right
描述上下的词儿: top 、center、bottom
背景图片默认位置为左上角开始,偏移量为0;
CSS(基本格式化属性)_第2张图片
CSS(基本格式化属性)_第3张图片

background-position搭配CSS精灵图

“css精灵”,英语css sprite,也叫做“css雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

css精灵优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。

这里介绍一个工具,firework。该工具和PS差不多,但各有优点。个人用firework做测量。PS切图方便点。

CSS(基本格式化属性)_第4张图片

四、伪类


:link 用户没有点击过链接的样式。
:visited 已访问的链接
:hover 用户鼠标悬停时,定义样式。
:active 用户用鼠标点击链接,但是不松手,此刻的样式。
:focus 获得焦点时,定义样式

你可能感兴趣的:(前端基础)