CSS常用声明（属性）

Komorebi⁼

于 2024-10-08 21:09:44 发布

阅读量463

点赞数 18

文章标签： css 前端 html5

本文链接：https://blog.csdn.net/2302_81659011/article/details/142667985

版权

1、background-color：背景颜色

2、background-img：背景图像

3、背景展示效果

4、background-size：背景图大小

5、background-position：背景图的起始位置

一、文本

1、字体属性

color：颜色，可直接写颜色的英文名、十六进制写法以及rgb写法；
font-size：字体的大小，属性值通常为px或%；
font-family：字体；
font-style：字的倾斜（normal：正体，italic：斜体）；
font-weight：字的粗细

值	描述
bold	定义粗体字符
bolder	定义更粗的字体
lighter	定义更细的字体
100~900	定义由细到粗，400等同于默认，700为加粗

2、文本修饰

text-align ：文本的水平对齐方式；
text-decoration:文本修饰线；
text-transform:单词字母大小写；
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>

            .font{
                width: 960px;
                height: 60px;
                background-color: gray;


                text-align: center;
                /* 文字修饰线：删除线、下划线等 */
                text-decoration: underline;
                /* 英文单词大小写设置 */
                text-transform:lowercase;

                color: green;
                font-size: 30px;
                font-family: 微软雅黑;
                font-weight: bold;
                font-style: italic 
               
                
             }

    </style>
</head>
<body>
    <p class="font" >测试文本属性，CSDN博客</p>
</body>
</html>

运行结果如下：

注：其中水平对齐方式，是指相对于元素容器来说的位置，而不是整个网页。

二、图像

1、图像边框样式

border-color:边框颜色
border-style：边框线型
border-width：边框宽度

2、图像透明度

使用opacity属性调整图像透明度（取值范围：0~1）

其中，border-color、border-width、border-style属性可合并写成border：color width style，三个属性值分别用空格隔开

用部分属性举例，代码如下：

<head>
    <style>
        #img1{
            width: 300px;
            height: 300px;
            background-color: gray;

          
            border: green 10px dotted;
            /* 设置图像不透明度：0.0~1.0 */
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <img id="img1" src="./背景.jpg">
</body>

运行结果如下：

三、背景

1、background-color：背景颜色

2、background-img：背景图像

3、背景展示效果

background-repeat：背景图展示效果，当背景图大小小于元素实际区域时，会默认背景图平铺展示，可选属性有以下几个：

（1）no-repeat：不平铺

（2）repeat:平铺（默认）

（3）repeat-x：水平方向平铺

（4）repeat-y：垂直方向平铺

4、background-size：背景图大小

（1）指定宽度和高度

（2）等比缩放

5、background-position：背景图的起始位置

（1）指定位置关键字：

横向：left、center、right；

纵向：top、center、bottom

（2）使用数值：一个代表的是水平位置，一个是垂直位置，采用像素值或百分比形式

用部分属性举例，代码如下：

<head>
    <style>
        nav{
            width: 600px;
            height: 300px;
            background-color: gray;
            background-image: url(./CSS常用声明/背景.jpg);
            background-repeat: no-repeat;

            /* 背景图片适配容器大小 */
            background-size: 25% 25%;
            /* 背景图片在容器内的位置，横向：left、center、right；
            纵向：top、center、bottom*/
            background-position: center center;
        }
    </style>
</head>
<body>
    <header></header>
    <nav></nav>
</body>

运行结果如下：

四、表格

1、表格的宽度和高度

使用width和height属性定义表格的宽度和高度

table{
            width: 400px;
            height: 100px;
       }

2、表格的边框

指CSS表格边框，使用border属性，表格边框的格式可以和图像相同可用空格隔开

table{
       border: 2px red solid;
       }

3、表格边框线折叠

默认时表格会被折叠成一个个单一的边框

table{
            border-collapse: collapse;
        }

4、表格的背景颜色

设置整张表格的背景颜色

table{
            background-color:red;
        }

5、单元格内文本的对齐方式

设置单元格内文本水平对齐位置，text-align的属性有left、center、right。

设置单元格内文本垂直对齐位置， vertical-align的属性有top、center、bottom。

   td{
        text-align: center;
        vertical-align: bottom;
        }

用部分属性举例：

<head>
    <style>
         .table{
            width: 400px;
            height: 100px;
            border: 2px red solid; 
            border-collapse: collapse; 
            background-color:aquamarine;
            color: snow;
        }
        td{
        /* 设置单元格内文本水平对齐位置 */
            text-align: center;
        /* 设置单元格内文本垂直对齐位置 */
        vertical-align: bottom;
        }
        #td6{
            background-color: snow;
            color: black;
        }
    </style>
</head>
<body>
    <table border="1"  class="table"> 
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td id="td6">单元格6</td>
        </tr>
        </table>
</body>

运行结果如下：

五、表单

1、表单的宽度和高度

与上面相同，使用width和height属性定义表单的宽度和高度

2、表单边框颜色、边框大小及线型

可将这三个属性写在border属性内，用空格隔开。

 #text2{
         border: 2px red double; 
        }

double表示双实线。

3、背景样式

background-color：设置表单的背景颜色

background-image: url(图片路径)：设置表单背景图片

4、背景图片样式

background-repeat：背景图展示效果，当背景图大小小于元素实际区域时，会默认背景图平铺展示（与上面背景属性内容一致）

5、表单按钮样式

使用以上属性也可以更改按钮样式

选择鼠标指针浮动在其上的样式，使用cursor属性

auto 默认。浏览器设置的光标
pointer 光标呈现为指示链接的指针(-只手)

用部分属性举例：

<head>
    <style>
         #text2{
            width: 200px;
            height: 100px;
            color: aqua;
            background-color: gray;
            background-image: url(./CSS常用声明/背景.jpg);
            background-repeat: no-repeat;
            border: 2px red double; 
        }
        #btn2{
            width: 150px;
            height: 100px;
            color: aqua;
            background-color: green;
            border: 2px red dashed;   
            cursor: pointer;
        }

    </style>
</head>
<body>
    <form action="">
        <input type="text" id="text1"> 这是默认文本输入框 
        <br>
        <input type="text" id="text2" value="此处输入您的账号">这是有默认值的输入框 
        <hr>
        <input type="submit" id="btn1" value="提交"> 这是默认按钮
        <br>
        <input type="submit" id="btn2" value="登录"> 这是设置样式的按钮
    </form>
</body>

运行结果如下：