04_CSS入门和高级技巧(2)
上节课复习
HTML表格，table、tr、td（th）；thead、tbody；caption。css
必定要会根据图形，来写表格：
html
<table border="1">
<tr>
<td>7</td>
<td colspan="2">8</td>
</tr>
<tr>
<td rowspan="2">9</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
</tr>
</table>
HTML注释：<!--注释写在里面-->面试
<!-- <tr>
<td>0</td>
<td>1</td>
</tr> -->
字符实体(转义字符)浏览器
空格 > 大于号 < 小于号 © 版权符号
废弃标签：b、u、i、del、strong、em服务器
br标签是breaking打断的意思：<br>性能
<p>床前明月光，<br />疑是地上霜</p>
它是一个自封闭标签，自此咱们已经碰见4个自封闭标签：学习
<meta name=”keywords” content=”” /> <img src=”1.jpg” /> <input type=”text” /> <br />
在2007~08年以前，全部的换行都是用<br />来完成的。而如今<br />已经被废弃，用p、div、h系列来进行换行：测试
<p>床前明月光，</p> <p>疑是地上霜</p>
可是<br />也不是没用，就是有些时候，极特殊的用标签来打断语义不合适，没辙了，只能<br />，好比一个有换行的超级连接。字体
好比淘宝首页：网站
<p>
<a href="">高级<br />搜索</a>
</p>
高级搜索若是拆分为两个p，不合适，因此就用br打断一下。
CSS： cascading style sheet层叠式样式表
舞台，写代码的地方：
<style type="text/css"></style>
语法：
<style type="text/css">
h1{
k:v;
k:v;
k:v;
k:v;
}
</style>
选择器：
- 基本选择器3种：标签选择器、id选择器、类选择器
- 高级选择器4种：后代选择器、交集选择器、并集选择器、通配符
标签选择器：
p{
}
id选择器：
id页面惟一，只要是合法的命名，能够随便任取id。合法的命名：英语字母开头（AA和aa不一样）、数字、下划线、横杠。
<p id=”pp”></p>
选择法是#
#warning{
}
class选择器：
多个标签能够携带同一个class；同一个标签能够携带多个class，空格隔开。
<p class=”warning”></p>
选择符是``.。
.warning{
}
类的使用，要注意原子类，能够把一个标签多携带几个class，简化咱们的页面制做，各取所需。
后代选择器
选择的是后代，而不是儿子。
div p
div 的后代 p，都被选择。
div.haha ul.xixi li.hehe p
有haha类的div的后代有xixi类的ul的后代有hehe类的li中的p。
交集选择器
div.haha
又是div，又是haha类。
并集选择器
用逗号隔开的两部分
div.haha ul li , div.xixi p{
}
等价于
div.haha ul li{
}
div.xixi p {
}
通配符选择器
选择全部元素，清除全部元素的默认margin、padding用。
*{
}
继承性和层叠性
cascading style sheet， 咱们对cascading这个词儿只要理解透了，css就理解透了。
实际上咱们如今已经知道了cascading的第一层含义，就是同一个标签能够从多个选择器那里获得样式。样式是一层一层抹上去的。
1.继承性
继承性是css的最美的地方，它就简化了css的书写。
一些属性，若是给一个元素设置了，那么它的后代全部元素都有这个属性了，就是继承性。
哪些属性可以继承：
color text- font- line-
特别的，要知道不能继承的属性：background-color、全部盒模型的属性（width、height、border、padding、margin)都是不继承的！
2.层叠性
层叠性就是处理冲突的能力，就好比一个标签p，用标签选择器设置文字颜色是红色，用id选择器设置文字颜色是蓝色；听谁的。听id的，标签选择器的属性就被杠掉了，术语叫作“层叠”掉了。
总结的一个图：
就是同一个标签携带多个类名的时候，若是携带的类名有冲突，那么听谁的？
结论：只和CSS顺序有关，之后出现的为准，与HTML标签中挂类名的顺序无关。
好比：
<p class="spec1 spec2">文字</p>
或者交换两个类名的顺序写成：
<p class="spec2 spec1">文字</p>
是对权重没有任何影响的。
1.应用场景
在共性中有某个元素有特性。
好比，如今想让全部的li都是一个颜色，可是就第一个li颜色不一样：
<html>
<head>
<style type="text/css">
.nav ul li{
color:blue;
}
.nav ul li.no1{
color:red;
}
</style>
<title></title>
</head>
<body>
<div class="nav">
<ul>
<li class="no1">网站栏目</li>
<li>网站栏目</li>
<li>网站栏目</li>
<li>网站栏目</li>
<li>网站栏目</li>
<li>网站栏目</li>
<li>网站栏目</li>
</ul>
</div>
</body>
</html>
错误的写法：
<style type="text/css">
.nav ul li{
color:blue;
}
.no1{
color:red;
}
错误！不生效！由于这个权重干不过上面的.nav ul li。
因此，之后必定要记住一个真理：若是想让一个特性层叠掉共性，那么这个特性的选择器的前半部分必定要和共性的相同。
2.!important提高权重
咱们但愿页面中的全部原子类，都是权重很是大的，这样，一旦页面中的任何一个标签，携带了这个原子类，当即有样式产生，而不会被本身的样式所层叠。因此，这时候，就能够用!important来提高权重！
.warning{
color:red !important;
}
important是英语重要的意思。注意写法！写在分号以前，若是有多个属性要提高权重，那么必须写多个：
.warning{
color:red !important;
font-weight: bold !important;
}
注意，页面严禁滥用!important提高权重，只能在原子类的状况使用！
还要注意下面几个!important的权重提高方法：
!important不影响继承性，该是0仍是0。一个标签是经过继承性影响的，权重是0，加上!important也是0，也不能与已经选中了的选择器抗衡。
!important不影响就近原则，远的那个，写上!important也没用，仍是以近的那个为准！
如今咱们已经彻底揭示了“层叠性”的意思：
- 同一个标签能够有多个选择器做用，给他增长样式；
- 有继承性，祖先的标签的一些属性，能够继承给后代的标签；
- 有层叠性，当碰见冲突的时候有着严密一套法律，规定谁生效谁被杠掉。
CSS就是用代码在画画，它像工程师同样精确，像艺术家同样优美。
从如今开始，咱们就要学习CSS的属性了。大体分为几类：
- 文字样式
- 盒模型
- 浮动
- 定位
- 背景
- 表格和列表
CSS8.7 中的颜色表示法
咱们大量的用到颜色，好比color、background-color、border:1px solid red;
以前咱们都是用英语来描述颜色red、blue等等。
一共有三种方法：单词、rgb()、#十六进制
1.单词来表示
在HTML中可以找到这些单词表示的颜色名。不过咱们通常就用常见的这么几个：
black、white、red、green、blue、yellow、pink、orange、purple、gold、gray、yellowgreen、greenyellow等等。
2.rgb()表示法
background-color: rgb(0,0,255);
光学显示器的三原色是红、绿、蓝，依靠他们三个的不一样亮度，就能组成不同的颜色。每种颜色的亮度数值是0~255，一共256个数字。
计算机的显示屏是由三元色的发光晶体组成的
注意它的语法，rgb()中间用两个逗号隔开三个数字。
红色：
background-color: rgb(255,0,0);
绿色：
background-color: rgb(0,255,0);
蓝色：
background-color: rgb(0,0,255);
黑色：
background-color: rgb(0,0,0);
光学显示器什么都关掉了，就是黑色。
白色：
background-color: rgb(255,255,255);
特别的，当三个数字都同样的时候，就是灰色：
background-color: rgb(111,111,111);
每一个数位都可以表示256种颜色（0~255），那么三个数位可以表示多少颜色呢？乘法原理：
256* 256 * 256种颜色，16777216种颜色。
3.十六进制表示法
rgb表示法比较冗长，更经常使用的就是16进制表示法。
<style type="text/css">
.no1{
background-color: #000000;
}
.no2{
background-color: #ff0000;
}
.no3{
background-color: #00ff00;
}
.no4{
background-color: #0000ff;
}
</style>
十六进制表示法以#开头，后面跟随6位数字，分为3组，分别表示红、绿、蓝的数量。
#ff0000
咱们如今要介绍一下十六进制：
咱们人的手指10只手指，因此人类就是10进制，逢10进1。
【10进制中】0、一、二、三、四、五、六、七、八、9 一共10个数字
【16进制中】0、一、二、三、四、五、六、七、八、九、a、b、c、d、e、f 一共16个数字。
也就是说：
16进制中的5，就是10进制中的5；
16进制中的9，就是10进制中的9；
16进制中的a，就是10进制中的10；
16进制中的b，就是10进制中的11；
16进制中的c，就是10进制中的12；
16进制中的d，就是10进制中的13；
16进制中的e，就是10进制中的14；
16进制中的f，就是10进制中的15；
16进制中的10，就是10进制中的16；
16进制中的11，就是10进制中的17；
……
位权的概念：
一个10进制的数字，好比38 ， 数字3表示拥有3个10
38 = 3 * 10 + 8
一个16进制的数字，好比38 ，数字3表示拥有3个16
3 * 16 + 8 = 56
也就是说，16进制中的38就是10进制中的56。
因此如今给你一个16进制数字，你就可以当即算出对应的10进制数字是多少。
16进制的25 ， 2 * 16+5=37 , 就是10进制中的37
16进制的42 ， 4 * 16 + 2=66 , 就是10进制中的66
16进制的ab , 10 * 16 + 11 = 171 , 就是10进制中171
16进制的2b ， 2 * 16 +11 = 43， 就是10进制中43
16进制的ff， 15 * 16 + 15 = 255 , 就是10进制中255
因此：
#42ab2b
等价于，
rgb(66,171,43)
因此：
1#000000黑色
#ffffff白色
#ff0000红色
#111111灰色
16进制写法能够简化，全部形如
#aabbcc;均可以简化为：#abc;
好比：
#000000等价于#000
#6688cc等价于#68c
#ff0000等价于#f00
因此，
2b2b2b
不能简化！
大小写都同样，好比#F00等价于#ff0000
至此咱们就介绍完了CSS2.1层面的颜色表示法，如今咱们表示红色：
red
rgb(255,0,0)
#ff0000
#f00
文字相关的属性
1.color
文字颜色，这个属性可以继承，可以用3种表示法来表示。
2.font-size
文字大小，它有单位的，如今只学习一个单位就是像素。
font-size:20px;
实际测量饱满汉字的真实高度倒是18px。
这是由于咱们的汉字在制造的时候，就不是顶天立地的：
老师，我到底要用多少号字？根据设计师的设计图。
可是若是设计图中，有一些字没有图层的，那么此时比较麻烦，绝对不要直接去量！由于汉字不是顶天立地的，必须本身写一个汉字，而后去比较。
各个浏览器的默认字号都不同，有的是12px、有的是14px。因此设计图上的文字，都要写字号。
Chrome浏览器支持的最小字号是12px，低于12px字号将仍以12px显示，设计师若是给你一个设计稿文字过小，直接找老板告状。
3.line-height
line-height表示行高。sublime里面的快捷键是lnh
文字所在这一行的高度，称为行高。文字在行里垂直居中。
行高到底为多少？仍是那个答案：看设计图！若是设计图没有图层，要写两个文字量量。
line-height能够以px为单位，也能够用百分比为单位。
若是用百分比为单位，那么就是当前字号的百分比。也就是说：
font-size:14px; line-height:150%;
等价于
font-size:14px; line-height:21px;
font-size:16px; line-height:200%;
等价于
font-size:16px; line-height:32px;
因为字号和行高很是重要，因此能够和写在一块儿称为font属性
font:14px/28px "宋体";
等价于：
font-size:14px; line-height:28px; font-family:"宋体";
4.font-family字体
font-family属性就是字体，family就是家庭的意思。全部的字体都要用英语引号引用起来。
字体不是随便设置哦，必须是用户电脑里有这个字体，你才能设置，不然用户看到的是宋体。
因此网页中，为了让全部的用户都有一致的体验，只能用宋体、微软雅黑。黑体、楷体有的公司也用，可是不常见。
font-family: "宋体"; font-family: "微软雅黑";
通常来讲，若是设置为微软雅黑，那么就要设置一个备选字体，备选字体通常是宋体，用逗号隔开列出。
font-family: "微软雅黑","宋体";
有的服务器上面，为了追求css的加载速度，把字体名变为英语。 css中
font-family:”Microsoft Yahei”,”SimSun”;
等价于
font-family: "微软雅黑","宋体";
英语字体写在前面：
font-family: "Arial","Microsoft Yahei","SimSun";
5.font-weight加粗
bold就是粗体
font-weight:bold;
等价于
font-weight: 700;
不加粗，要写normal这个词
font-weight:normal;
等价于
font-weight:400;
面试爱考。
这是能继承的属性
6.font-style属性
若是想让文字倾斜，使用
font-style:italic;
不倾斜：
font-style: normal;
font-style:oblique;也是倾斜，和italic的区别：
7.text-decoration属性
字符装饰
下划线：
text-decoration:underline;
没有下划线：
text-decoration:none;
删除线：
text-decoration:line-through;
总结：
font-weight:bold; 加粗 font-style:italic; 倾斜 text-decoration:underline; 下划线
8.综合font属性
font属性是一个大综合属性：
font:italic bold 12px/20px arial,sans-serif;
等价于
font-style:italic; font-weight:bold; font-size:12px; line-height:20px; font-family:arial,sans-serif;
通常来讲，咱们不会这么综合，而是：
font:12px/200% “Microsoft Yahei”,”SimSun”;
其余的文本属性，好比text-indent、text-align没有那么难，因此碰见提一嘴就好了。
盒模型
1.盒模型总体感知
盒模型就是width、height、padding、border、margin外边距这么几个属性。
width：内容的宽度
height：内容的高度
padding：内边距
border: 边框
第一个案例：
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: yellow;
padding: 50px;
}
</style>
加上border：
<style type="text/css">
.nav{
width: 200px;
height: 200px;
background-color: yellow;
padding: 50px;
border:50px solid pink;
}
</style>
内容、padding、border、margin是四圈。
小测试：
div{
width:100px;
height:100px;
padding:10px;
}
那么这个盒子真实占有的宽度就是120px。
必定必定要养成一个习惯，就是一个盒子的width属性，不是真实占有的宽度！！
真实占有的宽度 = width + 左边padding + 右边padding + 左边border宽度 + 右边的border宽度
2.padding
内容和边框之间的距离
padding:50px;
四个方向的padding就都设置为50了
若是想单独设置padding：
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px;
等价于：
padding:10px 20px 30px 40px;
顺序是上、右、下、左。
若是写三个数值：
padding:10px 20px 30px;
此时至关于：
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:20px; (和右同样)
若是写两个属性
padding:10px 20px;
等价于
padding-top:10px; padding-right:20px; padding-bottom:10px;(和上同样) padding-left:20px; (和右同样)