H5笔记——CSS的三种样式

CSS:层叠样式表,控制HTML标签的样式,在美化网页中起到非常重要的作用,编写的格式是键值对形式的。
CSS有三种样式:行内样式,页内样式,外部样式。

行内样式

行内样式:直接在标签的style属性中书写。我通过div标签(容器标签)和p标签(段落标签)来展示。如下代码:
设置边框时,dashed是虚线的效果,如果要设置成实线,可以改为solid

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
    <div style="color: blue; font-size: 18px; background-color: aqua;">我是容器标签</div>
    <p style="color: red; font-size: 18px; background-color: burlywood; border: 5px dashed green">
        我是段落标签
    </p>
</body>
</html>

显示效果如下:

Paste_Image.png
页内样式

页内样式是把样式放在<head>里面,在网页的style标签中书写。如下代码:分别设置了字体颜色、字体大小、背景颜色、边框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页内样式</title>
    <style>
        div{
            color:red;
            font-size: 30px;
            border: 4px solid yellow;
        }

        p{
            color: blue;
            font-size: 44px;
            background-color: yellowgreen;
        }
     </style>
</head>
<body>
    <div>我是容器标签</div>
    <div>我是容器标签</div>
    <div>我是容器标签</div>
    <div>我是容器标签</div>
    <div>我是容器标签</div>
    <p>我是段落标签</p>
    <p>我是段落标签</p>
    <p>我是段落标签</p>
    <p>我是段落标签</p>
    <p>我是段落标签</p>
    <p>我是段落标签</p>
</body>
</html>

显示效果如下:


Paste_Image.png
外部样式

外部样式:顾名思义是把这些标签的style属性写到外部的css文件中,在网页中引用。创建一个css文件,通过stylesheet来引用。

Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <!--引用外部的样式-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div>我是容器标签</div>
    <div>我是容器标签</div>
    <p>我是段落标签</p>
    <p>我是段落标签</p>
</body>
</html>

显示效果如下:


Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容