css

作者: cctosuper | 来源:发表于2017-10-18 18:09 被阅读0次

自己练习的css动画（单标签）
CSS背景、文本、字体、链接、列表、轮廓
CSS 教程
CSS样式
CSS高级
前端开发之 CSS入门
CSS第一天
CSS学习笔记（1）
CSS盒子模型、定位、浮动
每个前端工程师都应该懂的前端性能优化总结：

class 和 id 的使用场景?

class: 类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,多用于多个标签样式相似或完全相同时;用于将一类的样式抽取出来.
id选择器:优先级高于类选择器,一个标签只能有一个id且每个id只能使用一次,多用于页面分块的块级标签上,如一个页面的导航区,内容区,页脚等;用于控制单个元素的样式.

CSS选择器常见的有几种?

基础选择器

选择器	含义
*	通用元素选择器,匹配页面所有元素
#id	id选择器,匹配特定id的元素
.class	类选择器,匹配class包含(不是等于)特定类的元素
element	标签选择器

组合选择器

选择器	含义
E,F	多元素选择器,同时选中E或F
E F	后代选择器,匹配E所有后代F元素,不仅包括子元素,还包括子元素向下递归
E>F	子元素选择器,匹配E元素的所有直接子元素F
E+F	直接相邻选择器,匹配E元素之后的相邻同级F元素
E~F	普通相邻选择器(弟弟选择器),匹配E元素之后所有同级F元素
.class1.class2	同时拥有两个id或class的元素,中间无分隔符,`.`和`#`本身充当分隔符

属性选择器

选择器	含义
E[Attr]	匹配所有具有属性Attr的元素
E[Attr=value]	匹配所有属性Attr等于value的元素
E[Attr~=value]	匹配所有属性Attr具有多个空格分格,其中一个等于value的元素
E[Attr^=value]	匹配所有属性Attr的值以value开头的元素
E[Attr$=value]	匹配所有属性Attr的值以value结尾的元素
E[Attr*=value]	匹配所有属性Attr的值包含value的元素

伪类选择器

选择器	含义
a:link	匹配所有未被点击的链接
a:visited	匹配所有已被点击的链接
a:active	匹配鼠标已经按下,还没有释放的链接
a:active	匹配鼠标悬停其上的链接
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E:selection	匹配用户当前选中的元素
E:first-child	匹配其父元素的第一个子元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素

伪元素选择器

选择器	含义
E::first-line	匹配E元素内容的第一行
E::first-letter	匹配E元素内容的第一个字母
E::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成的内容

选择器的优先级是怎样的?对于复杂场景如何计算优先级？

选择器优先级由高到低: !important > 内联样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符 > 浏览器自定义
同一级别选择器位置靠后的会覆盖之前的样式
复杂场景下计算权重

内联样式权重为1000
id选择器权重为100
类,属性和伪类选择器权重10
标签和伪元素选择器权重1

a:link, a:hover, a:active, a:visited 的顺序是怎样的？为什么？

顺序: a:link > a:visited > a:hover >a:active
四个伪类选择器优先级相同,位置靠后会覆盖之前的样式,链接被点击之后,a:visited永久生效,我么只需它覆盖a:link即可,所以排第二位;当鼠标放置在链接上时,hover生效,点击鼠标时,active生效,则需要active覆盖hover,所以a:active放在最后.

以下选择器分别是什么意思?

#header{
}  /* 匹配id为header的元素 */
.header{
} /* 匹配class包含header的元素 */
.header .logo{
} /* 匹配包含header类元素的所有后代中包含logo类的元素 */
.header.mobile{
} /* 匹配class既包含header又包含mobile的元素 */
.header p, .header h3{
} /* 匹配class包含header的元素所有的后代中p或h3元素*/
#header .nav>li{
} /* 匹配id为header的元素后代中包含nav类元素的直接子元素li */
#header a:hover{
} /* 匹配id为header的元素的后代a元素被鼠标悬停其上时 */
#header .logo~p{
} /* 匹配id为header的元素所有后代中包含logo类元素之后的所有同级p元素 */
#header input[type="text"]{
} /* 匹配id为header的元素所有后代属性type为text的input元素 */

列出你知道的伪类选择器

选择器	含义
a:link	匹配所有未被点击的链接
a:visited	匹配所有已被点击的链接
a:active	匹配鼠标已经按下,还没有释放的链接
a:active	匹配鼠标悬停其上的链接
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E:selection	匹配用户当前选中的元素
E:first-child	匹配其父元素的第一个子元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别（注意空格的作用）

div:first-child : 表示匹配div作为其父元素的第一个子元素
div :first-child : 表示匹配div标签下的第一个后代元素
div:first-of-type : 表示匹配div作为子元素第一次出现
div :first-of-type : 表示匹配div下第一个相同类型后代元素

运行如下代码，解析下输出样式的原因。

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

输出结果:

.item1:first-child 匹配包含item1类元素父元素下第一个item1类子元素,所以aa字体变红;
item1:first-of-type匹配包含item1类元素父元素第一个相同类型的子元素;p标签下aa为相同类型第一个元素,aa背景变蓝;h3标签下,bb与cc类型相同,所以bb背景色变蓝,cc无变化

- CSS的全称是什么?

层叠样式表（cascading style sheets）.。
css不仅可以静态的修饰页面，还可以配合各种脚本语言动态的对网页各元素进行格式化。
css能够对网页中的元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模式样式编辑的能力。

- CSS有几种引入方式? link 和@import 有什么区别?

内联样式
当样式需要应用到个别元素时可以使用内联样式。简单直接，但后续修改会很繁琐。

<h1 style="color: red;"></h1>

内部样式
当单个文件需要特别样式时，可以使用内部样式

<head>
  <style type="text/css">
    body {
               background-color: red
               }
  </style>
</head>

外部样式
当样式需要被应用到很多页面时，可以用外部样式。使用外部样式就可以通过更改一个文件来改变整个站点的外观。实现了内容与样式分离。

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

区别：本质上，这两种方式都是为了加载css文件，但还是存在着细微差别。

link属于XHTML标签，而@import完全是CSS提供的一种方式。link除了加载CSS外，还可以定义RSS，定义rel链接属性等。
加载顺序有差别。当页面被加载时，link引用的CSS会同时加载，而@import引用的CSS会等到页面被全部加载完后再加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（闪烁）。
兼容性有差别。@import时CSS2.1提出的，老的浏览器会不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
使用DOM控制样式时有差别。当使用js控制DOM区改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

- 以下这几种文件路径分别用在什么地方，代表什么意思?

文件路径	含义
css/a.css	当前目录css文件夹里的a.css文件
./css/a.css	同css/a.css
b.css	当前文件夹下的b.css文件
../imgs/a.png	上一级目录的imgs文件夹下的a.png文件
/Users/hunger/project/css/a.css	a.css文件的绝对路径
/static/css/a.css	根目录下static文件夹下css文件夹里的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png	该图片的网站路径