初始CSS

标签：dex   nbsp   yellow   ref   定位   外部   显示   body   使用   

一.引入样式

　　1.行内样式表

 　　　　　　<h1 style="color: red;font-size: 18px;">10-30</h1>

　　2.内部样式表(在head标签里面,title标签下面)

　　　　　　<style type="text/css">

　　　　　　　　　　h2{

　　　　　　　　　　　　color: yellow;

　　　　　　　　　　　　font-size: 20px;

　　　　　　　　　　}　　　　

　　　　　</style>

　　3.外部样式表

　　　　　　　链接式

　　　　　　　　<link href="../css/index.css" rel="stylesheet" type="text/css"/>

　　　　　　　导入式

　　　　　　　　<style type="text/css">

　　　　　　　　　　@import "../css/index.css";

　　　　　　　　</style>

　　　　　　　导入式和链接式区别

　　　　　　　　1.<link/>标签属于XHTML，@import是属于CSS2.1

　　　　　　　　2.使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示

　　　　　　　　3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

　　　　　　　　4.4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

　　4.样式优先级

　　　　　　行内>内部>外部

　　　　　　就近原则

二.基本选择器

　　1.标签选择器(通过标签名称定位)

　　　　　　h2{

　　　　　　　　color:red;

　　　　　　}

　　2.类选择器(通过标签中class属性的值定位，值可以重复，不能以数字开头)

　　　　　　.class01{

　　　　　　　　color:red;

　　　　　　}

　　　　　　<h1 class="class01">类选择器</h1>

　　3.ID选择器(通过标签中id属性的值定位，值不可以重复，不能以数字开头)

　　　　 #id01{

　　　　　　color: red;

　　　　}

　　　　<h2 id="id01">10-30</h2>

　　4.基本选择器的优先级

　　　　不遵循就近原则，无论哪一种样式表的导入，都遵循：id选择器>类选择器>标签选择器

三.高级选择器

　　1.层次选择器

　　　　　　1.后代选择器

　　　　　　　　 li p{

　　　　　　　　　　background-color: yellow;

　　　　　　　　 }

　　　　　　2.子代选择器

　　　　　　　　  body>p{

　　　　　　　　　　background-color: aqua;

　　　　　　　　}

　　　　　　3.相邻兄弟选择器

　　　　　　　　.class01+p{

　　　　　　　　　　background-color: red;

　　　　　　　　}

　　　　　　4.通用兄弟选择器

　　　　　　　　.class01~p{

　　　　　　　　　　background-color: blue;

　　　　　　　　}

初始CSS

标签：dex   nbsp   yellow   ref   定位   外部   显示   body   使用   

原文地址：https://www.cnblogs.com/xiao-ran/p/9878548.html