HTML和CSS基础教程-慕课网

mrchi 收录于 Web 开发

2018-05-31 约 5326 字预计阅读 11 分钟

HTML

<em>：表示强调，斜体表示；

<strong>：表示更强烈的强调，粗体表示；

<span>：用于给文本设置单独的样式，没有语义；

<q>: 引用文本，会自动添加双引号，不需要手动添加。cite属性标记引用内容的来源或者解释；

<blockquote>：对长文本的引用，浏览器对该标签的解析是缩进样式，不会自动加双引号；

<br />：折行，一般写带斜线的这种格式比较规范；

 ：空格；

<hr />：分割线；

<address>：联系地址，斜体表示；

<div>：相当于一个容器，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中。

table

<table> 整个表格

<caption> 显示在表格上方的标题

<thead> 表头

<tbody> 表内容

<tfoot> footer

<tr> 表格的一行

<th> 表头单元格

<td> 标准单元格

典型嵌套结构：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<table summary="表格简介文本">
  <caption>一个标题</caption>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

a

href属性的mailto链接，用于发送电子邮件。参数以&符号隔开，类似GET请求参数。

`1`	`<a href="mailto:[email protected]?subject=主题"`

参数含义如下：

cc 抄送
bcc 密送
subject 主题
body 内容

img

说两个属性：

alt 指定图像不可见时的描述性文本，当图像不可见指加载不成功等；
title 指定图像可见时的描述性文本；

form

属性：

method 请求方法
action 请求URL

input

单标签。

属性：

type 类型，text 普通文本，password 密码文本，radio 单选框，checkbox 复选框，submit 提交按钮，reset 重置按钮；
name 表单提交时该输入框内容的变量名；
value 输入框的默认值，为按钮时是按钮上显示的文字；
checked 单选框和复选框独有，值为"checked"时，表示默认勾选。

注意：

同一组单选按钮 name 属性取值要一致。

textarea

文本输入域。

属性：

cols 多行输入域的列数；
rows 多行输入域的行数；

在<textarea></textarea>标签之间可以输入默认值。

select

<select> 下拉列表

multiple 设置为"multipule"时，下拉列表可以多选。

<option> 下拉列表中的选项：

value 表单提交数据；
selected 设置值为"selected"时，该选项被默认选中。

label

属性：

for 与input控件的ID属性相同；

CSS

CSS集成方式

内联css

在开始标签中使用 style 属性定义，写在双引号中，多条 css 样式用分号隔开。

1
<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式css

把css样式代码写在 <style> 标签中，<style> 标签定义在 <head> 标签中。

1
2
3
4
5
<style type="text/css">
span{
color:red;
}
</style>

文件css

1
<link href="base.css" rel="stylesheet" type="text/css" />

1
2
3
4
5
6
/* 注释语句 */
选择符 {
    属性:值; /* 注释语句 */
    属性:值;
    ...
}

优先级

层叠

层叠时，遵循**就近原则（离被设置元素越近优先级别越高）。**一般来说，相同权值的情况下：内联式 > 嵌入式 > 外部式。

权值

权值规律：

标签的权值为 1，类选择符的权值为 10，ID 选择符的权值最高为 100。继承也有权值但很低，有的文献提出它只有 0.1，所以可以理解为继承的权值最低。

重要性

使用 !important 设置某些样式拥有最高权值。

1
p {color:red!important;}

浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式 < important 设置的样式

CSS 选择器

:hover 伪类选择符，控制鼠标滑过时的样式。

CSS 的某些样式具有继承性，允许样式不仅应用于某个特定 html 标签元素，而且应用于其后代。

文字排版和段落排版

文字排版

font-family 字体；
font-size 字号；
color 颜色；
font-weight 字重，bold 粗体；
font-style 字范儿😂， italic 斜体;
text-decoration 装饰， underline 下划线，line-through 删除线；

段落排版

em 是文字大小。

text-indent 缩进
line-height 行高
letter-spacing 中文的文字间隔和英文的字母间隔；
word-spacing 英文的单词间隔，对中文无效；
text-align 为块状元素中的文本图片等设置对齐方式，center 居中，left 居左，right 居右；

元素分类

块状元素（block）

包括 <div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>。

特点：

每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器宽度的100%，除非设定一个宽度。

可以通过设置 display:block 将元素显示为块级元素，会具有块状元素的特点。例如：

1
a {display:block};

内联元素（inline）

包括 <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>。

特点：

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

可以通过设置 display:inline 将元素显示为内联元素，会具有内联元素的特点。例如：

1
p {display:inline};

内联块状元素

包括 <img>、<input>。

特点：

和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。

可以通过设置 display:inline-block 将元素设置为内联块状元素；

1
a {display:inline-block}

盒模型

盒模型由内到外为内容、padding、border、margin。

元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

内容

width 宽度；
height 高度；

padding

padding 设定四个方向上 padding 的距离；
padding-top 设定上填充；
padding-bottom 设定下填充；
padding-left 设定左填充；
padding-right 设定右填充。

设定属性值：

4个属性值，分别为上、右、下、左（顺时针方向）；
2个属性值，分别为上下、左右；
1个属性值，所有方向。

border

样式

border-width 边框宽度，可以设置为 thin、medium、thick 或者像素值；
border-style 边框样式，dashed 虚线，dotted 点线，solid 实线；
border-color 边框颜色，

合写样式，格式为<width> <style> <color>：

border 设定四个方向上 border 的属性；
border-top 设定上边框；
border-bottom 设定下边框；
border-left 设定左边框；
border-right 设定右边框。

margin

margin 设定四个方向上 margin 的距离；
margin-top 设定上边界；
margin-bottom 设定下边界；
margin-left 设定左边界；
margin-right 设定右边界。

多值的情况同padding。

CSS布局模型

在网页中，元素有三种布局模型：

流动模型（Flow）；
浮动模型（Float）；
层模型（Layer）；

Flow模型

默认的网页布局模式。

块状元素：默认情况下，块状元素的宽度为 100%，因此块状元素在所处的包含元素内自上而下按顺序垂直延伸分布；
内联元素：在所处的包含元素内从左到右水平分布显示。

Float模型

使块状元素并排显示。脱离了文档流。

通过设置块状元素 float 属性为 left 浮动居左，或者 right 浮动居右。

注意：浮动居右的时候，html中靠上的元素在最右侧。

Layer模型

类似PS中图层，可以对每个图层进行精确定位操作，达到不错的效果。

absolute定位

将元素从文档流中拖出来，相对于其最接近的一个具有定位属性的父包含块进行绝对定位；如果不存在这样的包含块，则相对于body元素（浏览器窗口）进行定位。

通过设置 position: absolute 和 left、right、top、bottom属性实现

1
2
3
4
5
6
7
8
div {
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}

relative定位

在正常文档流中，相对于以前的位置移动，偏移前的位置保留不动。

与 absolute 不同的是：

在正常文档流中，偏移位置基于文档流中的位置，不需要具有定位属性的父包含块；
偏移后，其他元素仍按照偏移前的位置进行渲染；

通过设置 position: relative 和 left、right、top、bottom属性实现

1
2
3
4
5
6
7
8
#div1 {
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

fixed定位

将元素从文档流中拖出，相对于视图（网页窗口）进行定位，使元素始终处于浏览器窗口内视图的某个位置。

通过设置 position: fixed 和 left、right、top、bottom属性实现

1
2
3
4
5
6
7
8
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

Relative与Absolute组合使用

在不设置偏移量的情况下，relative 定位的元素与正常元素没有区别。

absolute 定位需要具有定位属性的父包含块，可以将父包含块(前辈元素)设置为 relative 定位。

css缩写

颜色值缩写

设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

1
2
3
p{color: #336699;}

p{color: #369;}

字体缩写

使用格式：

1
font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>

注意：

至少需要指定 font-size 和 font-family 属性；
font-size 和 line-height 中间加入 “/” 斜杠；

举例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋体",sans-serif;
}

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

单位和值

颜色值

单词颜色；
RGB颜色，数值或百分比；
十六进制颜色；

1
2
3
4
p{color:red;}
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
p{color:#00ffff;}

长度值

以下都是相对单位；

px，像素；
em，是本元素给定字体的 font-size 值。如果 font-size = 14px, 那么 1em = 14px；
百分比，同样以 font-size 为基础；

注意，假如设置 font-size 单位为 em，则计算标准以元素的父元素的 font-size 为基础。

1
2
3
4
5
p {
    font-size: 12px;
    text-indent: 2em;
    line-height: 130%;
}

水平居中实现

行内元素

如果被设置的元素为文本、图片等行内元素时，通过设置父元素属性 text-align:center 实现。

例如：

1
2
3
<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

1
2
3
.txtCenter {
    text-align: center;
}

定宽块状元素

首先元素要是定宽的（table 或者设置了 width 属性），然后通过设置左右 margin 值为“auto”实现。

1
2
3
<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

1
2
3
4
div {
    width: 200px;
    margin: 20px auto;
}

但这并不能使文本在 div 中居中显示，只是使 div 居中了。要使文本居中，还要设置 text-align:center。

不定宽块状元素

有三种方法

加入 table 标签；
设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置；
设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的。

使用 table 标签

利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

1
2
3
4
table{
    border:1px solid;
    margin:0 auto;
}

设置为行内元素

改变元素的 display 类型为行内元素，然后对父级元素设置 text-align:center 来实现居中效果。

1
2
3
4
5
6
7
8
9
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}

/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}

.container{
    text-align:center;
}

设置浮动和相对定位属性

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

1
2
3
4
5
6
7
8
9
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
.container{
    float:left;
    position:relative;
    left:50%;
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:-50%;
}

.container li{
    float:left;
    display:inline;
    margin-right:8px;
}

垂直居中实现

父元素高度确定的单行文本

单行文本通过设置父元素的 height 和 line-height 高度相同来垂直居中。原理是：line-height 与 font-size 之差为行间距，行间距分为两半分别加到文本行内容的顶部和底部。

缺点：当文字内容的长度大于块状元素的宽时，就有内容脱离了块。

1
2
3
<div class="container">
    hi,imooc!
</div>

1
2
3
4
5
.container{
    height:100px;
    line-height:100px;
    background:#999;
}

父元素高度确定的多行文本

使用 table

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对 inline-block 类型的子元素都有用。td 标签默认情况下设置了 vertical-align 为 middle，不需要显式设置。

1
2
3
4
5
6
7
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

1
2
3
4
table td{
    height:500px;
    background:#ccc;
}

使用 table-cell

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display:table-cell（设置为表格单元显示），激活 vertical-align 属性。

1
2
3
4
5
6
7
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

1
2
3
4
5
6
.container{
    height: 300px;
    background: #ccc;
    display: table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align: middle; /*IE8以上及Chrome、Firefox*/
}

隐性改变display类型

给元素（display:none 元素除外）设置 position:absolute 或 float 属性时，元素的display类型会自动变为 inline-block。即可以设置元素的 width 和 height，且默认宽度不占满父元素。

1
2
3
<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>

1
2
3
4
5
.container a{
    position: absolute;
    width: 200px;
    background: #ccc;
}

目录