CSS的总结

最新推荐文章于 2024-04-06 00:46:18 发布

像向日葵一样~

最新推荐文章于 2024-04-06 00:46:18 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：网站文章标签： css 前端 html 样式层叠样式表

本文链接：https://blog.youkuaiyun.com/zhiwenganyong/article/details/128759935

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

概述

简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS的使用方式

行内样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
    </head>
    <body>
        <p style="font-size: 16px; color: red;">大家好</p>
    </body>
</html>

行内样式需要写到标签的 style 属性值中。
这种形式多用于测试，可维护性较差

内部样式表

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <style>
            p {
                font-size: 16px;
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Hello everyone</p>
    </body>
</html>

内部样式需要写到 <style> 标签中。
通过这种形式定义的样式只在本页面内生效

外部样式表

将样式写到单独的文件中，文件的扩展名为 .css

然后通过 <link> 元素将 index.css 文件引入到页面中：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <link rel="stylesheet" type="text/css" href="./css/index.css">
    </head>
    <body>
        <p>hello world</p>
    </body>
</html>