CSS————基础常用样式！超级爆炸大干货~

一、文本的常用样式注解：

1、border-collapse：设置表格的边框合并规则。可以设置为collapse来合并边框，或设置为separate来分隔边框（默认值为separate）。

2、border：设置表格的边框样式、宽度和颜色。例如：border: 1px solid black;表示边框为1像素宽度、实线样式、黑色颜色。

3、background-color：设置表格单元格的背景色。

4、text-align：设置表格单元格内文本的水平对齐方式。可以设置为left（默认值）、center、right。

5、vertical-align：设置表格单元格内文本的垂直对齐方式。可以设置为top、center、bottom。

6、color：设置表格单元格内文本的颜色。

7、font-family：设置表格单元格内文本的字体系列。

8、font-size：设置表格单元格内文本的字体大小。

9、width 和 height：设置表格的宽度和高度。

<!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>CSS常用文本样式</title>

    <style>
        p {
            /* 文字颜色 */
            color: blueviolet;
            font-family: '楷体';
            /* 文字是否倾斜 */
            font-style: italic;
            /* 文字大小 */
            font-size: 30px;
            /* 文字加粗 */
            font-weight: bolder;

            /* 文本相对于它所在容器的位置（左，中，右） */
            text-align: left;

            /* 文本的修饰线（下划线underline，
            删除线line-through，上划线overline） */
            text-decoration: line-through;

            border: 2px red solid;
        }

        span {
            /* 英文文本的大小写设置： 
            小写lowercase，  大写uppercase */
            text-transform: uppercase;

            /* 文本相对于它所在容器的缩进程度 */
            /* text-indent: 20px; */
        }
    </style>
</head>

<body>

    <div>
        <p> 如果帅是一种罪，那我早已经罪恶滔天... <span>Hahaha</span>  ... </p>
    </div>

以上代码中写出了对应的使用属性和说明，可以让您更好的理解。

运行结果如下：

二、图像常用样式

在HTML中已经介绍过图像元素的基本知识。图像即img元素,作为 HTML的一个独立对象,需要占据一定的空间。因此,img元素在页面中的风格样式仍然用盒模型来设计。CSS样式中有关图像控制的
属性说明
width、height 设置图像的缩放
borde 设置图像边框样式
   opacity    设置图像的不透明度

background-imag 设置背景图像
background-repeat 设置背景图像重复方式
background-position 设置背景图像定位
background-attachment 设置背景图像固定
background-size 设置背景图像大小

作为单独的图像本身,它的很多属性可以直接在HTML中进行调整,但是通过CSS统一管理，不但可以更加精确地调整图像的各种属性,还可以实现很多特殊的效果

运行代码如下：

<!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>
        img {
            /* 图片的宽高 */
            /* 图片宽度设置除了直接写死像素大小，还可以设置其
                相对于容器的比例。
                若存在固定高度的容器，图片高度页可以设置其
                相对于容器的比例。
             */
            width: 25%;   
            height: 25%;

            /* border-width: 20px; */
            /* 设置边框线型：  实线solid 虚线dashed */
            /* border-style: dashed;  
            border-color: aqua; */
            /* 注意：CSS语法支持 边框线的颜色，线型，宽度
                    合并写在一起(不分顺序) */
            border: green 10px solid;
            /* 图片的透明度：值为0~1，值越小越透明 */
            opacity: 1 ;    
        }

        /* div {
            width: 1000px;   
            height: 1000px;
            border: 2px red solid;
        } */
    </style>
</head>

使用CSS样式控制图像大小可以用width和height两个属性来实现。

运行结果：

三、表格的常用样式

属性说   明
border-collapse --- 设置表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
border-spacing --- 设置当表格边框独立时,行和单元格的边框在横向和纵向上的间距  。
empty-cells --- 设置当表格的单元格无内容时,是否显示该单元格的边框。

运行代码如下：

<!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>
        table {
            width: 500px;
            height: 500px;
            border: green 2px solid;

            /* 常用！设置边框线是否合并（折叠） */
            border-collapse: collapse;
            /* 给整张表格填充颜色 */
            background-color: aliceblue;
            /* 设置表格里的文本的颜色 */
            color: aqua;
        }

        #td5 {
            /* 给单元格填充颜色 */
            background-color: red;
            /* 设置单元格里的文本的颜色 */
            color: white;
            border: blue 2px solid;
            /* 设置单元格里面文本的水平方向的位置 */
            text-align: right;
            /* 设置单元格里面文本的垂直方向的位置 */
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <table border="1">
        <tr>
            <th scope="col">1</th>
            <th scope="col">2</th>
            <th scope="col">3</th>
        </tr>
        <tr>
            <th scope="col">4</th>
            <td id="td5">5</td>
            <td>6</td>
        </tr>
        <tr>
            <th scope="col">7</th>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>

</html>

运行结果:

注意！

sparate为默认值，表示边框分开，不合并。

collapse表示边框合并，即如果两个边框相邻，则共用同一个边框。

length为浮点数和单位标识符组成的长度值，不可为负数。

四、背景常用样式

使用关键字进行背景定位关键字参数的取值及含义如下：
(1) top:将背景图像同元素的顶部对齐。
(2) bottom:将背景图像同元素的底部对齐。

(3) left: 将背景图像同元素的左边对齐。

(4) right:将背景图像同元素的右边对齐。
(5)center:将背景图像相对于元素水平居中或垂直居中。

<!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>
        div{
            width: 500px;   
            height: 500px;
            border: 2px red solid;

            /* 设置元素的背景 */
            /* 背景设置1：填充颜色 */
            /* background-color: antiquewhite; */

            /* 背景设置2：填充图片 */
            background-image: url('./yangyang.jpeg');
            

            /* 设置填充图片的宽高 */
            background-size: 25% 25%;
            /* 设置填充图片是否需要平铺（重复）
                默认是上下左右平铺的，no-repeat为不平铺
                repeat-x是水平平铺，repeat-y是垂直平铺。
            */
            background-repeat: no-repeat;
            /* 设置填充图片相对于容器的位置 */
            background-position: right bottom;
        
        }
    </style>
</head>
<body>
    <div>我是一个没有实际渲染效果的块元素</div>
</body>
</html>

运行结果：

五、表单的常用样式

表单用于收集用户输入：

-- <form> 为容器。

--<input> 实现多样数据录入。

--<label> 绑定说明。

--<select> 提供选项选择。

--<textarea> 支持多行文本，通过 action 指定数据提交地址。

--<method> 确定提交方式。

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=    <p>      
        <input type="text" name="normal">
        默认样式的文本域    
    </p>

    <p>
        <input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1">
        改变了边框颜色和文字颜色的文本域
    </p>

    <p>      
        <input name="password" type="password" class="text2">
        增加了背景图片的文本域    
    </p>




    <p>      
        <input name="button" type="submit" value="提交" />
        默认风格的提交按钮    
    </p>

    <p>      
        <input name="button00" type="submit" class="btn00" id="button0" value="登录">
        这是一个加大的虚线边框，填充粉色，透明度为0.3的按钮   
    </p>

    <p>      
        <input name="button01" type="submit" class="btn01" id="button1" value="注册">
        鼠标悬停变手指的无边框按钮    
    </p>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

运行结果：

以上便是CSS的一些基础常用样式，希望能帮到您！