本文参与4月更文挑战，打卡day6，第六篇
CSS（层叠样式表）
1. 样式定义方式
static文件夹：用于存储一些资源。
行内样式表
是直接定义在html标签中的，用到的是style属性，例如：
<img src="/images/mountain.jpg" alt="" width="300">就可以写成下行这样
<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">
一个style属性中可以书写多个css属性，每两个之间用分号隔开。
css属性的基本写法是属性：属性值
内部样式表
在head标签中加入一对style标签，在style标签中书写css样式。
可以对一个页面中的一类标签进行css样式设置
一个小问题 .jpg图片下载到本地再加到img标签里显示不了（下图是把文件名改成了.png后缀名之后尝试的代码，依旧显示不了 但是有时候今天又尝试了一下.jpg又可以显示了）
外部样式表（用的多）
作用范围：多个页面可以用link标签引入某些页面
定义在css样式文件中，通过选择器影响对应标签。
在html文件中书写link标签，href属性书写样式所在的文件地址来添加样式到html页面。
需要多个文件使用同一样式的时候只需要link需要的css文件即可
需要一个文件使用多个样式的时候也只
需要link需要的css文件即可
link的type属性可以不写，部分浏览器不写不生效的时候加上即可
又一个小问题 没有生效，不知道为什么（但是今天照着重新写了一遍也是又实现了样式的）
2. 选择器
标签选择器
id选择器
一般一个样式对应一个ID，不重复使用
类选择器
html文件中书写class属性，其属性值位置可以书写多个class名称，各个class名称之间用空格隔开，在css文件中用.+class名定位到这个样式。
伪类选择器
用于定义元素特殊状态
链接为类选择器：（也可以用于button按钮）
：link链接访问前的样式
：visited链接访问后的样式
：hover鼠标悬停时的样式 [冒号和前面的内容不要有空格]
：active鼠标点击后长按时的样式
：focus聚焦后的样式 （input框点击之后的样式）
位置伪类选择器：
：nth-child(n)选择是其父标签第n个子元素的所有元素（理解成一种状态）
理解方法：可以看成一个函数，给定一个数字n，会返回一个布尔值（去判断）这个元素是不是父节点的第n个子节点，如果是就显示对应样式
(找p标签的父节点的第二个子节点)
其中n也可以写成an+b的样式，n取非负整数
e.g. 第3的倍数个元素，写3n
第奇数个元素可以写odd替换n
第偶数个元素可以写even替换n
点击链接切换到页面内的内容：使用a标签的herf属性和要连接的标签添加id属性来实现链接，注意herf属性值是#+id属性值
点击链接前后url的变化：
目标伪类选择器：
：target当url指向该元素时生效
当以下效果触发时，使用这个选择器可以更改id=''myp''的标签的样式p:target
复合选择器
element1, element2：同时选择元素element1和元素element2。
element.class：选则包含某类的element元素。 class部分写类名，也可以写多个类名全部用 .class书写即可
element1 + element2：选择紧跟element1的element2元素。
element1 element2：选择element1内的所有element2元素。父元素内的所有子元素
element1 > element2：选择父标签是element1的所有element2元素。父元素为目标值的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
width:50px;
height:70px;
background-color: lightgreen;
}
p:nth-child(2n+1) {
background-color: lightblue;
}
p:target{
transform:scale(1.2); /*将标签的大小变成原来的1.2倍*/
color:orange; /*将标签的字体颜色变成橘色*/
transition:3000ms; /*让改变以多少ms进行*/
}
</style>
</head>
<body>
<a href="#myp">我的标签</a>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p id="myp">6</p>
<p>7</p>
<p>8</p>
</body>
</html>
通配符选择器
*选择所有标签[attribute]选择具有某个属性的所有标签 e.g.input[id]筛选有id的input标签并赋予样式[attribute=value]选择attribute值为value的所有标签 e.g.input[id=number]筛选id="number"的input标签并赋予样式
伪元素选择器
将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。
::first-letter：选择第一个字母
::first-line：选择第一行
::selection：选择已被选中的内容
::after：可以在元素后插入内容
::before：可以在元素前插入内容
样式渲染优先级
权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
- 权重相同时，后面的样式会覆盖前面的样式
- 继承自父元素的权重最低
