常用CSS样式设置

Author: 刘老师(Aaron Lau)

常用CSS样式设置

文字

我们以div标签举例,来设置常见的文字样式

<div>今天天气真晴朗!</div>
div {
    /* 文字大小为14像素 */
    font-size: 14px;

    /* 文字颜色是黄色的 */
    color: yellow;

    /* 段落首行缩进两个字的宽度 */
    text-indent: 2em;

    /* 设置对齐方式,center:居中对齐; left:左对齐; right:右对齐*/
    text-align: center;

    /* 设置字体为sans-serif */
    font-family: sans-serif;

    /* 文字斜体显示,normal:文本正常显示; italic:文本斜体显示; oblique:文本倾斜显示 */
    font-style:italic;

    /* 文字加粗显示, bold:加粗; normal:正常大小*/
    font-weight: bold;
}

背景

div {
    /* 设置背景色为灰色 */
    background-color: gray;

    /* 设置背景图片 */
    background-image: url("logo.gif");

    /* 背景图片不重复:no-repeat; 水平重复:repeat-x; 垂直重复:repeat-y; */
    background-repeat:no-repeat;

    /* 背景图片位置 top:上; left:左; right:右; bottom:底部; center:中间; */
    /* 也可以设置百分比例如 66% 33% ,第一个数是水平方向,第二个数是垂直方向*/
    background-position:top right;

    /* 如果文档较长,那么当文档向下滚动时,背景图像会固定在文档中不滚动*/
    background-attachment:fixed;
}

宽度和高度

div {
    /* 设置宽度为200像素 */
    width: 200px;

    /* 设置高度为100像素 */
    height:100px;
}

边框

div {
    /* 设置div的边框为1px的线条*/
    border:1px solid;

    /* 分别设置div四个边的边框 */
    border-top: 1px solid #08c;
    border-left: 1px dashed red;
    border-right: 1px solid;
    border-bottom: 1px solid red;
}
上一篇课程 下一篇课程

学生登录