前端研习录（04）——CSS字体属性、背景属性、文本属性及表格属性

最新推荐文章于 2023-06-27 15:26:09 发布

清风不渡

最新推荐文章于 2023-06-27 15:26:09 发布

阅读量259

点赞数

分类专栏：前端研习录文章标签： css 前端 css3

本文链接：https://blog.csdn.net/WXKKang/article/details/125390426

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（04）——CSS字体属性、背景属性、文本属性及表格属性

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

一、CSS属性类型

重拾前端记忆，记录学习笔记，现在进入CSS属性类型部分，CSS属性大致分为字体属性、背景属性、文本属性及表格属性这四类，以下一一说明，为方便记录，采用内部样式进行举例。

1、字体属性

字体属性无疑就是定义字体样式的属性，大致有以下几种：

color：规定字体颜色
font-size：规定文本大小
font-weight: 文本粗细，值如下：
bold：定义粗体字符
bolder：定义更粗的字符
lighter：定义更细的字符
1~900：由细到粗，400为默认，700等同于bold
font-style：定义文本字体样式，值如下：
normal：默认值
italic：定义斜体字
font-family：定义元素的字体（如微软雅黑等）

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>

    <style>
        .one{
            color: red;
            font-size: 30px;
            font-weight: lighter;
            font-style: italic;
            font-family: serif;
        }

    </style>

</head>
<body>
    
    <h3>文本属性</h3>

    <p class="one">我是文本属性例子</p>
    <p>我是未设置文本属性的P标签</p>

</body>
</html>

2、背景属性

背景属性就是定义背景样式的属性，大致有以下几种：

background-color：设置背景颜色
background-image：设置背景图片
background-repeat：设置背景图像平铺属性，值如下：
repeat：默认值-平铺
repeat-x：水平方向平铺
repeat-y：垂直方向平铺
no-repeat：不平铺
background-size：设置背景图像的大小，值如下：
length：设置图片的宽高，第一个值宽度，第二个值高度，只设置第一个时第二个auto
percentage：设置相对区域的百分比宽高，第一个值宽度，第二个值高度，只设置第一个时第二个auto
cover：保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain：保持图片纵横比并将图片缩放成适合背景定位区域的最大大小
background-position：设置背景图像的起始位置，默认值为0%,0%，值如下：

left top 左上角	left center 左中	left bottom 左下
right top 右上角	right center 右中	right bottom 右下
center top 中上	center center 中中	center bottom 中下
	x%,y%：第一个值为水平位置，第二个值为垂直位置；单位是百分比
	xpos,ypos：第一个为水平位置，第二个为垂直位置；单位是像素

举例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>

    <style>
        #box {
            width: 400px;
            height: 400px;
            background-color: blue;
            background-image: none;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: left, top;
        }
    </style>

</head>

<body>

    <div id="box">

    </div>

</body>

</html>

3、文本属性

文本属性即是定义文本类型的属性，大致有以下几种：

text-align：指定元素文本的水平对齐格式
left：文本居左排列默认
center：文本居中
right：文本右对齐
text-decoration：规定文本修饰
underline：下划线
overline：上划线
line-through：删除线
text-transform：控制文本大小写
capitalize：每个单词首字母大写
uppercase：所有字母大写
lowercase：所有字母小写
text-indent：规定首行文本缩进
负值为向左缩进

举例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>

    <style>
        .text {
            text-align: left;
            text-decoration: underline;
            text-transform: uppercase;
            text-indent: 50px;
        }
    </style>

</head>

<body>

    <p class="text">这是文本属性abc</p>


</body>

</html>

4、表格属性

表格属性即是定义表格类型的属性，大致有以下几种：

border：设置边框（边框宽度边框样式边框颜色）
border-collapse：设置边框是否折叠
width、height：设置表格宽高
text-align：设置文本水平位置
vertical-align：设置文本垂直位置
padding：设置文本填充空白宽度
background-color：设置表格背景颜色

举例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>

    <style>
        td {
            border: 3px solid red;
            text-align: center;
            vertical-align: top;
            padding: 20px;
        }

        table {
            border-collapse: collapse;
            width: 500px;
            height: 300px;
            background-color: aquamarine;
        }
    </style>

</head>

<body>

    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>


</body>

</html>

那么有个问题，对于表格属性来讲，如果用元素选择器来设定样式的话，有可能会对对应文档的其他表格也产生影响，如果用类标签选择器或者ID选择器的话，对于<table>可以指定对应的class或id，但是对于<td>标签来讲难道还要一个个的去指定class吗？这个问题我们留到下一篇文章解决

清风不渡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端研习录（04）——CSS字体属性、背景属性、文本属性及表格属性

重拾前端记忆，记录学习笔记，现在进入CSS属性类型部分，CSS属性大致分为字体属性、背景属性、文本属性及表格属性这四类，以下一一说明，为方便记录，采用内部样式进行举例。字体属性无疑就是定义字体样式的属性，大致有以下几种：举例如下：2、背景属性背景属性就是定义背景样式的属性，大致有以下几种：举例如下：3、文本属性文本属性即是定义文本类型的属性，大致有以下几种：举例如下：4、表格属性表格属性即是定义表格类型的属性，大致有以下几种：举例如下：那么有个问题，对于
复制链接

扫一扫