CSS
文章目录
4.CSS
4.1.css概述
CSS 指层叠样式表 (Cascading Style Sheets)
CSS定义指定如何显示 HTML 元素
样式通常存储在样式表中
CSS是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
4.2.CSS基础语法
CSS 语法由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; … declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构：
4.3.CSS元素选择器
4.3.1.元素选择器
最常见的 CSS 选择器是元素选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
html { color: black; }
h1 { color: blue; }
h2 { color: silver; }
</style>
</head>
<body>
<h1>这是 1</h1>
<h2>这是 2</h2>
<p>这是一段普通的段落。</p>
</body>
</html>
4.3.2.类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
语法
要想使用类选择器，必须给元素指定一个class属性，如下代码，
给h1、h2、p指定class值为text
在样式中使用，语法为【.class名称】
代码如下
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.text { color: red; }
</style>
</head>
<body>
<h1 class="text">这是 1</h1>
<h2 class="text">这是 2</h2>
<p class="text">这是一段普通的段落。</p>
</body>
</html>
元素选择器结合类选择器使用
类选择器可以结合元素选择器来使用。
例如，您可能希望只有段落显示为红色文本，可以使用元素和类选择器结合大小效果
p.text{ color: darkblue;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.text解释为：“其 class 属性值为 text的所有段落”。
CSS 多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。
例如，如果希望将一个特定的元素同时标记为a和b，那就可以写成：
<p class="a b">我是段落</p>
使用两个选择器，设置class 为 a的所有元素都是粗体，而 class 为 b 的所有元素为斜体，class 中同时包含 a 和 b 的所有元素还有一个银色的背景 。
.a {font-weight:bold;}
.b {font-style:italic;}
.a.b {background:silver;}
4.3.3.ID选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式。
在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。
语法
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。如
#intro {font-weight:bold;}
代码示例
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#intro {font-weight:bold;}
</style>
</head>
<body>
<p id="intro">This is a paragraph of introduction.</p>
</body>
</html>
4.3.4.属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
示例一：如果你希望把输入框文本类型为text的背景颜色设置为红色，类型为password设置为蓝色
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type='text'] { background-color: red; }
input[type='password'] { background-color: blue; }
</style>
</head>
<body>
用户名：<input type="text" name="username" /><br />
密码： <input type="password" name="password" />
</body>
</html>
示例二：如果希望超链接文本显示为红色
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
a[href] {color:red;}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点击访问百度</a>
<a href="http://www.sina.com.cn">点击访问新浪</a>
</body>
</html>
4.3.5.后代选择器
后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
如果希望只对 h1 元素中的 em 元素应用样式，可以这样写：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1 em {
color: red;
}
</style>
</head>
<body>
<h1>H1里面的元素 <em>EM里面的元素</em></h1>
<p>P里面的元素 <em>EM里面的元素</em></p>
</body>
</html>
语法解释：
两个元素之间使用空格隔开
上面的案例，可以解释为：包含 em 的所有 h1 会把以下样式应用到该 em
4.3.6.子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，那么可以用子元素选择器（Child selector）。
例如，如果希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1>strong {
color: red;
}
</style>
</head>
<body>
<h1>H1里面的内容 <strong>strong里面的内容</strong> <strong>strong里面的内容</strong></h1>
<h1>H1里面的内容<em>em里面的内容 <strong>strong里面的内容</strong></em></h1>
</body>
</html>
4.3.7.选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {color:blue;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<h5>这是 heading 5</h5>
<h6>这是 heading 6</h6>
</body>
</html>
4.4.CSS导入方式
4.4.1.嵌入式
嵌入式是将样式写在<head></head>内的<style></style>标签中。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<!--嵌入式导入-->
<style type="text/css">
html { color: black; }
</style>
</head>
<body>
<h1>这是 1</h1>
</body>
</html>
4.4.2.行内式
行内式是在标记的style属性中设定CSS样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
</head>
<body>
<h1 style="font-size: 20px;color: blue;">这是 1</h1>
</body>
</html>
4.4.3.链接式
链接式也是将一个.css文件引入到HTML文件中，链接式使用HTML规则引入外部CSS文件，它在网页的标签对中使用标记来引入外部样式表文件。
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<h1 >这是 1</h1>
</body>
</html>
css代码
h1{
font-size: 30px;
color: pink;
}
4.5.CSS浮动
4.5.1.CSS 浮动介绍
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动介绍
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
4.5.2.float属性
float定义和用法
float 属性定义元素在哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
注意：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
float属性值
示例一：使图像浮动于一个段落的右侧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img{ float: right;}
</style>
</head>
<body>
<p>我是段落</p>
<img src="http://pic11.nipic.com/20101208/6225195_205851005067_2.jpg" height="250px" width="300px" />
<p style="font-size: 100px;">我是标题文字1,我是标题文字1,我是标题文字1,我是标题文字1,我是标题文字1</p>
</body>
</html>
示例二：创建水平菜单
帮助链接：http://www.w3school.com.cn/cssref/css_units.asp
截图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
ul {
/*左浮动*/
float: left;
width: 100%;
padding: 0;
margin: 0;
/*设置为无标记*/
list-style-type: none;
}
a {
/*左浮动*/
float: left;
width: 100px;
/*标准文本,无修饰*/
text-decoration: none;
/*字体颜色*/
color: white;
padding: 0.2em 0.6em;
/*背景颜色*/
background-color: cadetblue;
/*规定右边框的宽度。*/
border-right: 3px solid white;
}
a:hover {
background-color: #C0C0C0
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="https://www.1688.com">阿里</a></li>
<li><a href="http://www.qq.com">腾讯</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。
ul 元素的宽度是 100%，列表中的每个超链接的宽度是 100px。
</p>
</body>
</html>
4.5.3.clear 属性
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear属性值
示例代码
<html>
<head>
<style type="text/css">
img {
float: left;
clear: both;
}
</style>
</head>
<body>
<img src="http://pic11.nipic.com/20101208/6225195_205851005067_2.jpg" />
<img src="http://pic11.nipic.com/20101208/6225195_205851005067_2.jpg" />
</body>
</html>
5.案例
<html>
<head>
<meta charset="utf-8" />
<title>
测试导航
</title>
<link rel="stylesheet" href="main.css" />
</style>
</head>
<body>
<!-- 顶部开始 -->
<div id="top-nav">
<div class="fl">
<a href="#" class="item">首页</a>
</div>
<div class="fr">
<a href="#" class="item">我的订单</a>
<a href="#" class="item">收藏夹</a>
<a href="#" class="item">登录</a>
<a href="#" class="item">注册</a>
<a href="#" class="item">客户服务</a>
</div>
</div>
<!-- 顶部结束 -->
<!-- 搜索开始 -->
<div id="search">
</div>
<!-- 导航开始 -->
<div id="menu">
</div>
<!-- 导航结束 -->
<div id="flash_box">
<!-- 轮播图大区域开始 -->
<div id="flash_box_left">
</div>
<!-- 轮播图大区域结束 -->
<div id="flash_box_middle"></div>
<!-- 右边开始 -->
<div id="flash_box_right1"></div>
<div id="flash_box_right2"></div>
<div id="flash_box_right3"></div>
<!-- 右边结束 -->
</div>
<!-- 广告开始 -->
<div id="ad">
<div class="ad1"></div>
<div class="ad2"></div>
<div class="ad3"></div>
<div class="ad4"></div>
</div>
<!-- 广告结束 -->
<!-- 脚部开始 -->
<div id="footer"></div>
<!-- 脚部结束 -->
</body>
</html>
* {
padding: 0px;
margin: 0px;
}
body {
text-align: center;
}
a {
text-decoration: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
/*首部*/
#top-nav {
width: 990px;
height: 31px;
background: #F7F7F7;
margin: 0 auto;
}
.item {
display: inline-block;
color: #666;
padding: 6px 20px;
}
#search {
width: 990px;
height: 98px;
margin: 0px auto;
background-color: blue;
}
/*首部结束*/
/*导航*/
#menu {
width: 990px;
height: 40px;
margin: 0px auto;
background-color: #E64346;
margin-top: 10px;
}
/*导航结束*/
/*左边详细导航， 轮播图， 生活导航*/
#flash_box {
width: 990px;
height: 500px;
/*border: 2px red solid;*/
margin: 0 auto;
position: relative;
}
#flash_box #flash_box_left {
width: 209px;
height: 500px;
background-color: yellow;
position: absolute;
left: 0px;
top: 0px;
}
#flash_box #flash_box_middle {
width: 570px;
height: 500px;
background-color: green;
position: absolute;
top: 0px;
left: 209px;
}
#flash_box #flash_box_right1 {
width: 211px;
height: 200px;
background-color: red;
position: absolute;
top: 0px;
right: 0px;
}
#flash_box #flash_box_right2 {
width: 210px;
height: 150px;
background-color: yellow;
position: absolute;
top: 200px;
right: 0px;
}
#flash_box #flash_box_right3 {
width: 210px;
height: 150px;
background-color: orange;
position: absolute;
top: 350px;
right: 0px;
}
/*左边详细导航， 轮播图， 生活导航 结束*/
/*广告块*/
#ad {
width: 990px;
margin: 0px auto;
}
#ad .ad1 {
width: 100%;
background-color: #FAB;
height: 500px;
margin: 0px auto;
}
#ad .ad2 {
width: 100%;
background-color: #DAE;
height: 500px;
margin: 0px auto;
}
#ad .ad3 {
width: 100%;
background-color: #ABE;
height: 500px;
margin: 0px auto;
}
#ad .ad4 {
width: 100%;
background-color: #CAE;
height: 500px;
margin: 0px auto;
}
/*广告结束*/
/*脚部*/
#footer {
width: 990px;
height: 150px;
background-color: #CCC;
margin: 0px auto;
}
