CSS 简介&三种样式写法

最新推荐文章于 2024-03-19 23:33:57 发布

呵呵world

最新推荐文章于 2024-03-19 23:33:57 发布

阅读量382

点赞数

分类专栏： web前端开发文章标签： css 前端

本文链接：https://blog.csdn.net/m0_58245389/article/details/126917887

版权

web前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页分为三个部分：
结构(html5)
表现(css3)
行为(JavaScript)

css:层叠样式表
网页其实是一个多层的结构，通过css为每一层设置样式
总之一句话：css就是为元素设置样式

添加css样式三种方法：行内样式、内部样式、外部样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加css的三个方式</title>
    <style>
        /* 
        第二种：内部样式
                -将样式写到head的style标签内;
                    然后通过css选择器选中元素，并为其设置各种样式;
                    ·优点：可以为多个标签设置样式，修改的时候只需要修改一处;
                -内部样式表更方便的对样式进行复用
                -问题：只能对当前页面其效果，不能对其他页面使用
               
          */
          /* <--- p表示所有p元素设置 --> */
        p{
            color: aquamarine;
            font-size: 24px;
        }
    </style> 
    <!-- 
        第三种方式：外部样式表
        -可以将css样式编写到一个外部的css文件中
            然后通过link标签（样式表、样式表的路径）引入外部的css文件 
        -外部样式表需要通过link标签进行引入
            意味着只要想使用这些样式的网页都可以引用
        -将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
            从而加快网页的加载速度，提高用户体验
    --> 
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 
        第一种：行内样式，内联样式
                -在标签内部通过style属性来设置元素的样式
                -问题：
                    只能对一个标签使用，使用多个地方，就得复制多个地方
                    代码不好维护，修改的时候需要修改多个地方
     -->
    <p style="color: red;font-size: 24px;">少小离家老大回，</p>
    
    <p>乡音未改鬓毛衰。</p>
    <p>儿童见问应不识，</p>
    <p>笑问客从何处来。</p>
</body>
</html>

style.css

p{
    color:tomato;
    font-size: 24px;
}

呵呵world

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 简介&三种样式写法

添加css样式三种方法：行内样式、内部样式、外部样式。
复制链接

扫一扫

专栏目录

CSS 简介&三种样式写法

网页分为三个部分： 结构(html5) 表现(css3) 行为(JavaScript)

css:层叠样式表 网页其实是一个多层的结构，通过css为每一层设置样式 总之一句话：css就是为元素设置样式

添加css样式三种方法：行内样式、内部样式、外部样式

style.css

网页分为三个部分：
结构(html5)
表现(css3)
行为(JavaScript)

css:层叠样式表
网页其实是一个多层的结构，通过css为每一层设置样式
总之一句话：css就是为元素设置样式