CSS- 标签选择器与字体样式

遇见更好的自己_Steve

已于 2023-05-24 11:01:35 修改

阅读量246

点赞数

分类专栏：前端从0到1，陪你成长文章标签： css 前端 css 字体样式 css标签选择器

于 2023-05-23 18:48:24 首次发布

本文链接：https://blog.csdn.net/SHTLoveXX/article/details/130826779

版权

前端从0到1，陪你成长专栏收录该内容

5 篇文章 0 订阅

订阅专栏

所有的效果展示

引入：

    <link rel="stylesheet" href="./yourCssName.css">

标签选择器：

        p{
            color: brown;
            font-size: 30px;
            background-color: aqua;
            width: 500px;
            height: 50px;
        }

所有的P标签生效

类选择器：

        .red{
            color: red;
            width: 500px;
            height: 50px;
            background-color: aqua;
        }

<p class="red"> class为red P 标签</p>
<p class="red 并列其他也生效"> class为red 和 其他class的标签</p>

ID选择器：

它的存在是为了配合JS找标签而存在的！一个标签只能有一个。

        #blue{
            color: blue;
            text-align: center;
            text-decoration: line-through;
        }

  <div id="blue"> 这是蓝色DIV</div>

通配符选择器：

整个页面全部生效，一般用于去除内外边距的使用

        *{
            margin: 0;
            padding: 0;
        }

字体设置：

font-style: italic 倾斜 normal 正常

          /* 控制是否倾斜等样式 */
            font-style:inherit;
            /* 控制粗细 */
            font-size:30px;
            /* 控制粗细 */
            font-weight:700 ; 
            /* 缩进几个空格 */
            text-indent: 6em;
            /* 行间距 */
            line-height: 1.7;
            /* 如果没有第一个字体， 就按照后边的找， 全没有就随机 */
            font-family: 黑体,sans-serif;
            /* 水平对齐方式 */
            text-align: center;
            /* 文本修饰属性 */
            text-decoration: line-through;

font 符合属性：

所有相关的Code:

<!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>Document</title>
    <!-- <link rel="stylesheet" href="./css-1.css"> -->
    <!-- <style>
        /* css注释 */
        /* 选择器 {} */
        p{
            color: brown;
            font-size: 30px;
            background-color: aqua;
            width: 500px;
            height: 50px;
        }
        
    </style> -->

    <style>

        .red{
            color: red;
            width: 500px;
            height: 50px;
            background-color: aqua;
        }
        .gree{
            color: green;
            margin: 0 auto;

        }
        .size{
            size: 120px;
            /* 控制 */
            font-style:inherit;
            /* 控制粗细 */
            font-size:30px;
            /* 控制粗细 */
            font-weight:700  
        
            
            
        }
        #blue{
            color: blue;
            text-align: center;
            text-decoration: line-through;
        }
        #p{
            color: rgb(165, 42, 136);
            text-indent: 2em;
            line-height: 1.7;
            font: italic 700 50px/1.5 宋体;
            

        }
        body{
            text-align: left;
        }

    </style>
</head>
<body>

    <p > 普通标签</p>
    <p class="red"> class为red P 标签</p>
    <p class="size"> class为gree和 size</p>
    <hr>


    <div id="blue"> 这是蓝色DIV</div>

    <hr>
    <div id="blue"> 这是DIV</div>

    <div> 这是DIV通配符</div>


    <p id="p"> 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进 文本缩进</p>

    <p> 这是DIV通配符</p>

    <img src="./images/meizi2.jpeg" alt="" width="400">


    
</body>
</html>