CSS样式
CSS背景
background-color
为元素设置背景色,该值接受任意一个合法的颜色值,如果不设置,则默认为transparent
透明色background-image
为元素设置背景图片,属性的默认值为none,表示元素上不放置任何图片backgroung-repeat
可以为元素的背景图片实行平铺,属性值repeat
表示在水平和竖直方向上进行平铺操作,属性repeat-x
表示在水平方向上进行平铺,repeat-y
表示在竖直方向上进行平铺background-position
为元素的背景图片进行定位,- 关键字属性值包括
center
,表示背景图片居中显示,其中还包括top
,right
,left
,bottom
,其中,如果属性值指定为top的话,其真实表示位置为上方中部,也就是说,如果只指定一个属性值,则另一个都是默认为center,如果想要表示为左上角,则需要设置属性值为top left
- 百分比,background-position : 50% 50%; 百分比数值用来表示图片在整个布局中的具体位置所占百分比,上面的例子就是表示位置居中显示
- 数值:background-position : 50px 50px; 其中的数值表示背景距离左边和上边的距离大小,上面的例子表示背景图片距离左边 50像素,距离上边50像素
- 关键字属性值包括
background-attachment
表示背景关联:如果文档很长,在滚动的时候,背景会随着屏幕的滚动而滚动,如果需要固定住背景的话,设置属性值为fixed
就不会随着屏幕的滚动而滚动了
CSS文本
text-indent
表示文本缩进,可以为所有元素的第一行文本进行给定数值的缩进,该值可以为负值,代码示例:
p {text-indent: 5em;}
表示文本缩进5个相对单位,其中
em
表示相对单位,如果一个字体大小为16px,那个5em就表示 5 * 16 px个像素值- 百分比缩进
p {text-indent: 20%;}
表示缩进值为父文本的20%,
- 百分比缩进
text-align
设置文本行之间的相互对齐方式,属性值分别包括left,right,center,其中justfy是设置两端对其,系统会自动调整单词里面的间距来保证每行文字的两端对其word-spacing
改变字(单词)之间的标准间隔letter-spacing
改变字符或字母之间的间隔text-transform
字符转换,用来处理文本的大小写,属性值包括uppercase
:大写、lowercase
:小写、capitalize
:每个单词的首字母大写text-decoration
文本装饰,属性值包括underline
:下划线、overline
:上划线、line-through
:删除线、blink
:文本闪烁white-space
处理空白字符,对源文档中的空白符,空格,tab键进行处理- direction 设置文本的文字方向
注释:对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。
CSS字体
font-family
定义文本的字体font-style
定义字体风格normal
:正常 、italic
:文本斜体显示、oblique
:文本倾斜显示font-variant
定义字体变形 可以设定小型的大写字母,font-weight
定义字体加粗font-size
定义文字大小
CSS链接
链接共有四种样式分别为
a:link
普通的,未被访问的链接a:visted
用户已访问的链接a:hover
用户鼠标悬停在连接上方a:active
用户鼠标被点击的时刻
注意:当为链接设置不同的样式的时候,一定要遵循如下的顺序
a:hover必须要在a:link和a:visited之后
a:active必须要在a:hover后面
代码示例:
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
CSS轮廓
outline
:设置所有的轮廓属性outline-color
:设置轮廓颜色outline-style
:设置轮廓样式outline-width
:设置轮廓宽度