css样式

css文字样式

1.font-family:指定字体样式
2.font-size:字体大小
px、em（针对父字体大小）、（px/16=em） %、
3.font-style:指定文本的字体样式
属性：正常（normal） 默认，正常显示文本
斜体(italic) 以斜体字显示的文字
倾斜的文字(oblique) 文字向一边倾斜
4.font-variant:以小型大写字体或者正常字体显示文本
属性：normal 默认属性值，正常显示文本
small-caps 浏览器以小型大写字母显示
5.font-weight:指定字体粗细
属性：正常（normal） 加粗（bold）
6.@font-face 自定义引入字体
属性：
src：必需 定义字体的URL
font-stretch： 可选
font-family： 定义字体名字
7.text_shadow： 文本阴影

文本样式

①.text-decoration：文本装饰
属性值：下划线：underline
删除线：line-througt
上划线：overline
无装饰：none
②.text-transform:文本大小写（针对英文段落）
属性值：小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
③.text-indent:文本缩进
④.text-align:文本对齐
属性值：center 居中
right 右对齐
justify 两端对齐
⑤.line-height：定义行高
注意： 每个标签都有一个 display 属性，block 代表块级标签，
inline 代表行级标签，如果要给行级标签设置宽和高，必须先
转成块级标签
⑥.letter-spacing：字之间的间距
⑦.word-spacing:定义词间距

with-space:设置元素空白方式
white-space: nowrap;
overflow:设置文本溢出效果
direction:设置文本方向
word-warp:允许对长的不可分割的单词进行分割转换至下一
行
word-wrap: break-word;可能产生留白
word-break…等等,强制分割 word-break: break-all;

line-height 和 vertical-align

1.文本的基本概念：
font-size:同一行顶线和底线之间的距离
行距:上行的底线和下一行顶线之间的距离，即控制两行文字垂
直的距离。
基线（base line）:并不是汉字文字的下端沿，而是英文字母
“x”的下端沿。
行高:是指文本行基线间的垂直距离。
2、font-size 与 line-height 之间的关系
当 font-size 等于 line-height 时，行距 = line-height -
font-size = 0；
当 font-size 大于 line-height 时，则会出现行距为负值，则
两行重叠
当 font-size 小于 line-height 时，行距会变大
3、vertical-align
只有元素属于 inline 或是 inline-block ，vertical-align
属性才会起作用。
4、inline 元素的空隙问题
垂直空隙
vertical-align: middle;
给父容器设置 font-size:0;
水平空隙
通过注释代替空白节点
给父容器设置 font-size:0;

css背景

1.元素的背景属性：
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页
面的其余部分滚动。scroll 默认值。/fixed 当页面的其
余部分滚动时，背景图像不会移动。
background-color 设置元素的背景颜色
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
left/right/center/bottom/top 这几个属性值可
以两两组合使用，如果只规定了一个关键词，那么
第二个值将时"center"。
x% y% 第一个值是水平位置，第二个值是垂直位置;
左上角是 0% 0% 右上角是 100% 100%;如果仅规定
了一个值，另一个值是 50%。
background-repeat 设置背景图像是否及如何重复。
repeat/repeat-x/repeat-y/no-repeat
2 css3新增的背景属性
background-size 规定背景图片的尺寸。
像素/百分比设置宽高
cover:把背景图像扩展至足够大，以使背景图像完全覆盖
背景区域。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度
完全适应内容区域
background-clip 规定背景的绘制区域。
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框

background-origin 规定背景图片的定位区域。
padding-box 背景图像相对与内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。

css边框

1元素的边框属性
border 简写属性，用于把针对四个边的属性设置在一个声明
border-width 简写属性，用于为元素的所有边框设置宽度，或
者单独地为各边边框设置宽度。
常用单位为像素(px)、em。
thin 细的边框。/medium 默认/thick 定义粗的边框。

border-style 用于设置元素所有边框的样式，或者单独地为各
边设置边框样式。
none 定义无边框。
dotted 定义点状边框
dashed 定义虚线
solid 定义实线。
groove 定义 3D 凹槽边框。
ridge 定义 3D 垄状边框。
inset 定义 3D inset 边框。
outset 定义 3D outset 边框。

border-color 简写属性，设置元素的所有边框中可见部分的颜
色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一
个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个
声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个
声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声
明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

2css3新增的边框属性
border-radius 设置所有四个 border-radius 属性的简写属
性。

1. • （*）同时设定四个角的圆角。
2. ** 分别设定左上 右下、左下 右上圆角。
3. *** 分别设定左上 、左下 右上、右下圆角。
4. **** 分别设定左上 、右上、右下、左下圆角。
   border-top-left-radius 左上角圆角边框。
   border-top-right-radius 右上角圆角边框。
   border-bottom-right-radius 右下角圆角边框。
   border-bottom-left-radius 左下角圆角边框。

border-image 设置所有 border-image 属性的简写属性。
box-shadow 向方框添加一个或多个阴影。
none：无阴影
阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延
值/阴影的颜色/inset 内阴影(默认值为 outset)。