这是我参与「第五届青训营 」笔记创作活动的第2天

CSS作用

设置字体、颜色、位置、大小、添加动画效果

页面中使用CSS的三种方式

• 外链式: 引入外部CSS文件

<link rel="stylesheet" href="css文件路径">

• 嵌入式: 写在HTML的<style>标签内

<style>
    选择器{
        property: value;
        /*...*/
    }
</style>

• 内联式: 通过特定标签的style属性，将样式写在其内

<ul style="list-style:none;">
    <li>1</li>
    <li>2</li>
</ul>

生效的优先级：内联式 > 嵌入式 > 外链式

CSS的工作流程

选择器

选择器优先级：
!important > 内联选择器 > ID选择器 > 类别选择器 > 属性选择器 > 伪类元素选择器 > 通配符选择器 > 继承选择器

或者根据选择器特异度（越特殊优先级越高），在组合选择器中常用此区分优先级

• 通配符选择器*，对所有标签生效

*{
    margin:0;
    padding:0;
    font-size:1em;
}

• 类选择器.，对具有同样的class名的标签生效

<h1 class="specialFont">Look this!<h1>
<h4 class="specialFont">Say Hello!</h4>
<br/>
<p>我和它俩不是一类</p>

<style>
    .specialFont{
        color: skyblue;
        font-size:2em;
    }
</style>

• 标签选择器标签名，对所有该标签生效

<p>1</p>
<p>2</p>
<h1>我是h1，不受影响</h1>

<style>
    p{
        color: skyblue;
        font-size:2em;
    }
</style>

• id选择器#，只对具有相同id标签起作用，注意id值应当唯一

<p id="goal">目标1</p>
<p id="other">目标2</p>
<div id="goal">目标3</div>


<style>
 #logo{
     font-size: 1em;
 }
 
 #other{
     font-size: 2em;
     color: blue;
     display: block;
     background-color: grey;
 }
</style>

• 属性选择器[属性名]，通过一些元素的属性名去选中元素,标签名[]的方括号内也可以使用正则匹配去匹配满足条件的标签，比如：a[herf$=".png"]

<label>账号</label>
<input value="请输入账号" disabled/>

<label>密码</label>
<input type="password" />

<style>
    /*可以选中有设置disabled属性的元素*/
    [disabled]{
        backgroud: #eee;
    }
    
    /*选中某类标签中有特定属性值的标签*/
    input[type="password"]{
        border-color: skyblue;
        color:grey;
    }
    
</style>

• 伪类选择器 - 分为状态伪类和结构伪类

状态伪类标签:状态 : :hover、:link、:visited、:focus， ……当标签处于特定状态下时被生效

结构伪类标签:结构 : :first-child、last-child、:before、:after ……

• 选择器的组合

字体

• font-family

通用字体族

• Web Font 先在网上下载对应字体的代码并用@font-face{}引入，才能使用，浏览器才能进行对应字体的渲染

@font-face{
    font-family: "Megrim";
    src:url(xxx).format(xxx);
}

p{
    font-family: Mergim;
}

继承

• 显式继承inherit：将不可被继承的属性设置为可被继承的状态

*{
    box-sizing: inherit;
}

• 显式重置为初始值initial：将属性设置为初始值

*{
    background-color: initial;
}