html从零开始5-字体、背景、文本、表格属性【搬代码】

搬代码

已于 2024-02-12 20:25:11 修改

阅读量701

点赞数 12

文章标签： html 前端

于 2024-02-09 22:03:26 首次发布

本文链接：https://blog.csdn.net/weixin_52001174/article/details/136081776

版权

本文详细解释了HTML中的CSS属性，包括文本样式（如颜色、对齐、粗细），背景属性（颜色、图片、重复、尺寸），以及表格属性（边框、折叠、尺寸、对齐）。

摘要由CSDN通过智能技术生成

新年快乐兄弟萌！！！今天发一半，电脑关机，让电脑也休息一下，明年补充，我们明年2024再见

字体属性

color
规定文本颜色

   div{color: red;}
    div{color:#ff0000;}
    div{color:rgb(255,0,0);}
    div{color:rgba(255,0,0,0.5);}

font-size
设置文本的大小

    h1{font-size: 40px;}
    h2{font-size: 30px;}
    p{font-size: 14px;}

chrome浏览器接受最小的字体是12px

font-weight
设置文本的粗细

    bold 定义粗体字符
    bolder 定义更粗的字符
    lighter 定义更细的字符
    100-900 定义由细到粗 400等同默认
    H1{font-weight: normal;}
    div{font-weight: bold;}
    p{font-weight: 900}

font-style
指定文本的样式

    normal 默认值
    italic 定义斜体字

font-family
font-family属性指定一个元素的字体
每个值用逗号分开
如果字体名称包含空格，它必须加上引号

    font-family:"Microsoft YaHei","Simsun","SimHei";

背景属性

解释在style中

<!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>
        /*
        css背景属性主要有以下几个：
        background-color 设置背景颜色
        background-image 设置背景图片
        background-position 设置背景图片显示位置
        background-repeat 设置背景图片如何填充
        background-size 设置背景图片大小属性

        background-color属性
        该属性设置背景颜色
        */
        .box{
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        /*
        background-image属性
        设置元素的背景图像
        */
        .box2{
            width: 400px;
            height: 400px;
            background-image: url("3.jpg");
        }
        /*
            background-repeat属性
            repeat 默认值
            repeat-x 只向水平方向平铺
            repeat-y 只向垂直方向平铺
            no-repeat 不平铺
        */
        .box3{
            width: 1200px;
            height: 1200px;
            background-image: url("3.jpg");
            background-repeat: no-repeat;
        }
        /*
        background-size属性
        该属性设置背景图片大小
        ength 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只设一个值，第二个值auto
        percentage 计算相对区域的百分比，第一个值宽度，第二个值高度，如果只设一个值，第二个值auto
        cover 保持图片纵横比并将图片缩放成完全覆盖北京区域的最小大小
        contain 保持图片纵横比并将图片缩放成完全覆盖北京区域的最小大小
        */
        .box4{
            width: 800px;
            height: 400px;
            background-image: url("2.jpg");
            background-repeat: no-repeat;
            background-size: contain;
        }
        /*
        background-position属性
        该属性设置背景图像的起始位置，其默认位置：0% 0%
        left top 左上角
        left center 左中
        left bottom 左下
        right top 右上
        right bottom 左下
        center top 中上
        center center 中中
        center bottom 中下
        x% y% 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100%，
        如果只指定了一个值，其他默认是50%，默认是0% 0%
        xpos ypos 单位是像素
        */
        .box5{
            width: 500px;
            height: 500px;
            background-image: url("3.jpg");
            background-position: left top;
        }
    </style>
</head>
<body>

<div class="box">
    <p>box</p>
</div>

<div class="box2">
    <p>box2</p>  
</div>

<div class="box3">
    <p>box3</p>
</div>

<div class="box4">
    <p>box4</p>
</div>

<div class="box5">
    <p>box5</p>
</div>
</body>
</html>

文本属性
解释在style中

<!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-align
        指定元素文本的水平对其方式
        left 文本居左排列，默认值
        right 把文本排列到右边
        center 把文本排列到中间
        */
        h1{
            text-align: center;
        }
        H2{
            text-align: left;
        }
        h3{
            text-align: right;
        }
        /*
        text-decoration
        属性规定天机到文本的修饰，下划线，上划线，删除线等
        underline 定义下滑吸纳
        overline 定义上划线
        line-through 定义删除线
        */
        h1{
            text-decoration: underline;
        }
        H2{
            text-decoration: overline;
        }
        h3{
            text-decoration: line-through;
        }
        /*
        text-transform
        属性控制文本大小写
        captialize 定义每个单词开头大写
        uppercase 定义全部大写字母
        lowercase 定义全部小写字母
        */
        .captialize{
            text-transform: capitalize;
        }
        .uppercase{
            text-transform: uppercase;
        }
        #lowercase{
            text-transform: lowercase;
        }
        /*
        text-indent
        属性规定文本块中首行文本的缩进
        50px 60px....
        */
        #px{
            text-indent: 50px;
        }
    </style>
</head>
<body>

    <h1>hi标签center 把文本排列到中间,underline 定义下滑吸纳</h1>
    <h2>h2标签left 文本居左排列，默认值,overline 定义上划线</h2>
    <h3>h3标签right 把文本排列到右边,line-through 定义删除线</h3>

    <p class="captialize">assddffg</p>
    <p class="uppercase">assddffg</p>
    <p id="lowercase">assddffg</p>

    <p id="px">实打实的环境凯撒帝国和凯撒法国开始实施实打实的环境凯
        撒帝国和凯撒法国开始实施实打实的环境凯撒帝国和凯撒法国开始实施实打实的环境
        凯撒帝国和凯撒法国开始实施实打实的环境凯撒帝国和凯撒法国开始实施实打实的环境凯
        撒帝国和凯撒法国开始实施实打实的环境凯撒帝国和凯撒法国开始实施实打实的环境凯撒
        帝国和凯撒法国开始实施实打实的环境凯撒帝国和凯撒法国开始实施实打实的环境凯撒帝
        国和凯撒法国开始实施实打实的环境凯撒帝国和凯撒法国开始实施实打实的环境凯撒帝国
        和凯撒法国开始实施实打实的环境凯撒帝国和凯撒法国开始实施实打实的环境凯撒帝国和凯
        撒法国开始实施实打实的环境凯撒帝国和凯撒法国开始实施实打实的环境凯撒帝国和凯撒法
        国开始实施实打实的环境凯撒帝国和凯撒法
        国开始实施实打实的环境凯撒帝国和凯撒法国开始实施 
    </p>
</body>
</html>

表格属性
解释在style中

<!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>
        /*
        表格边框
        指定css表格边框，使用border属性
        table,td{
            border: 1px solid black;
        }
        */
        table,td{
            border: 1px solid green;
        }
        /*
        折叠裱框
        border-collapse 属性设置表格的边框是否折叠成一个单一的边框或隔开
        */
        /*
        表格跨百度和高度
        width和height属性定义表格的宽度和高度
        */
        table{
            border-collapse: collapse;
            width: 400px;
            height: 200px;
        }
        /*
        表格文字对齐
        表格中的文本对齐和垂直对齐
        text-align属性设置水平对齐方式，向左右或中心
             td{text-align: right; }
        垂直对齐属性设置对齐
            td{height:50px; vertical-align: center;}
        表格填充
        如果在表的内容中控制表格之间的边框，应使用td和th元素的填充属性
        td{padding: 15px;}
        */
         /*
        表格颜色
        下面的例子指定边框的颜色，和th元素的文本和背景颜色
        table,td,th{border:1px solid green;}
        td{background-color: aquamarine;}
        */
        td{
            text-align: center;
            vertical-align: center;
            padding: 20px;
            background-color: aquamarine;/*表格背景*/
            color: aliceblue;/*字体颜色*/
        }

    </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>