CSS基础

原创已于 2022-04-09 20:51:31 修改

· 407 阅读

0 ·

版权

文章标签：

#html #css

于 2022-04-09 20:41:23 首次发布

前端学习专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS的三种引入方式：内部样式、外部样式和内联样式，并通过实例展示了背景颜色、背景图、文本样式等常用CSS属性的使用。同时，讲解了选择器的运用，包括通配选择器、标签选择器、类选择器、ID选择器以及后代和子代选择器，强调了选择器的优先级。通过这个指南，读者可以更好地掌握CSS在网页设计中的应用。

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

CSS基础

CSS的引入方式

1.内部样式：

通过在head标签中，添加style标签，在style标签中进行css样式书写：

在这里插入图片描述

除此以外，在内部样式内，也可以引用外部样式，如：

在这里插入图片描述

2.外部样式：

通过在head标签中，添加link标签，引入外部.css文件来进行css修改：

在这里插入图片描述

其中，href属性指定目标css文件的路径。rel属性指定目标文件与当前文件的关系。

3.内联样式

在body中的标签内，用style属性来更改标签的css样式：

在这里插入图片描述

CSS常用样式

1.背景颜色

背景颜色关键字background-color，一共有三种给值方式：1.英文单词，2.rgba三原色（最后的a代表透明度）3.16进制颜色。

<style>
    /* 网页三原色： 红 绿 蓝 */
    div {
        background-color: gold;
        /* background-color: rgba(255,0,255,.3); */
        /* background-color: #000; */
    }
</style>

2.背景图

背景图关键字background-image，由url指定路径给值，用background-size来确定背景图的大小（只给一个值时，等比变化），background-position确定图片位置，background-repeat来确定图片是否重复显示。

    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
            background-image: url(img/cat.jpeg);
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        /* background-size: w h;
        w 宽度 h 高度
        如果只给其中一个，另一边会等比例变化
        两个特殊的值：
        contain  图片的长边占满父级
        cover 图片的短边占满父级 */
    </style>

3.文本常用样式

1.color规定字体的颜色。

2.font-size规定字体的大小。

3.line-height规定一行文本所占空间高度。

4.font-family规定文本的文体，如宋体、隶书等。

5.text-align规定文本对齐方式。

6.text-indent规定文本首行缩进。

7.letter-spacing规定字体左右间距。

8.word-spacing规定单词间距。

9.text-transform规定大小写。

10.text-decoration设置文本装饰线。

4.常用选择器

1.通配选择器，选择body中所有的标签。

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

2.标签选择器，选择body中所有的同名标签，如下就选中了所有的p标签。

<style>
    p{
        margin: 0;
        padding: 0;
    }
</style>

3.类选择器，通过给标签分配class属性，来选择对应标签，如下就选中了class=“title”的标签。

<style>
    .title{
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <div class="title">我是标题</div>
</body>

4.标签选择器，通过给标签分配id属性，来选择对应标签，如下就选中了id=“nopadding”的标签。并且一个id名，在同一个html文件中，只能出现一次（id唯一）。

<style>
    #nopadding{
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <div id="nopadding">我是标题</div>
</body>

选择器优先级： id（100） > class（10） > tag（1）

5.后代选择器，如下选中了id=“nopadding”下的所有p标签（可多次迭代）。

<style>
    #nopadding p{
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <div id="nopadding">
        <p>
            lalala
        </p>
    </div>
</body>

后代选择器的优先级由后代选择器中的选择器优先级相加。

6.子代选择器，选择父代的直接子代，而不是全部子代（后代选择器选择的就是父代的全部子代）。如下，只会选择id=“nopadding”下的第一个p标签，而p标签内的p标签不会被选中。

<style>
    #nopadding p{
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <div id="nopadding">
        <p>
            <p>
                lalala
        	</p>
        </p>
    </div>
</body>