b、定义相应的ID选择器的样式。
#ID标识名
{
属性名1:属性值1;
属性名2:属性值2;
}
优先级:类选择器>标签选择器>ID选择器
8、常用的样式修饰
样式分为文本及字体、背景、列表几个方面。
1、文本和字体属性
a、文本属性用于定义文本的外观,包括颜色、行高、对齐方式、字符间距等。
属性名 含义
举例 应用场景
line-height 设置行高(单位px) line-height="25px" 布局多行文本
text-align 设置对齐方式( 常用的取值为:left、right、center) text-align="center" 适应于各种元素对齐
letter-spacing 字符间距(常用:3px;5px;) letter-spacing="5px"
加大字符间距
text-decoration 文本修饰(underline,none) text-decoration="none" 下划线的加或者去
white-space 规定如何处理空白(nowrap不换行) white-space="nowrap" 不换行
b、字体属性,用来定义字体类型,字号的大小,字体是否加粗等。
属性名 含义
举例 应用场景
font 在一个声明中设置字体的所有属性 font:bold 12px 宋体 ; 常用于字体样式缩写
font-familu 字体类型 font-family:黑体 ; 设置字体类型
font-size 字体大小 font-size:12px;
font-weight 字体 的粗细 font-weight:bold;(粗体)
c、背景属性
用来定义网页的背景色或者背景图片,精确的控制背景出现的位置和平铺的方向
属性名 含义
举例 应用场景
background 声明所有的背景属性 background:#ccc
url(images/)repeat-x 20px -100px
background-color 背景颜色 background-color:#RGB;
background-image 背景图片 background-image:url(images/);
background-repeat 背景平铺方式 background-repeat:no-repeat;(背景不平铺)
bcakground-position 背景出现的初始位置 background-position:20px-100px; 位置分别代表X,Y轴方向的坐标
针对于background-repeat属性我们又可以细分为:
平铺方式 含义
应用场景
repeat 纵横向都平铺(默认值) 用小图片来构建整个背景
repeat-x 横向平铺
repeat-y 纵向平铺
norepeat 背景图不重复平铺
针对于 bcakground-position 属性我们又可以细分为:(可以精确的控制背景图出现的位置)
a、 Xpos Ypos 代表设置的背景图片出现的初始位置,可以为负值
b、X% Y% 使用百分比表示背景出现的初始位置
c、X方向、Y方向的关键词 水平的:left,center,right 纵向:top,center,bottom
例:right top 在右上角出现 left bottom在左下方出现