CSS文字属性
| 说明 |
font-family:字体名 | 字体类型 |
font-size:像素值 | 字体大小 |
font-weight:bold 较粗 font-weight:normal 默认值 | 字体粗细 |
font-style:normal 默认值 font-style:italic 斜体 font-style:oblique将没有斜体变量(italic)的特殊字体,要应用oblique | 字体斜体 |
color | 颜色 |
CSS注释
语法:/*注释的内容*/ CSS段落属性
属性 | 说明 |
text-decoration:none 默认值 text-decoration:underline 下划线 text-decoration:line-through 删除线 | 下划线、删除线、顶划线 |
text-transform:uppercase 转换成大写 text-transform:lowercase 转换成小写 text-transform:capitalize 将每个英文单词的首字母转换成大写,其余无转换发生 | 文本大小写 |
font-varient:normal 默认值 font-varient:small-caps 将英文文本转换为“小型”大写字母 | 将英文文本转换为“小型”大写字母 |
text-indent:像素值 | 段落首行缩进 text-indent的属性值应该是字体font-size属性值的两倍 |
text-align:left 默认值,左对齐 text-align:center 居中对齐 text-align:right 右对齐 | 文本水平对齐方式 |
line-height:像素值 | 行高 |
letter-spacing:像素值 | 字母间距 控制的是字间距,每一个中文文字作为一个“字”,而每一个英文字母也作为一个“字”! |
word-spacing:像素值 | 词间距,以空格为基准进行调节,如果多个单词被连在一起,则被word-spacing视为一个单词;如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词 |
边框的三个属性
属性 | 说明 |
border-width:像素值 | 边框的宽度 |
border-style:solid 实线 border-style:dashed 虚线 | 边框的外观 |
border-color:颜色值 | 边框的颜色 |
CSS边框border局部样式
上边框border-top 下边框border-bottom 左边框border-left 右边框border-right | 列: border-top-width:1px; border-top-style:solid; border-top-color:red; |
CSS背景图像属性
属性 | 说明 |
background-image 语法: background-image:url("图像地址"); | 定义背景图像的路径,这样图片才能显示嘛 |
background-repeat | 背景重复样式,定义背景图像显示方式,例如纵向平铺、横向平铺 |
background-position:像素值 | 定义背景图像在元素哪个位置 |
background-attachment:scroll scroll表示背景图像随对象滚动而滚动,是默认选项; background-attachment:fixed fixed表示背景图像固定在页面不动,只有其他的内容随滚动条滚动。 | 定义背景图像是否随内容而滚动 |
background-color:颜色值 | 背景颜色 |
background-repeat属性取值
属性值 | 说明 |
no-repeat | 表示不平铺 |
repeat | 默认值,表示在水平方向(x轴)和垂直方向(y轴)同时平铺 |
repeat-x | 表示在水平方向(x轴)平铺 |
repeat-y | 表示在垂直方向(y轴)平铺 |
background-position属性的关键字设置值
属性值 | 说明 |
top left | 左上 |
top center | 靠上居中 |
top right | 右上 |
left center | 靠左居中 |
center center | 正中 |
right center | 靠右居中 |
bottom left | 左下 |
bottom center | 靠下居中 |
bottom right | 右下 |
使用伪类定义动态超链接
属性 | 说明 |
a:link | 定义a元素未访问时的样式 |
a:visited | 定义a元素访问后的样式 |
a:hover | 定义鼠标经过显示的样式 |
a:active | 定义鼠标单击激活时的样式 |
CSS图片垂直对齐
vertical-align属性取值 | 说明 |
top | 顶部对齐 |
middle | 中部对齐 |
baseline | 基线对齐 |
bottom | 底部对齐 |
文字环绕效果-初识float
float属性值 | 说明 |
left | 元素向左浮动 |
right | 元素向右浮动 |
设置图片与文字的间距
img{margin-right:20px;margin-bottom:20px;float:left;}
margin-top:像素值;
margin-bottom:像素值;
margin-left:像素值;
margin-right:像素值;