CSS_概述与CSS_与html结合方式与CSS_语法格式

CSS_概述

　　　　1.概念：Cascading  Style  Sheets  层叠样式表

　　　　　　　　层叠：多个样式可以作用在同一个html的元素上，同时生效

　　　　2.将内容展示和样式控制分离

　　　　　　　　降低藕合度。解耦

　　　　　　　　让分工协作更容易

　　　　　　　　提高开发效率

CSS_与html结合方式

　　1.内联样式

　　　　在标签内使用style属性指定css代码

　　　　如：<div style="color: red;">Hello CSS</div>

　　2.内部样式

　　　　在head标签内，定义style标签，style标签的标签体内容就是css代码

　　　　如：　　　

　<style>
    div{
       color: blue;
   　　}
　　</style>

　　<div>Hello Css</div>
　　<div>Hello Css</div>

　　3.外部样式　　

　　　　1.定义css资源文件

　　　　2.在head标签内，定义link标签，引入外部的资源文件

　　如：

　　pattern.css：　

div{
    color: blueviolet;
}

<link rel="stylesheet" href="css/pattern.css">

<div>Hello Css</div>
<div>Hello Css</div>

　注意：

　　　　1，2，3种方式，cass作用范围越来越大

　　　　1方式不常用，后期常用2,3

　　　　3种格式可以写为：　　　　　

<style>
    @import "css/pattern.css";
</style>

CSS_语法格式

　　　　格式：

　　　　　　选择器{

　　　　　　　　　属性名1：属性值1

　　　　　　　　　属性名2：属性值2

　　　　　　　　　....　

　　　　　　　　　}

　　　　　　选择器：筛选具有相似特征的元素

　　　　　　注意：

　　　　　　　　每一对属性需要使用；隔开，最后一对属性可以不加