CSS 加载方式
css引用方式分为以下三种:
- 外部样式
- 内部样式
- 内联样式
外部样式
外部式css样式就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内，使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link rel="stylesheet" href="jay.css" type="text/css">
也可以通过@import引入样式，放入 css 中:
<style>
@import url("jay.css");
</style>
内部样式
css内部样式，就是可以把css样式代码写在<style></style>标签之间:
<style>
h1 { background: orange; }
</style>
内联样式
内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码:
<p style="color:red">这里文字是红色的。</p>
@charset有什么作用
@charset "utf-8";
定本 css 文件编码格式为 UTF-8 格式，那么在浏览器中看到的CSS文件的页面中中文的注释或者中文字体就可以正确显示为中文，如果CSS的文件编码和页面不一致的话，那么这个CSS文件的中文则会显示为乱码。
@import有什么作用？如何使用？
@import用于从其他样式表导入样式规则。
写法是@import url（"a.css"）;，然后引入style元素中。
id 选择器和 class 选择器的使用场景分别是什么？
1. class选择器
使用场景：
第一步：使用合适的标签把内容标记起来，如下：
<span>周杰伦</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="jay">周杰伦</span>
第三步：设置css样式，如下:
.jay {
color:red;
}
2. ID选择器
使用场景：
<div>
<p id="jay">hathaway</p>
</div>
<style type="text/css">
#jay {
color: red;
}
</style>
CSS选择器常见的有几种?
1. 标签选择器
标签选择器其实就是html代码中的标签，如<h1>、<p>、<img>
2. class选择器
class选择器在css样式编码中是最常用到的，以. 开头，名称可包含字母，数字
语法：
选择器名称{css样式代码;}
3. ID选择器
ID选择器以#开头，只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
4. 通配符选择器
通用选择器是功能最强大的选择器，它使用一个*号指定，它的作用是匹配html中所有标签元素
使用以下代码使任意标签元素字体颜色全部设置为红色：
* {color:red;}
5. 属性选择器
对带有指定属性的 HTML 元素设置样式
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
举例，为带有title属性的所有元素设置样式：
[title]
{
color:red;
}
6. 伪类选择器
它允许给html不存在的标签（标签的某种状态）设置样式。
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
伪类选择器有哪些？伪元素有哪些？
常见伪类选择器：
a:link
a:visited
a:hover
a:active
a:nth-child(n) 匹配其父元素下的第n个子元素
a:nth-of-type(n) 匹配使用同种标签的元素
li:first-child 匹配父元素的第一个子元素
li:last-child 匹配父元素的最后一个子元素
常见伪元素：
::after
用来匹配已选中元素的一个虚拟的最后子元素。通常会配合content属性来为该元素添加装饰内容
.clearfix::after {
content: '';
clear: both;
display: block;
}
::before
会为当前元素创建一个子元素作为伪元素
::selection
CSS伪元素应用于文档中被用户高亮的部分
p::selection {
color: white;
background: blue;
}
::first-letter
选中一整块文字第一行的第一个字母，当文字所处的行之前没有其他内容（如图片和内联的表格）。
::first-line
将样式只应用于一个块状元素的首行
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
优先级按最高依次排列如下:
- !important
- 内联样式
- id选择器
- class选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
* - 浏览器自定义
复杂场景计算优先级:
权重计算。从0开始，一个内联样式+1000，一个id选择器+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1，通配符、子选择器、相邻选择器（*、>、+,）+0。
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
顺序为: a:link、a:visited、a:hover、a:active
原因:
a:visited 表示的是访问后的状态，对于a元素来说，一旦被访问，访问后的状态永久存在，所以a:visited应该放在前面,a:hover是鼠标悬停在元素的状态,a:active是鼠标按下后的状态
以下选择器分别是什么意思?
-
#header{}选择id=header的元素 -
.header{}选择class=header的元素 -
.header .logo{}选择class=header元素的子元素class=logo -
.header.mobile{}选择class=header mobile两个元素 -
.header p, .header h3{}同时选择class=header下的子元素p和class=header的子元素h3 -
#header .nav>li{}选择id=header的子元素class=nav的直接子元素li -
#header a:hover选择id=header的子元素a标签悬停在元素时的状态 -
#header .logo~p选择id=header的子元素class=logo同级的所有p元素 -
#header input[type="text"]选择id=header的元素下所有type=text的input元素
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
-
div:first-child匹配div元素的第一个子元素 -
div:first-of-type匹配div的父元素下出现的div类型元素中的第一个div元素 -
div :first-child匹配此div下的第一个后代元素 -
div :first-of-type匹配此div下第一个相同类型的后代元素
区别在于div:first-child是针对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>
image.png
color: red; 匹配的是item1元素的父容器下第一个子元素,也就是<p class="item1">aa</p>
background: blue; 匹配的是item1元素的父容器下出现的相同类型子元素中的第一个子元素,也就是第一个p标签和第一个h3标签
网友评论