css的注释

/*.......*/

直接在html代码中写css

<p style="color: rebeccapurple;font-size: 18px">Hao</p>

css代码写在当前文件中

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

color: red;

font-size: 19px;

}

</style>

</head>

<body>

</body>

css写在外部单独文件中

<link rel="stylesheet" href="base.css" type="text/css">这样导入

id选择器（#）

<style type="text/css">

#set{

color: red;

font-size: 60px;

}

</style>

</head>

<body>

<span id="set">选择</span>

</body>

</html>

class和id选择器的区别

相同点：可以应用于任何元素

不同点：

ID选择器只能在文档中使用一次。
可以使用类选择器列表方法为一个元素同时设置多个样式

子选择器(>)

用于选择指定标签元素下的第一代子元素。

包含后代选择器

.first span{color:red;}，后代中所有的span标签都受影响

>：只影响第一代子元素

空格：所有后代都影响

通用选择器

* {color:red;}选定html中所有标签

伪类选择器

a:hover{color:red;}

一般用于a标签，使鼠标滑过变颜色

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

a:hover{

color: red;

}

</style>

</head>

<body>

<a href="http://www.baidu.com">BaiDu</a>

</body>

</html>

放在BaiDu上，颜色变成红色。

分组选择符

h1,span{color:red;}相当于：

h1{color:red;} span{color:red;}

继承

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

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

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：

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

p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

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

层叠

我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。

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

如下面代码:

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

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

所以前面的css样式优先级就不难理解了：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

重要性

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

如下代码：

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

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

注意：!important要写在分号的前面

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

css一些应用

body{font-family:"宋体";} 字体

body{font-size:12px;color:#666} 字号（大小），颜色

p span{font-weight:bold;} 粗体

p a{font-style:italic;} 斜体

p a{text-decoration:underline;} 下划线

.oldPrice{text-decoration:line-through;} 删除线

p{text-indent:2em;} 缩进

p{line-height:1.5em;} 行间距（行高）

h1{letter-spacing:50px;} 字间距

h1{ text-align:center; }

h1{ text-align:left; }

h1{ text-align:right; }

元素分类

块状元素：

内联元素：

内联元素：

块级元素

特点：

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2. 元素的高度、宽度、行高以及顶和底边距离都可设置。

3. 元素宽度在不设置的情况下，是它本身父容器的100%，除非设置一个宽度。

设置display:block就是将元素显示为块级元素

内联元素

display:inline将元素设置为内联元素

特点：

1. 和其他元素都在一行上

2. 元素的高度、宽度及顶部和底边边距不可设置

3. 元素的宽度就是它包含的文字或图片的宽度，不可改变

内联元素

内联：同时具备内联元素、块状元素的特点，代码display:inline-block。只有<img>/<input>两个标签

特点：

1. 和其他元素都在一行上

2. 元素的高度、宽度、行高及上下边距都可设置

盒子模型

边框：

div{ border:2px solid red; }

相当于：

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

1. border-style（边框样式）常见的有：dashed（虚线）| dotted（点线）| solid（实线）

2. border-width（边框宽度）

3. border-top:1px solid red; 只设置上边框 4. border-right:1px solid red; 只设置右边框 5. border-left:1px solid red; 只设置左边框

6. div{border-bottom:1px solid red;} 只设置下边框

高度和宽度：

css定义的宽（width）和高（height），指的是填充以里的内容范围。

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

填充：

元素内容和边框之间可以设置距离的，称之为“填充”。padding

边界：

margin设置外边距

padding世内边距，margin是内边距

css布局模型

布局模型建立在盒子模型的基础之上。

css包含3种基本的布局模型：flow、layer、float

流动模型（flow）：

流动（flow）是默认的网页布局模式。也就是说网页在，默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。

有如下的特征：

1. 块级元素都会在所处的包含元素自上而下按顺序垂直延伸分布，因为在默认情况下，块状元素的宽度都是100%，实际上，块级元素都会以行的形式占据位置。

2. 在流动模式下，内联元素都会在所处的包含元素内从左到右水平分布。

总结：html默认使用flow，流动，所有的内容都是应用在此之上。

浮动模型（float）：

任何元素在默认情况下是不能浮动的，但可以使用CSS定义浮动，如div、p、table、img等元素都可以被定义为浮动。

层模型：

层模型有三种形式：

1. 绝对定位（position:absolute）

2. 相对定位（position:relative）

3. 固定定位（position:fixed）

绝对定位:

positon:absolute,这条语句的作用是将元素从文档中拖出来，然后使用left、top、right、bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位。如果不包含块，则相对于body元素，即相对于浏览器窗口。

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

相对定位：

positon:relative，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动。

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

<body> <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span></bod<body>

总结：相对定位，就是虽然目标移动了，但是以前的位置还是留着。

固定定位:

position:fixed，与绝对定位（absolute）类似，但是它相对移动的坐标是视图（屏幕内的网页）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条而变化，因此它始终固定于窗口内视图的某个位置。导航条就是用这种固定方法。

Relative与Absolute组合使用

小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

<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定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

<!DOCTYPE HTML>

<html>

<head>

<title>相对参照元素进行定位</title>

div{border:2px red solid;}

#box1{

width:200px;

height:200px;

position:relative;

}

#box2{

position:absolute;

top:20px;

left:30px;

}

/*下面是任务部分*/

#box3{

width:200px;

height:200px;

position:relative;

}

#box4{

width:99%;

position:absolute;

bottom:0;

}

</style>

</head>

<body>

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

</div>

<h1>下面是任务部分</h1>

<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>

</div>

</body>

</html>

盒模型代码简写，css尽量较少代码量

1. margin:10px 10px 10px 10px;

简写：margin:10px;

2. margin:10px 20px 10px 20px;

简写：margin:10px 20px;

3. margin:10px 20px 30px 20px;

简写：margin:10px 20px 30px;

4. p{color:#000000;}

简写：p{color: #000;}

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

简写：

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

颜色值

1. 英文命令颜色

p{color:red;}

2. RGB颜色

p{color:rgb(133,45,200);}

3. 十六进制颜色

p{color:#00ffff;}

长度值（px）

css样式设置小技巧

水平居中

html代码：

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

css代码：

水平居中定宽块状元素

html代码：

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

css代码：

水平居中总结

不定宽度的块状元素有三种方法居中：

1. 加入table标签

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

3. 设置position.relative和left:50%；利用相对定位的方式，将元素向左移50%，达到居中的效果。

html代码：

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

css代码：

第二种：

html代码：

css代码：

垂直居中，保持height和line-height高度一致，height是该元素高度，line-height行间距指在文本中行与行之间的基线间的距离。

如下代码：

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

css代码：

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

（重要方法）方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：

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，所以我们不需要显式地设置了。

除了上面讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html代码：

<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div>

css代码：

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。

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

css代码

CSS再学

class和id选择器的区别

子选择器(>)

包含后代选择器

通用选择器

伪类选择器

分组选择符

继承

特殊性

层叠

重要性

css一些应用

元素分类

块级元素

内联元素

内联元素

盒子模型

css布局模型

盒模型代码简写，css尽量较少代码量

长度值（px）

css样式设置小技巧