2.1 CSS简介

最新推荐文章于 2024-03-27 09:48:38 发布

dxt_snow

最新推荐文章于 2024-03-27 09:48:38 发布

阅读量165

点赞数

分类专栏： HTML&CSS 文章标签： CSS 选择器内联样式外部样式表内部样式表

本文链接：https://blog.csdn.net/qq_37665301/article/details/107453346

版权

HTML&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

2.1 CSS简介

介绍

CSS：层叠样式表，用于设置网页中元素的样式。

使用方式

内联样式
在标签内部通过style属性来设置元素的样式。
内部样式表
将样式编写到head中的style标签中，通过CSS选择器来选中元素，再设置样式。
外部样式表
将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的CSS文件

示例代码
html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS简介</title>
    <!--
        第二种使用css的方式（内部样式表）
            - 将样式编写到head中的style标签中
            - 通过CSS选择器来选中元素，再设置样式。p属性选择器
            - 可以同时为多个相同标签设置同一样式
            - 问题
                只能对一个网页起到设置作用，不能跨页面进行复用
    -->
        <style>
            p{
                color: blue; 
                font-size: 22;
            }
        </style>
    
    <!--
        第三种使用CSS的方式(外部样式表)
            - 可以将css样式编写到一个外部的css文件中
                然后通过link标签来引入外部的CSS文件
            - 使样式可以在不同页面中进行复用
            - 将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
                从而加快网页的加载速度，提高用户的体验（外部资源会被缓存）
    -->
        <link rel="stylesheet" href="./style01.css">
    </head>
    
    <body>
    <!--
        css -- 层叠样式表
            css用来设置网页中元素的样式

        第一种使用css的方式(内联样式)
            - 在标签内部通过style属性来设置元素的样式
            - 问题
                使用内联样式，样式只能对一个标签生效；维护不方便
            - 注意
                开发时不要使用内联样式
    -->
        <p style="color: red; font-size: 20;">月上柳梢头，人约黄昏后。</p>

        <p>落霞与孤鹜齐飞，秋水共长天一色。</p>
    </body>
</html>

外部style01.css文件

p{
    color: greenyellow;
    font-size: 24;
}

结果总结
外部样式表对内部样式表起到了效果覆盖的作用，但无法影响内联样式的效果。

基本语法

注释语法；CSS代码选择器加声明块结构。
示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS基本语法</title>

        <style>
            /* 
             CSS中的注释使用方法。
             
             CSS基本语法：
                选择器 声明块
                选择器：通过选择器可以选中页面中的指定元素
                    比如 p 的作用是选中页面中的所有p元素
                声明块：通过声明块来指定要为元素设置的样式
                    声明块由一个一个的声明组成
                    声明是一个名值对结构：
                        样式名+:+样式值+;
            */
            p{
                color: red;
                font-size: 30;
            }
            h1{
                color: blue;
                font-size: 10;  /*事实证明，这样设置font-size对h1无效*/
            }
        </style>
    </head>
    <body>
        <h1>展示</h1>
        <p>我是无情的示例</p>
    </body>
</html>

CSS中的继承

利用继承可以将一些通用的样式统一设置到共同的祖先元素上，这样该样式只需设置一次。
并不是所有的样式都会被继承。比如背景相关（背景颜色、背景图片），布局相关等的样式不会被继承。

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css的继承</title>
        <style>
            /*
                样式的继承，我们为一个元素设置的样式同时也会应用
                    到后代元素
                利用继承可以将一些通用的样式统一设置到共同的祖先元素上，
                    这样该样式只需设置一次
                注意：并不是所有的样式都会被继承
                    - 比如 背景相关的，布局相关等的样式不会被继承
            */
            p{
                color: red;
            }
            div{
                background-color: red;
                /*
                    div中子元素span同样会显示为red,span并没有继承red，
                        span保持了原有的透明背景，使底层red显示了出来
                */
            }
        </style>
    </head>
    <body>
        <p>
            我是一个p元素
            <span>我是p中的span元素，p中不要有块元素</span>
        </p>
        <div>
            我是div
            <span>
                我是div中的span
                <em>我是div中的span中的em</em>
            </span>
        </div>
    </body>
</html>