03_CSS入门和高级技巧(1)
上节课知识的复习
插入图片，页面中可以插入的图片类型：jpg、jpeg、bmp、png、gif；不能的psd、fw。css
语法：html
<img src=”路径” alt=”替代文字” />
相对路径、绝对路径：
相对路径就是从html页面出发，找到图片：前端
<img src=”a/b/1.jpg” />
等价于程序员
<img src=”./a/b/1.jpg” />
图片位于html文件较浅的文件夹中：浏览器
<img src=”../../../1.jpg” />
绝对路径：直接的门牌号。以http://开头，或者以/开头的都是绝对路径。服务器
<img src=”http://www.163.com/images/logo.png” />
本身的服务器根目录：less
<img src=”/images/logo.png” />
超级连接
a标签，语法：性能
<a href=”地址” title=”悬停文字” target=”_blank”>连接的文字</a>
超级连接还能作页面锚点学习
<a name=”info”></a>
此时就能用1.html#info来直接看见这个内容字体
表单
form标签里面，这个标签咱们在Ajax课程上详细介绍。
input类型：
text、password、radio、checkbox、submit、button、reset
下拉框：
select、option
多行文本框：
textarea
单选框若是想互斥，必需要有相同的name属性。若是想点击文字，就能勾选，就要有label
<input type=”radio” name=”sex” id=”male” /> <label for=”male”>男</label>
无序列表、有序列表、定义列表
注意嵌套的写法，ul的儿子只能是li，ul的孙子是谁无所谓：
<ul> <li> <h3></h3> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li></li> <li></li> <li></li> </ul>
表格
1.表格的基本使用
<table border="1"> <tr> <td>第1行，第1个小格。</td> <td>第1行，第2个小格。</td> <td>第1行，第3个小格。</td> <td>第1行，第4个小格。</td> </tr> <tr> <td>第2行，第1个小格。</td> <td>第2行，第2个小格。</td> <td>第2行，第3个小格。</td> <td>第2行，第4个小格。</td> </tr> <tr> <td>第3行，第1个小格。</td> <td>第3行，第2个小格。</td> <td>第3行，第3个小格。</td> <td>第3行，第4个小格。</td> </tr> </table>
若是有表头的语义，那么应该书写th替换td。也就是说td和th都是小格格。
2.表格单元格的合并
单元格的合并，单元格的合并属性，colspan、rowspan。必定要写在td或者th上，tr是没有这两个属性的。
colspan咱们叫作列跨度，rowspan行跨度。这两个属性，都是小格格(td)的属性，而不是“行”的属性。
一个完整的表格，是有caption、thead、tbody三个部件的：
thead就是表格头部体的意思，tbody就是表格内容体的意思，caption就是表格标题
<table> <caption>我是标题</caption> <thead> <tr> <th></th> <th></th> <th></th> </tr> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>
div 和 span 标签
1.div 标签
div是division分割的意思，在页面上表示容器，将相同语义的一组元素放在同一个div里面。
div是典型的容器级标签，能够包裹任何东西。
语义上来讲，全部相同语义、相关的语义的元素，都要放到一个div里面。
<div> <h3>中国主要城市</h3> <ul> <li>北京</li> <li>哈尔滨</li> <li>吉林</li> <li>长春</li> </ul> </div> <div> <h3>中国著名男演员</h3> <ul> <li>郭德纲</li> <li>刘德华</li> <li>邓超</li> <li>胡歌</li> </ul> </div>
div标签，浏览器没有任何的默认样式。
div这个东西可以把层次分的很清楚。
div负责描述页面的结构，css负责描述页面的样式。
2.span
span表示跨度，就是文本级的div。
就是把一些语义相近、功能相同的文本标签，都包裹在一块儿。注意，直觉上以为span比a大，比p小。
span也没有任何的默认样式。span单独使用没有什么意义，都是配合样式表使用的。
<p> 今天是CSS的第1天，天天必定要按时<span>完成做业</span>，要按时吃饭睡觉，要<span>多吃蔬菜</span>少喝酒，上课不要迟到。 </p>
HTML杂项
1.注释
任何的语言都有注释，注释是不会当作程序执行的，是给程序员本身看的。
HTML中，注释的语法：
<!--这是网页的头部-->
换行是合法
<!-- 这是网页的内容 制做人邵山欢 -->
很明显，写一些注释，对代码的清晰度、可读性有很大的提高。
sublime中，按ctrl+/ ， 可以快速输入一个注释。
为了方便调试代码，常常会把一些代码注释掉，集中精力看其他的代码。
2.字符实体
也叫做转义字符。
<div> 好高兴啊，今天老师教会咱们<h1>是主标题的意思，我真开心呀！ </div>
也就是说，在写HTML页面的时候，常常会有误会，好比<就正常出现。那么为了防止HTML页面认为这是一个标签，因此就应该写成转义字符。
全部的转义字符，都是这样的格式：&字母;
< 就是< , lt就是英语less than小于
> 就是> , gt就是英语greater than大于
© 就是© 版权符号
就是空格
有一个很是重要的转义字符，就是nbsp。 non-breaking space，无换行空格。
看代码：
<ul> <li>邓 超</li> <li>孙 俪</li> <li>王宝强</li> </ul>
两个空格，折叠成了一个空格
因此要用 来表示一个中文的空格：
<ul> <li>邓 超</li> <li>孙 俪</li> <li>王宝强</li> </ul>
废弃标签介绍
你会发现，如今的HTML标签只负责语义、结构。不负责样式的。可是在2008以前，HTML也是负责样式的。
可是HTML中，有一些标签，具备浓郁的样式色彩。就是这个标签，不是负责语义的，而是负责样式的，2008年开始，坚定的废弃掉了这些标签，用CSS来替代他们的功能。
这些标签：
<b></b> <u></u> <i></i> <del></del>
丝毫看不出语义，只有样式，因此是被废弃了！
这些标签，咱们还有点用，当作CSS钩子，什么是钩子，之后再说！
还有一些标签，是擦边球，就是本身也有一些语义，可是也有一些样式色彩，这些标签是能够合理使用的：
<p><strong>我是一个文字</strong></p> <p><em>我是一个文字</em></p>
em是emphasize的意思，也是强调的意思。
strong、em要比b、i好。
HTML在如今的社会，就是负责页面语义和结构的，因此标签极大的简化。页面上经常使用的标签实际上就几个：
容器：div、ul（li）、ol、dl、table
放文字的： h系列、p、span、a
文本流：img、input
当作css钩子：b、u、i
最后最后强调一下，HTML放什么标签，不是看什么样子，要看语义！
CSS总体感知
1.简介
前端开发3层：
- HTML：结构层 语义、结构
- CSS：样式层 样式
- JS： 行为层 交互、行为、动画
CSS的全程是cascading style sheet ， 层叠式样式表，“样式表”比较好理解，“层叠式”比较难理解。
CSS的维护者也是w3c，最新版本是CSS3，可是浏览器没有那么的兼容，因此咱们学习的是CSS2.1。
2.总体感知
css分为两个部分，选择谁、设置什么样式。
<style type="text/css">
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial;
}
p{
color: green;
font-size: 04px;
text-shadow: 8px 8px 8px black;
font-family: "微软雅黑";
transform: rotate(94deg);
width: 944px;
}
</style>
上面的h一、p就是选择器。表示选择哪些HTML标签给他们加样式，就是说你要给谁加样式。
而后大括号里面，就是k:v;的结构，把全部的样式列出来，拥有的样式就写上，没有的样式不写，有多少写多少：
选择器{
k:v;
k:v;
k:v;
k:v;
k:v;
}
选择器{
k:v;
k:v;
k:v;
k:v;
k:v;
}
3.style标签——css的舞台
全部的css样式，都要写在style标签中。
style标签写在<head>里面。
<style type="text/css">
</style
style就是样式的意思，表示这个标签里面写的是样式。
type是类型；
text/css表示纯文本的css。
傻瓜版的sublime能快速输入，只须要输入<sty 按tab就好了：
而后就在style标签里面，书写样式：
<style type="text/css">
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial;
}
</style>
4.css对换行不敏感、缩进不敏感
h1{color: red; background-color:blue; font-size: 84px; font-size: initial;
}
等价于：
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial;
}
写成一行，css代码尺寸小了，这是最后压缩的事情，写的时候，仍是一行一行写。
5.分号
每一个选择器最后一项的属性值能够没有分号，其余都要有。
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial
}
咱们通常也会把最后一项写上分号。
6.先学几个属性
文字颜色：color:red;
color就是文字颜色的意思，后面的值咱们使用英语描述。咱们后面的课程将告诉你，还能用rgb、十六进制来描述颜色，如今先不着急。
sublime中快捷键是c tab
背景颜色：background-color:blue;
background就是背景的意思，中间有个短横和color链接。咱们css中多个词组都是短横分开的。
sublime中快捷键是bgc tab
字号：font-size:40px;
font就是字体，size就是尺寸。px是英语pixel像素的意思。
边框：border:1px solid green;
border就是边框的意思，它的值颇有意思，是三个部分，用空格隔开。
这三个部分，能够顺序交换。
1px就是粗细，能够任意调整；solid就是实线，若是是虚线写dashed；green就是颜色，能够任意设置。
基本选择器
选择器就是怎么选择元素的。
1.标签选择器
标签选择器是最最简单的选择器，就是选择页面上全部的同种标签。
要注意的是，选择的是页面上的全部这个标签，而不是一个。
<style type="text/css">
p{
color: green;
}
</style>
body就是页面，若是要设置整个页面的背景颜色，要设置body。
body{
background-color: yellow;
}
标签选择器有点很差用，要选择就都选择了。因此主要的用途就是设置一些标签的默认状况。
2.id选择器
就是对某一个（注意就一个）元素，进行特别的样式设定的时候用。就是给元素一个特别的名字，而后经过这个名字来选择它。
就是给元素加上id属性，而后在选择器用#开头进行选择。
<p id="description">HTML在如今的社会，就是负责页面语义和结构的，因此标签极大的简化。页面上经常使用的标签实际上就几个：</p>
选择的时候写：
<style type="text/css">
#description{
color: red;
}
</style>
首先，任何元素均可以设置id属性，合法的id属性是英语字母开头（大小写敏感，也就是说aa和AA是两个不一样的合法id）、能够有数字、下划线、短横。
同一个页面中，id绝对不能相同。哪怕是不一样的元素，id也不能相同，咱们必须保证，id在页面上是惟一的。
下面这个例子是错误的，初学者常见的错误：
<p id="para">我是一个段落</p> <h3 id="para">我是一个h3</h3>
页面上已经有元素的id是para了，因此不能有元素仍然叫para。即便以前叫作para的是一个p，后面叫作para的是一个h3，也不行！是不合法的！
你会发现，咱们能够综合利用标签选择器、id选择器一块儿作效果。好比，咱们让全部的p的字号都是20px，让其中某一个的颜色是红色。这就是层叠式样式表的第一层含义，同一个标签能够有多个选择器选择它。
3.类选择器
id有点很差用，由于是惟一的，若是页面上有两个、三个元素，想设置为一样的样式，id就无能为力了。
因此就是用类选择器，就是给某一类元素，设置相同的类名，而后经过这个类名来选择。
class叫作类名。
<p class="warning">我是段落1</p>
<p class="warning">我是段落2</p>
选择的时候，用点：
<style type="text/css">
.warning{
color: red;
}
</style>
类名的命名和id是同样的，英语字母开头（aa和AA是不同的类名）、数字、下划线、短横。
能够有多个标签携带同一个类名：
<h1 class="warning">CSS入门和高级技巧</h1>
<p class="warning">我是段落1</p>
<p class="warning">我是段落2</p>
同一个标签，能够携带多个类名，用空格隔开。
<p class="warning p1">我是段落1</p>
这个p标签同时携带了两个类，因此.warning选择器和.p1选择器能同时选择上他们。
.p1{
color: green;
}
.warning{
color: red;
}
注意，使用空格隔开，不是两个class
<p class=”warning” class=”xian”>我是一个错误的示范</p>
原子类的意思： 好比来制做这个效果：
用原子类是最方便的，所谓的原子类，就是一些简单的属性作成一个类，而后元素自行选择：
<style type="text/css">
.hong{
color: red;
}
.da{
font-size: 04px;
}
.xian{
text-decoration: underline;
}
</style>
各取所需：
<p class="hong da">我是段落</p>
<p class="hong xian">我是段落</p>
<p class="da xian">我是段落</p>
类名的使用的时候，尽可能用有语义的单词来表示：warning、important、ad、main。
不要用一些具体的单词：red、hong、left-part、right-part。
写页面到底用id仍是class呢？答案很是确定：class。哪怕页面上只有某一个要改样式，那么我尽可能给这一个元素一个单独的class，也不给他id。
这是由于id是js经常使用的标签，若是你在css就把id用掉了，js程序就有耦合性的问题。
class上样式，id上行为。
高级选择器
1.后代选择器
后代选择器用空格表示：
<div class="news">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
选择这些p，能够用后代选择器：
<style type="text/css">
.news{
color: red;
}
</style>
咱们如今要详细介绍一下：
选择的是后代的元素，不必定是儿子，若是是孙子、曾孙子、重孙子……都行
<div class="div1"> <div class="div2"> <div class="div3"> <p>我是一个小p</p> </div> </div> </div>
选择的是div1这个div中的后代p：
<style type="text/css">
.div2 p{
color: green;
}
</style>
能够多重描述祖先顺序，可是顺序必须真实存在：
<style type="text/css">
.div1 .div2 .div3 p{
color: green;
}
</style>
如今反应要快，看见空格了，就是后代。
2.交集选择器
选择又是p标签，同时又有haha类的元素：
p.haha
通常来讲，语法是：标签名.类名
别的交集选择器也合法，可是没人这么写：
#box.haha
注意
div.box和div .box的区别
3.并集选择器
逗号表示并集，“都”
<style type="text/css">
p,div{
color:red;
}
</style>
等价于：
p.haha{
color:red;
}
div.xixi{
color:red;
}
4.通配符
选择全部元素，用
<style type="text/css">
*{
color: red;
}
</style>
继承性和层叠性
1.继承性
css规定，有一些属性，给某一个元素设置了，它的后代元素都一样拥有它的这个属性了。
哪些属性可以继承呢？
color
text-系列 ： 好比text-decoration:underline;
font-系列： 好比font-size:30px;
line-系列
background-color不能继承！border不能继承！等等
可以把一些初始的、基本的、广泛的设置，写在body里面。
<style type="text/css">
body{
font-size: 70px;
}
</style>
“层叠式”样式表，cascading的第二层含义，就是继承性。
2.层叠性
层叠性是什么？就是处理冲突的能力。就是当多个选择器都选择上了同一个标签，听谁的？
同一个标签：
<p class="haha" id="para">我是段落</p>
如今有三个选择器都可以选择上它：
<style type="text/css">
p{
color:red;
}
#para{
color:green;
}
.haha{
color:blue;
}
</style>
听谁的？此时，就是所谓的层叠性发挥做用了，CSS有着一套很是严密的法律，此时听id的。
选择器的一个基本权重： id的权重 > 类选择器 > 标签选择器
比较复杂的权重计算：
10个便签，也干不过1个类。
只有选中到文字所在的标签，才能计算权重！！若是是继承而来的，权重是0！
若是权重相同怎么办？
- 若是是都选择上了，以style列表中后出现的选择器为准
- 都是经过继承而来的呢：就近原则，谁描述的近，听谁的。
做业
1.标签列表
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.yule{
color: pink;
}
.read{
color: yellow;
}
.zhengzhi{
color: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="yule">娱乐新闻娱乐新闻娱乐新闻</span>
<span class="read">[阅读:15]</span>
</li>
</ul>
<ul>
<li>
<span class="zhengzhi">政治新闻政治新闻政治新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="zhengzhi">政治新闻政治新闻政治新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="zhengzhi">政治新闻政治新闻政治新闻</span>
<span class="read">[阅读:15]</span>
</li>
<li>
<span class="zhengzhi">政治新闻政治新闻政治新闻</span>
<span class="read">[阅读:15]</span>
</li>
</ul>
</div>
</body>
</html>
2.怎么肯定权重
权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1，好比：
body #content .data img:hover
最终的权重值是0122；#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素加了1 。
- 1. 06_CSS入门和高级技巧(4)
- 2. 10_CSS入门和高级技巧(8)
- 3. 04_CSS入门和高级技巧(2)
- 4. 05_CSS入门和高级技巧(3)
- 5. 07_CSS入门和高级技巧(5)
- 6. Perl语言入门——高级Perl技巧
- 7. PS入门小技巧1
- 8. iOS核心动画高级技巧-1
- 9. TypeScript 高级技巧
- 10. JavaScript高级技巧
- 更多相关文章...
- • Markdown 高级技巧 - Markdown 教程
- • XML DOM 高级 - XML 教程
- • YAML 入门教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 06_CSS入门和高级技巧(4)
- 2. 10_CSS入门和高级技巧(8)
- 3. 04_CSS入门和高级技巧(2)
- 4. 05_CSS入门和高级技巧(3)
- 5. 07_CSS入门和高级技巧(5)
- 6. Perl语言入门——高级Perl技巧
- 7. PS入门小技巧1
- 8. iOS核心动画高级技巧-1
- 9. TypeScript 高级技巧
- 10. JavaScript高级技巧