CSS基础标签

第一周知识点梳理：2019-03-30

p标签中只能嵌套内联元素，不能嵌套块级元素

一、Css属性组成和作用

1.文本属性：

（1）文本大小  font-size：；  单位 rem/em/px/百分比

   rem 根元素字体大小的倍数

em 离自己最近的font-size大小的倍数（如果当前元素设置了font-size属性的值，则为当前自己font-size的倍数；如果没有设置则找父级....）

Eg:   font-size:12px; width:1.2em; --->width数值为 12*1.2

px 像素值----相对于分辨率而言

百分比-------相对于父级

（2）文本字体 font-family:字体1 字体2 字体3；（如果字体库里没有字体1，则显示字体2,.....以此类推，后面的为备胎；如果都没有，则按默认字体显示）

当字体是中文字体时，需加双引号；
当英文字体由多个单词组成时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

（3）文本颜色： color:;  颜色值可用：1.#十六进制颜色代码  2.颜色函数 rgb(0-255,0-255,0-255)  3.颜色英文单词

（4）文本加粗： font-weight:bolder/bold/normal/100-900(100最轻，900最重)

（5）文本倾斜  font-style:italic/oblique/normal;

Italic:指斜体字，会在库里找本身是斜体的字体；

Oblique:不论文字是否斜体，都加上斜体效果；

（6）水平对齐方式（对inline和inline-block属性的标签也起作用） text-align:center/left/right/justify(两端对齐，再部分浏览器中对中文不起作用)；只针对文本或图片

（7)垂直对齐方式

vertical-align:top上/bottom下/middle居中/baseline基线

 

————————  top

————————  middle

————————  baseline

————————  bottom

（8）文字行高： line-height20px/2em;(当单位省略时，默认为em)

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

（9）文本修饰 text-decoration:none没有修饰/underline下划线/overline上划线/line-through删除线

（10）首行缩进：text-indent:;

单位是em 可以去负值 只对第一行起作用

（11）检索英文字母大小写：

Text-transform:none无转换/capitalize首字母大写/upercase全都大写/lowercase全部小写

（12）字间距 letter-spacing:; 控制英文字母或汉字的间距

（13）词间距：word-pacing:;控制英文单词的词距

（14）文本流控制layout-flow:horizontal自左向右/vertival-ideographic自上而下;

（15）文本属性简写 简写时字号和字体是必备的；

 font属性的简写：font-style font-weight font-size / line-height font-family

简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。第一个值是font-size；只有在同时指定font-size和font-family属性时才一起作用,如果你没有设定font-weight , font-style , 他们会使用缺省值。

1. css列表样式

1. 列表符号样式： list-style-type:disc实心圆/circle空心圆/square实心方块/none去掉列表符号
2. 使用图片作为列表符号： list-style-image:url(图片路径及全称);
3. 定义列表符号的位置： list-style-position:outside外边/inside里边;
4. list-style：none；去掉列表符号

 

1..边框属性和属性值

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

border-style:solid实线/dashed虚线/dotted点划线/double双线/none去掉 ;

可单独设置一方向边框

1. 背景属性

1. 背景颜色 background-color:颜色值;
2. 设置背景图片 background-image:url(背景图片的路径及全称);
3. 背景图片平铺属性：background-repeat:no-repeat/repeat/repeat-x/repeat-y;
4. Background-position: left/right/center left/right/center;

水平对齐方式      垂直对齐方式

   不写时默认为 background-position:top left;

只设一个值时，另一个默认为center