一、CSS简介

CSS为html添加样式，eg:字体大小，颜色，，
下面我通过几个实例来初步了解CSS的强大。

列一：改变一段文字中多处文字样式，设为统一样式，

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS样式的优势</title>
<style type="text/css">
<!--span节点包的都回变-->
span{color:blue;
}
</style>
</head>
<body><p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
<style type="text/css">
p{font-size:20px;/*设置文字字号*/color:red;/*设置文字颜色*/font-weight:bold;/*设置字体加粗*/
}
</style>
</head>
<body>
<p>哈哈哈</p>
</body>
</html>

二、CSS的写法有几种形式

1、语法：

选择符就是选择器

p{font-size:12px;/*这里写注释*/color:red;
}

2、写法有3种

内联式（写标签里）

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

嵌入式（写标本文件中）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<!--嵌入式写在style标签之间-->
<style type="text/css">
span{color:blue;
}
</style>
</head>
<body><p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

外部式

写在单独文件中，，文件以.css为扩展名

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<!--使用link将外部css嵌入本文件“rel="stylesheet" type="text/css"”是固定写法，-->
<!--位于head之间-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body><p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

style.css文件

span{color:red;font-size:20px;
}

优先级：
相同权值的情况下
内联式 > 嵌入式 > 外部式，
如给一节点同时使用3种方式的的css，就近原则显示哈

嵌入式>外部式有一个前提：
：嵌入式css样式的位置一定在外部式的后面
就是说style标签要在link标签后面

三、CSS的选择器

看了上节你可能知道选择器了（注意看上节的图），
选择器指明{}中样式的作用对象，

选择器名称	特点	备注
ID选择器	与类选择器相似，`#setGeen{color : green;}` setGeen是为标签设置的id名称	在html文档中ID选择器只能使用一次，而类选择器可用多次
类选择器	`.stress{color:red;}` 类前面要加入一个英文圆点	见备注1
标签选择器	选择器是标签字符的，eg:`h1 {color : red; }` 为标签h1的元素添加红色样式
子选择器	`.food>li{border:1px solid red;}` 用于选择指定标签元素的第一代子元素，	这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。子选择器仅是指它的直接后代，作用于子元素的第一代后代
包含(后代)选择器	`.first span{color:red;}` 注意空格哈	用于指定标签元素下所有子后代元素
通用选择器	`* {color:red;}`	匹配html中所有标签元素
伪类选择符	允许给html不存在的标签（标签的某种状态）设置样式eg:`a:hover{color:red;}`	为 a 标签鼠标滑过的状态设置字体颜色变红,`:hover`可放在任意标签上但他们兼容性不是很好，所以常见的就是`a:hover`组合
分组选择符	`h1,span{color:red;}`h1、span标签同时设置字体颜色为红色，多个标签元素设置同一个样式	同等于`h1{color:red;} span{color:red;}`

备注1：
可以使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器不可以

.stress{color:red;
}
.bigsize{font-size:25px;
}
<p>到了<span class="stress bigsize">我叫</span>大锅饭</p>

类选择器使用步骤：

1、使用合适的标签把要修饰的内容标记起来

<span>我是大锅饭</span>

2、未标签设置类名

<span class="stress">我是大锅饭</span>

3、设置类选择器样式

.stress{color:red;}/*类前面要加入一个英文圆点*/

四、CSS特性

继承性

允许样式不仅应用于某个特定html标签元素，而且应用于其后代
如下此设置应用于P标签包含的所有，即不仅应用于p标签，还应用于子元素span标签

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

有些样式不具有继承性：

border:1px solid red;
边框不给子元素设置了哈。你懂的

特殊性

同一元素设置不同css样式代码，元素根据权值来决定用哪个CSS样式。

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

如上p和.first 都匹配到了P这个标签上显示绿色

权值规则

标签的权值为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*/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

层叠

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

五、盒子模型

在css中html标签分为，

块状元素A，
内联元素(行内元素B)，
内联块状元素C

<img>、<input>

1、块状元素

块状元素可通过代码div{display:inline}将元素设置为内联元素
如:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

特点：

独占一行
可设置高宽行高，顶和底边距
宽度默认，充满父容器

2、内联元素

可变为块状元素方法：a{display:block;}

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

特点

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

3、内联块状元素

display:inline-block就是将元素设置为内联块状元素

特点

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

六、盒子模型的宽度和高度

比如

//css代码：
div{width:200px;padding:20px;border:1px solid red;margin:10px;
}//html代码：
<body><div>文本内容</div>
</body>

七、常用属性

1、设置字体

不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，

字体样式	代码（只是列子而已）	备注
宋体	`body{font-family:"宋体";}`
微软雅黑（兼容性不好）	`body{font-family:"Microsoft Yahei";}`
微软雅黑（兼容性好）	`body{font-family:"微软雅黑";}`	用户本地一般都是默认安装的
粗体	`p span{font-weight:bold;}`
斜体	`p a{font-style:italic;}`
下划线	`p a{text-decoration:underline;}`
删除线	`.oldPrice{text-decoration:line-through;}`
缩进	`p{text-indent:2em;}` 2em的意思就是文字的2倍大小。
行间距（行高）	`p{line-height:1.5em;}`	行间距为1.5倍
中文字间距、字母间距	`h1 {letter-spacing:50px;}`	这个样式使用在英文单词时，是设置字母与字母之间的间距。
英文单词之间间距	`h1 { word-spacing:50px;}`
对齐	`h1{text-align:center;}` 居中	left左，right右

2、字号、颜色

字号、颜色	代码（只是列子而已）	备注
字号	`body{font-size:12px;color:#666}`
灰色	`#666`

3、边框属性色

给一个块级元素加个边框可这样

p{border:2px dotted #ccc;}

给P标签加一个宽2px点虚线，颜色为灰色的边框
注意：

div{border-bottom:1px solid red;}

就是只设置下边框。

属性样式	代码（只是列子而已）	备注
边框	`div{border:2px solid red;}` ，注意：dashed（虚线），dotted（点线），solid（实线）	备注1
边框颜色	border-color），可设置十六进制，border-color:#888;//前面的井号不要忘掉。
边框宽度	border-width ，width可替换为：thin ， medium ， thick（但不是很常用），最常还是用象素（px）

备注1
他是缩写形式，展开为(表示设置边框粗细为2px，样式为实心的颜色为红色的边框)

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

4、填充padding

元素内容和边框之间可设置距离的，称为填充可分为上下左右（顺时针）

div{padding:20px 10px 15px 30px;}
//分开写：
div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px;
}
//每个方向相同可这样：
div{padding:10px;}
//如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}

样式	代码（只是列子而已）	备注

5、边界margin

用法参见padding

八、布局模型

布局模型分类：

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

流动模型（Flow）

特点

是默认的网页布局模式
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为默认块状元素的宽度都为100%，实际上，块状元素都会以行的形式占据位置，
在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

浮动模型（Float）

块状元素默认独占一行，设置元素浮动可让两个块状元素并排显示。

列子

div{width:200px;height:200px;border:2px red solid;float:left;//两个div一行显示并左对齐//right;--->两个div一行显示并右对齐
}
<div id="div1"></div>
<div id="div2"></div>//////////////////////////////////////////
div{width:200px;height:200px;border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
.......
//div1左，div2右对齐

层模型（Layer）

如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

定位形式

1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

绝对定位(position: absolute)

使元素相对最近父元素定位，没有父元素就是body（浏览器窗口）

div{width:200px;height:200px;border:2px red solid;position:absolute;left:100px;top:50px;
}
<div id="div1"></div>
//实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

相对定位(position: relative)

#div1{width:200px;height:200px;border:2px red solid;position:relative;left:100px;top:50px;//通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置}<div id="div1"></div>
//实现相对于以前位置向下移动50px，向右移动100px;

固定定位(position: fixed)

但它的相对移动的坐标是视图（屏幕内的网页窗口）本身

//实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{width:200px;height:200px;border:2px red solid;position:fixed;left:100px;top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

Relative与Absolute组合使用

现在我们要实现

参考代码：

#box3{width:200px;height:200px;position:relative;
}
#box4{width:99%;position:absolute;    bottom:0;left:0; /*这条css样式可以省略*/
}

也就是说现在我们要相对于另外一个元素来布局，而不是相对于窗口

组合规则

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

CSS基础————千本樱滑落的瞬间相关推荐

CSS基础必备知识点01
CSS基础必备知识点 CSS(Cascading Style Sheme), 层叠样式表或级联样式表,简称样式表.它的作用是给HTML网页设置外观或者样式.其中外观或者样式指的是:HTML网页中的文字 ...
前端基础：html基础(css基础和JavaScript基础)/01/B/S网络结构，html文件结构，html标签格式，lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
Html+CSS基础知识（一）
1 前端常识 1.1 HTML的作用定义网页结构: 1.2 CSS的作用修饰网页结构和样式: 1.3 javascript 定义网页之间的交互 2 HTML基础 2.1 什么是HTML HTML是 ...
CSS基础（4）- 层叠
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录层叠 1. 比较重要性 2. 比较特殊性 3. 比较源次序应用参考资料层叠声明冲突 ...
html + css 基础总结
html + css 基础总结文章目录 html + css 基础总结模板介绍 Demo01-写一篇博客 Demo02-超链接和列表 Demo03-图片使用 Demo04-知识补充 Demo05- ...
CSS基础之伪类和伪元素
伪类伪类是特殊的选择器,用于选择特定状态的元素.例如:鼠标悬停在元素上.第一个元素等.它表现的就像是向HTML元素添加了一个类一样.可以帮你减少在HTML中显示指定类,使代码更灵活,更好维护. 列 ...
html与css项目,项目六HTML与CSS基础.doc
项目六HTML与CSS基础.doc 项目六: HTML与CSS基础课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...
CSS基础_Day04
CSS基础一.CSS继承 1.给 HTML 的 body 元素添加样式每一个 HTML 页面都有一个 body 元素. 我们可以通过设置 background-color 的属性值为黑色,来证明 ...
CSS基础_Day03
CSS基础一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...

CSS基础————千本樱滑落的瞬间