css相关基础

• 常用属性

1. 颜色属性：

  color

HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）

RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）

RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）

全透明，使用方式：color: transparent;

  opacity

元素的透明度，语法：opacity: 0.5;

属性值在0.0到1.0范围内，0表示透明，1表示不透明。

filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。

2. 字体属性:

font-size: 设置字体的大小

设置字体大小，单位px，如：font-size:14px;

font-style: 设置字体样式

normal  文本正常显示

italic  文本斜体显示

oblique  文本倾斜显示

 

font-weight: 设置字体的粗细

normal（默认）

bold（加粗）

bolder（相当于<strong>和<b>标签）

lighter （细）

100 ~ 900 整百（400=normal，700=bold）

font-family：文字的字体

黑体，宋体，微软雅黑

注意：中文加引号

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

line-height ：文字的行高

字体的行高，单位px，用于使文字垂直居中，如：line-height:30px;

font：简写属性

语法：font：字体大小/行高 字体;（字体名称要在最后）

3. 文本属性:

white-space: 设置元素中空白的处理方式

normal：默认处理方式。

pre：保留文本原来带的空格，当文字超出边界时不换行。

nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签

pre-wrap：保留空格，当文字碰到边界时换行

pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

ltr 默认，文本方向从左到右。

rtl 文本方向从右到左。

text-align: 文本的水平对齐方式

left  左

center   中

right  右

line-height: 文本行高

normal 默认

可自己设置高度例：line-height:30px;当高度与行高相等时，文字垂直居中。

vertical-align: 文本所在行高的垂直对齐方式

baseline 默认

sub 垂直对齐文本的下标，和<sub>标签一样的效果

super 垂直对齐文本的上标，和<sup>标签一样的效果

top 对象的顶端与所在容器的顶端对齐

text-top 对象的顶端与所在行文字顶端对齐

middle 元素对象基于基线垂直对齐

bottom 对象的底端与所在行的文字底部对齐

text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本首行缩进

用于一段文字首行缩进，例:text-indent:30px;

letter-spacing: 添加字母之间的空白

设置字母之间的距离，例：letter-spacing:5px;表示各字母之间相距5px。

word-spacing: 添加每个单词之间的空白

值为数值型，单位px。

text-transform: 属性控制文本的大小写

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母，全部转化为大写字母。

lowercase 定义仅有小写字母，全部转化为小写字母。

text-overflow: 文本溢出样式通常与overflow:hidden一起使用

clip 修剪文本。

ellipsis 显示省略符号...来代表被修剪的文本。

text-decoration: 文本的修饰

none 去掉下下划线/上线/删除线。

underline 下划线。

overline 上划线。

line-through 中线。

text-shadow：文本阴影

第一个参数是左右位置

第二个参数是上下位置

第三个参数是虚化效果

第四个参数是颜色

text-shadow: 5px 5px 5px #888;

word-wrap：属性允许长单词或 URL 地址换行到下一行。

word-wrap: break-word;

word-break：规定中文词语/英文单词的换行规则。

 

4. 背景属性

background 背景属性

background-color: 背景颜色

英文

十六进制

rgba(red,green,blue,透明度)

透明度取值范围0-1之间

r,g,b取值范围0-255之间

rgb(red,green,blue)

background-image背景图片

background-image:url('img/girl1.jpg');

注意：默认重复铺满

background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

background-repeat 背景重复

no-repeat 设置图像不重复，常用

repeat-y => y轴重复

repeat-x => x轴重复

background-position 设置背景图像的位置坐标

x轴距离

y轴距离

格式：background-position: x轴距离 y轴距离;

支持英文单词

center  中

left  左

right  右

top   上

bottom   下

background-position: center center; 图片置中，x轴center，y轴center

background-size背景大小

格式：background-size: 宽度 高度;

cover 等比例铺满, 如果显示比例和显示区域的比例相差很大某些部分会不显示。

contain：正好相反，他是按照某一边来覆盖显示区域的，可能会留空白。

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background 简写

background: url("o_ns.png") no-repeat 0 -196px;    

不重复

background: url("o_ns.png") no-repeat center bottom ;

不重复中下

background: url("o_ns.png") no-repeat left 30px bottom ;

不重复左

5. 列表属性

list-style-type: 列表项标志的类型

none 去除标志

decimal-leading-zero;  0开头的数字标记。(01, 02, 03, 等。)

square;  方框

circle;  空心圆

upper-alph; & disc; 实心圆

list-style-image：将图象设置为列表项标志

list-style-position：列表项标志的位置

inside  列表样式在li里面

outside 列表样式在li外面

list-style：缩写