CSS学习（一）基础-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61623880/article/details/131455226

文章详细介绍了CSS的基础知识，包括如何在HTML中通过内嵌、外联和行内方式引入CSS，以及基础的选择器类型如标签选择器、类选择器和ID选择器。此外，还讲解了字体和文本样式的设置，如字体大小、颜色、对齐方式和文本修饰线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS基础语法规则：

css写在style标签中，style标签一般写在head标签里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
            font-size: 30px;
            background-color: green;
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

css引入方式：

1.内嵌式 css写在style标签中

2.外联式 css写在单独的.css文件里

3.行内式 css写在style属性中

第一种就是上面代码演示的。

现在演示第二三种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./my02_00.css">
</head>
<body>
    <p>这是一个p标签</p>
    <div style="color: red;font-size: 30px;">这是div标签</div>
</body>
</html>

p{
    color: red;
}

基础选择器：

1.标签选择器（全部标签都调整）；

2.类选择器(同一类调整）

3.id选择器（配合JavaScript使用）

4.通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .size{
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>11111111111</p>
    <p class="red size">222222222222</p>
    <div class="red">这个标签文字也要变红</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #blue{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="blue">这个标签文字要变蓝</div>
</body>
</html>

文字样式：

                1.字体大小：font-size

                2.字体粗细：font-weight

                3.字体样式：font-style

                4.字体类型：font-family

                5.字体类型：font属性连写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 30px;
            font-weight: 700;
            font-style: italic ;
            font-family: 微软雅黑,黑体,sans-serif;
        }
    </style>
</head>
<body>
    <p>测试段落文字</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        p{
            font:italic 700 66px 宋体;
        }
    </style>
</head>
<body>
    <p>测试段落文字</p>
</body>
</html>

文本样式：

1.文本缩进：text-indent

2.文本水平对齐：text-align

3.文本修饰：text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: center;
            text-indent: 2em;

        }
        body{
            text-align: right
            ;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <img src="..OIP (1).jpg" alt="">
</body>
</html>

文本修饰：

underline 下划线

line-through 删除线

overline 上划线

none 无装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            text-decoration: underline;
        }
        p{
            text-decoration: line-through;
        }
        h2{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>divdivdivdiv</div>
    <p>pppppppppp</p>
    <h2>h2h2h2h2h2h2h2h2h2h</h2>
    <a href="">我是超链接</a>
</body>
</html>