CSS常用样式声明（属性）【字体、文本、图像、表格、表单】

白菜头33

于 2024-10-11 23:31:48 发布

阅读量252

点赞数 11

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2302_80916083/article/details/142796734

版权

一、设置字体样式

font-family用于设置字体的类型，可设置多种字体。

语法格式：font-family：字体名称1，字体名称2，...

font-size用于设置字体大小。常见的有px（绝对单位）、em（相对单位）等。

        语法格式：font-size：绝对尺寸|相对尺寸

font-weight用于设置字体粗细。它包含normal（默认字体）、bold（粗体）、bolder（粗体再加粗）、lighter（比默认字体细）、100、200、300、400、500、600、700、800和900多个属性值。

        语法格式：font-weight：bold

font-style用于设置字体倾斜。它包括normal（默认值）、italic（斜体）和oblique（倾斜体）。

        语法格式：font-style：normal

实践代码如下：

<style>
    p{
        /* 设置字体 */
        font-family: 仿宋;
        /* 设置字体大小 */
        font-size: 20px;
        /* 设置字体粗细 */
        font-weight: bold;
        /* 设置字体倾斜度 */
        font-style: italic;
    }
</style>
</head>
<body>
    <p>设置字体样式</p>
</body>

效果如下：

二、设置文本样式

字体样式主要涉及文字本身的效果，而文本样式主要涉及多个文字（段落）的排版效果。因此CSS在命名属性时，特意使用了font前缀和text前缀来区分两类不同性质属性。

使用text-align属性设置元素中文本的水平对齐方式（是指相对于元素容器来说的位置）

text-align：left（左对齐） | right（右对齐） | center（居中） | justify（两端对齐）

使用line-height属性设置行高（段落中行与行之间的间距为行高）

line-height：length | normal

运行代码如下：

    <style>
        #p1{
            text-align: right; 
            line-height: normal;
        }
        #p2{
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <p id="p1">文本水平对齐方式<br>
        文本水平对齐方式
    </p>
    <br>
    <p id="p2">文本水平对齐方式<br>
        文本水平对齐方式
    </p>
</body>

显示效果：

使用text属性所提供的text-decoration属性实现文本加下划线、顶线、贯穿线以及文本闪烁等效果。

text-decoration：underline （下划线）|| overline（上划线）|| line-through（贯穿线）|| blink（闪烁）|| none

运行代码如下：

<style>
    #b1{text-decoration: underline;}
    #b2{text-decoration: overline;}
    #b3{text-decoration: line-through;}
    #b4{text-decoration: blink;}
</style>
</head>
<body>
    <b id="b1">下划线</b><br><br>
    <b id="b2">上划线</b><br>
    <b id="b3">贯穿线</b><br>
    <b id="b4">闪烁</b>
</body>

显示效果：

段落首行缩进text-indent：指的是段落的第一行从左到右缩进一定的距离（其他行保持不变）。

text-indent：length

运行代码如下：

<style>
    p{
        text-indent: 20px;
     }
</style>
/* 除第一行以外的其他行不用缩进 */
<body>
    <p>欲穷千里目<br>
    更上一层楼</p>
</body>

显示效果：

使用text属性所提供的text-transform属性可设置英文的大小写。

text-transform：capitalize（首字母大写）|| uppercase（所有字母大写）|| lowercase （所有字母小写）

运行代码如下：

<style> 
    #b1{
        text-transform: capitalize; /* 首字母大写 */
     }
     #b2{
        text-transform: uppercase; /* 所有字母大写 */
     }
     #b3{
        text-transform: lowercase; /* 所有字母小写 */
     }
</style>
<head> 
<body>   
    <b id="b1">abcdefg</b><br>
    <b id="b2">abcdefg</b><br>
    <b id="b3">ABCDEFG</b>
</body>

显示效果：

三、设置图像样式

图像是img元素。它通过属性设置可以直接在HTML中调整。但是通过CSS的统一管理，它可以更加精确地调整图像的各种属性。

1、width、height：设置图像的缩放（当width、height的取值为百分号时，它是相对于父元素而言的）

2、border：设置图像边框样式（属性值为边框的粗细,以像素为单位，从而控制边框的粗细。当设置border属性值为0时,则显示为没有边框）

语法格式：

        border：边框粗细边框颜色线型【solid（实线）、dotted（点画线）、dashed（虚线）、double（双线边框）】；

3、opacity：设置图像的不透明度（0.0~1.0：0表示完全透明，1表示完全不透明，0.5表示半透明）

语法格式：

        opacity：opacityValue；

4、background-image：设置背景图像

语法格式：

background-image：url | none

5、background-repeat：设置背景图像重复方式（repeat 表示背景图像在水平和垂直方向平铺,是默认值;no-repeat 表示背景图像不平铺;repeat-x 表示背景图像在水平方向平铺;repeat-y表示背景图像在垂直方向平铺）

语法格式：

        background-repeat:repeat | no-repeat | repeat-x | repeat-y

6、background-size：设置背景图像大小（auto为默认值,保持背景图像的原始高度和宽度;length设置具体的值，可以改变背景图像的大小;percentage为百分值,可以是0%~100%任何值,但此值只能应用在块元素上； cover 将图像放大以适合铺满整个容器,采用cover将背景图像放大到适合容器的大小,但这种方法会使背景图像失真;contain此值刚好与cover相反,用于将背景图像缩小以适合铺满个容器,这种方法同样会使图像失真。）

语法格式：
        background-size:auto | length | percentage | cover | contain

运行代码如下：

<style>
    body{
        background-color:aliceblue; /* 设置背景颜色 */
        background-image:none;     /* 设置图像背景为none */
        background-repeat: no-repeat; /* 设置背景图像重复方式 */
        background-size: auto;
    }
    #box{
        width: 525px;
        height: 200px;
        padding: 10px;
        /*border设置的是边框粗细、样式*/
        border: 3px gray dashed;
    }
    #img0{
        /* width、height设置图像的缩放 */
        width: 200px;
        height: 200px;
        opacity: 0.2;       /* 设置文本的不透明度 */
    }
    #img1{
        width: 30%;     /*两个属性的取值为百分号，则该数值是相对于id="box"而言的，是相当于父元素缩放的大小*/
        height: 40%;
        opacity: 0.5;
    }
    #img2{
        width: 150px;   /*绝对像素缩放的大小*/
        height: 150px;
        opacity: 1;
    }
</style>
</head>
<body>
    <div id="box">
        <img src="../9、盒模型/666.jpg" id="img0">
        <img src="../9、盒模型/666.jpg" id="img1">
        <img src="../9、盒模型/666.jpg" id="img2">
    </div>
</body>

显示效果：

四、设置表格样式

常用的CSS表格属性
属性	说明
border-collapse	border-collapse属性用于设置表格的边框是否合并成单边框
border-spacing	border-spacing属性用于设置相邻单元格边框间的距离
empty-cells	empty-cells属性用于设置当表格的单元格无内容时，是否显示该单元格的边框

运行代码如下：

<style>
    #table1{
        border-collapse: collapse;
    }
    #table2{
        border-collapse: separate;
 /* 该属性用于设置当表格边框独立(border-collapse 属性等于 separate)时,单元格的边框在横向和纵向上的间距。*/
        border-spacing: 10px;
/* hide为隐藏，show为显示*/
        empty-cells: hide;
    }
</style>
</head>
<body>
    <!-- collapse表示边框合并，separate为默认值，表示边框分开 -->
    <table border="1" id="table1">
        <tr>
            <td>边框1</td>
            <td>边框2</td>
        </tr>
        <tr>
            <td>边框3</td>
            <td>边框4</td>
        </tr>
    </table>
    <!-- 该表格边框不合并 -->
    <table border="1" id="table2">
        <tr>
            <td>边框1</td>
            <td>边框2</td>
        </tr>
        <tr>
            <td>边框3</td>
            <td></td>
        </tr>
    </table>
</body>

显示效果：

五、设置表单样式

使用CSS修饰文本域和按钮

运行代码如下：

<style>
        /* 修饰文本框 */
        #text2{
            color: rgb(49, 12, 135);
            background-color: rgb(130, 187, 206);
            border: 2px rebeccapurple double;
        }
        /* 修饰按钮 */
        #b2{
            color: black;
            width: 50px;
            height: 30px;
            cursor: pointer;    /* 鼠标指针样式为手型 */
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" id="text1">文本框
        <br>
        <input type="text" value="此处输入您的账号" id="text2">有默认值且更改了背景颜色和边框颜色的文本框

        <br><br>

        <input name="botton" type="submit" value="登录" id="b2">登录按钮
</body>

显示效果：