Css

Css添加方式:

  1. 第一种添加方式：行内样式  直接放在标签上<span style=”color:red;”>我是行内样式</span>
  2. 第二种添加方式：内部样式 放在<head>标签内部<style type=”text/css”></style>
  3. 第三种添加方式：头部引入专门的.css文件<link rel=”stylesheet” type=”text/css” href=”${url}”>

优先级：遵循html从上到下运行原则，最后执行的为最终结果。

第一中最高

 Css选择器

  1. 标签选择器  2.id选择器 3.Class选择器 4.后代选择器 5.子选择器 6.伪类选择器 7.通用选择器 8.群组选择器 9.相邻细胞选择器 10.属性选择器 11.伪元素选择器 12.结构性伪类选择器 13.结构性伪类选择器 14.UI元素状态伪类选择器

优先级：遵循越精确优先级越高，例如：id>class>标签>*（通配符）

id选择器

    #sp1{  color: red;   }  //定义id为sp1的标签颜色为red，选择id以#开头

class选择器

.sp2{ color: #008000;   } //定义id为sp1的标签颜色为red，选择class以点开头

*（通配符）选择器

*{   color: #FF0000;   }//定义所有标签颜色为red，选择id以点开头

<!-- 标签选择器-->

span{  color: #FF0000;  }//定义所有span标签颜色为red

组合选择器：

div#sp2,span#sp1{   //div#sp2交集选择器，同时满足span标签和id=sp2的标签

color: white;            //div#sp2,span#sp1两个之间满足一个即可

}

#d1>div{          //  #d1>div(大于号)指代嫡子标签

 color: #008000;

  }

#d1 span{          //#d1 span空格指代所有子代标签

color: #FF0000;

  }

#d2~div{           //#d2~div指代id为d2标签后的所有兄弟标签

color: #FF0000;

}

#d2+div{    //    #d2+div指代id为d2标签后的第一个兄弟

color: #FF0000;

}

 伪类选择器

/**
 * 动态伪类：一直都在变化
 * a:link       超链接未被访问过
 * a:visited     超链接访问过
 * （element）a:hover       鼠标移入
 * （element）a:active      鼠标点击
 * （element）a:focus       获取焦点（能输入的元素）
 */
/**
 * 结构伪类
 * （element）div>（element）p:first-child  div所有孩子的第一个儿子p 第一个孩子而且为p
 * （element）div>（element）p:nth-child(n)  div所有孩子的n个儿子p 第3个 div>p:nth-child(3) 偶数 div>p:nth-child(even || 2n) 奇数 div>p:nth-child(odd || 2n+1) 前五个  div>p:nth-child(-n + 5)
 * （element）div>（element）p:last-child  div所有孩子的最后一个儿子p
 * （element）div>（element）p:first-of-type div所有是p的孩子的第一个儿子p
 * （element）div>（element）p:nth-of-type(n) div所有是p的孩子的第n个儿子p
 * （element）div>（element）p:last-of-type div所有是p的孩子的最后一个儿子p
 * （element）div>（element）p:nth-last-child(n) 倒数第几个儿子p
 * （element）div>（element）p:nth-last-of-type(n) 所有p元素倒数第几个儿子p
 * （element）span:only-child span是唯一的儿子才会被选中
 * （element）span:only-type span在儿子中只有一个才会被选中
 *  :root选中的是html
 * （element）div:empty 选中内容是空的div（有空格都不行）
 */
/**
 * 否动选择器
 * (element)div>(element)p:not((选择器).fail) 选中div的儿子p但是类型不是fail
 * div>p:not(:first-child)
 */
/**
 * UI伪类
 * input:focus  检查是否被点击 （选择）
 * input:check  检查是否选中 （选择）
 * input:disabled 选中被禁用的 input元素
 * input:enabled 选中被可用的 input元素
 * 单选和复选无法改样式
 */
/**
 * 目标伪类
 * div:target
 */
/**
 * 语言伪类
 * div:lang(en) 选中div且语言为英文  <div lang="en"></div>
 * div:lang(zh-CN)
 * :lang(zh-CN) 选中全部语言为简体中文的元素
 */
/**
 * 伪元素选择器 ::
 * div::first-letter 选中div第一个字符
 * div::first-line   选中div的第一行的文字
 * div::selection    鼠标选中的文字
 * input::placeholder 选中input中的提示文字
 * p::before{        选中p元素开始位置在它前面创建一个p元素
 *     content:"￥";
 *     color:red;
 * }
 * * p::after{        选中p元素结束位置在它后面创建一个p元素
 * *     content:".00"
 * * }
 */
选择器权重计算
格式（a,b,c）
a:ID选择器的个数
b:类，伪类，属性选择器的个数
c:元素，伪元素选择器的个数

 

 

rel=stylesheet是?

首先，我们要知道Link标签有两个作用：

1. 定义文档与外部资源的关系；2. 是链接样式表。

link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的，

rel各个属性值配置的意思：

Alternate – 定义交替出现的链接

Stylesheet – 定义一个外部加载的样式表（常用）

Start – 通知搜索引擎,文档的开始

Next – 记录文档的下一页.(浏览器可以提前加载此页)

Prev – 记录文档的上一页.(定义浏览器的后退键)

Contents

Index – 当前文档的索引

Glossary – 词汇

Copyright – 当前文档的版权

Chapter – 当前文档的章节

Section – 作为文档的一部分

Subsection – 作为文档的一小部分

Appendix – 定义文档的附加信息

Help – 链接帮助信息

Bookmark – 书签