CSS入门基础-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39114437/article/details/117481500

本文简要介绍了CSS，它指层叠样式表，可定义HTML元素的显示样式。详细讲解了CSS的引入方式，包括内嵌式、内部式和外部式，还介绍了多种CSS选择器，如标签选择器、类选择器、id选择器等，帮助开发者定位和改变目标元素样式。

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

CSS小小讲解

简介且短小的说说CSS是什么
CSS 指层叠样式表 ( Cascading Style Sheets )，样式定义如何显示 HTML 元素，让网页更还看。感觉就像给毛坯房装修一样。

CSS引入方式

1，内嵌式
CSS样式放在标签内，如下：

<!--宽：100px、高：100px、背景色：红；-->
    <div style="width:100px;height: 100px;background-color:red;">

结果图：
在这里插入图片描述
2，内部式
CSS样式放在<head></head>标签内，以<style></style>标签套住，如下：

<head>
    <style>
        #name {
            width: 200px;
            height: 200px;
            background-color: #0f7cbf;
        }
    </style>
</head>

<body>
    <div id="name"></div>
</body>

结果图：
在这里插入图片描述

3，外部式
CSS样式放在标签内，如下：
外部CSS文件（文件后缀为“.CSS”）,如下：

p {
    color: green;
    font-size: 30px;
}

 <html>

<head>
    <meta charset="UTF-8">
    <title>实训在线</title>
    <!--外部导入CSS样式， href="style.css"为外部CSS样式所在的文件路径-->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <p>Hello CSS!</p>
</body>

</html>

结果图：
在这里插入图片描述

CSS选择器

选择器用于定位/选择目标元素（即要改变样式的标签）
CSS选择器有如下几类：

1. 标签选择器
直接以标签名为选择器，如下：

<html>
<style type="text/css">
    div {
        /* 蓝色  */
        color: blue;
        /* 字体大小  */
        font-size: 30px;
    }
</style>

<body>
    <div>CSS</div>
    <div>快速入门</div>
    <h5>CSS选择器</h5>
</body>

</html>

结果图：
在这里插入图片描述
2. 类选择器
类选择器用于描述一组标签的样式，可以在多个标签中，如下：

 <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习</title>
    <style>
        .bg {
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg"></div>

</body>

</html>

结果图：
在这里插入图片描述
3.id选择器
id选择器用于，为特定ID的HTML标签设置样式，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        div {
            float: left;
        }
        
        .bg {
            width: 120px;
            height: 58px;
            background-image: url('imge/images/bg1.png');
            background-repeat: no-repeat;
            text-align: center;
        }
        
        #text {
            line-height: 10px;
            color: aliceblue;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="bg">
        <p id="text">五彩导航</p>
    </div>
</body>

</html>

结果图：
在这里插入图片描述
4.通配选择器
利用 * 为指定范围内的所有标签设置样式 ，如下：

<html>

<style type="text/css">
    * {
        color: purple;
        /* 紫色  */
        font-size: 30px;
    }
</style>

<body>
    <div id=“title”>CSS</div>
    <div id=“subtitle”>快速入门</div>
    <div>CSS选择器</div>
</body>

</html>

结果图：
在这里插入图片描述
5.包括选择器
HTML中为父元素(或标签)下的子元素设置样式，如下：

 <html>

<style type="text/css">
    div p {
        color: gold;
        /* 金色  */
        font-size: 30px;
    }
</style>

<body>
    <div>
        <p>CSS</p>
    </div>
    <div>快速入门</div>
</body>

</html>

结果图：
在这里插入图片描述

**6.选择器分组 **
为一组元素设置相同样式，利用逗号分割多个选择器，如下：

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS  </title> 
<style>
    h1,h2,p
    {
    	color:green;
    }
</style>
</head>

<body>
    <h1>Hello!</h1>
    <h2>这是一个二级标题!</h2>
    <p>这是一个段落。</p>
</body>
</html>