# 属性

# 字体属性

CSS字体属性定义字体颜色、大小、粗细、样式

  • color

    规定文本颜色

    div{ color: red; }
    div{ color: #ff0000; }
    div{ color: rgb(255,0,0); }
    div{ color: rgba(255,0,0,0.5); }
    
    1
    2
    3
    4
  • font-size

    设置字体大小

    能否管理文字的大小,在网页设计中是非常重要的。但是,不要通过调整字体大小使段落看上去像标题,或着使标题看上去像段落。

    h1{ font-size: 40px; }
    p{ font-size: 20px; }
    
    1
    2
  • font-weight

    设置文本粗细

    描述
    bold 粗体
    bolder 更粗
    lighter 细体
    100~900 定义由细到粗,400等同默认,700等同bold
    h1{ font-weight: normal; } /*默认*/
    div{ font-weight: bold; }
    
    1
    2
  • font-style

    指定文本的字体样式

    样式
    normal 默认
    italic 斜体
  • font-family

    指定元素字体

    注意:

    每个值用逗号分开

    如果字体名称包含空格,它必须加上引号

    font-family:"Microsoft YaHei","Simsun","SimHei";
    p{ font-family:"Microsoft YaHei"; }
    
    1
    2

# 背景属性

CSS的背景属性主要有以下几个

属性 描述
background-color 设置背景颜色
background-image 设置背景图片
background-repeat 设置背景图片如何填充
background-size 设置背景属性大小
background-position 设置背景图片显示位置
  • background-color

    设置背景颜色

    /*在.css中*/
    .box{
        width: 300px;
        height: 300px;
        background-color: #ffff00;
    }
    
    1
    2
    3
    4
    5
    6
    <!--在.html中-->
    <div class="box"></div>
    
    1
    2
  • background-image

    设置元素背景图像

    元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角,如果图像不够大的话,会在水平和垂直方向平铺图像;如果图像大小超过元素大小,从图像的左上角显示元素大小的那部分。

    /*在.css中*/
    .box{
        width: 600px;
        height: 500px;
        background-image: url("图片地址");
    }
    
    1
    2
    3
    4
    5
    6
    <!--在.html中-->
    <div class="box"></div>
    
    1
    2
  • background-repeat

    该属性设置如何平铺(重复 / 复制)背景图片

    说明
    repeat 默认值,水平方向、垂直方向都平铺
    repeat-x 只向水平方向平铺
    repeat-y 只向垂直方向平铺
    no-repeat 不平铺
    /*在.css中*/
    .box{
        width: 600px;
        height: 500px;
        background-image: url("图片地址");
        backgorund-repeat: no-repeat;
    }
    
    1
    2
    3
    4
    5
    6
    7
  • background-size

    该属性设置背景图像大小

    说明
    length 设置背景图片的宽度和高度,第一个值宽度,第二个值高度;如果只设置一个,第二个auto
    percentage 计算相对位置区域的百分比,第一个值宽度,第二个值高度;如果只设置一个,第二个auto
    cover 保持图片纵横比,并将图片缩放成完全覆盖背景区域的最小大小
    contain 保持图片纵横比,并将图片缩放成适合背景定位区域的最大大小
    /*在.css中*/
    .box{
        width: 600px;
        height: 500px;
        background-image: url("图片地址");
        backgorund-repeat: no-repeat;
        background-size: 100% 100%;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
  • background-position

    该属性设置背景图像显示的起始位置,其默认值是:0% 0%

    说明
    left top 左 上
    left center 左 中
    left bottom 左 下
    right top 右 上
    right center 右 中
    right bottom 右 下
    center top 中 上
    center center 中 中
    center bottom 中 下
    x% y% 第一个值是水平位置,第二个值是垂直位置,左上角是0% 0%,右下角是100% 100%。如果只指定了一个值,另一个默认是50%。都没指定,默认是0% 0%
    xpos ypos 和上面类似,不过单位是像素
    /*在.css中*/
    .box{
        width: 600px;
        height: 500px;
        background-image: url("图片地址");
        backgorund-repeat: no-repeat;
        background-position: center center;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8

# 文本 (opens new window)属性

  • text-align

    指定元素文本的对其方式(在页面中显示的位置,左、中、右)

    说明
    left 文本居中排列,默认值
    right 把文本排列到右边
    center 把文本排列到左边
    h1{ text-align: left }
    
    1
  • text-decoration

    规定添加到文本的修饰,下划线、上划线、删除线等

    说明
    underline 下划线
    overline 上划线
    line-through 删除线
    h1{ text-decoration: overline }
    
    1
  • text-transform

    控制文本大小写

    说明
    captialize 每个单词首字母大写
    uppercase 全部字母大写
    lowercase 全部字母小写
    p{ text-transform: captialize; }
    
    1
  • text-indent

    规定文本块中首行文本的缩进量

    p{ text-indent: 50px; }
    
    1

    负值是允许的。如果值是负数,将第一行左缩进

# 表格 (opens new window)属性

  • 表格边框

    指定CSS表格边框,使用border属性

    table,td{
        border: 2px solid black;
    }
    /*table设置外边框,td设置内边框
      border第一个值为边框宽度,第二个值设置边框样式(实线、虚线...),第三个值设置边框颜色*/
    
    1
    2
    3
    4
    5
  • 折叠边框

    border-collapse属性设置表格边框是否被折叠成一个单一的边框或隔开

    不设置时,默认是双线

    table{ border-collapse: collapse; } /*折叠成单一边框*/
    
    1
  • 表格宽度和高度

    widthheight属性定义单元格的宽度和高度

    table{ width: 100%; }
    td{ height: 50px; }
    
    1
    2
  • 表格文字对齐

    表格中的文本对齐和垂直对齐属性

    text-align属性设置水平对齐方式:左(left)、右(right)、中心(center)

    td{ text-align: right; }
    
    1

    vertical-align属性设置垂直对齐方式:上(top)、下(bottom)、中间(center)

    td{ vertical-align: bottom; }
    
    1
  • 表格填充

    如果在表的内容中控制空格之间的边框,使单元格文本与边框上下左右有些空隙,应使用tdth元素的填充属性padding

    td{ padding: 15px; }
    
    1
  • 表格颜色

    表格边框的颜色在上面 表格边框 中有说明,下面说明td元素的背景和文本颜色

    td{ background-color: green; color: white; }
    
    1
上次更新时间:: 3/2/2025, 11:26:44 PM