CSS基础与选择器
2018-12-18 本文已影响0人
原上的小木屋
CSS加载方式有几种？
- 外部样式表(推荐)
- 通过
<link>引入外部css<link rel="stylesheet" href="index.css"> - 通过@import引入样式，放入CSS中（后面一定要加分号）
@import url("index.css");
- 内部样式表
- 将CSS放在页面的style元素内
<style>p{color: red; }</style> - 内联样式（不推荐，但有时候很有用）
<p style="backgroundcolor:orange; font-size: 24px;">Css</p> - 属性样式（已被废弃）
<img src="a.png" width=100 height=200>
@charset有什么作用？
- 指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 @charset @规则被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的字符集相关 <style> 元素内的样式属性内使用。
- 此 @规则 在某些 CSS 属性中使用非 ASCII 字符时非常有用，例如 content。
- 在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：
- 文件的开头的 Unicode byte-order 字符值。
- 由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
- CSS @规则 @charset。
- 使用参考文档定义的字符编码： <link> 元素的 charset 属性。 该方法在 HTML5 标准中已废除，无法使用。
- 假设文档是 UTF-8。
@import有什么作用？如何使用？
作用
- 用来引入外部样式放入css中，告诉 CSS 引擎引入一个外部样式表。这些规则必须先于所有其他类型的规则，@charset规则除外; 因为它不是一个嵌套语句。 用法
@import 'style.css';
用法
- 既可以放入CSS中，用于引入外部样式
- 也可以放入html的style标签内
id 选择器和 class 选择器的使用场景分别是什么？
- 在CSS文件里书写时，ID加前缀
"#"；CLASS用"." - id一个页面只可以使用一次；class可以多次引用。
- ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
- 从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
总结如下
- id选择器，用于匹配特定id的元素，具有独一无二不可代替性
- class选择器，用于匹配class包含（不是等于）特定类的元素，描述一组元素的样式，你可以多次使用class赋值，来命名元素名
CSS选择器常见的有几种？
- 基础选择器
四类（*匹配所有元素，#id匹配id，.class匹配相关属性，element匹配元素） - 属性选择器
- 组合选择器
七类
-
E,F同时匹配E或F。 -
E F匹配E元素所有的后代元素F。 -
E>F匹配E元素的子代F。 -
E+F匹配E之后的相邻同级F。 -
E~F匹配E之后的同级F。 -
.class1.class2匹配同时具有class1和clss2属性的元素。 -
element#id匹配element元素id的元素）**
- 伪类选择器
- 伪元素选择器
伪类选择器有哪些？伪元素有哪些？
伪类选择器定义：代表一个元素的另一种状态
-
E: first-child匹配元素E的第一个子元素 -
E：link匹配所有未被点击的链接 -
E: visited匹配所有已被点击的链接 -
E：active匹配鼠标已经其上按下，还没被释放的E元素 -
E：hover匹配鼠标悬停器上的E元素 -
E：focus匹配获得当前焦点的E元素 -
E：lang(c)匹配lang属性等于c的E元素 -
E：enabled匹配表单中可用的元素 -
E：disabled匹配表单中禁用的元素 -
checke匹配表单中被选中的radio或checkbox元素 -
election匹配用户当前选中的元素
伪元素选择器 -
E::first-line匹配E元素内容的第一行 -
E::first-letter匹配E元素内容的第一个字母 -
E::before在E元素之前插入生成的内容 -
E::after在E元素之后插入生成的内容
以下选择器分别是什么意思?
-
#header{}匹配id为header的所有元素 -
.header{}匹配class为header的所有元素 -
.header .logo{}匹配class为header的元素后代class为logo的所有元素 -
.header.mobile{}匹配同时具有header和mobile class的所有元素 -
.header p, .header h3{}匹配class为header后代里面的所有p元素和所有h3元素 -
#header a:hover{}在id为header元素下匹配a元素鼠标悬停属性 -
#header .logo~p{}在id为header元素下匹配与class为logo的元素处于后面同级的p元素 -
#header .logo+p{}在id为header元素下匹配与class为logo的元素处于后面同级的p元素 -
#header .logo p{}在id为header元素下匹配class为logo元素下的所有后代p元素 -
#header .logo>p{}在id为header元素下匹配class为logo元素下的所有子代p元素 -
#header p.logo{}在id为header元素下同时匹配p元素和class为logo元素这类既又关系（并列）的元素的特性 -
#header .logo.p{}在id为header元素下同时匹配class为logo和p的元素 -
#header input[checked]{}在id为header元素下匹配checked值的input的元素
选择器的优先级是如何计算的？
- 优先级从高到低分别是：
- 在属性后面使用
!important会覆盖页面内任何位置定义的元素样式 - 作为style属性写在元素标签上的内联样式
- Id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景情况下
- 行内样式 <div style="xxx"></div>
==> a - ID 选择器
==> b - 类，属性选择器和伪类选择器
==> c - 标签选择器、伪元素
==> d
abcd优先级依次降低 - 举几个例子
-
a{color: yellow;}特殊性值：0,0,0,1/ -
·div a{color: green;}特殊性值：0,0,0,2/ -
.demo a{color: black;}特殊性值：0,0,1,1/ -
.demo input[type="text"]{color: blue;}特殊性值：0,0,2,1/ -
.demo *[type="text"]{color: grey;}特殊性值：0,0,2,0/ -
#demo a{color: orange;}特殊性值：0,1,0,1/ -
div#demo a{color: red;}特殊性值：0,1,0,2*/
运行如下代码，并对结果做出解释
<style>
.box:first-child {
color: red;
}
.box:first-of-type {
background: blue;
}
.box :first-child {
font-size: 30px;
}
.box :first-of-type {
font-weight: bold;
}
</style>
<div class="container">
<div class="box">div.box</div>
<p class="box">p.box</p>
<div class="box">div.box</div>
<div class="box">
<div class="item">div.item</div>
<p class="item">p.item</p>
</div>
<p class="box"></p>
</div>
效果图
1.png
-
.box:first-child {color: red;}选择class为box的父元素下第一个子元素,显示颜色为红色 -
.box:first-of-type {background: blue;}选择class为box的父元素下的标签子元素,并且这个元素是这个同级中的第一个标签，显示背景色为蓝色 -
.box :first-child { font-weight: bold;}选择属性为box的父元素下后代中的同级第一个元素，层层选择，使其字体加粗。 -
.box :first-of-type { font-size: 30px;}选择属性为box的父元素下后代中的同类别第一个元素，层层选择，使其字体大小为30px，
出现下图报错可能的原因是：
1.jpg
- 文件不存在
- 文件路径写错啦
