问路总比迷路好
1、CSS 概述
CSS（全称 Cascading Style Sheets）层叠式样式表。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记语言。直白一点就是用来美化页面的。
语法规则：
选择器： 浏览器根据"选择器"决定CSS样式影响的HTML元素(标签)。
属性(property)： 是你要改变的样式名，并且每一个属性都有一个值。属性和值被冒号分开，并由花括号包裹，这样就组成了一个完整的样式声明(declaration)，如 p{color:blue}
多个声明： 如果定义不止一个声明，则需要用分号将每个声明分开。然后最后一条声明的末尾可以不加分号。如 p{color:blue;font-size:30px}
CSS注释：
/*注释内容*/
2、引入CSS样式表
CSS有内部式样式表、行内样式表、外部样式表。
2.1、内部样式表（内嵌样式表）
内部样式表是将CSS代码集中写在HTML文档的head头部标签之间，并且用style标签定义。
语法格式如下：
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
【示例 2-1】内部式样式表应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*
边框的宽度为1像素
边框的样式为实线
边框的颜色为红色
*/
border: 1px solid red;
}
span{
/*
字体大小为40像素
字体名称为华文彩云
*/
font: 40px "华文彩云";
/* 字体颜色为蓝色 */
color: blue;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
执行结果如下：
2.2、行内样式表（内联样式表）
行内样式表是通过标签的style属性来设置元素的样式。
语法格式如下：
<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;"
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内样式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
【示例 2-2】行内式的应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>CSS行内样式表</title>
</head>
<body>
<P style="color: orangered;font-family: '仿宋';font-size: 30px;">段落标签</P>
<P style="color: blue;font-family: '仿宋';font-size: 20px;">段落标签</P>
<P style="color: green;font-family: '仿宋';font-size: 35px;">段落标签</P>
</body>
</html>
执行结果如下：
2.3、外部样式表（外链样式表）
外部样式表是将所有的样式放在一个或多个以 " .CSS" 为扩展名的外部样式表文件中，通过link标签将CSS文件连接到HTML文档中。
语法格式如下：
<head>
<link href="CSS文件路径" type="text/CSS" rel="stylesheet"/>
</head>
link是单标签，具体描述如下：
- href： 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
- type： 定义所链接文档的类型，在这里需要指定为"text/CSS"，表示链接的外部文件为CSS样式表。
- rel： 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式。
【示例 2-3】外部样式表的应用
a.css
p{
font: 30px '仿宋';
margin: 0 auto;
}
#a{color: red;}
#b{color: green;}
#c{color: blue;}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS外部样式表</title>
<link href="../style/a.css" type="text/CSS" rel="stylesheet"/>
</head>
<body>
<p id="a">你好</p>
<p id="b">你好</p>
<p id="c">你好</p>
</body>
</html>
执行结果如下：
三种样式表总结：
3、CSS 选择器
3.1、标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法格式如下：
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3
}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
【示例 3-1】标签选择器的应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>标签选择器的应用</title>
<style type="text/CSS">
p { font: 20px '宋体';
/*text-align:center 居中对齐 */
text-align:center
}
div {
/*边框以 1像素 虚线 蓝色 实现 */
border: 1px dashed blue;
}
</style>
</head>
<body>
<div>
<p>登鹳雀楼</p>
</div>
<div>
<p>王之涣</p>
</div>
<div>
<p>白日依山尽，</p>
</div>
<div>
<p>黄河入海流。</p>
</div>
<div>
<p>欲穷千里目，</p>
</div>
<div>
<p>更上一层楼。</p>
</div>
</body>
</html>
执行结果如下：
3.2、 id 选择器
id选择器使用 “#” 进行标识，后面紧跟id名，其基本语法格式如下：
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3
}
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
【示例 3-2】id选择器的应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>id选择器的应用</title>
<style type="text/CSS">
p { font: 20px '宋体';
/*text-align:center 居中对齐 */
text-align:center
}
div {
/*边框以 1像素 虚线 蓝色 实现 */
border: 5px dashed;
}
#div1{border-color: red;}
#div2{border-color: yellow;}
#div3{border-color: blue;}
#div4{border-color: green;}
#div5{border-color: orange;}
#div6{border-color: purple;}
</style>
</head>
<body>
<div id="div1">
<p>登鹳雀楼</p>
</div>
<div id="div2">
<p>王之涣</p>
</div>
<div id="div3">
<p>白日依山尽，</p>
</div>
<div id="div4">
<p>黄河入海流。</p>
</div>
<div id="div5">
<p>欲穷千里目，</p>
</div>
<div id="div6">
<p>更上一层楼。</p>
</div>
</body>
</html>
执行结果如下：
3.3、类选择器
语法格式如下：
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3
}
该语法中，类名即为HTML元素的class属性值。
id选择器和类选择器区别：
- W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
- 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜。
- id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
- id选择器和类选择器最大的不同在于 使用次数上。
3.4、通配符选择器
通配符选择器用 "* "号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
语法格式如下：
*{
属性1:属性值1;
属性2:属性值2
}
【示例 3-3】清除所有HTML标记的默认边距
*{
margin:0; /*定义外边距*/
padding:0;/*定义内边距*/
}
3.5、组合选择器
语法格式如下：
选择器1,选择器2,选择器n{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3
}
组合选择器可以让多个选择器共用一个css样式代码。
【示例 3-4】组合选择器的应用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>组合选择器的应用</title>
<style type="text/css">
.class01,#id01{
color: blue;
font-size: 20px;
border:1px solid yellow;
}
</style>
</head>
<body>
<div class="class01">div标签1</div><br/>
<span id="id01">span标签1</span><br/>
<div>div标签2</div><br/>
<div class="class01">div标签3</div><br/>
<span>span标签2</span><br/>
</body>
</html>
执行结果如下：
选择器的优先级：
- !important （最高）
- 行内样式
- id选择器
- 类选择器
- 标签选择器
- *通配符选择器（最低）
4、常用样式
a、颜色：
-
颜色可以写颜色名：如 black、blue、red、green等。
-
颜色也可以写rgb值和十六进制表示值：如rgb(255,0,0)，#0368E5，如果写十六进制值必须加#号。
b、宽度（width）：
-
宽度可以写像素值：19px。
-
也可以写百分百比值：20%
c、高度（height）:
-
高度可以写像素值：19px。
-
也可以写百分百比值：20%
d、背景颜色：
- background-color：#0F2D4C;
e、字体样式：
- color：#FF0000；字体颜色为红色。
- font-size：20px； 字体大小。
- font-family：‘宋体’、‘楷体’、‘黑体’；字体名称。
- font-weight：normal/bold； 字体粗细 ，normal：正常，bold：加粗。
- font-style：normal/italic/oblique；字体风格，italic：斜体，oblique：倾斜。
f、红色1像素实现边框：
- border：1px solid #FF0000;
g、div居中：
- margin-left：auto；margin-right：auto;
- 简写 margin：0 auto；
h、文本居中：
- text-align：center；
i、超链接去下划线：
- text-decoration: none;
j、表格细线：
table {
/* 设置边框 */
border: 1px solid red;
/* 将边框合并 */
border-collapse: collapse;
}
td,th {
/* 设置边框 */
border: 1px solid red;
}
k、列表去除修饰：
ul {
list-style:none;
}
【示例 3-1】常用样式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 常用样式</title>
<style type="text/css">
div {
/* 字体颜色 */
color: red;
/* 盒子边框 */
border: 1px solid purple;
/* 盒子宽度 */
width: 300px;
/* 盒子高度 */
height: 300px;
/* 盒子的背景颜色 */
background-color: green;
/* 字体大小 */
font-size: 30px;
/* 盒子居中 */
margin-left: auto;
margin-right: auto;
/* 文本居中 */
text-align: center;
}
a {
/* 去下划线 */
text-decoration: none;
}
table {
/* 设置边框 */
border: 1px solid red;
/* 将边框合并 */
border-collapse: collapse;
}
td,th {
/* 设置边框 */
border: 1px solid red;
}
ul {
/* 无序列表去除修饰 */
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>好好学习!</li>
<li>天天向上!</li>
</ul>
<table>
<tr>
<th>ID</th>
<th>姓名</th>
<th>职位</th>
</tr>
<tr>
<td>001</td>
<td>白豆五</td>
<td>算法工程师</td>
</tr>
<tr>
<td>002</td>
<td>手可摘棉花</td>
<td>产品经理</td>
</tr>
</table>
<a href="http://www.baidu.com">百度一下</a>
<div>我是div标签</div>
</body>
</html>
执行结果如下：
5、盒子模型
- 盒子模型：英文 " box model "
- 盒子顾名思义就是用来装东西的容器
- 所有HTML元素都可以看作盒子，比如：div、span、a、font标签等
- 但是，图片、表单元素一律看作是文本，它们并不是盒子。
盒子中的区域
在盒子中有5个主要的属性：width、height、padding、border、margin。
- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
元素的宽度和高度
元素的真实宽度 = 内容宽度+左外边距+右外边距+左内边距+右内边距+左边框+右边框
元素的真实高度 = 高度+顶部外边距+底部外边距+上边框+下边框+顶部内边距+底部内边距
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 150px;
margin-top: 40px;
margin-left: 80px;
padding:40px;
background-color: aqua;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
盒子模型
</div>
</body>
</html>
示例2：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
border-right-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
示例3：
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {
/* 点状边框 */
border-style: dotted;
}
p.dashed {
/* 虚线边框 */
border-style: dashed;
}
p.solid {
/* 实线边框 */
border-style: solid;
}
p.double {
/* 双线边框 */
border-style: double;
}
p.groove {
/* 凹槽边框 */
border-style: groove;
}
p.ridge {
/* 垄状边框 */
border-style: ridge;
}
p.inset {
/* 3D inset 边框 */
border-style: inset;
}
p.outset {
/* 3D outset 边框 */
border-style: outset;
}
p.none {
/* 无边框 */
border-style: none;
}
p.hidden {
/* 隐藏边框 */
border-style: hidden;
}
p.mix {
/* 混合边框 */
border-style: dotted dashed solid double;
}
</style>
</head>
<body>
<p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p>
</body>
</html>
示例4：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 0px;
height: 0px;
border: 50px solid green;
border-top-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
示例5：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 0px;
height: 0px;
border: 50px solid green;
border-top-color: red;
border-bottom: none;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
示例6：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 0px;
height: 0px;
border: 50px solid white;
border-top-color: red;
border-bottom: none;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6、浮动
块级元素与行内元素
- 所有的 XHTML 页面元素只有两种，一种是块级元素、一种是行内元素；
- 块级元素一般都从新行开始，它可以容纳行内元素和块级元素，例如：div、p、table等；
- 行内元素只容纳文本或其它行内元素，例如：span、img、a、input等；
- 使用 CSS 的 display 属性（的 block 和 inline值），能使行内和块级元素之间相互转换；
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p{
/* 转行内元素 */
display: inline;
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
</body>
</html>
CSS的布局方式
- 文档流
- 浮动
- 定位
浮动
- 在网页布局中，标准流不能满足我们的需求，因此使用浮动来完成网页布局；
- 浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。
- CSS 提供 float 属性用于设置元素的浮动，它包含三个值，分别是left、right和none；
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
float: left;
}
#div1 {
background-color: aquamarine;
width: 300px;
height: 200px;
}
#div2 {
background-color: beige;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
清除浮动
使用浮动后，会产生很多意外的结果，因为浮动的元素会脱离原来的标准流。
浮动元素可能会覆盖一些非浮动的元素，这时需要使用 CSS 的 clear 属性来清除浮动。
clear属性的四个值：
- none：允许两边都可以有浮动对象；
- both：不允许有浮动对象；
- left：不允许左边有浮动对象；
- right：不允许右边有浮动对象；
7、定位
在CSS中用position属性实现定位，使用position定位可以定义元素相对其父元素或其它元素的精确定位。
position属性的四个关键值：
- static 默认值，表示无定位；
- absolute ，绝对定位；
- relative ，相对定位；
- fixed ，固定定位；
相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
#box {
/*相对定位*/
position: relative;
/*以左上角为起点向右移动30像素*/
left: 30px;
/*以左上角为地点向下移动20像素*/
top: 20px;
}
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
