CSS第一节

CSS ：层叠样式表 (Cascading Style Sheets)或级联样式表。

 

CSS用途：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

 

HTML.CSS.JavaScript的关系：

  HTML 结构层     负责从 语义的角度搭建页面结构

  CSS 样式层         负责从 审美的角度美化页面

  JavaScript 行为层 负责从 交互的角度提升用户体验

 

引入CSS的方式

    行内样式，是通过在标签中设置style属性来达到实现控制标签的样式的效果。

例如：<h1 style="color: red;">传智播客-前端与移动开发学院的CSS基础视频教程</h1>

   嵌入样式：在head标签中，嵌套一个style标签，在style标签中可以书写CSS的样式内容。

Style标签有一个属性type属性，默认值就是 text/css,可以省略。

例如：<style type="text/css">

p {

color: green; /*设置前景色，也就字体的颜色*/

background-color: silver;

}

 

ul {

background-color: red;

}

</style>

   外联样式（link）

通过link标签引入css样式文件

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

type属性：只有一个选项，“text/css"，指定当前为css文本文件

rel：指定当前HTML文件与CSS文件的关系是样式表。href：指定外联样式表的路径

   导入样式：@import，导入样式会导致，css文件不能并行下载。不推荐使用。

导入样式的书写必须在所有的css规则书写之前

 

 

CSS注释

CSS的注释语法  /* 注释的内容  */

注释不能嵌套

  多行注释：

/*

放多行的注释内容1

放多行的注释内容2

*/

 

一般用于 模块的 注释

例如：/* S 导航条开始*/

ul {

background-color: red;

}

/* E 导航条结束*/

  文件头的注释：

/*

* author: 传智播客 前端与移动开发学院

* des： 当前文件用于 ....

* date：

*/

 

CSS选择器

   标签选择器

标签选择器就是选择当前页面中相同名字的标签。

例如：p {

background-color: yellow;

color: white;

}

   通配符选择器

通配符* 代表所有的标签。通过通配符选择器可以选择页面中的所有的标签。穿透力很强。

例如：* { color：red; }

设置当前页面中所有标签的颜色为红色

   ID选择器

HTML标签中ID的属性值在一个页面中必须是唯一的。

ID选择器是可以帮助我们选择当前页面中唯一id值的标签，也就是根据标签的id属性值进行选取设置样式。ID选择器的的符号是#号。

   类选择器

类选择器就是选取页面中所有标签的class属性值相同的一类标签。

类选择器的符号是： .  (点)

   ID选择器和class选择器的区别

1、相同的Class属性值，可以在HTML中出现多次。ID属性值在页面中只能出现一次。

2、一个class的属性可以有多个值，也就是说一个标签可以有多个类。

建议大家尽量使用类选择器。使用ID时候情况：当确实能唯一确定当前页面中标签只会出现一次，这时候可以使用ID选择器。

   复合选择器-标签指定式选择器

标签指定式复合选择器，要求必须是标签开头然后其他选择器。

比如：h3.demo {} ,需要同时满足既是标签h3又拥有demo类才能被选择到。

注意：使用非常少，一般不用。要么直接用id选择器，要么直接用类选择器。

   后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

后代不仅仅包括儿子，还包括子子孙孙。

   子代选择器

子代选择器，是让CSS选择器智能选择儿子辈的元素。

    例如：h1 > strong {color:red;}

     解读为：选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

尖括号和选择器之间可以有空格也可以没有，没有限制。

建议:选择器和尖括号间有空格。

    属性选择器

属性选择器就是根据html标签的属性进行过滤选择。

常见的几种方式：

 h1[id] { color: red; }

设置包含id属性的h1标签的字体为红色。

 

/*把拥有id和class属性的h1标题选出来然后设置字体大小为17px*/

h1[id][class] { font-size: 17px; }

 

input[type="text"] { background-color: purple; }

设置拥有type属性并且属性值是text的input标签的背景为紫色。

    伪类选择器

:link

伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接使用a标签。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接，IE7+所有元素都兼容。

:active

伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited

伪类将应用于已经被访问过的链接

:focus

伪类将应用于拥有键盘输入焦点的元素。

顺序问题：LoVe  HAte原则。

    伪元素选择器

伪元素 是控制内容

:first-line 伪元素  第一行

:first-letter 伪元素  第一个字

注释：以上两个伪元素只能用于块级元素

:first-child 伪元素，选择属于第一个子元素的元素。

例如：span:first-child{}  /*选择属于第一个子元素的所有span标签。*/

:before与:after伪元素，可以设置元素之前后之后的 内容，并且配合content设置相关内容。比如：   #demo:after,#demo:before {  content:"--";display:block; }

注意：content属性只能跟 伪元素:before 和:after共用。

Display:block. 是设置标签为块级元素，独占行。

 

CSS的特性

   CSS的层叠性

CSS的层叠性，也就是说后来设置的样式会层叠（覆盖）之前的样式，层叠性的前提示CSS的选择器的优先级相同。

   CSS的继承性

CSS的继承性是指，子容器的样式会继承父容器的样式。但并不是所有的样式都能继承。只有部分样式能继承，比如：文字相关字体大小、颜色、字体样式、行高、鼠标样式等。盒子相关的样式都不能继承，比如：宽高、背景色、边距、浮动、绝对定位等。

   CSS的特殊性（优先级）

CSS的特殊性，定义CSS样式时，经常出现两个或更多规则应用在同一元素上，那么谁的优先级更高呢，这就是CSS的特殊性。

比较CSS的优先级的时候：

1、首先比较行内样式，行内样式优先级最高。如果嵌入样式和行内样式同时设置样式时，行内样式优先级最高。

2、其次是内嵌样式的优先级比较：

内嵌样式的，ID选择器对应的样式优先级最高。

其次是Class样式

再次是标签选择器样式，

再次是通配符选择器设置的样式

后面是 继承的样式，

          最后是浏览器默认的样式。

结论一：继承的样式要大于默认的样式

结论二：通配符选择器的样式的优先级比继承样式的优先级要高。

结论三：标签的选择器的优先级要高于通配符选择器的优先级。

结论四：类选择器的样式的优先级要高于 标签选择器的样式的优先级。

结论五：id选择器的优先级高于 类选择器的优先级

结论六：行内样式的选择器的优先级高于  id选择器的优先级。

    复合选择器的样式优先级核算：

复合选择器 的优先级根据四个层次来算，首先是行内最高。

其次，比较所有的id选择器的个数，个数多的为高。

再次比较类选择器的个数，个数多的为高，

最后比较标签选择器的个数，个数多的为高。