HTML和CSS基础教程-慕课网

HTML

<em>:表示强调,斜体表示;

<strong>:表示更强烈的强调,粗体表示;

<span>:用于给文本设置单独的样式,没有语义;

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

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

<br />:折行,一般写带斜线的这种格式比较规范;

&nbsp;:空格;

<hr />:分割线;

<address>:联系地址,斜体表示;

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

table

<table> 整个表格

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

<thead> 表头

<tbody> 表内容

<tfoot> footer

<tr> 表格的一行

<th> 表头单元格

<td> 标准单元格

典型嵌套结构:

<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请求参数。

<a href="mailto:yy@imooc.com?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 样式用分号隔开。

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

嵌入式css

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

<style type="text/css">
span{
color:red;
}
</style>

文件css

<link href="base.css" rel="stylesheet" type="text/css" />
/* 注释语句 */
选择符 {
    属性:值; /* 注释语句 */
    属性:值;
    ...
}

优先级

层叠

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

权值

权值规律:

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

重要性

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

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>

特点

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

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

a {display:block};

内联元素(inline)

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

特点

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

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

p {display:inline};

内联块状元素

包括 <img><input>

特点

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

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

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 边框宽度,可以设置为 thinmediumthick 或者像素值;
  • 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布局模型

在网页中,元素有三种布局模型:

  1. 流动模型(Flow);
  2. 浮动模型(Float);
  3. 层模型(Layer);

Flow模型

默认的网页布局模式。

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

Float模型

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

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

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

Layer模型

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

absolute定位

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

通过设置 position: absoluteleftrighttopbottom属性实现

div {
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}

relative定位

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

与 absolute 不同的是:

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

通过设置 position: relativeleftrighttopbottom属性实现

#div1 {
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

fixed定位

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

通过设置 position: fixedleftrighttopbottom属性实现

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

Relative与Absolute组合使用

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

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

css缩写

颜色值缩写

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

p{color: #336699;}

p{color: #369;}

字体缩写

使用格式:

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

注意:

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

举例:

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;
}

单位和值

颜色值

  1. 单词颜色;
  2. RGB颜色,数值或百分比;
  3. 十六进制颜色;
p{color:red;}
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
p{color:#00ffff;}

长度值

以下都是相对单位;

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

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

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

水平居中实现

行内元素

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

例如:

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
.txtCenter {
    text-align: center;
}

定宽块状元素

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

<body>
  <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>
</body>
div {
    width: 200px;
    margin: 20px auto;
}

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

不定宽块状元素

有三种方法

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

使用 table 标签

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

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
table{
    border:1px solid;
    margin:0 auto;
}

设置为行内元素

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

<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>
/* 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:relativeleft:50%,子元素设置 position:relativeleft: -50% 来实现水平居中。

<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>
.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-heightfont-size 之差为行间距,行间距分为两半分别加到文本行内容的顶部和底部。

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

<div class="container">
    hi,imooc!
</div>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}

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

使用 table

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

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
table td{
    height:500px;
    background:#ccc;
}

使用 table-cell

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

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
.container{
    height: 300px;
    background: #ccc;
    display: table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align: middle; /*IE8以上及Chrome、Firefox*/
}

隐性改变display类型

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

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>
.container a{
    position: absolute;
    width: 200px;
    background: #ccc;
}
目录