CSS属性

CSS属性

属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性。

属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。

文本属性

文本大小font-size

1. 属性值为数值型时，必须给属性值加单位，属性值为0时除外。
2. 单位还可以是pt，9pt=12px。
3. 为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px。
4. 使用绝对大小关键字
   xx-small =9px
   x-small =11px
   small =13px
   medium =16px
   large =19px
   x-large =23px
   xx-large =27px

文本颜色color

用十六进制(是计算机中数据的一种表示方法)表示颜色值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F

颜色模式：光色模式
R G B
FF 00 00

颜色值的缩写：
当表示三原色的三组数字同时相同时，可以缩写为三位;
当用十六进制表示颜色值时，需要在颜色值前加“#” # fa 00 00

文本类型font-family:字体一,字体二,字体三

浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
当字体是中文字体时，需加双引号；
当英文字体中有空格时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

文字加粗font-weight

• normal： 正常的字体。相当于数字值400
• bold： 粗体。相当于数字值700。
• bolder： 定义比继承值更重的值
• lighter： 定义比继承值更轻的值
• 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-style是否为斜体

• normal： 指定文本字体样式为正常的字体
• italic： 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
• oblique： 指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.

文字行高line-height

• normal： 允许内容顶开或溢出指定的容器边界。
• 用长度值指定行高。不允许负值。
• 用百分比指定行高，其百分比基于文本的font-size进行换算。不允许负值。
• 用乘积因子指定行高。不允许负值。

当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上；

当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下（IE6及以下版本存在浏览器兼容问题）

文字属性缩写

文字属性简写：font:12px/24px "宋体";

font属性的简写：字号，行高，字体

font-size:12px; line-height:24px; font-family:”宋体”；

font属性的简写：

说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

顺序: font-style font-weight font-size / line-height font-family

注意：

1. 简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。
2. 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值（默认值）。

水平对齐方式text-align

• left： 内容左对齐。
• center： 内容居中对齐。
• right： 内容右对齐。
• justify： 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
• start： 内容对齐开始边界。（CSS3）
• end： 内容对齐结束边界。（CSS3）
• match-parent： 这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是 left 和 right 。（CSS3）
• justify-all： 效果等同于justify，不同的是最后一行也会两端对齐。（CSS3）

文本修饰text-decoration

• text-decoration-line： 指定文本装饰的种类。相当于CSS2.1的text-decoration属性，可取值：none | underline | overline | line-through | blink
  • none:没有修饰
  • underline:添加下划线
  • overline:添加上划线
  • line-through:添加删除线
  • blink:定义闪烁的文本。
• text-decoration-style： 指定文本装饰的样式。
• text-decoration-color： 指定文本装饰的颜色。

首行缩进text-indent

• 用长度值指定文本的缩进。可以为负值。
• 用百分比指定文本的缩进。可以为负值。
• each-line： 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）
• hanging： 反向所有被缩进作用的行。（CSS3）

字间距、词间距letter-spacing、word-spacing

letter-spacing

• normal： 默认间隔。计算值为0
• 用长度值指定字符间隔。可以为负值。

word-spacing

• normal： 默认间隔。计算值为0
• 用长度值指定单词间隔。可以为负值。
• 用百分比指定单词间隔。可以为负值。（CSS3）

列表属性

定义列表符号样式list-style-type

• disc： 实心圆(CSS1)
• circle： 空心圆(CSS1)
• square： 实心方块(CSS1)
• decimal： 阿拉伯数字(CSS1)
• lower-roman： 小写罗马数字(CSS1)
• upper-roman： 大写罗马数字(CSS1)
• lower-alpha： 小写英文字母(CSS1)
• upper-alpha： 大写英文字母(CSS1)
• none： 不使用项目符号(CSS1)
• armenian： 传统的亚美尼亚数字(CSS2)
• cjk-ideographic： 浅白的表意数字(CSS2)
• georgian： 传统的乔治数字(CSS2)
• lower-greek： 基本的希腊小写字母(CSS2)
• hebrew： 传统的希伯莱数字(CSS2)
• hiragana： 日文平假名字符(CSS2)
• hiragana-iroha： 日文平假名序号(CSS2)
• katakana： 日文片假名字符(CSS2)
• katakana-iroha： 日文片假名序号(CSS2)
• lower-latin： 小写拉丁字母(CSS2)
• upper-latin： 大写拉丁字母(CSS2)

使用图片作为列表符号list-style-image

• none： 不指定图像，默认内容标记将被 <list-style-type>代替。
• 使用绝对或相对地址指定列表项标记图像。如果图像地址无效，默认内容标记将被 <list-style-type> 代替。

定义列表符号的位置list-style-position

• outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐
• inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐

边框属性border

border:边框宽度 边框风格 边框颜色;

例如：border:5px solid #ff0000

边框：border,网页中很多修饰性线条都是由边框来实现的。

边框宽度：border-width:

边框颜色：border-color:

边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框，

可单独设置一方向边框，
border-bottom:边框宽度 边框风格 边框颜色;底边框
border-left:边框宽度 边框风格 边框颜色;左边框
border-right:边框宽度 边框风格 边框颜色;右边框
border-top:边框宽度 边框风格 边框颜色;上边框

背景属性background

背景颜色 background-color

• 指定颜色。

背景图片的设置 background-image

• none： 无背景图。

• 使用绝对或相对地址指或者创建渐变色来确定图像。

• 背景图片的显示原则

  • 容器尺寸等于图片尺寸，背景图片正好显示在容器中
  • 容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
  • 容器尺寸小于图片尺寸，只显示元素范围以内的背景图。

网页上有两种图片形式：插入图片、背景图；

插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

背景图片平铺属性background-repeat

• repeat-x： 背景图像在横向上平铺
• repeat-y： 背景图像在纵向上平铺
• repeat： 背景图像在横向和纵向平铺
• no-repeat： 背景图像不平铺
• round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
• space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）

背景图的位置性background-position

• 用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
• 用长度值指定背景图像在元素中出现的位置。可以为负值。
• center： 背景图像横向或纵向居中。
• left： 背景图像从元素左边开始出现。
• right： 背景图像从元素右边开始出现。
• top： 背景图像从元素顶部开始出现。
• bottom： 背景图像从元素底部开始出现。

background-position:值1 值2;

两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。

当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

说明：向左方向，向上方向是负值

背景属性的缩写语法：background:属性值1 属性值2 属性值3；

背景缩写：background:url（背景图片的路径及全称） no-repeat center top #f00；

网页上常用的图片格式（压缩图片）

1. jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )如果网页中
2. gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3. png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;

背景图的固定性background-attachment

• fixed： 背景图像相对于视口（viewport）固定。
• scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
• local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

表格属性

单元格间距border-spacing

• 用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值

合并相邻单元格边框border-collapse

• separate： 边框独立
• collapse： 相邻边被合并

无内容时单元格的设置empty-cells

• hide： 指定当表格的单元格无内容时，隐藏该单元格的边框。
• show： 指定当表格的单元格无内容时，显示该单元格的边框。

显示单元格行和列的算法(加快运行的速度)table-layout

• auto： 默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢
• fixed： 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切

css属性继承

可继承的：

• display
• margin
• border
• padding
• background
• height
• min-height
• max- height
• min-width
• max-width
• overflow
• position
• left
• right
• top
• bottom
• z-index
• float
• clear
• table-layout
• vertical-align

所有元素可继承：

• visibility
• cursor

内联元素可继承：

• letter-spacing
• word-spacing
• line-height
• color
• font
• font-family
• font-size
• font-style
• font-variant
• font-weight
• text- decoration
• text-transform

块状元素可继承：

• text-indent
• text-align

列表元素可继承：

• list-style
• list-style-type
• ist-style-position
• list-style-image

表格元素可继承：

• border-collapse