这两天自学了CSS的基础知识，感觉都是很细节的东西。通过做网上的练习，也发现了很多自己不太懂的地方。整理一下笔记。
【CSS基础】
CSS的语法
selector {property: value}
即 选择器{属性:值}
学习CSS即学习有哪些选择器，哪些属性以及可以使用什么样的值。
1.选择器主要分3种：元素选择器、id选择器、类选择器。
元素选择器通过标签名选择元素；
（1）在下面实例中，如果不进行单独设置，所有的p都被设置成蓝色。
<style>
p{
color: blue;
}
</style>
<p>上面定义了p元素为蓝色的字</p>
<p style="color: red;">单独定义的红色的字</p>
（2）id选择器：通过id选择元素。用#表示id。
注： 一个元素的id应该是唯一的。另一个元素不应该重复使用。
<style>
p{
color:red;
}
#p1{
color:blue;
}
#p2{
color:green;
}
</style>
<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>
（3）类选择器：当需要多个元素，都使用同样的css的时候，就会使用类选择器。类定义的属性可以使用在多个元素上。
<style>
.red{
color: red;
}
.green{
color: green;
}
.blue{
color: blue;
}
</style>
<p class="red">红色的类</p>
<p class="green">绿色的类</p>
<p class="blue">蓝色的类</p>
（4）同时根据元素名和class来选择p.blue
<style>
p.blue{
color:blue;
}
</style>
<!-- 此处的字为蓝色 -->
<p class="blue">class=blue的p</p>
<!-- 此处的字不变色 -->
<span class="blue">class=blue的span</span>
【本小节相关疑问】
（1）div中class和id有什么区别？
class是设置标签的类， class属性用于指定元素属于何种样式的类。如样式表可以加入.content1 { color: red; background: #ff80c0 } 使用方法：class=“content1” .
id是设置标签的标识。id属性用于定义一个元素的独特的样式。如一个CSS规则#content2 { font-size: larger } 使用方法为：id=“content2”
概念上说不一样：
class是一个样式，先定义好， 然后可以套给多个结构/内容, 便于复用。也就是说class名称可以相同。id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；id是先找到结构/内容，再给它定义样式；
（2）id的优先级要高于类。
（3）关于js
如果在页面中要对某个对象进行脚本操作（js），那么可以给他定义一个id，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个id来得简单。
【附加内容】
严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而在标签内写入style=""的方式，应该是CSS的一种引入方式，而不是选择器，因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起，所以就有了5种或6种选择器了。
css选择器
最基本的选择器是元素选择器(比如div),ID选择器(比如#header)还有类选择器(比如.tweet)。
一些的不常见的选择器包括伪类选择器(:hover)，很多复杂的CSS3和正则选择器，比如：first-child，class ^= “grid-”。
CSS选择器具有高效的继承性，引用Steve Souders的话， CSS选择器效率从高到低的排序如下：
id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel=“external”]）
伪类选择器（a:hover, li:nth-child）
选择器的优先级是怎么规定的呢？
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。
比如上例当中 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。
理解了这个道理之后下面的优先级计算自是易如反掌：
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 + 1
对于什么情况下使用什么选择器，用不同选择器的原则是：
（1）准确的选到要控制的标签；
（2）使用最合理优先级的选择器；
（3）HTML和CSS代码尽量简洁美观。通常：
①最常用的选择器是类选择器。
②li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。
③极少的情况下会用ID选择器，当然很多前端开发人员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次。 在这里不得不提使用在标签内引入CSS的方式来写CSS：
即： <div style="color:red">polaris</div> 这时候的优先级是最高的。我们给它的优先级是1000，这种写法不推荐使用，特别是对新手来说。这也完全违背了内容和显示分离的思想。DIV+CSS的优点也不能再有任何体现。
2.注释：以/ 开始，以/结束。被注释掉的文字会自动隐藏。**
3.CSS尺寸
对元素设置尺寸，用width、height、background-color
<style>
p#percentage{
width: 50%;
height: 50%;
background-color: yellow;
}
p#pix{
width: 50px;
height: 50px;
background-color: green;
}
</style>
<p id="percentage"> 按照此比例设置尺寸为50%宽，50%高</p>
<p id="pix">按照像素设置尺寸 50px宽50px高</p>
4.CSS背景
background-color 设置元素的背景颜色。
颜色的值可以采用3种方式：
（1）预定义的颜色名字
比如red,gray,white,black,pink，参考颜色速查手册
（2）rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
（3）16进制的表示
#00ff00 等同于 rgb(0,255,0)
让图片做背景：background-image:url(url链接)
背景重复：属性background-repeat
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复
背景平铺：background-side 值设为contain，通过拉伸实现，会有失真。
5.CSS文本
（1）属性color定义字体颜色。
（2）对齐：
属性:text-align 值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。
但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度。简单说就是文本已经粑在其边框上了，对齐是看不出效果来的。
使用了后面的样式风格，让div和span的边框显露出来，便于理解本知识点。用到了边框和外边距。
（3）文本修饰text-decoration。有多种属性，可以更改。
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="https://how2j.cn/">默认的超链</a>
<a class="a" href="https://how2j.cn/">去掉了下划线的超链</a>
（4）行间距
属性：line-height 值：数字或者百分比。
<style>
p{
width: 200px;
}
.p{
line-height: 200%;
}
</style>
<p>默认行距默认行距默认行距默认行距默认行距默认行距</p>
<p class="p">2倍行距2倍行距2倍行距2倍行距2倍行距2倍行距2倍行距</p>
（5）字符间距
属性：letter-spacing 值： 数字。
<style>
p{
width: 200px;
}
.p{
letter-spacing: 10;
}
</style>
<p>默认间距默认间距默认间距默认间距默认间距默认间距</p>
<p class="p">10间距10间距10间距10间距</p>
（6）单词间距
属性：word-spacing 值： 数字，
<style>
p{
width: 200px;
}
.p{
word-spacing: 10;
}
</style>
<p>abc abc abc abc abc abc</p>
<p class="p">abc abc abc abc abc</p>
（7）首行缩进
属性：text-indent 值： 数字
<style>
p{
width:200px;
}
.p{
text-indent:50;
}
</style>
<p>
没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字没有缩进效果的一段文字
</p>
<p class="p">
有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字
</p>
（8）字母大小写
属性：text-transform
值： uppercase 全部大写 capitalize 首字母大写 lowercase 全部小写
<style>
.p1{
text-transform: uppercase;
}
.p2{
text-transform: lowercase;
}
.p3{
text-transform:capitalize;
}
</style>
<p>this is a nomal sentence</p>
<p class="p1">this sentence will transform to uppercase</p>
<p class="p2">THIS SENTENCE WILL TRANSFORM TO LOWERCASE</p>
<P class="p3">the first letter in every word will be changed to uppercase </P>
（9）空白格
属性：white-space
值：
normal 默认。多个空白格或者换行符会被合并成一个空白格。
pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br。
<style>
p{
/* 设置容器很小 */
width: 200px;
}
.p1{
white-space: pre;
}
.p2{
white-space: pre-wrap;
}
.p3{
white-space: nowrap;
}
</style>
<p>普通情况下空格 会被合并成一个空格普通情况下空格 会被合并成一个空格普通情况下空格 会被合并成一个空格</p>
<p class="p1">空格正常显示 但不会自动换行空格正常显示 但不会自动换行空格正常显示 但不会自动换行</p>
<p class="p2">空格正常显示 同时自动换行空格正常显示 同时自动换行空格正常显示 同时自动换行</p>
<p class="p3">一直不换行 同时多个空格吞并 一直不换行 一直不换行 一直不换行 一直不换行 知道看见br <br>才换行</p>
关于white-space:nowrap的一个拓展：
https://www.aneasystone.com/archives/2018/01/white-space-nowrap-vs-float.html
6.CSS字体
（1）尺寸
属性：font-size 值：数字或者百分比
（2）风格
属性：font-style normal 标准字体 italic 斜体
（3）粗细
属性 font-weight normal 标准粗细 bold 粗一点
（4）字库
属性font-family 设置字体
（5）声明在一起 font
<style>
p.all{
font:italic bold 30px "Times New Roman";
}
</style>
<p>默认字体</p>
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>
声明在一起的时候，风格、粗细没有顺序要求。但要求文字的大小和字体必须写。 并且字体必须作为最后一个样式，字体大小必须是倒数第二个样式。
font：style weight size/line-height font-family
风格 粗细 大小/行高 字体 按这个顺序简写就行
7.鼠标样式
cursor:default
cursor:auto
cursor:crosshair
cursor:pointer
cursor:e-resize
cursor:ne-resize
cursor:nw-resize
cursor:n-resize
cursor:se-resize
cursor:sw-resize
cursor:w-resize
cursor:text
cursor:wait
cursor:help
cursor:not-allowed
实例代码：
<style>
span{
cursor:crosshair;
}
</style>
<span>鼠标移动到这段文字上，就看到鼠标样式变成了十字架</span>
8.CSS表格
（1）表格布局
属性:table-layout
automatic; 单元格的大小由td的内容宽度决定。
fixed; 单元格的大小由td上设置的宽度决定。
注：只对连续的英文字母起作用，如果使用中文就看不到效果。
<style>
table.t1{
table-layout:automatic;
}
table.t2{
table-layout:fixed;
}
</style>
<table class="t1" border="1" width="100%">
<tr>
<td width="10%">abcdefghijklmnopqrstuvwxyz</td>
<td width="90%">abc</td>
</tr>
</table>
<table class="t2" border="1" width="100%">
<tr>
<td width="50px">abcdefghijklmnopqrstuvwxyz</td>
<td >abc</td>
</tr>
</table>
效果如下：
（2）表格边框
属性：border-collapse
值：separate:边框分隔 collapse:边框合并
<style>
table.t1{
border-collapse:separate;
}
table.t2{
border-collapse:collapse;
}
</style>
<table class="t1" border="1" width="200px">
<tr>
<td width="50%">边框分离</td>
<td width="50%">边框分离</td>
</tr>
</table>
<br/>
<br/>
<table class="t2" border="1" width="200px">
<tr>
<td width="50%">边框合并</td>
<td width="50%">边框合并</td>
</tr>
</table>
当设置border-collapse：separate的时候，border的属性就被覆盖了。
9.边框
（1）边框风格
属性： border-style
solid: 实线 dotted:点状 dashed:虚线 double:双线
（2）边框颜色
属性：border-color
值：red,#ff0000,rgb(255,0,0)
（3）边框宽度
属性：border-width 值：数字（带px）
（4）都放在一起
属性：border
值：颜色 风格 宽度
实例代码：
<style>
.red{
border:1px dotted LightSkyBlue;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 点状天蓝色细边框 </div><br/>
效果如下：
（5）只有一个方向有边框
通过制定位置，可以只给一个方向设置边框风格，颜色和宽度
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
top,bottom,left,right 分别对应上下左右。
备注：有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。
（6）块级元素和内联元素。
块级元素div默认是占用100%的宽度。常见的块级元素有div h1 p 等。
内联元素span的宽度由其内容的宽度决定。常见的内联元素有 a b strong i input 等
10.元素内边距
指的是元素里的内容与边框之间的距离
（1）属性：
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左（顺时针方向）
属性:padding-left 值：数字 （px）
指的是，元素中的内容，与边框之间的距离。
（2）属性：padding
值：如果只写一个，即四个方向的值
值：如果写四个，即四个方向的值
上 右 下 左,依顺时针的方向依次赋值
<style>
.pad-left-one{
border:5px solid red;
padding: 20;
}
.pad-left-four{
border:5px solid red;
padding: 10 20 30 40;
}
</style>
<br/>
<span class="pad-left-one"> padding:20的span</span> <br/> <br/> <br/> <br/>
<span class="pad-left-four">padding: 10 20 30 40 的span </span> <br/> <br/> <br/> <br/>
（2）当内边距的值少于四个的时候，按照对称的方式取。
（3）如果缺少左内边距的值，则使用右内边距的值。
如果缺少下内边距的值，则使用上内边距的值。
如果缺少右内边距的值，则使用上内边距的值。
举例说明
这是完整4个的：
padding: 10 20 40 80
如果只有3个：
padding: 10 20 40
那么left取right：
padding: 10 20 40 = padding: 10 20 40 20
如果只有两个：
padding: 10 20
那么bottom取top，left取right
padding: 10 20 = padding:10 20 10 20
如果只有一个：
padding:10
那么right取top，bottom取top，left取top
padding:10 = padding:10 10 10 10
11.元素外边距
指的是元素边框和元素边框之间的距离
属性：
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距
属性: margin-left值：数字（px）
指的是元素边框和元素边框之间左边的距离。
<style>
.red{
border:1px solid red;
background-color:green;
}
.margin{
border:1px solid red;
background-color:green;
margin-left:10px;
}
</style>
<span class="red"> 无外边距的span </span>
<span class="red"> 无外边距的span </span>
<br/>
<span class="red"> 无外边距的span </span>
<span class="margin"> 有左外边距的span </span>
注：像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。 为了观察上下外边距的效果，可以采用块级元素，比如div。
用在td表格也是可以的。
<style>
td{
background-color: yellow;
border: red solid 3px;
margin: 10 10 10 10;
padding: 10 20 30 40;
}
</style>
<table>
<tr>
<td>good</td>
<td>better</td>
<td>best</td>
</tr>
</table>
当margin不足四个参数的时候，规则和padding类似。
12.边框模型
真正决定一个元素的表现形式，是由其边框模型决定的。
由图所示：
蓝色框即为内容，width:70px 表示内容的大小。
红色框即为边框，内容到边框之间的距离，即为内边距 5px。
灰色框，是指边框与其他元素之间的距离，即为外边距：10px。
备注：在这个模型图里没有把边框的宽度1px表示出来，应该是102px。
额外：上面指的是标准CSS盒子模型，在elipse上直接创建html，默认用的是IE盒子模型。IE盒子模型的width包括了padding和border。想要用标准CSS盒子模型 得在css属性上加box-sizing：content-box 。
13.超链接状态
伪类，所谓的伪类即被选中的元素处于某种状态的时候。
超链状态有4种：
link - 初始状态，从未被访问过；
visited - 已访问过；
hover - 鼠标悬停于超链的上方；
active - 鼠标左键点击下去，但是尚未弹起的时候。
<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
<a href="https://www.baidu.com">超链的不同状态</a>
备注：默认状态下，超链是有下划线的，但是现在网站上的超链普遍采用无下划线风格。
使用 text-decoration: none 文本修饰的样式来解决。
<!-- 清除超链接下划线 -->
<style>
a.nounderline{
text-decoration: none;
}
/* 未访问时是红色，访问后深蓝色 */
a:link{color: red;}
a:visited{color: deepskyblue;}
</style>
<a href="https://www.baidu.com">去掉下划线的百度链接</a><br>
<a class="nounderline" href="https://www.baidu.com">去掉下划线的百度链接</a>
14.隐藏元素
隐藏元素有两种方式
display:none以及visibility:hidden;
display:none; 隐藏一个元素，这个元素将不再占有原空间。
visibility:hidden;隐藏一个元素，这个元素继续占有原空间。
<style>
div.d{
display:none;
}
div.v{
visibility:hidden;
}
</style>
<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>
<div class="v">隐藏的div4,使用visibility:hidden隐藏</div>
<div>可见的div5</div>
结果如下：
15.CSS文件
如果把所有的CSS都写在html文件里面，一旦样式比较多的时候，就不易维护。这个时候就会选择把所有的CSS内容，放在一个独立文件里，然后在html中引用该文件，通常这个文件会被命名为style.css。
（1）直接在html写样式：
<style>
.p1{
color:red;
}
.span1{
color:blue;
}
</style>
<p class="p1">红色</p>
<span class="span1">蓝色</span>
（2）将样式写在一个CSS文件上：创建一个css文件，名字为style.css。其内容为：
.p1{
color:red;
}
.span1{
color:blue;
}
在html文件写入：
<link rel="stylesheet" type="text/css" href="/study/style.css" />
ink：连接，表示引入外部文件。
rel=“stylesheet”：relationship的缩写，含义为关系；
stylesheet由style(样式)和sheet(表格)，合起来就是样式表,描述了当前页面与href所指定文档的关系。
type=“text/css”：表示了外联文档的类型为css。
href=“http://how2j.cn/study/style.css”：表示指定关联文档的路径。
即：
<link rel="stylesheet" type="text/css" href="https://how2j.cn/study/style.css" />
<p class="p1">红色</p>
<span class="span1">蓝色</span>
效果显示一样。
（3）如果是本地文件，路径写成：
href="file://d:/style.css"
16.优先级
（1）在style.css中，
（2）style标签上的与style属性冲突，优先使用style属性。
<style>
.p1{
color:green;
}
</style>
<p class="p1" style="color:red">p1 颜色是红色，优先使用style属性</p>
（3）如果样式上增加了!important，则优先级最高，甚至高于style属性。
<style>
.p1{
color:green !important;
}
</style>
<p class="p1" style="color:red">p1 颜色是绿色，优先使用!important样式</p>
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
