CSS学习笔记(二)

一、CSS单位

    1、颜色

        颜色用于设定字体以及背景的颜色显示,CSS中预设了16种颜色以及这16种颜色的衍生色,这16种颜色是CSS规范推荐的,而且主流的浏览器都能够识别它们。

        对于浏览器不能识别的颜色名称,就可以使用需要颜色的十六进制值或RGB值。

        在此,给一个颜色对照表的链接:颜色对照表

    2、长度

        1)绝对单位:英寸(in)、厘米(cm)、毫米(mm)、磅(pt)、pica(pc)。

        2)相对单位:是指在量度时需要参照其他页面元素的单位值。使用相对单位所量度的实际距离可能会随着这些单位值的改变而改变。CSS提供三种相对单位:em、ex和px。例:

        p{font-size:10pt;margin-left:1em}

二、字体

    font-family:用于指定页面使用的字体类型,比如宋体、华文行楷、Times New Roman等。

    font-weight:为CSS样式表的加粗属性,该属性有13个有效值,分别为bold、bolder、lighter、normal、100~900。

    font-size:用于设置字体的大小。

    font-style:用于定义字体显示的样式,有三种可选属性值:italic(斜体样式)、oblique和normal。

    font-variant:提供了字体变形的功能。该属性有两个有效值:normal和small-caps(表示使用小型的大写字母文本)。

    font:一次性地使用多个属性的属性值定义文本字体。如:h1{font:normal small-caps bolder 20pt "Cambria",宋体}

三、文本

    text-indent:用来设定文本块中首行的缩进。两种方式:一种是直接定义缩进长度;另一种是定义缩进的百分比。

    text-align:用来设置文本的水平对齐方式。CSS提供四种方式:left、center、right和justify(两端对齐)。

    white-space:空白属性。在标记上应用该属性可以影响浏览器对字符串或文本空间空白的处理方式。

    line-height:用来设置行间距。三种设定方式:第一使用默认值,即normal;第二种是直接设定高度;第三种是使用百分比。

    vertical-align:用来设定垂直对齐方式,有8个预设值,也可以使用百分比。

    text-transform:用于设定文本字体的大小写转换。四种属性值:none、uppercase、capitalize和lowercase。

    text-decoration:文本修饰属性,该属性可以为页面提供多种文本的修饰效果,比如下划线、删除线、闪烁等。

    word-spacing:用于设定词与词之间的间距。

    letter-spacing:用于设定字符间距。

四、边距与间隙

    margin:边距属性,可以定义元素周围的空间范围。该属性可以让内容重叠,也可以使用其包含的4个子属性分别对上下左右进行样式改变,并且可以快速设置所有边距。

    padding:用于设定元素框与边距之间的间隙的宽度。

五、颜色及背景

    color:用于设置前景色,常用来设置页面元素的字体颜色。

    background-color:用于设定背景色。默认背景色为透明(transparent)。

    background-image:用于设定标记的背景图片,通常在标记<body>中应用。

    background-repeat:用于设定背景图片是否重复平铺。4中属性:repeat(水平和垂直方向都重复平铺)、repeat-x、repeat-y和no-repeat,默认为repeat。

    background-position:用于指定背景图片在页面中所处的位置。该属性值分4类:绝对定义位置(length)、百分比定义位置(percentage)、垂直对齐值和水平对齐值,而垂直对齐值包括top、center和bottom,水平对齐值包括left、center和right。

    background-attachment:用来设定背景图片是否随文档一起滚动。包含两个属性值:scroll和fixed。

    background:一次性设定背景样式。

六、边框

    border-style:用于设定边框的样式,也就是风格。CSS设定了9种边框样式。

    border-width:用来设定边框的宽度,预设有三种属性:medium、thin和thick,另外可自行设置宽度。

    border-color:用于设定边框的颜色。

    border:为页面元素设定边框的宽度、样式和颜色。

你可能感兴趣的:(CSS学习笔记(二))