10.5（CSS）

最新推荐文章于 2025-12-03 18:49:33 发布

原创最新推荐文章于 2025-12-03 18:49:33 发布 · 719 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

1.CSS字体属性

（1）字体大小（font-size）

div {
    font-size: 60px;
}

大多浏览器默认字体为16px

通常给 body 设置 font-size 属性，这样 body 中元素都可以继承

可以借助浏览器的“检查”控制看，并且临时修改（刷新页面恢复）

（2）字体族（font-family）

div {
    font-family: "STCaiyun","Microsoft YaHei",sans-serif;
}

使用字体的英文名字兼容性会更好（建议字体名使用引号包裹）

设置多个字体，通常会在最后写上serif(衬线字体)或sans-serif(非衬线字体)

windows 系统中，默认的字体就是微软雅黑

（3）字体风格（font-style）

常用属性值：

normal——正常（默认值）

italic——斜体(使用字体自带的斜体效果)（推荐）

oblique——斜体(强制倾斜产生的斜体效果)

div {
    font-style: italic;
}

（4）字体粗细（font-weight）

常用属性值：

lighter:细 normal:正常

bold:粗 bolder:很粗(多数字体不支持)

数值：

100~1000且无单位，数值越大，字体越粗

100~300等同于lighter，400~500等同于normal，600及以上等同于bold

div {
    font-weight: blod;
}

div {
    font-weight: 600;
}

（5）字体复合写法（font）

  div {
    font: bold italic 100px "STCaiyun","STHupo",sans-serif;
        }

4.常用文本属性

（1）文本颜色（color）

可选：颜色名，rgb或rgba，HEX或HEXA（开发常用），HSL或HSLA

div{
    color: rgb(112,45,78);
}

（2）文本间距

字母间距：letter-spacing

单词间距：word-spacing

属性值为像素(px)，正值让间距增大，负值让间距缩小。

 /* 字母间距 */
.htl1 {
    letter-spacing: 40px;
}
 /* 单词间距 */
.htl2 {
    word-spacing: 40px;
}

（3）文本修饰（text-decoration）

/* 上划的绿色虚线 */
.htl1 {
    text-decoration: overline green dotted;
}
/* 下划的蓝色波浪线 */
.htl2 {
    text-decoration: underline bule wavy;
}
/* 删除线 */
.htl3 {
     text-decoration: line-through;
}
/* 没有线 */
a,ins,del {
     text-decoration: none;
}

（4）文本缩进（text-indent）

div {
    text-indent: 40px;
}

（5）文本对齐_水平（text-align）

常用值：

left :左对齐(默认值)

right :右对齐

center :居中对齐

div {
    text-align: center;
}

（6）行高（line-height）

div {
    /* 第一种写法，值为像素 */
    line-height: 60px;

    /* 第一种写法，值为normal */
    line-height: normal;

    /* 第一种写法，值为数值（用的比较多） */
    line-height: 1.5;

    /* 第一种写法，值为百分比 */
    line-height: 150%;
}

注意事项：

line-height 过小会怎样?-- 文字产生重叠，且最小值是0，不能为负数

line-height 是可以继承的

line-height和 height 是什么关系?3.

设置了 height ，那么高度就是 height 的值；不设置 height 的时候，会根据 line-height 计算高度

应用：

多行文字——控制行与行之间的距离

单行文字——让 height 等于 line-height，可以实现文字垂直居中

(7)文本对齐_垂直（后面会用定位做）

居中：单行文字，让 height等于line-height 即可

底部：单行文字，让line-height =(height *2)-font-size -X

（8）vertical-align：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式

vertical-align不能控制块元素

2.CSS列表属性（作用在ul，ol，li元素上）

ul {
    /* 列表符号 */
    list-style-type: decimal;
    /* 列表符号的位置 */
    list-style-position: outside;
    /* 自定义列表符号 */
    list-style-image: url(../东山岛.jpg);
    /* 复合属性 */
    list-style: decimal outside;
}

3.CSS表格属性

（1）边框相关属性（其他元素也可以使用）

/*  分开形式  */
table {
    border-width: 2px;
    border-color: rgb(25, 141, 219);
    border-style: solid;
}
/*  复合形式  */
td,th {
    border: 2px blue solid;
}

（2）表格独有属性（只有table标签可以用）

table {
/* 控制表格的列宽 */
table-laynot: fixd;
/* 控制单元格间距（生效的前提是：不能合并相邻的边框） */
border-spacing: 0px;
/* 合并相邻的单元格的边框 */
border-collapse: separate;
/* 隐藏没有内容的单元格（生效的前提是：不能合并相邻的边框） */
empty-cells: show;
/* 设置表格标题的位置 */
caption-side: bottom;
}

4.CSS背景属性

div {
/* 设置背景颜色 默认值是transparent */
background-color: transparent;
/* 设置背景图片 */
background-image: url(../东山岛.jpg);
/* 设置背景图片的重复方式 */
background-repeat: repeat;
/* 可以控制背景图片的位置,第一种写法：用关键词 */
background-position: left center;
/* 可以控制背景图片的位置,第二种写法：用具体的像素值 */
background-position: 170px 200px;
/* 复合属性 */
background: skyblue url(../东山岛.jpg) no-repeat 300px;
}

/*  自定义鼠标图标  */
cursor: url("../东山岛.jpg"),pointer;

4.CSS盒子模型

（1）CSS长度单位（必须加单位）

px：像素 em：相对元素 font-size 的倍数

rem：相对根（html）字体大小 %：相对父元素计算

（2）元素的显示模式

作业