<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-learning-note</title>
<style type="text/css">
h1{color:red}
p{font-size:20px;color:blue;font-family:"华文行楷",serif;font-weight:600;}
.p1{font-family:"Times New Roman","华文行楷",serif;}
.p2{font:italic bold 30px "Times New Roman";}
.p3{text-align:center;}
.p4{text-indent:2em;}
.p5{
/*color:red;*/
/*color:rgb(255,0,0);*/
/*color:rgba(255,0,0,1);*/
/*color:#FF0000;*/
/*color:#F00;*/
color:rgb(100,100,100);
}
.a1{text-decoration:none;}
#identity1{color:red;}
#identity2{color:blue;}
#identity3{color:green;}
#identity4{color:yellow;}
.p1{color:red;}
.p2{color:blue;}
.p3{color:green;}
.p4{color:yellow;}
.colorR{color:red;}
.size30{font-size:30px;}
.size20{font-size:20px;}
.line{text-decoration:underline;}
div>ul>li>p{color:red;}
img[alt|=abc]{color:red;}
img[alt$=abc]{color:yellow;}
img[alt*=q]{color:green;}
*{
color:green;
}
.staff{400px;height:240px}
.icon{background-image:url(weibo.png);88px;height:31px;background-position:-424px -199px;}
</style>
</head>
<body>
<!--前瞻：CSS：Cascading StyleSheet 层叠式样式表-->
<!--1、CSS的标准格式-->
<!--<style>
标签名称{
属性名称:属性对应的值;
...
}
</style>
-->
<!--该标准格式中，style里面的格式就是key:value;记住冒号不能省略-->
<!--CSS都会写在<head></head>之间-->
<!--1.1、第一个CSS超文本-->
<!--1.2、style标签有个属性：type，主要用于告诉浏览器这个style标签是什么：<style type="text/css">
意思就是说style标签存储的是文本类型的css代码-->
<!--1.3、<style type="text/css">这句可写可不写，因为系统默认就是这一句，写上会规范一些-->
<h1>我是标题</h1>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<!--2.1、文字相关属性-->
<!--1、font-style：normal正常的,默认就是正常的
italic倾斜的
2、font-weight:bold;加粗
bolder;比加粗还粗
lighter;细线，默认是细线
3、font-size:30px;设置字体大小为30像素
4、font-family:"华文行楷";设置字体的文字字体，
有两个注意点：1、如果取值是中文，需要用双/单引号括起来
2、设置的字体必须是电脑已经安装的，不然没有效果，也可以用字体包
-->
<!--无论是什么类型的标签，只要有表示大小的，或是颜色的（颜色要加#），都可以加数值来作为属性值，比如设置
字体粗细的font-weight属性，也可以这样表示：font-weight:100;-->
<!--2.2、文字相关属性补充-->
<!--2.2.1、两个新问题：1、如果当电脑没有相关字体，且我们不要用系统默认的，怎么办呢？
解决：可以给字体设置备选方案
格式：font-family:"原方案"，"备选方案1","备选方案2"...;
2、如果同一标签，比如p标签里面前一部分用这种字体，后一种用另一种字体，怎么办？
解决：首先要明白，但凡是中文字体，里面都包含英文字体；
但凡是英文字体，里面都不包含中文字体；
所以：也是一样的，用备选方案，但需要注意的是英文字体需放中文字体前面。-->
<!--2.2.2、相关练习-->
<em>我是文字</em>
<p>我是段落</p>
<p class="p1">abc我是陈铎鑫</p>
<!--2.3、字体属性小结
font:style,weight,size,family;最好就一直沿用该方式
注意点：1、size,family不能省略
2、size一定要在family前面
3、size和family一定要放在font属性的最后
4、根据前面的几个特性，备选方案的字体设置方式也就不能用了-->
<p class="p2">abc我是陈铎鑫</p>
<!--3、文本属性-->
<!--3.1、具体的：1、文本装饰属性text-decoration:underline;下划线
line-through;删除线，跟del一样的效果
overline;上划线
none：什么都没有，最常见的作用就是去掉超链接的下划线
2、水平对齐属性text-align:left;左对齐 默认值是left
center;居中
right;右对齐
3、文本缩进属性text-indent:2em;缩近两个文字的距离
-->
<!--3.2、文本装饰属性-->
<a class="a1" href="javascript:">a标签1</a>
<!--3.3、文本对齐属性-->
<p class="p3">我是陈铎鑫</p>
<!--3.4、文本缩近属性-->
<p class="p4">陈伪娘，原名陈炜明，因其娘的特性，故亦有小名伪娘，广工的屌丝一枚，自2016年大光棍校毕业后，于花果山进修一年有余，
后经同事介绍到了无名海，随着伟大神的到来，无名海掀起了波澜巨浪，导致狂风18级，无名海深处水深火热之中，大神不亏是大神，
目前屈居于无名海某个小角落，郁郁寡欢不得志，欲往大城市发展。</p>
<!--4、颜色属性-->
<!--通过color来设置：color:red;常见的一些颜色会有对应的英文单词对应
rgb(255,0,0);里面分别代表红绿蓝，也就是RGB，而数值呢，可以看成红绿蓝3颗灯珠的亮度。
rgba(255,0,0,1);跟rgb不同的是，它多了个透明度，取值是0~1，数值越小，越透明
#FF0000;16进制，与rgb是一样的，只不过其是每两位对应rgb的三原色每个颜色的数值
#F00;CSS简写的方式，当每种颜色对应的两个位数值一致时，可以用一个数值表示-->
<!--注意web storm提供了取色器，数值多少其实不用管，很多软件都会有给你弄好的-->
<p class="p5">我是陈铎鑫</p>
<!--5、标签选择器-->
<!--5.1、是什么，又有何作用？
标签选择器其实就是根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性-->
<!--5.2、注意：1、标签选择器选到的是当前界面下的所有标签，而不是其中一个
2、标签选择器无论标签藏得有多深都能被选中
3、只要是html中有的标签都可以作为标签选择器(h,p,hr,a,img,ul,ol,dl,li,tr,td,input...-->
<p>标签选择器</p>
<p>标签选择器</p>
<p>标签选择器</p>
<p>标签选择器</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>标签选择器</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<!--6、id选择器-->
<!--6.1、格式：
#id{
属性:属性值;
...
}
-->
<!--6.2、在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为id是留给js使用的，不能随便乱用id-->
<p id="identity1">id选择器</p>
<p id="identity2">id选择器</p>
<p id="identity3">id选择器</p>
<p id="identity4">id选择器</p>
<!--7、类选择器-->
<!--7.1、前面学到id我们感觉作用非常大，因为它赋予了每个标签独一无二的一个身份，使每个标签都成为极具个性的个体
但是呢，id选择器更多的是给javascript用的，仅仅用于设置样式会很浪费，但个性化又是一定要的，是刚需，那
怎么均衡这个问题呢？这样类选择器就诞生了。
-->
<!--格式：
.类名{
属性:属性值;
...
}
其实类与id非常像，但注意到id是“#”，而类是“.”。
-->
<hr />
<p class="p1">类选择器</p>
<p class="p2">类选择器</p>
<p class="p3">类选择器</p>
<p class="p4">类选择器</p>
<!--7.2、另一种格式：这种写法就是典型的活字印刷术了，你不必设置过多的类名，当它有很多属性时，把各个类的属性
重新拿来拼凑，你会发现这种做法真的非常的cool-->
<hr />
<p class="p11 p12">当一个标签有多种属性时，可以这样写</p>
<hr />
<ul>
<li><a href src="html5-learning-note.html">个人简介</a></li>
</ul>
<!--7.3、id选择器与类选择器的区别-->
<!--区别1、id选择器相当于人的身份证，不可以重复，而class相当于人的名称，可以重复
2、一个html标签只能绑定一个id，而class可以多个，格式是class="属性1，属性2，..."
不能是class="" class=""
3、id选择器以“#”开头，类选择器以“.”开头
4、在企业开发中，id选择器一般是给javascript开发使用的，css就用的话是杀鸡用牛刀，所以最好不用id，用class
5、在企业开发中，对类的使用可以看出开发人员的水平-->
<p class="colorR size30">第一行</p>
<p class="line size30">第二行</p>
<p class="colorR size20 line">第三行</p>
<!--8、后代选择器-->
<!--8.1、后代选择器：找到指定标签的所有特定的后代标签，设置属性
最大的作用：当某个嵌套盒子或是标签里存在有上万个标签，当这些标签都需要修改或设置的时候，
用class或是id需要一个个区设置，会很累，效率也低，而后代选择器就是为了解决这个
而诞生的。-->
<!--8.2、后代选择器需要用空格隔开，后代不仅仅是儿子，还有孙子/重孙，比如div p a img{}，img就是后代-->
<p>我是后代选择器</p>
<div>
<p>我是后代选择器</p>
<p>我是后代选择器</p>
</div>
<p>我是后代选择器</p>
<!--9、子元素选择器：找到指定标签中所有特定的直接子元素，设置属性-->
<!--9.1、格式：
标签名称1>标签名称2{
属性:值;
}-->
<!--9.2、子元素选择器最关键的就是“>”符号了，也是与后代选择器最大的区别，子元素选择器只能选择儿子，不能选择孙子
但他可以通过找了儿子后再让儿子去找儿子的儿子，也就是孙子，一级一级传递选择下去-->
<p>我是子元素选择器</p>
<div>
<p>我是子元素选择器</p>
<p>我是子元素选择器</p>
<ul>
<li>
<p>我是子元素选择器</p>
</li>
</ul>
</div>
<p>我是子元素选择器</p>
<!--10、其他选择器-->
<!--10.1、交集选择器：标签与标签之间的符号
格式：与id有“#”，class有“.”不同，它没有间隔符号
企业开发中一般不用，因为交集选择器功能与直接设置类名或id名重复-->
<!--10.2、并集选择器：简化操作，核心使用连接符为：“,”，也就是逗号-->
<!--10.3、相邻兄弟选择器（CSS2）：给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:选择器1+选择器2{
属性:属性值;
}-->
<!--10.4、通用兄弟选择器(CSS3)：与相邻兄弟选择器区别的是，前者是仅仅选中相邻的那一个，后者是选中该标签后的
所有标签，需要注意的是只要先出现了选择器1，后面出现的选择器2都会被选到，不
管中间是否有被隔开
格式:选择器1~选择器2{
属性:属性值;
}-->
<!--10.5、序选择器:CSS3最具代表性的就是序选择器，它可以选择同级别或是同类型的标签，有10个标签-->
<!--10.5.1、这10个标签其实就代表，同级别的第几个
1、:first-child:选中同级别的第1个，不区分类型；可能取到的是h标签，如果设置的是p标签属性，可能就无效
2、:first-of-type:选中同级别同类型的第1个
3、:last-child:选中同级别的最后1个，同样不区分类型
4、:last-of-type:选中同级别同类型的最后1个
5、:nth-child(3):同级别中的第3个，里面也可以改成任意数字，代表同级别那个数字对应的标签
6、:nth-of-type(3):其实都很类似，这个是同级别同类型的第3个
7、:nth-last-child(2)：同类型倒数第2个，不区分类型
8、:nth-last-of-type(2):看文字就懂了，同类型倒数第2个
9、:only-child:选中父元素中唯一的元素，父类里记住必须只有1个标签，另外它不区分类型
10、:only-of-type:选择父元素中唯一的元素，父类里记住必须只有1个同类型的标签。
-->
<h3>我是序选择器0</h3>
<p>我是序选择器1</p>
<p>我是序选择器2</p>
<p>我是序选择器3</p>
<p>我是序选择器4</p>
<div>
<p>我是序选择器1</p>
<p>我是序选择器2</p>
<p>我是序选择器3</p>
<p>我是序选择器4</p>
<p>我是序选择器5</p>
</div>
<!--10.6、属性选择器：了解了这么多选择器，其实他们是有很多共同点的，属性选择器也是，只不过它用了中括号[]来表示而已
两种表示形式：1、[attribute]{}：找到有该属性的标签
2、[attribute-value]{}：找到有该属性里有该属性值的标签
-->
<!--举例：input[type]{}
input[type=radio/password/name/text/checkbox...]{}
后面大括号内容跟正常的CSS设置一样，属性:属性值；
-->
<!--10.6.2、其他属性选择器：
属性的取值是以什么开头的？
1、[attribute|=value]；CSS2,有局限,只能找到以“-”和其他内容隔开的，如下文的abc-www
2、[attribute^=value]：CSS3,只要是以abc开头的都可以被找到,abc_def,abc-www,abc ppp都可以
属性的取值是以什么结尾的？
3、[attribute$=value]：CSS3
属性的取值是否包含某个特定的值的？
4、[attribute~=value]：CSS2,只能找到被空格隔开，单独存在的value
5、[attribute*=value]：CSS3：只要包含value就可以找到
-->
<img src="" alt="abc_def">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy">
<!--10.7、通配符选择器：带有*号的选择器-->
<!--由于通配符选择器实际上是给界面上所有的标签一个通用的属性，所以它需要访问所有的标签，当界面上的标签很多时，
通配符的加入会带来不必要的资源浪费，也让浏览器的加载变得缓慢-->
<!--针对这个需求和这个缺陷，后面会有相应的解决办法-->
<h1>我是标题</h1>
<p>我是段落</p>
<a href="#">我是超链接</a>
<!--11、CSS三大特性-->
<!--11.1、CSS三大特性之——继承性-->
<!--11.1.1、什么是继承性？给父元素设置一些属性，子元素也能用-->
<!--11.1.2、注意点：1、并不是所有的属性都可以继承
只有以color/font-/text-/line开头的属性才可以继承
2、在CSS中，属性的继承不仅仅是子元素可以，后代都可以，也就是除了儿子，孙子/重孙都可以继承
3、继承性中的特殊性：①、a标签的文字颜色和下划线是不能继承的，但大小等等都可以
②、h标签的文字大小是不能继承的
其实为何有这两个特殊性很好理解，因为父元素是类似于通配符那样，只要是父元素的后代，都贴上了
父元素的标签，父元素的特性，但无论是h标签的大小，或是a标签的下划线跟蓝色的文字颜色是它自己
的特性，它的优先级更高，会把父元素这些通用的属性覆盖掉，只会继承其他的属性。
-->
<!--11.1.3、在企业级开发中，一般用于设置网页的一些共性信息，例如网页的文字颜色，字体，文字大小等内容，减少代码
重复性，精简代码-->
<!--11.2、CSS三大特性之——层叠性-->
<!--11.2.1、层叠性是CSS处理冲突的一种能力，层叠性只有在多个选择器选中“同一个标签”，然后又设置了同一个属性，
才会发生层叠性-->
<!--11.3、CSS三大特性之——优先级-->
<!--11.3.1、前面讲到CSS其实就是一个层叠样式表，层叠是它的特性，也是它的核心，但怎么层叠呢？谁层叠谁？怎么层叠？
这就是要讲的CSS最后一个特性——优先级
优先级有3种：1、是否是直接选中（间接选中就是指继承）
如果是间接选中，那么谁目标标签越近，目标标签的属性就跟谁谁
2、是否是相同选择器
如果都是直接选中，且都是同类型的选择器，那么谁写后面就听谁的
3、不同选择器
如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠
选择器优先级排列：id>class>标签>通配符>继承>浏览器默认
-->
<!--11.3.2、优先级之提升：important，作用很简单，用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将被
指定的属性优先级提升至最高，比id属性还高
具体是这样的：
p{
color:red;!important;
}
-->
<!--11.3.2.1、important需要注意的是，只能用于直接选中的选择器里，注意通配符以上包括通配符都属于直接选中的选择器。
！important只能提升被指定的对象的优先级，其他属性的优先级不会被提升，
！important中的!不能省略
！important必须写在";"，即分号前面-->
<!--11.3.3、优先级之权重问题-->
<!--当多个选择器混合一起使用时，我们可以通过计算权重来判断谁的优先级最高
权重计算规则：1、首先计算选择器有多少个id，id多的选择器优先级最高
2、其次当id选择器数量一致时，看类选择器，接下来再看标签
3、标签之后就随意了，哪个的代码写在后面，优先级最高
可能做面试题会考到，但实际开发自然而然就会懂的-->
<!--12、div和span：这两个其实是属于html的标签，不过这两个和css关系较为密切，没有css一定的基础不好理解，所以现在再
来讲。这两个最大的作用其实就是用于网页的基本布局了-->
<!--12.1、div是容器级标签，span是文本级标签
容器级标签：h,ul,ol,dl,li,div...它可以嵌套所有标签
文本级标签: span,p,buis strong em ins del...它只能嵌套文字/超链接/图片
-->
<span></span>
<!--12.2、块级元素和行内元素
块级元素：h,div,ol,ul,dl,li,p...所有容器级标签都是块级元素
行内元素：span,buis,strong,em,ins,del...文本级标签中除了p标签其他都是行内元素
这两者最大的区别就是是否独占1行，块级元素会独占1行
另一个区别就是行内元素不可以设置宽高度，而块级元素可以-->
<!--12.2.1、行内块级元素：为了能既不占一行，又能设置宽高，就诞生了行内块级元素-->
<img class="staff" src="职工.jpg" alt="">
<!--13.1、背景图片:background-image:url(image.jpg)
1、如果图片的大小没有标签的大，会自动复制平铺
2、图片可以是本地的图片地址，也可以是网络上的图片地址
3、如果网页上出现图片，浏览器会再次发送请求获取图片-->
<!--13.2、背景平铺属性：background-repeat:repeat/repeat-y/repeat-x/no-repeat-->
<!--可以通过背景平铺来降低图片大小，提升网页加载效率-->
<!--background：1、background-repeat:repeat/repeat-y/repeat-x/no-repeat;
2、background-position:水平 垂直;（均有3个值left/center/right top/center/bottom，还可以设置数值）
这个position有个很重要的作用，由于对于世界上很多的用户来说，它们有着不同分辨率，各种尺寸的
电脑，所以网页的背景图设计尤为谨慎，一般情况下UI或是前端开发都会先制作一张很大很长的图，避免因显
示不完全从而影响用户体验，但过大的图对于一些小尺寸电脑会显示不完全，所以通过position设置成center
的方式可以让重要的内容居中，完美兼容各型尺寸终端。
3、background-image:url(本地图片地址/网页图片地址)
4、background-color:背景颜色
5、background-attachment:scroll（默认跟随）/fixed（固定）;
默认情况下，背景图片会随着滚动条的滚动而滚动，
-->
<!--13.2.1：背景格式缩写的方式：
background:背景颜色 背景图片 平铺方式 关联方式 定位方式-->
<!--改背景格式可以省略任何一个属性-->
<!--13.2.2：背景图片和插入图片区别：1、背景图片不占用位置，文字/文本/超链接等可以显示在上面，而插入图片不行
2、背景图片可以很方便的定位，而插入图片不行
3、插入图片有一个好处：就是语义强，容易被搜索引擎收录，在企业开发中有益处
-->
<!--13.3、CSS精灵图：是一种图像合成技术。需要配合背景图片和背景定位-->
<div class="icon"></div>
<!--14、边框属性：边框就是环绕在标签四周的线条，故而只要是标签，都可以设置边框
14.1、同时设置4条边框：border，格式：border:1px solid blue;
14.2、分别设置4条边框：上：border-top
下：border-bottom
左：border-left
右：border-right-->
<!--注意点：连写格式中，边框线条宽度，线条颜色均可以省略，会呈现默认值，但样式不能省略，省略样式边框会看不到-->
<!--样式是什么呢？就是上面的solid，也就是实线，除此之外还有虚线dashed，点缀dotted...（可查询手册）-->
<!--14.3、边框属性其他属性-->
<!--分别设置4条边的边框属性：border-上右下左
border-style:上右下左
border-color:上右下左
可省略其中某些值，省略的值对于的边属性跟随其对边，即左右或上下，当只写了一个属性时，
其他边的属性就跟随有定义的那条边。
为什么是上右下左？其实就是按照顺时针的方向并且以上为起点来设置-->
<!--此外还有border-top-width,border-top-style...很累，也很无语，也很重复浪费无奈，实在没办法，很烦-->
<!--15、内边距-->
<!--用的关键词：padding，格式跟border完全一样-->
<!--16、外边距-->
<!--用的关键词：margin，格式跟border完全一样-->
<!--在默认布局的垂直方向上，外边距是不会叠加的，会出现合并现象，比如两个div，其设置的外边距为20px，10px，10px会被
覆盖掉，听20px也就是外边距比较大的那个-->
<!--17.1、CSS盒子模型：所有的html标签其实都是盒子模型-->
<!--宽度/高度：指定可以存放内容的区域
内边距：填充物
边框：手机盒子自己
外边距：盒子与盒子之间的间隙-->
<!--17.2、盒子模型宽度和高度-->
<!--1、内容宽高：通过标签width/height设置的就是内容宽高
2、元素的宽度和高度：宽度=左边框+左内边距+width+右内边距+有边框
3、元素空间的宽度和高度：宽度=左外边距+左边框+左内边距+width+右内边距+有边框+右外边距-->
<!--17.3、盒子居中和内容居中：盒子居中:margin:0 auto;
内容居中;text-align:center;-->
<!--18、清空默认边距-->
<!--1、用通配符*直接设置margin和padding属性即可：但它会遍历所有的标签，性能不是很好-->
<!--19、盒子浮动：盒子浮动是很强大的功能，但有个非常重要的注意点就是当这个盒子div下方还有一个div时，
这个盒子最好不要设置浮动，如果实在需要需要设置，可以先在在外面框一个大边框，再在
里面的边框设置浮动，也就是说，浮动的设置最好前提是一行，不要多行-->
<!--19.1、浮动清除方式。1、给父类元素设置高度
2、clear;left/both/right/none/inherit;用clear清除浮动，其中both是指左右两侧均不允许浮动
3、隔墙法：①外墙法：即在两个设置浮动的标签中间添加一个块级元素，div即可同时把该div进行
clear:both清除浮动，同时由于清除属性，margin外边距会失效，无法设置，
此时可通过设置该div的高度保证两个标签之间的空隙
②内墙法：隔离的一种方式，跟外墙法没区别，只不过是添加到两个浮动标签其中一个
里面，记得添加在第1个标签的最后或是第2个标签的最前
-->
<!--19.2、伪元素选择器：就是在标签的前后快捷的添加子元素-->
<!--div::before{content:"爱你"} 这个元素直接设置宽高没效果，需要加上显示display:block(意思是添加的子元素为
块级元素);
div::after{content:"我爱你"}-->
<!--格式：标签名称::before{
属性:属性值;
}-->
<!--标签名称::after
属性:属性值;
}-->-->
<!--伪元素有个很好的东西，就是可以隐藏：通过visibility:hidden;-->
<!--*zoom:1;可以帮助IE6里面兼容浮动问题-->
<!--20、其他几个属性小结-->
<!--20.1、overflow:hidden作用:当内容超过div时，如果不想要超出的内容显示，就可以把超过的部分隐藏起来-->
<!--20.1.1、overflow:hidden既然有这个作用，那么清除浮动的时候是不是也可以用呢？毕竟浮动的那些是另外的div带来的。
答案是肯定的，呵呵，不过这个方式在IE6中无效，因为它也不兼容。当然也可以加*zoom:1;来解决兼容
-->
<!--20.1.2、overflow:hidden还有一个很重要的作用，就是当嵌套的盒子里面要设置里面的盒子与外面盒子的边距时，
直接在里面的盒子用margin-top是无效的，为什么无效呢，因为父元素未设置的部分会跟随子元素
的设置一起变动,当加入overflow:hidden;就OK了，为什么呢？还是它作用的延伸，因为它会清除
掉超过的内容，所以父元素多余的设置全部被清除，框架框死了。
当然要实现上面的结果也可以通过padding，但padding有个不好的就是，父元素的外边宽会被顶大，
也就是当一个界面布局固定时，padding的设置可能会加大这类的样式混乱，且不利于修改维护。
-->
</body>
</html>