CSS基础、CSS语法

最新推荐文章于 2023-04-08 16:48:15 发布

守住⒈份信仰°

最新推荐文章于 2023-04-08 16:48:15 发布

阅读量144

点赞数

分类专栏：前端文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_43648337/article/details/108307662

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

CSS基础

CSS中文叫层叠样式表，样式：颜色、大小、形状等。网页是层次结构的，通过CSS我们可以为每一层设置样式，最终我们看到的只是最上面一层。总之，CSS为网页中的元素设置样式。
使用CSS修改样式的三种方法：
1、第一种方式（内联样式，行内样式）：在标签内部使用style属性设置样式，style属性的值就是样式，样式也是名值对结构。可以设置多个样式，以分号结束。
问题：使用内联样式只能对一个标签生效，当样式发生改变时，维护成本太高，实际开发绝对不要使用内联样式。
2、第二种方式（内部样式表）：将样式写到head中的style标签里。然后通过CSS选择器选中元素并为其设置样式，可以为多个标签设置样式，并且修改时只需修改一处即可全部应用，内部样式表更加方便对样式进行复用。
问题：内部样式表只能对一个页面生效，不能跨页面复用。
3、第三种方式（外部样式表）：将CSS样式编写到一个外部的CSS文件中，然后通过link标签引入CSS文件。意味着只要想使用这些样式表的网页只需使用link标签引入，样式表可以在多个网页中复用。这种方式是最佳的方式。同时，将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!--第二种方式，内部样式表-->
    <style>
        p{
            color: red;
            font-size: 10px;
        }
    </style>
    <!--第三种方式，外部样式表-->
    <link rel="stylesheet" href="外部样式文件地址">
</head>
<body>
    <h1>华罗庚</h1>

    <!--第一种方式，内联样式-->
    <p style="color: red;font-size: 10px;">埋头苦干是第一</p>
    <p>熟能生出百巧来</p>
    <p>勤能补拙是良训</p>
    <p>一分辛苦一分才</p>
</body>
</html>

CSS语法

style标签中的内容不属于html的区域，里面不能写html的东西，应遵循CSS的书写规范。
CSS中的注释：/* 注释内容 */（注释快捷键：ctrl+/）
CSS的基本语法：选择器声明块
选择器：通过选择器可以选中页面中的指定元素，比如：p的作用就是选择页面中所有的p标签，h1就是选择页面中所有的h1标签
声明块：通过声明块来指定要为元素设置的样式，声明块由一个个声明组成，声明是一个名值对结构，一个样式对应一个样式值，名和值之间以：连接，以；结尾。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        /*  CSS中的注释 */
        p{
            color: red;
            font-size: large;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>
    <h1>华罗庚</h1>
    <p>埋头苦干是第一</p>
    <p>熟能生出百巧来</p>
    <p>勤能补拙是良训</p>
    <p>一分辛苦一分才</p>
</body>
</html>

守住⒈份信仰°

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础、CSS语法

CSS基础CSS中文叫层叠样式表，样式：颜色、大小、形状等。网页是层次结构的，通过CSS我们可以为每一层设置样式，最终我们看到的只是最上面一层。总之，CSS为网页中的元素设置样式。使用CSS修改样式的三种方法：1、第一种方式（内联样式，行内样式）：在标签内部使用style属性设置样式，style属性的值就是样式，样式也是名值对结构。可以设置多个样式，以分号结束。问题：使用内联样式只能对一个标签生效，当样式发生改变时，维护成本太高，实际开发绝对不要使用内联样式。2、第二种方式（内部样式表）：将样式
复制链接

扫一扫

专栏目录