文本样式
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)
100—900(400 相当于 normal/700 相当于 bold)
(CSS3 新增)
6.@font-face 自定义引入字体
属性:
src:必需。定义字体文件的 URL
font-stretch:可选。
定义如何拉伸字体。默认是 “normal”。
font-family:定义字体名字
文本样式
text-decoration:文本装饰
属性值:下划线:underline
删除线:line-througt
上划线:overline
无装饰:none
text-transfrom:文本大小写(针对英文段落)
属性值:小写:lowercase
大写:uppercase
只针对首字母大写:‘capitalize’
text-indent:文本缩进
text-align:wenbenduiqi
属性值: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
文本的概念
font-size:同一行顶线和底线之间的距离
行距:上行的底线和下一行的顶线之间的距离即控制两行文字垂直的距离
基线(base line):并不是汉字文字的下端沿 而是英文字母“x”的下端沿
行高:是指文本行基线间的垂直距离
font-size与line-height之间的关系
当font-size等于line-height时 行距=line-height-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边框
元素的边框属性
border 简写属性 用于把针对四个边的属性设置在一个声明
border-width 简写属性 用于元素的所有边框是指宽度 或者单独的为各边边框设置宽度
常用单位为像素(px)em
thin细边框/medium 默认/thick 定义粗的边框
border-style用于元素所有边框的样式
或者单独的为个边设置边框样式
none定义无边框
dotted定义点状边框
dashed定义虚线
solid定义实线
groove定义3D凹槽边框
ridge定义3D垄装边框
inset定义3Dinset边框
outset定义3Doutset边框
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-bottom简写属性用于把右框的所有属性设置到一个声明中
border-right-color设置元素的右边框的颜色
border-right-style设置元素的右边框的样式
border-right-width设置元素的右边框的宽度
border-top简写属性用于把下框的所有属性设置到一个声明中
border-top-color设置元素的上边框的颜色
border-top-style设置元素的上边框的样式
border-top-width设置元素的上边框的宽度
CSS3 新增的边框属性:
border-radius 设置所有四个 border-radius 属性的简写属性。
- (*) 同时设定四个角的圆角。
- (**) 分别设定左上 右下、左下 右上圆角。
- (***) 分别设定左上 、左下 右上、右下圆角。
- (****) 分别设定左上 、右上、右下、左下圆角。
border-top-left-radius 左上角圆角边框。
border-top-right-radius 右上角圆角边框。
border-bottom-right-radius 右下角圆角边框。
border-bottom-left-radius 左下角圆角边框。
border-image设置所有border-image属性的简写属性
注意:Internet Explorer不支持border-imageshux
border-image属性用于设置图片的边框
box-shadow 向方框添加一个或多个阴影
none无阴影
阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延值/阴影的颜色/inset内阴影(默认值为outset)