CSS常用属性

Posted 2020-08-06 farmerspring

1.颜色属性：color属性定义文本的颜色

　　方式：1）color：green

　　　　　2）color：#ff6600

　　　　　3）简写式  color：#f60

　　　　　4）RGB  color：rgb（225,225,225）

　　　　　5）RGBA color：rgba（225,225,225,0）

　　　　　　　外加一个alpha通道，表示透明度，数值从0~1　　

2.字体属性

　　1）字体大小 font-size  

　　　　px：设置一个固定的值

　　　　%：父元素的百分比

　　　　smaller：比父元素更小

　　　　larger：比父元素更大

　　　　inherit：继承父元素的

　　2）定义字体 font-family

　　　　例如：font-family:微软雅黑, serif;

　　　　用逗号隔开，保证字体不存在时直接使用下一个

　　3）字体加粗 font-weight

　　　　lighter、normal（400）、bold（700）、bolder

　　4）字体样式 font-style

　　　　normal、italic（斜体）、oblique（倾斜）、inherit（继承）

　　5）小型大写字母显示文本

　　　　normal、small-caps（小型大写字母显示文本）、inherit（继承）

3.背景属性

　　1）背景颜色 background-color

　　2）背景图片 background-image：url（图片路径）

　　3）背景重复 background-repeat

　　　　repeat（重复平铺满）、repeat-x（向x轴重复）、repeat-y（向y轴重复）、no-repeat

　　4）背景位置 background-position：left left

　　　　第一个表示横向，属性有：left、center、right

　　　　第一个表示纵向，属性有：top、center、bottom

　　5）简写方式

　　　　background:#f60 url(images/bg.jpg) no-repeat top center

4.文本属性

　　1）横向排列 text-align

　　　　属性：left、right、center

　　2）文本行高 line-height

　　　　px：来设置固定值

　　　　%：基于字体大小的百分比行高

　　3）首行缩进 text-indent

　　　　px：默认为0

　　　　%：父元素百分比

　　　　inherit：继承

　　4）字符间距 letter-spacing

　　　　normal：默认

　　　　length：设置具体的数值（可以为负）

　　　　inherit：继承

　　5）单词间距 word-spacing

　　　　normal：标准间距

　　　　px：固定值

　　　　inherit：继承

　　6）文本方向 direction

　　　　ltr：（默认）左到右

　　　　rtl：右到左

　　　　inherit：继承

　　7）文本大小写 text-transform

　　　　none：默认

　　　　capitalize：每个单词以大写字母开头

　　　　uppercase：定义仅有大写字母

　　　　lowercase：定义无大写字母，仅有小写字母

　　　　inherit：规定应该从父元素继承text-transform属性的值

5.边框属性

　　1）边框风格 border-style

　　　　统一风格： border-style

　　　　单独定义某一方向的边框样式： border-bottom-style（bottom可以改成top、left、right）

　　　　边框风格样式的属性值： none（无）、inherit（继承）

　　　　　　　　　　　　　　　solid（直线）、dashed（虚线）、dotted（点状）、double（双线）

　　　　　　　　　　　　　　　groove（凸槽）、ridge（垄状）、insert、outset

　　2）边框宽度 border-width

　　　　统一风格： border-width

　　　　单独定义某一方向的边框： border-bottom-width（bottom可以改成top、left、right）

　　　　边框风格样式的属性值：thin（细）、medium（中等）、thick（粗）

　　　　　　　　　　　　　　　px（固定值的边框）、inherit（继承）

　　3）边框颜色 border-color

　　　　表现形式：名称 red

　　　　　　　　　RGB rgb（255,255,255）

　　　　　　　　　RGBA rgba（225，225,225,1）

　　　　　　　　　16进制 #ff0 #ffff00

　　　　　　　　　继承

　　　　属性值的四种情况：

　　　　　　一个值：border-color：（上、下、左、右）；

　　　　      两个值：border-color：（上、下）（左、右）；

　　　　　　三个值：border-color：（上）（下、左）（右）；

　　　　　　四个值：border-color：（上）（下）（左）（右）；

6.列表属性

　　1）标记的类型 list-style-type

　　2）标记的位置 list-style-position

　　　　inside 列表项目标记放在文本以内，且环绕文本根据标记对齐

　　　　outside（默认） 保持标记位于文本左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

　　　　inherit 继承

　　3）设置图像列表标记 list-style-image

　　　　URL 图像的路径

　　　　none （默认） 无图像被显示

　　　　inherit 继承

　　4）简写方式 list-style

　　　　list-style:square inside url("/i/arrow.jpg");