HTML+CSS基础

认识标签

//使用<a>标签，链接到另一个页面
<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
//在新窗口打开
<a href="目标网址" target="_blank">click here!</a>
//<img>标签，插入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

与浏览者交互，表单标签…

//使用表单标签，与用户交互
<form   method="传送方式"   action="服务器文件">
//文本域，支持多行文本输入
<textarea  rows="行数" cols="列数">文本</textarea>
//单选框、复选框,同一组的单选按钮，name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
//下拉列表框
<select>标签
//多选下拉列表
<select multiple="multiple">
//提交按钮，提交数据
<input   type="submit"   value="提交">
//使用重置按钮，重置表单信息
<input type="reset" value="重置">
//form表单中的label标签
<label for="控件id名称">

示例

表单标签，用户交互，input相当于textField

文本域，相当于textView

单选框

下拉列表框选择

下拉列表框进行多选

提交和重置信息

label标签示例

认识CSS样式

p{
   font-size:20px;/*设置文字字号*/
   color:red;/*设置文字颜色*/
   font-weight:bold;/*设置字体加粗*/
}
//外联式css
<link href="style.css" rel="stylesheet" type="text/css" />
优先级 内联式 > 嵌入式 > 外部式
//外联式写在嵌入式前面
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
//标签选择器
h1{
    font-weight:normal;
    color:red;
}
//类选择器
.类选器名称{css样式代码;}
//ID选择器
#stress{
    color:red;
}
//子选择器
.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
//通用选择器
* {color:red;}
//伪类选择符
//因兼容性问题，常用的只有鼠标划过的状态
a:hover{
    color:red;
    font-size:20px;
}
//分组选择符
.first,span{
    color:red;
}
等同于
.first{color:red;}
span{color:red;}

CSS的继承、层叠和特殊性

//继承。如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
但是有些css样式是不具有继承属性的，如：
p{border:1px solid red;}

特殊性

p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
显示green
权值规则
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

1
2
3

p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

重要性

1
2
3

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

CSS格式化排版

文字排版-字体

1
2
3

body{font-family:"Microsoft Yahei";}
or
body{font-family:"Microsoft Yahei";}

注意：第一种方法比第二种方法兼容性更好一些。

文字排版–字号、颜色

1	body{font-size:12px;color:#666}

文字排版–粗体、斜体

//粗体
p span{font-weight:bold;}
//斜体
p a{font-style:italic;}

文字排版–下划线、删除线

//下划线
p a{text-decoration:underline;}
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
//删除线
 .oldPrice{text-decoration:line-through;}
<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p>

段落排版–缩进

1
2

p{text-indent:2em;}
<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

注意：2em的意思就是文字的2倍大小。

段落排版–行间距（行高）

1
2

p{line-height:1.5em;}
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

段落排版–中文字间距、字母间距

h1{
    letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

段落排版–对齐

h1{
    text-align:left;
}
<h1>了不起的盖茨比</h1>

CSS盒模型

元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：

1	div,p,h1...h6,ol,ul,dl,table,address,blockquote,form

常用的内联元素有：

1	a,span,br,i,em,strong,label,q,var,cite,code

常用的**内联块状元素**有：

1	img, input

元素分类–块级元素

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

1	a{display:block;}

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

元素分类–内联元素

如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

 div{
     display:inline;
 }
......
<div>我要变成内联元素</div>

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

元素分类–内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒模型–边框

边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

1
2
3

div{
    border:2px  solid  red;
}

上面是 border 代码的缩写形式，可以分开写：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

给单独的方向上设置边框

border-top:1px solid red;
border-right:1px solid red; 
border-bottom:1px solid red;
border-left:1px solid red;

高度和宽度

css代码：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

html代码：

1
2
3

<body>
   <div>文本内容</div>
</body>

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：

盒模型–填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
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）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。

CSS布局模型

介绍

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

流动模型

流动布局模型具有两个典型的特征：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型
如下代码可以实现两个 div 元素一行显示。
1
2
3
4
5
6
7
8
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>

也可以同时设置两个元素右浮动也可以实现一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

设置两个元素一左一右可以实现一行显示

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

层模型

层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

绝对定位

设置position:absolute将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

相对定位

设置position:relative，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>

效果图：

固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    top:20px;
    right:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>

如图：

Relative与Absolute组合使用

遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：

1
2
3

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{
   width:200px;
   height:200px;
   position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
   position:absolute;
   top:20px;
   left:30px;         
}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

CSS代码缩写

盒模型代码简写

盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同，如下面代码：
margin:10px 10px 10px 10px;
可缩写为：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：
margin:10px 20px 10px 20px;
可缩写为：
margin:10px 20px;
3、如果left和right的值相同，如下面代码：
margin:10px 20px 30px 20px;
可缩写为：
margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。

颜色值缩写

当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
例子1：
p{color:#000000;}
可以缩写为：
p{color: #000;}
例子2：
p{color: #336699;}
可以缩写为：
p{color: #369;}

字体缩写

初始的：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

缩写：

1
2
3

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

注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

1
2
3

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

只是有字号、行间距、中文字体、英文字体设置。

单位和值

长度值

目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:

1 2	p{font-size:14px} span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 1.3 = 15.6px）。

CSS样式设置小技巧

水平居中设置

行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：

1
2
3

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

css代码：

<style>
  .txtCenter{
    text-align:center;
  }
</style>

块状元素

1.定宽块状元素，即块状元素的宽度width为固定值。

可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：

1
2
3

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

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>

也可以写成：

1 2	margin-left:auto; margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

2.不定宽块状元素

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

加入 table标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括<tbody>、<tr>、<td>)。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
html代码：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

css代码：

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

效果：

设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

html代码：

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

css代码：

<style>
.container{
    text-align:center;
}
/* 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;
}
</style>

效果：

设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

垂直居中

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

设置父元素的 height 和 line-height 高度一致(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

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

插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
效果：

认识标签

与浏览者交互，表单标签…

示例

认识CSS样式

CSS的继承、层叠和特殊性

特殊性

层叠

重要性

CSS格式化排版

文字排版-字体

文字排版–字号、颜色

文字排版–粗体、斜体

文字排版–下划线、删除线

段落排版–缩进

段落排版–行间距（行高）

段落排版–中文字间距、字母间距

段落排版–对齐

CSS盒模型

元素分类

元素分类–块级元素

元素分类–内联元素

元素分类–内联块状元素

盒模型–边框

边框

给单独的方向上设置边框

高度和宽度

盒模型–填充

盒模型–边界

CSS布局模型

介绍

流动模型

浮动模型

层模型

绝对定位

相对定位

固定定位

Relative与Absolute组合使用

CSS代码缩写

盒模型代码简写

颜色值缩写

字体缩写

单位和值

长度值

CSS样式设置小技巧

水平居中设置

行内元素

块状元素

1.定宽块状元素，即块状元素的宽度width为固定值。

2.不定宽块状元素

加入 table标签

设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

垂直居中

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

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

设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的