CSS样式属性

时间:2019-06-12
本文章向大家介绍CSS样式属性,主要包括CSS样式属性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

背景

background:简写属性,作用是将背景属性设置在一个声明中;

background-color:设置元素的背景颜色;

background-image:把图像设置为背景;

background-position:设置背景图像的起始位置;

background-repeat:设置背景图像是否及如何重复;

background-attachment:背景图像是否固定或者随着页面的其余部分滚动;

建议使用background属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

background

文本

color:定义文本颜色;

text-indent:用于定义块级元素中第一个内容行的缩进,可以继承父元素的值;

text-align:规定元素中的文本的水平对齐方式;

line-height:设置行间的距离(行高),一行文字高度加上文字上下的空白区域的高度;

letter-spacing:设置字符间距;

word-spacing:设置字间距;

text-decoration:向文本添加修饰,如加下划线,修饰的颜色由 "color" 属性设置;

text-transform:控制文本的大小写;

text-shadow:设置文本阴影,规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色;

direction:设置文本方向,ltr(left to right),rtl(right to left)。

text

文字

font:简写属性在一个声明中设置所有字体属性;

font-family:设置字体系列;可以设置多个字体,如果浏览器不支持第一个,则会尝试下一个;

font-size:设置字体的尺寸;

font-weight:设置字体的粗细,100-900,400等同于normal,而700等同于bold;

font-style:设置字体风格,italic斜体;

font-variant:以小型大写字体或者正常字体显示文本,small-caps小型大写字母的字体。

word

盒子模型

  • Margin(外边距) - 清除边框外的区域,外边距是透明的;
  • Border(边框) - 围绕在内边距和内容外的边框;
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的;
  • Content(内容) - 盒子的内容,显示文本和图像。

margin:简写属性。在一个声明中设置所有外边距属性;

border:简写属性把四个边的属性设置在一个声明;

border-style:用于设置元素所有边框的样式,或者单独地为各边设置边框样式;

border-width:简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度;

border-color:简写属性设置元素的所有边框中可见部分的颜色,或者单独地为各边边框设置颜色。

padding:简写属性在一个声明中设置元素的所内边距属性;

当调整padding大小时,会把整个盒子撑大,可以利用box-sizing属性解决。

margin、border、padding

列表

 

 

6、display

 

7、float

 

8、position

 

$flag 上一页 下一页