首页 > 技术文章 > CSS属性

xsqlj 2020-02-29 09:35 原文

一、文本属性:

1、文本大小  font-size:16px;(默认16px)

px是像素单位

font-size:1em     跟随直接父级的文本大小(有em指的是:若父级设置了文本大小,跟随父级,即与最近的标签大小相同)

9pt=12px(最小显示)

rem:跟随html的文本大小

2、文本颜色:

color: red/#FF0000;  英语单词/十六进制(aabbcc格式可以缩写成abc)

rgb(0,0,0); red green  blue    取值范围0-255,括号内值得改变使得颜色变化

3、文本类型 font-family:字体1,字体2,字体3;

多个字体间用逗号隔开,中文或者多个单词表示的字体加引号,单个单词表示的字体不用加引号

4、加粗font-weight:bolder/bold/normal    更粗/加粗/常规(取消加粗效果)    0--900   (0-400视觉效果没变化,理论上是变细500为常规,600及以上加粗) font-weight:600;

5、倾斜  font-weight:normal/italic/oblique;(常规(不倾斜)/字体倾斜/变为斜字体)

6、行高line-height:文本垂直对齐方式

       行高值<高度值    偏上

       行高值=高度值    中间

       行高值>高度值    偏下

7、综合写法:font:倾斜 加粗 文本大小/行高 字体类型; (注意:顺序不能变)

8、文本水平对齐方式   text-align:left/right/center/justify;(两端对齐)

9、文本修饰:text-decoration:none/overline/line-through/underline    (没有修饰/上划线/中划线/下划线)

10、缩进

text-indent:  :

字符间距 letter-spacing: ;

词间距 word-spacing: ;

二、列表属性

1、列表修饰符

list-style: ;   disc/circle/square/none   小黑圆点/空心圆/小黑方块/去掉修饰

list-style-image:url("图片地址");

list-style-position: outside/inside;(图片位置)

2、边框:

1、法一:border:边框大小 边框形态 边框颜色   border:2px solid #000;     ( 边框形态:solid/dashed/dotted  实线/虚线/点状线)

法二:

border-width:30px;
border-style:solid;
border-color:blue;

2、某一个方向的拆分:border-top/bottom/left/right:上边框大小  上边框形态  上边框颜色

transparent 透明

3、利用边框斜切实现三角形

border:30px solid transparent;颜色设置为透明色

border-top-color:red;某一边有颜色

推荐阅读