CSS-基本常用属性篇（字体、文本、背景、表格..)-CSDN博客

这篇我们利用css表格表单等常用属性将页面变得更加美观！

注意：以上不单只涉及表格表单属性，以下我将介绍一些基本的，CSS的一些常用属性。

练习效果图：

源代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="属性练习link.css">
</head>
<body>
    <table width="400px" height="300" border="1">
        <tr >
            <td class="class1">无</td>
            <td class="class1">列标题1</td>
            <td class="class1">列标题2</td>
        </tr>
        <tr>
            <td class="class1">行标题1</td>
            <td class="class2">普通单元格1</td>
            <td class="class2">普通单元格2</td>
        </tr>
        <tr>
            <td class="class1">行标题2</td>
            <td class="class2">普通单元格3</td>
            <td class="class2">普通单元格4</td>
        </tr>

    </table>
    <br>

    <hr>
    
    <br>
    
    <input type="text" name="null" id="null">默认样式的文本域<br>
    <input type="text" id="class3" placeholder="输入显示的文字为蓝色" >改变了边框颜色和文字颜色的文本域<br>
    <br>
    <input type="text" name="null2" id="null2">增加了背景图片的文本域<br>
    <br>
    <input type="submit" value="提交">默认风格的提交按钮<br>
    <br>
    <input type="submit" value="登录" id="class4">这是一个加大的虚线边框，填充粉色，透明度为0.6的按钮<br>
    <br>
    <input type="submit" value="注册" id="class5">鼠标悬停变手指的无边框按钮<br>
  
</body>
</html>

CSS部分

table{
    border-collapse: collapse;
}

tr,.class1{
    border-width: 3px;
    border-color: red;
}

td,.class2{
    border-width: 2px;
    border-color: red;
}


.class1{
    color: blue;
    background-color: darkgray;
    text-align: right;
    vertical-align: bottom;
 
  
}


.class2{
    background-color: yellow;
    text-align: right;
    vertical-align: bottom;
   
}

#class3{
    border: 2px solid yellow;
    color:blue;

}

#null2{
    width: 500px;
    height: 75px;
    background-image: url(微信图片_20250426201149.jpg);
    background-position: center;
}

#class4{
    border: 3px dashed pink;
    opacity: 0.6;
    color: pink;

}

#class5{
    cursor: pointer;
    border: none;
    width: 100px;
    height: 20px;

}

一、字体属性

CSS字体属性定义字体，颜色，大小，加粗，文字样式。

1.文本颜色：color

四种方法表示：

p {color: brown;} 
p{color: #ff0000;} /*十六进制*/
p{color: rgb(255,0, 0);} /*三原色*/
p{color:rgba(255,0, 0, 5);} /*三原色与透明度*/

2.字体大小：font-size

注意：chrome接受最小字体为12px，再小不生效。

示例：

span~ins,strong~span{
   font-size: 50px;
}

3.字体粗细：font-weight

p{font-weight: bold;} /*定义粗体*/
p{font-weight: bolder;} /*定义更粗*/
p{font-weight: lighter;} /*定义更细*/
p{font-weight: 700;} /*定义由粗到细，100-700，400为默认，700等同于bold*/

4.指定字体样式：font-style

p{font-style: italic;} /*定义斜体*/
p{font-style: normal;} /*定义默认*/
p{font-family: Arial, Helvetica, sans-serif;} /*指定字体*/

二、文本属性

1.text-align：left - 指定元素文本的水平对齐方式。

left、right、center

2.text-decoration：underline -添加文本的修饰。

underline：下划线

overline：上划线

line-through：删除线

3.text-transform：captialize -该属性控制文本大小写。

captialize：每个单词开头大写

uppercase：全部大写

lowercase：全部小写

4.text-indent：50px -该属性设置文本块中首行文本的缩进。

三、背景属性

想设置背景？1.可填充颜色 2.可填充图片

.class1{
    width: 300px;
    height: 300px;
    background-color: pink;
} /*填充颜色*/

.class1{
    width: 300px;
    height: 300px;
    background-image: url();
} /*填充图片（当图片另存为当前文件夹下）*/

1.background-repeat：该属性设置如何平铺背景图像。

.class1{background-repeat: repeat;} /*默认*/
.class1{background-repeat: repeat-x;} /*只向水平方向平铺*/
.class1{background-repeat: repeat-y;} /*只向垂直方向平铺*/
.class1{background-repeat: no-repeat;} /*不平铺*/

2.background-size：设置图像大小。

.class1{background-size: contain;} /*保持图片纵横比并将图片缩放或完全覆盖背景区域的最小大小*/
.class1{background-size: cover;} /*保持图片纵横比并将图片缩放或完全覆盖背景区域的最大大小*/

2.background-position：设置背景图的起始位置，其默认值是0%，0%。

（1）left top：左上角

left center、left bottom

（2）right top：右上角

right center、right bottom

（3）center top：中下

center center、center bottom

（4）水平：x% 垂直： y%

.class1{background-position: 100% 100%;} /*x% y% 左上角为0% 0% ,右下角为100% 100%，默认为左上角*/

四、表格属性

1.boder：指定表格边框。


#class3{
    width: 500px; /*表格宽高*/
    height: 300px;
    border: 2px solid yellow; /*三个值分别是 边框大小、实线：solid 虚线：dashed、边框颜色*/
    color:blue; /*表格文本颜色*/

}

2.boder-collapse：collaspse -设置表格的边框是否被折叠成一个单一边。

3.表格文字文字对齐：

td{
    text-align: center; /*设定文本水平对齐：left、right*/
    vertical-align: bottom; /*设定文本垂直对齐：top、center*/
}

3.表格颜色：

#class3{
    border: 2px solid yellow; /*三个值分别是 边框大小、实线：solid 虚线：dashed、边框颜色*/
    color:blue; /*表格文本颜色*/
    background-color: aliceblue; /*表格背景颜色*/
}

拓展：

#class4{
    cursor: pointer; /*悬停时变手指*/
    opacity: 0.6; /*设置透明度*/

}

今天先写这么多，下期再见！