前端入门学习笔记（十三）CSS入门（一）介绍，内联、嵌入式、外部引用CSS

最新推荐文章于 2022-10-16 22:51:10 发布

TUTsmile

最新推荐文章于 2022-10-16 22:51:10 发布

阅读量263

点赞数

分类专栏： CSS 文章标签： CSS入门 CSS学习笔记前端入门

本文链接：https://blog.csdn.net/TUTsmile/article/details/82710964

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习CSS之前，必须要有HTML基础，若没有可以先看我的前端入门学习笔记之前的内容。

什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

样式表可用于web文档的外观样式。打个比方吧，HTML,CSS,JavaScript之间的关系就如同骨、皮肤、肌肉的关系，HTML是人的框架，CSS是人的皮肤即外表，JavaScript控制人的动作及页面交互。

内联CSS

内联样式属性：sytle
内联CSS的使用方式，将独特的样式应用于单个元素

    <p style="color:pink; background-color: blue;">
        内联样式的例子
    </p>

嵌入式CSS

在HTML页面的标题部分将内部样式定义在<style>元素中并且放于<head>中。
将对有所设置的所有标签起作用（不包括内联样式）

下列代码中的样式，将作用在所有没有内联样式的<p>段落中
<html lang="zh">
    <head>
        <style>
            p {
                color: white;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <p>每个段落都会有相同的样式</p>
        <p>每个段落都会有相同的样式</p>
        <p style="color:pink; background-color: blue;">
            除非设置了内联样式
        </p>
    </body>
</html>

外部引用CSS

所有的CSS样式保存在同一个后缀名为.css的拓展文件中。
然后通过html标签<link>在HTML页面的<head>部分将CSS文件引入。

HTML部分
<!DOCTYPE html>
<html lang="zh">
    <head>
        <link rel="stylesheet" href="CssLearn.css"><!-- 只有styelsheet属性获得了所有浏览器的支持-->
    </head>
    <body>
        <p>每个段落都会有相同的样式</p>
        <p>每个段落都会有相同的样式</p>
        <p style="color:pink; background-color: blue;">
            除非设置了内联样式
        </p>
    </body>
</html>

CSS部分（webstorm中，new后选择stylestreet）
p {
   color:white;
   background-color:gray;
}

因为样式和<body>内的代码与嵌入式CSS没有区别
故显示效果与嵌入式CSS相同

TUTsmile

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端入门学习笔记（十三）CSS入门（一）介绍，内联、嵌入式、外部引用CSS

学习CSS之前，必须要有HTML基础，若没有可以先看我的前端入门学习笔记之前的内容。什么是CSSCSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一...
复制链接

扫一扫

专栏目录