CSS常用样式

╰半橙微兮° 2023-10-12 17:02 3阅读 0赞

### 文章目录 ###

*  字体样式
 *  文本样式
 *   *  颜色 color
     *  对齐方式 text-alogn
     *  下划线、上划线、删除线
     *  设置行高
 *  列表样式
 *  背景样式
 *   *  背景颜色 bgc
     *  背景图片 bgi
     *  背景重复
     *  背景大小 bgs
 *  鼠标样式 cursor
 *  伪类样式
 *  设置透明度 opactiy

--------------------

# 字体样式 #

所有样式都写在`<style>`标签内，里面加选择器

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    	<style>
        p{
          
            font-family: "华文行楷";
            font-size: 50px;
            font-style: oblique;
            font-weight: bolder;
            font:italic bold 30px "宋体";
        }
        </style>
    </head>
    <body>
        <p>字体样式</p>
    </body>
    </html>

1.  `font-family`：字体类型，建议用双引号括起来
2.  `font-size`：字体大小，常用单位：px像素，默认大小：18px
3.  `font-style`：字体风格，italic、oblique斜体
4.  `font-weight`：字体粗细，在100-900取值，400默认正常，bold加粗、bolder更粗
5.  `font`：四合一，（风格、粗细、大小、类型）顺序不能变

# 文本样式 #

以下是一些常见的文本样式，可以在网页上使用 CSS 实现：  
所有样式都写在`<style>`标签内，里面加选择器

## 颜色 color ##

`color:`文本颜色  
`background-color`背景颜色

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
            p{
          
                color: aqua;
                background-color: greenyellow;
                font-size: 38px;
            }
        </style>
    </head>
    <body>
        <p>这是一个文本样式的示例</p>
    </body>
    </html>

## 对齐方式 text-alogn ##

`text-alogn:`文本的水平方向的对齐方式

left左默认，center居中，right右，**只针对独占一行显示的标记有效**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
            .align-style {
          
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="align-style">
            <p>这是一个文本样式的示例</p>
            <p>这是一个文本样式的示例</p>
        </div>
    </body>
    </html>

解释：在以上 HTML 代码中，使用了一个类名为 `align-style` 的 `<div>` 元素来包含两个 `<p>` 元素。在 CSS 中，对该类名使用了属性 `text-align: center;` 来使 `<div>` 中的文本元素居中对齐。

## 下划线、上划线、删除线 ##

text-decoration：文本装饰。underline下划线，overline上划线，line-through删除线

下面结合具体的 HTML 和 CSS 代码（`style`）来说明。

1.  `underline` 下划线

<p class="underline-style">这是一个带有下划线的段落</p>

.underline-style {
        
      text-decoration: underline;
    }

![在这里插入图片描述][6dc393104e6e4273b5f1ca3ebae0714d.png]

解释：以上 HTML 代码中，使用了一个类名为 `underline-style` 的 `<p>` 元素来展示文本样式的下划线效果。而在 CSS 中，对该类名使用了属性 `text-decoration: underline;` 来为文本元素添加下划线。

1.  `overline` 上划线

<p class="overline-style">这是一个带有上划线的段落</p>

.overline-style {
        
      text-decoration: overline;
    }

![在这里插入图片描述][89553be36b7c45d0b41707a875ffdb9e.png]  
解释：以上 HTML 代码中，使用了一个类名为 `overline-style` 的 `<p>` 元素来展示文本样式的上划线效果。而在 CSS 中，对该类名使用了属性 `text-decoration: overline;` 来为文本元素添加上划线。

1.  `line-through` 删除线

<p class="line-through-style">这是一个带有删除线的段落</p>

.line-through-style {
        
      text-decoration: line-through;
    }

![在这里插入图片描述][a1c567576d11447ab5c54757cf2a9569.png]

解释：以上 HTML 代码中，使用了一个类名为 `line-through-style` 的 `<p>` 元素来展示文本样式的删除线效果。而在 CSS 中，对该类名使用了属性 `text-decoration: line-through;` 来为文本元素添加删除线。

注意：

*  `underline` 和 `overline` 只有单一的线条，而 `line-through` 具有两条线。
 *  可以使用 `text-decoration-color` 属性来为文本样式下划线、上划线、删除线添加颜色。

示例代码：

<p class="text-style" style="color: red">
      这是一段红色的文本，同时有着下划线、上划线和删除线。
    </p>
    <p class="text-style" style="text-decoration-line: underline overline line-through; text-decoration-color: blue;">
      这是一段蓝色的文本，同时有着下划线、上划线和删除线。
    </p>

.text-style {
        
      text-decoration-thickness: 3px;
      text-decoration-style: solid;
    }

![在这里插入图片描述][a56383c0613f4881b953ad55354c5ef7.png]

以上代码中，使用了内敛样式的方式来定义文本样式。在 CSS 中，使用了属性 `text-decoration-thickness: 3px;` 来使三种样式均为 3 像素粗的线条；同时使用 `text-decoration-style: solid;` 属性使线条效果为实心。可以通过更改属性值来调整线条的粗细和样式。

## 设置行高 ##

**①、`line-height` ：设置文本的行高**

`line-height` 属性用于设置行高，即每行文本元素的高度，默认20px

下面结合具体的 CSS 和 HTML 代码来说明。

常用的 `line-height` 属性值有：

*  数字值：表示行高与当前元素字号的倍数，如 `line-height: 1.5;` 表示行高为字号的 1.5 倍。
 *  长度值：如 `line-height: 30px;` 表示行高为 30 像素。
 *  百分比值：如 `line-height: 150%;` 表示行高为字号的 150%，即 1.5 倍。

除了上述常用的属性值外，还可以使用 `normal`、`initial`、`inherit`、`unset` 等值。

下面是一个简单的例子：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
            p{
          
                line-height: 40px;
            }
        </style>
    </head>
    <body>
        <p>这是一段文本<br>二段文本</p>
    </body>
    </html>

输出效果：  
![在这里插入图片描述][ee4fe7ac64924559b30114d03eff2cae.png]  
**②、`vertical-align`：设置在图片标记上，使设置在图片两侧文本内容的垂直对齐方式**  
`top`：顶部  
`middle`：中间  
`bottom`：底部（默认）

【示例代码】

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
           img{
          
            width: 150px;
            height: 150px;
            vertical-align: top;
           }
        </style>
    </head>
    <body>
        微信图标<img src="../图片/微信.jpg">
        
    </body>
    </html>

输出效果：  
![在这里插入图片描述][f4aaaebb911d41699d96e30bc9a505c2.png]

# 列表样式 #

`list-style: none;`：去掉无序和有序列表的默认样式

【示例代码】：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
            ul{
          
                /* list-style: none; */
                /* 去掉无序和有序列表的默认样式 */
                list-style-type: square; 
                /* 方块符号 */
            }
            ol {
          
                list-style-type: lower-roman; /* 小写罗马数字 */
            }
    
        </style>
    </head>
    <body>
        <ul>
            <li>列表项 1</li>
            <li>列表项 2</li>
            <li>列表项 3</li>
          </ul>
          <ol>
            <li>列表项 1</li>
            <li>列表项 2</li>
            <li>列表项 3</li>
          </ol>
    </body>
    </html>

输出效果：  
![在这里插入图片描述][b9096af178934ac49c66451b190f6aac.png]

# 背景样式 #

`background-color`：背景颜色  
`background-image`：背景图片  
`background-repeat`：背景重复  
`background-size`：背景尺寸

其实背景样式在前面有提到过，这里详细说一下

CSS 提供了多种背景样式，可以为 HTML 元素设置背景颜色、背景图片、背景位置、重复方式等。

## 背景颜色 bgc ##

可以使用 `background-color` 属性为元素设置背景颜色，如下例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
            div{
          
                background-color: yellow; 
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>HELLO WORLD!</p>
        </div>
    </body>
    </html>

![在这里插入图片描述][bd6f23e23dea4abb9580518cba763813.png]

## 背景图片 bgi ##

可以使用 `background-image` 属性为元素设置背景图片，如下例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
            div{
          
                background-image: url(./th.jpg);
                width: 500px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>HELLO WORLD!</p>
        </div>
    </body>
    </html>

![在这里插入图片描述][0737425a9610432b837f53f10c1b5254.png]

## 背景重复 ##

默认情况下，背景图片将水平和垂直重复以填充整个元素区域。可以使用 `background-repeat` 属性来设置背景的重复方式

`repeat-x`：水平方向重复

`repeat-y`：垂直方向重复

`no-repeat`：不重复

div {
        
      background-repeat: no-repeat;
    }

## 背景大小 bgs ##

可以使用 `background-size` 属性为元素设置背景图片的大小

div {
        
      background-size: cover;
      /* background-size: 100% 100%; */
    }

`cover` 值表示背景图片会被缩放以填充整个元素区域，可能会被裁剪。还可以使用像素值或百分比值来设置背景大小

div {
        
      background-size: 50% 50%;
    }

这将使背景图片的大小为元素宽度和高度的 50%。

# 鼠标样式 cursor #

通常用在按钮上，鼠标样式：`cursor`  
`pointer`手型，`not-allowed`禁用

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
            button{
          
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <button>你好世界！</button>
    </body>
    </html>

![在这里插入图片描述][22d3a7b409f243c99fcaf091d7ccd936.png]

# 伪类样式 #

CSS 伪类是在选择器后面添加的关键字，用于选择元素的某个特定状态或行为  
常见的伪类有 `:hover`、`:active`、`:focus`、`:checked` 等  
下面以 `:hover` 这个伪类为例，结合 CSS 和 HTML 代码说明：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
            a:link{
          
                /* 超链接未被访问时生效的样式 */
                color: red;
            }
    
            a:visited{
          
                /* 超链接访问过生效的样式 */
                color: darkgray;
            }
    
            a:hover{
          
                /* 鼠标悬停在超链接时生效的样式 */
                color: powderblue;
                font-size: 25px;
            }
    
            a:active{
          
                /* 超链接被激活时生效的样式，鼠标单击时未释放 */
                color:aqua;
            }
    
            span:hover{
          
                background-color: red;
            }
            button:hover {
          
                background-color: #ccc;
                color: white;
            }
        </style>
    </head>
    <body>
        <a href="https://rej177.blog.csdn.net/article/details/131258745">二哈喇子</a><br>
        <span>我的背景色变红</span><br>
        <button>悬停在我身上</button>
    </body>
    </html>

![请添加图片描述][7b487d02d5e14645b3aa95d626a91e9d.gif]

# 设置透明度 opactiy #

可以实现遮盖层效果  
`opactiy`：透明度，值是0-1之间的小数，值越小越透明

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
        <style>
            div{
          
                width: 300px;
                height: 200px;
                background-color: gray;
                /* opactiy：透明度，值是0-1之间的小数，值越小越透明*/
                opacity: 0.2;
            }
        </style>
    </head>
    <body>
        <div>
            <p>葫芦娃救爷爷</p>
            <p>一个比一个能送</p>
        </div>
    </body>
    </html>

![在这里插入图片描述][95ade71579bf4597b89279d8bfef2bb1.png]

--------------------

[6dc393104e6e4273b5f1ca3ebae0714d.png]: https://img-blog.csdnimg.cn/6dc393104e6e4273b5f1ca3ebae0714d.png
[89553be36b7c45d0b41707a875ffdb9e.png]: https://img-blog.csdnimg.cn/89553be36b7c45d0b41707a875ffdb9e.png
[a1c567576d11447ab5c54757cf2a9569.png]: https://img-blog.csdnimg.cn/a1c567576d11447ab5c54757cf2a9569.png
[a56383c0613f4881b953ad55354c5ef7.png]: https://img-blog.csdnimg.cn/a56383c0613f4881b953ad55354c5ef7.png
[ee4fe7ac64924559b30114d03eff2cae.png]: https://img-blog.csdnimg.cn/ee4fe7ac64924559b30114d03eff2cae.png
[f4aaaebb911d41699d96e30bc9a505c2.png]: https://img-blog.csdnimg.cn/f4aaaebb911d41699d96e30bc9a505c2.png
[b9096af178934ac49c66451b190f6aac.png]: https://img-blog.csdnimg.cn/b9096af178934ac49c66451b190f6aac.png
[bd6f23e23dea4abb9580518cba763813.png]: https://img-blog.csdnimg.cn/bd6f23e23dea4abb9580518cba763813.png
[0737425a9610432b837f53f10c1b5254.png]: https://img-blog.csdnimg.cn/0737425a9610432b837f53f10c1b5254.png
[22d3a7b409f243c99fcaf091d7ccd936.png]: https://img-blog.csdnimg.cn/22d3a7b409f243c99fcaf091d7ccd936.png
[7b487d02d5e14645b3aa95d626a91e9d.gif]: https://img-blog.csdnimg.cn/7b487d02d5e14645b3aa95d626a91e9d.gif
[95ade71579bf4597b89279d8bfef2bb1.png]: https://img-blog.csdnimg.cn/95ade71579bf4597b89279d8bfef2bb1.png