<span>标签 </span>
属性名 | 含义 | 举例 |
font-family | 设置字体类型 | font-family:"隶书" |
font-size | 设置字体大小 | font-size:12px; |
font-style | 设置字体的风格 | font-style:italic; |
font-weight | 设置字体粗细 | font-weight:bold; |
font | 在一个声明设置所有字体属性 | font:italicbold36px"宋体 " |
font-style属性
normal | 正常 |
italic | 倾斜(用的多) |
oblique | 斜体 |
font-weight属性
值 | 说明 |
normal | 默认值定义标准字体 |
bold | 粗体字体 |
bolder | 更粗字体 |
lighter | 更细字体 |
100....900 | 定义由粗到细的字体400等同于normal,700等同于bold |
font属性
字体属性的顺序:字体风格---字体粗细--字体大小---字体类型
p span{
font:obiqer bold 12px"楷体"
}
文本属性
属性 | 含义 | 举例 |
color | 设置文本颜色 | color#ooc; |
text-align | 设置元素水平对齐方式 | text-align:right; |
text-indent | 设置首行文本缩进 | text-indent:20px; |
line-height | 设置文本行高 | line-height:25px; |
text-ddecoration | 蛇者文本装饰 | text-decoration:underline;(对文字添加下划线) |
值 说明
left 把文本排列到左边。默认值:由浏览器决定
right 把文本排类到右边
center 把文本排类到中间
justify 实现两端对齐文本效果
首行缩进 :text-indent:em或px
行高:line-height:px
文本装饰:text-decortion属性
值:
none 默认值,定义标准文本 text-decortion:none
underline 设置文本下划线
overline 设置文本上划线
line-through 设置文本删除线
垂直对齐方式:vertical属性:middle、top、bottom 。
文本阴影:text-shadow:color x-offset y-offset blur-radius
字体属性
字体属性的顺序:字体风格----字体粗细----字体大小---字体类型
伪类名称 含义 实例
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited{color:#333;}
a:hover(记住) 鼠标悬浮上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active{color:#999;}
伪类样式
标签名:伪类名{声明;}
设置伪类的顺序 :a:link>a:visited>a:hover>a:active
list-style-type属性值:
none | 无标记符号 |
disc | 实心圆 |
circle | 空心圆 list-style-type:none |
square | 实心正方形 |
decimal | 数字 |
list-style-image
list-sytle-position
list-style(记住)
背景颜色:background-colortransparent 透明色
背景图像:background-image:url(图片路径)
背景重复方式 :background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
背景定位
background-position属性
值 含义
xpos 单位:px,Xpos表示水平位置,Ypos表示垂直位置
X% Y% 使用百分比表示背景位置
X Y 方向关键字 水平方向关键字:left center right
垂直方向关键词:top center bottom
背景尺寸 background-size
属性值 描述
auto 默认值,使用背景图片保持原样
percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的而相对元素宽度来计算的
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适合所定义背景的区域
线性渐变
颜色沿着一条直线过渡;从左到右、从右到左、从上到下
语法
liner-gradient{position(渐变方向)color1,color2,...)
经向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,从而从一个起点朝所有方向混合