CSS基础（一）
1.CSS 的引入方式有哪些？
CSS 的引入方式有以下三种：
- 行内样式使用style属性引入CSS样式。
<h1 style="color:red;">行内样式引用</h1>
- 内部样式表在style标签中书写CSS代码。style标签写在head标签中。
<head>
<style>
.h1 {
color:red;
}
</style>
</head>
- 外部样式表CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表。
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2.简述CSS选择器的权重计算。
CSS的选择器有三种，按权重大小来讲，依次为 内联>id>class。
下面以给h2（二级标题）的颜色设置粉色为例来解释一下各种设置方法。
- 内联样式：直接在内容后面添加需要的属性（为方便以后的调试和代码的简洁性，最好不要采用这种方式）
<h2 style="color: pink;"></h2>
- id编号属性：id具有唯一性，一个界面最好把特殊且唯一的部分设置成id模式，比如form表单的内容。
#pink-text {
color: pink
}
<div id="pink-text">
<h2></h2>
</div>
- class类属性：比较广泛的属性方式，描述了不同元素的相同属性。
.pink-text {
color: pink
}
<div class="pink-text">
<h2></h2>
</div>
可以看出内联style的优先级是最高的，字体最后显示出来是style样式。
如果此时在不改变基础代码的情况下让字体变成红色，怎么办？
这个时候可以使用important样式，设置强属性。它的用法和使用效果如下。
#red-text {
color: red !important;
}
这个时候段落的字体就改成红色这个强属性了。
TIPS:除了以上的情况以外，还有以下两种冲突：
- 同类class冲突，后来居上
class类可以重叠使用，也就是说一个<div>块里面可以设置多个class类，语句为 class="class1 class2 ..."，当多个类出现冲突的时候，以<style>里面最后一个为基准，而不是以class="class1 class2"的顺序为基准。
举个例子，如下图所示，在style里面pink排在black属性的后面，所以文字最后显示的是pink。你可以把它想象成一个后面把前面覆盖的过程。
那如果在不改变style顺序的情况下，我要把字体的颜色改成black怎么办。这个时候important就派上用场了，你可以在black的颜色属性后面加一个！important就可以了，有兴趣的可以自己试一试~很有意思。
- 类选择器和元素选择器冲突，类选择器优先。
<head>
<style>
.special {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p class="special">What color am I?</p>
</body>
这个时候字体就会是红色的。如果要变成蓝色的，加一个!important就好啦。
那么权重如何计算呢：
用权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.
- 相同的权重：以后面出现的选择器为最后规则：
- 不同的权重，权重值高则生效
3.给一个 p 元素的文字设置文字居右。
p {
text-align: right;
}
4.链接 a 元素的伪类有哪些，分别代表什么状态？
a:link 链接未被点击时的状态
a:visited 链接点击过后的状态
a:hover 鼠标移动到链接上时的状态
a:active 点击链接时的状态
5.初始化列表样式怎么设置？
ol,ul,li {
list-style:none
}
6.假设有元素设置了如下样式，怎么用 background 简写？
background: center center/80% auto no-repeat url(./static/images/banner_bg.png) red
7.怎么去掉 input 元素 focus 后的蓝色模糊框？
可以给他设置CSS样式，去除模糊框
.delete-border {
outline:none;
}
8.用 border 实现 如图效果，颜色不限。
<style>
.left {
display: inline-block;
width: 0px;
height: 0px;
border: 50px solid #666 transparent;
border-left-color:skyblue;
}
.top {
display: inline-block;
width: 0px;
height: 0px;
border: 50px solid #666 transparent;
border-top-color:skyblue;
}
.right {
display: inline-block;
width: 0px;
height: 0px;
border: 50px solid #666 transparent;
border-right-color:skyblue;
}
</style>
最后实现的效果如下：
image.png
