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

学习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相同

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

什么是CSS

内联CSS

嵌入式CSS

外部引用CSS

猜你喜欢