学习和完成任务二的笔记
任务二：零基础HTML及CSS编码（一）
学习的资料
- MDN HTML入门
- [MDN CSS入门教程](https://developer.mozilla.org/zh-- CN/docs/Web/Guide/CSS/Getting_started)
- 慕课HTML+CSS基础教程视频
css介绍
CSS 是用来指定文档显示的，让页面有不同的外观。
如何定义一个样式，可以新建一个文件strong.css在文件中写如下代码
strong {color: red;}。然后在你的html文件头部加入一行<link rel="stylesheet" href="style1.css">。再打开网页你会发现之前标记<strong>的文字由原来的 黑色 加粗变为了 红色。三种样式写法
优先级为内联式 > 嵌入式 > 外部式
/*内联式，直接写在标签中*/
<span style="color:blue;">超酷的互联网</span>
/*内嵌式，写在html文件中*/
<head>
......
<style type="text/css">
span{color:blue;}
</style>
</head>
/*外联式，写在单独文件中，如上段中介绍的用法*/
-
CSS的层叠与继承
CSS的来源有三种，浏览器默认样式、用户定义样式和开发者定义样式，而优先级依次提高，也就是开发者定义的样子优先级最高会覆盖前两种定义的样式。
同时样式之间也有继承关系，如strong就继承自p，子类样式有更高的优先级。
上面所定义的如strong为一条规则，而strong被称为标签选择器( 也就是说为某一标签设置样式规则 )。规则还可以有class和id两个属性，对应有类选择器和id选择器。这三个优先级也是依次提高。
<p class="key" id="principal">`
类选择器 在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是<p>元素。）。一个标签可以有多个类用空格隔开
.key { color: green;}
id选择器 下面的规则将使 id 等于 principal 的那个元素的文字变为粗体。同一html文件中 id必须唯一
#principal { font-weight: bolder;}
:before :after 在元素前面或者后面加元素
- CSS伪类选择器 是加在选择器后面的用来指定元素状态的关键字。比如， hover 会在鼠标悬停在选中元素上时应用相应的样式。
a:hover{color:red:} /*鼠标移动到链接上时链接文字变红*/
- 关系选择器
| 选择器 | 选择的元素 |
|---|---|
A E |
任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) |
A > E1 |
任何元素A的子元素 |
E:first-child |
任何元素的第一个子元素E |
B + E |
任何元素B的下一个兄弟元素E |
B ~ E |
B元素后面的拥有共同父元素的兄弟元素E |
你可以任意组合以表达更复杂的关系。
你还可以使用星号（*）来表示”任意元素“。
- 分组选择器
h1,span{color:red;} /*使用这种写法为多个选择器设置相同规则*/
-
!important
在分号前加!important提高样式为最高优先级
p{color:red!important}
常用属性
| 属性 | 代码 | 说明 |
|---|---|---|
| 字体 | {font-family:"宋体";} |
- |
| 字号 | {font-size:12px} |
- |
| 颜色 | {color:#ffffff} |
颜色表示有多种：#ffffff,rgb{0,0,0},red |
| 加粗 | {font-weight:bold;} |
- |
| 斜体 | {font-style:italic;} |
- |
| 下划线 | {text-decoration:underline;} |
- |
| 删除线 | {text-decoration:line-through;} |
- |
| 缩进 | {text-indent:2em;} |
- |
| 行间距 | {line-height:3em;} |
- |
| 字间距 | {letter-spacing:20px;} |
- |
| 对齐 | {text-align:center;} |
- |
| 背景色 | {background:pink;} |
- |
| 设置成块 | {display:block;} |
- |
| 设置成内联元素 | {display:inline;} |
- |
| 设置成内联块 | {display:inline-block;} |
- |
| 宽 | {width:30px;} |
- |
| 高 | {height:30px;} |
- |
盒模型
元素分类
常用的块状元素<div> <p> <h1>...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
常用的内联元素<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
常用的内联块状元素<img> <input>块级元素
a{display:block;} /*将a标签设置成块级元素*/
每个块级元素都从新的一行开始，并且其后的元素也另起一行。元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%。
- 内联元素
p{display:inline;} /*将p标签设置成内联元素*/
和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
- 内联块状元素
display:inline-block;
和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
- 边框
/* dashed（虚线）| dotted（点线）| solid（实线）。 */
div{
border-width:2px;
border-style:solid;
border-color:red;
}
/* 可简写为如下 */
div{border:2px solid red;}
/* 可单独设置某一边框，使用如下属性名 */
border-bottom border-top border-right border-left
- 宽度高度
/* */
div{
width:200px;
height: 20px;
}
-
填充
表示元素和边框之间的距离。填充分成上右下左顺时针写，如下
div{padding:20px 10px 15px 30px;}
/* 也可以分开写，如下 */
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
/* 如果上、右、下、左的填充都为10px;可以这么写 */
div{padding:10px;}
/* 如果上下填充一样为10px，左右一样为20px，可以这么写*/
div{padding:10px 20px;}
-
边界
元素与其它元素之间的距离可以使用边界。属性名为margin, 用法如同填充，将padding换成margin
布局模型
-
流动模型
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。内联元素都会在所处的包含元素内从左到右水平分布显示。 -
浮动模型
设置元素浮动就可以实现两个块状元素并排显示。
/* 这样设置元素浮动 */
div1{float:left;}
-
层模型
层模型有三种形式：
1、绝对定位(position: absolute)
设置position:absolute(表示绝对定位)，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div{
position:absolute;
top:20px;
right:100px;
bottom:30px;
left:50px;
}
2、相对定位(position: relative)
设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
3、固定定位(position: fixed)
与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
position:fixed;
left:100px;
top:50px;
}
水平居中设置
- 行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。如下代码：
div.txtCenter{ text-align:center; }
- 定宽块状元素
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
margin:20px auto;
- 不定宽块状元素
有三种方式。方式一如下
/* 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。 */
<div>
<table margin:0px auto>
<tbody>
<tr>
<td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
第二种方法：改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
垂直居中设置
- 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
- 父元素高度确定的多行文本（方法一）：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以将在居中的元素放在td中，将td设置一个高度，再设置 vertical-align：middle（默认已为middle）。 - 父元素高度确定的多行文本（方法二）：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
