上节课复习

HTML表格，table、tr、td（th）；thead、tbody；caption。

一定要会根据图形，来写表格：

  1. 		<table border="1">
  2. 			<tr>
  3. 				<td>7</td>
  4. 				<td colspan="2">8</td>
  5. 			</tr>
  6. 			<tr>
  7. 				<td rowspan="2">9</td>
  8. 				<td>0</td>
  9. 				<td>0</td>
  10. 			</tr>
  11. 			<tr>
  12. 				<td>0</td>
  13. 				<td>1</td>
  14. 			</tr>
  15. 		</table>

HTML注释：<!--注释写在里面-->

  1. 			<!-- <tr>
  2. 				<td>0</td>
  3. 				<td>1</td>
  4. 			</tr> -->

字符实体(转义字符)

  1. &nbsp;  空格
  2. &gt;   大于号
  3. &lt;   小于号
  4. &copy;  版权符号

废弃标签：b、u、i、del、strong、em

br标签是breaking打断的意思：<br>

  1. <p>床前明月光，<br />疑是地上霜</p>

它是一个自封闭标签，自此我们已经遇见4个自封闭标签：

  1. <meta name=”keywords” content=”” />
  2. <img src=”1.jpg” />
  3. <input type=”text” />
  4. <br />

在2007~08年之前，所有的换行都是用<br />来完成的。而现在<br />已经被废弃，用p、div、h系列来进行换行：

  1. <p>床前明月光，</p>
  2. <p>疑是地上霜</p>

但是<br />也不是没用，就是有些时候，极特殊的用标签来打断语义不合适，没辙了，只能<br />，比如一个有换行的超级链接。

比如淘宝首页：

  1. <p>
  2. 	<a href="">高级<br />搜索</a>
  3. </p>

高级搜索如果拆分为两个p，不合适，所以就用br打断一下。

CSS： cascading style sheet层叠式样式表

舞台，写代码的地方：

  1. <style type="text/css"></style>

语法：

  1. <style type="text/css">
  2. 	h1{
  3. 		k:v;
  4. 		k:v;
  5. 		k:v;
  6. 		k:v;
  7. 	}
  8. </style>

选择器：

  • 基本选择器3种：标签选择器、id选择器、类选择器
  • 高级选择器4种：后代选择器、交集选择器、并集选择器、通配符

标签选择器：

  1. p{
  2. }

id选择器：

id页面唯一，只要是合法的命名，可以随便任取id。合法的命名：英语字母开头（AA和aa不同）、数字、下划线、横杠。

  1. <p id=”pp”></p>

选择法是#

  1. #warning{
  3. }

class选择器：

多个标签可以携带同一个class；同一个标签可以携带多个class，空格隔开。

  1. <p class=”warning”></p>

选择符是``.。

  1. .warning{
  2. }

类的使用，要注意原子类，可以把一个标签多携带几个class，简化我们的页面制作，各取所需。

后代选择器

选择的是后代，而不是儿子。

  1. div p

div 的后代 p，都被选择。

  1. div.haha ul.xixi li.hehe p

有haha类的div的后代有xixi类的ul的后代有hehe类的li中的p。

交集选择器

  1. div.haha

又是div，又是haha类。

并集选择器

用逗号隔开的两部分

  1. div.haha ul li , div.xixi p{
  2. }

等价于

  1. div.haha ul li{
  2. }
  3. div.xixi p {
  4. }

通配符选择器

选择所有元素，清除所有元素的默认margin、padding用。

  1. *{
  2. }

继承性和层叠性

cascading style sheet， 我们对cascading这个词儿只要理解透了，css就理解透了。

实际上我们现在已经知道了cascading的第一层含义，就是同一个标签可以从多个选择器那里得到样式。样式是一层一层抹上去的。

1.继承性

继承性是css的最美的地方，它就简化了css的书写。

一些属性，如果给一个元素设置了，那么它的后代所有元素都有这个属性了，就是继承性。

哪些属性能够继承：

  1. color
  2. text-
  3. font-
  4. line-

特别的，要知道不能继承的属性：background-color、所有盒模型的属性（width、height、border、padding、margin)都是不继承的！

2.层叠性

层叠性就是处理冲突的能力，就比如一个标签p，用标签选择器设置文字颜色是红色，用id选择器设置文字颜色是蓝色；听谁的。听id的，标签选择器的属性就被杠掉了，术语叫做“层叠”掉了。

总结的一个图：

就是同一个标签携带多个类名的时候，如果携带的类名有冲突，那么听谁的？

结论：只和CSS顺序有关，以后出现的为准，与HTML标签中挂类名的顺序无关。

比如：

  1. <p class="spec1 spec2">文字</p>

或者交换两个类名的顺序写成：

  1. <p class="spec2 spec1">文字</p>

是对权重没有任何影响的。

1.应用场景

在共性中有某个元素有特性。

比如，现在想让所有的li都是一个颜色，但是就第一个li颜色不同：

  1. <html>
  2. <head>
  3. 	<style type="text/css">
  4. 		.nav ul li{
  5. 			color:blue;
  7. 		}
  9. 		.nav ul li.no1{
  10. 			color:red;
  12. 		}
  14. 	</style>
  15. 	<title></title>
  16. </head>
  17. <body>
  18. <div class="nav">
  19. 	<ul>
  20. 		<li class="no1">网站栏目</li>
  21. 		<li>网站栏目</li>
  22. 		<li>网站栏目</li>
  23. 		<li>网站栏目</li>
  24. 		<li>网站栏目</li>
  25. 		<li>网站栏目</li>
  26. 		<li>网站栏目</li>
  27. 	</ul>
  28. </div>
  29. </body>
  30. </html>

错误的写法：

  1. <style type="text/css">
  2. 	.nav ul li{
  3. 		color:blue;
  4. 	}
  5. 	.no1{
  6. 		color:red;
  7.      }

错误！不生效！因为这个权重干不过上面的.nav ul li。

所以，以后一定要记住一个真理：如果想让一个特性层叠掉共性，那么这个特性的选择器的前半部分一定要和共性的相同。

2.!important提升权重

我们希望页面中的所有原子类，都是权重非常大的，这样，一旦页面中的任何一个标签，携带了这个原子类，立即有样式产生，而不会被自己的样式所层叠。所以，这时候，就可以用!important来提升权重！

  1. .warning{
  2. 	color:red !important;
  3. }

important是英语重要的意思。注意写法！写在分号之前，如果有多个属性要提升权重，那么必须写多个：

  1. .warning{
  2. 	color:red !important;
  3. 	font-weight: bold !important;
  4. }

注意，页面严禁滥用!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()表示法

  1. 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进制表示法。

  1. <style type="text/css">
  2. 	.no1{
  3. 		background-color: #000000;
  4. 	}
  5. 	.no2{
  6. 		background-color: #ff0000;
  7. 	}
  8. 	.no3{
  9. 		background-color: #00ff00;
  10. 	}
  11. 	.no4{
  12. 		background-color: #0000ff;
  13. 	}
  14. </style>

十六进制表示法以#开头，后面跟随6位数字，分为3组，分别表示红、绿、蓝的数量。

#ff0000

我们现在要介绍一下十六进制：

我们人的手指10只手指，所以人类就是10进制，逢10进1。

【10进制中】0、1、2、3、4、5、6、7、8、9 一共10个数字

【16进制中】0、1、2、3、4、5、6、7、8、9、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为单位，也可以用百分比为单位。

如果用百分比为单位，那么就是当前字号的百分比。也就是说：

  1. font-size:14px;
  2. line-height:150%;

等价于

  1. font-size:14px;
  2. line-height:21px;
  1. font-size:16px;
  2. line-height:200%;

等价于

  1. font-size:16px;
  2. line-height:32px;

由于字号和行高非常重要，所以可以和写在一起称为font属性

font:14px/28px "宋体";

等价于：

  1. font-size:14px;
  2. line-height:28px;
  3. font-family:"宋体";

4.font-family字体

font-family属性就是字体，family就是家庭的意思。所有的字体都要用英语引号引用起来。

字体不是随便设置哦，必须是用户电脑里有这个字体，你才能设置，否则用户看到的是宋体。

所以网页中，为了让所有的用户都有一致的体验，只能用宋体、微软雅黑。黑体、楷体有的公司也用，但是不常见。

  1. font-family: "宋体";
  2. 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;

总结：

  1. font-weight:bold;  加粗
  2. font-style:italic;  倾斜
  3. text-decoration:underline; 下划线

8.综合font属性

font属性是一个大综合属性：

font:italic bold 12px/20px arial,sans-serif;

等价于

  1. font-style:italic;
  2. font-weight:bold;
  3. font-size:12px;
  4. line-height:20px;
  5. 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: 边框

第一个案例：

  1. <style type="text/css">
  2. 	div{
  3. 		width: 200px;
  4. 		height: 200px;
  5. 		background-color: yellow;
  6. 		padding: 50px;
  7. 	}
  8. </style>

加上border：

  1. 	<style type="text/css">
  2. 		.nav{
  3. 			width: 200px;
  4. 			height: 200px;
  5. 			background-color: yellow;
  6. 			padding: 50px;
  7. 			border:50px solid pink;
  8. 		}
  9. 	</style>

内容、padding、border、margin是四圈。

小测试：

  1. div{
  2. 	width:100px;
  3. 	height:100px;
  4. 	padding:10px;
  5. }

那么这个盒子真实占有的宽度就是120px。

一定一定要养成一个习惯，就是一个盒子的width属性，不是真实占有的宽度！！

真实占有的宽度 = width + 左边padding + 右边padding + 左边border宽度 + 右边的border宽度

2.padding

内容和边框之间的距离

padding:50px;

四个方向的padding就都设置为50了

如果想单独设置padding：

  1. padding-top:10px;
  2. padding-right:20px;
  3. padding-bottom:30px;
  4. padding-left:40px;

等价于：

padding:10px 20px 30px 40px;

顺序是上、右、下、左。

如果写三个数值：

padding:10px 20px 30px;

此时相当于：

  1. padding-top:10px;
  2. padding-right:20px;
  3. padding-bottom:30px;
  4. padding-left:20px;  (和右一样)

如果写两个属性

padding:10px 20px;

等价于

  1. padding-top:10px;
  2. padding-right:20px;
  3. padding-bottom:10px;(和上一样)
  4. padding-left:20px;  (和右一样)

04_CSS入门和高级技巧(2)的更多相关文章

  1. 03_CSS入门和高级技巧(1)

    上节课知识的复习 插入图片,页面中能够插入的图片类型:jpg.jpeg.bmp.png.gif:不能的psd.fw. 语法: <img src="路径" alt=" ...

  2. (Dos)/BAT命令入门与高级技巧详解（转）

    目录 第一章 批处理基础 第一节 常用批处理内部命令简介 1.REM 和 :: 2.ECHO 和 @ 3.PAUSE 4.ERRORLEVEL 5.TITLE 6.COLOR 7.mode 配置系统设 ...

  3. 10_CSS入门和高级技巧(8)

    图片透明 先来复习一下盒子的透明问题: opacity:0.6; 介于0~1之间,为了让IE兼容,我们要使用IE自己的滤镜: filter:alpha(opacity=60); 盒子的透明,会让里面的 ...

  4. 07_CSS入门和高级技巧(5)

    超级链接美化 1.伪类 同一个超级链接,根据用户的点击情况,有自己样式: 超级链接根据用户点选情况,有4种状态: a:link 没有访问的超级链接 a:visited 已经访问的超级链接 a:hove ...

  5. 08_CSS入门和高级技巧(6)

    排查错误 Chrome浏览器的审查功能. 错误1:选择器写错了,压根没有选择上: 如果写了一个错误的选择器, <style type="text/css"> dvi p ...

  6. 09_CSS入门和高级技巧(7)

    浏览器兼容问题 1.现在中国网民用什么浏览器? 中国流量最大的网站就是百度,百度在统计着每一个访问者的浏览器.地域.操作系统.分辨率等等信息. 百度流量研究院:http://tongji.baidu. ...

  7. 05_CSS入门和高级技巧(3)

    上节课复习 !important不能影响就近原则,远的标签如果加上!important也干不过近的标签! !important不能影响继承权重是0,通过继承的标签加上!important也干不过直接选 ...

  8. 06_CSS入门和高级技巧(4)

    复习 CSS : 负责样式层,层叠式样式表cascading style sheet.CSS2.1,最新版本CSS3. CSS选择器: 选择哪些元素加样式.基本选择3种:标签p.id选择器#id.cl ...

  9. smarty半小时快速上手入门教程

    http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...

随机推荐

  1. AJ学IOS（14）UI之UITableView扩充_表格的修改_(增删移动)

    AJ分享,必须精品 先看效果图 代码 // // Created by apple on 14-8-19. // Copyright (c) 2014年 itcast. All rights rese ...

  2. ADT_Bundle搭建

    1.打开SDK Manager.exe,打开的速度有点慢.点击右下角的[install n packages...],选择[accept ...],点击[install],然后等待安装.过程有点漫长, ...

  3. stand up meeting 12-4

    今日进步: 1.国庆答题界面和结果界面的连接完成,并能显示GetRankData API返回结果和错误题目的单词信息. 2.天赋: 完成了整个  单词挑战需要碰到的"Storage" ...

  4. [Abp vNext 入坑分享] - 3.简单的用户模块功能开发

    一.简要说明 本篇文章开始进行业务模块的开发模拟,借助user模块来进行业务开发,主要是用户相关的基础操作.主要是先使用Users来体验整个开发的流程.主要是先把一个基础流程跑顺利,在这里我并不会过于 ...

  5. Python 如何移除旧的版本特性，如何迎接新的特性？

    2020 年 4 月 20 日,Python 2 的最后一个版本 2.7.18 发布了,这意味着 Python 2 是真正的 EOL(end of life)了,一个时代终于落幕了. Python 2 ...

  6. IOC趣味理解

    假设一个场景:   假设你是一个四岁孩子,饿了,想吃东西.怎么做? 1,哪有吃的去哪拿,你知道冰箱有吃的,你去冰箱拿〉会有风险.比如,拿了生的吃的,吃坏肚子,甚至拿了不能吃的东西. 2, 找父母(IO ...

  7. MySQL系列（四）

    本章内容: 主从复制 简介原理 Mysql主从同步脚本部署 读写分离 如果主宕机了,怎么办? 双主的情况 MySQL 备份及恢复方案 备份单个及多个数据库 mysqldump 的常用参数 如何增量恢复 ...

  8. @SessionAttributes 和 @SessionAttribute的区别

    @SessionAttributes 和 @SessionAttribute的区别 Spring MVC中有两个长得非常像的注解:@SessionAttributes 和 @SessionAttrib ...

  9. 【Linux常见命令】sort命令

    sort - sort lines of text files sort命令用于将文本文件内容加以排序. sort可针对文本文件的内容,以行为单位来排序. 语法: sort [OPTION]... [ ...

  10. [每日短篇] 1C - Spring Data JPA (0)

    2019独角兽企业重金招聘Python工程师标准>>> 准备把 Spring Data JPA 完整看一遍,顺便把关键要点记录一下.在写这篇文章的今天,再不用 Spring Boot ...