前端基础——CSS样式
一. CSS 定义
- CSS 指层叠样式表 (Cascading Style Sheets)。
- 所有的主流浏览器都支持层叠样式表。
二. CSS 优点
- 使页面结构表现分离，极大地提高了工作效率。
三. CSS 样式表分类
- 内联样式（在 HTML 标签中使用）
- 内部样式表（位于
<head>标签内部） - 外部样式表
内联样式拥有最高的优先权，其次为内部样式表，最后为外部样式表。
四. HTML如何使用 CSS
1. 内联样式（在 HTML 标签中使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color:red;">p标签</p>
</body>
</html>
2. 内部样式表（位于 head 标签内部）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
<!--此处为css样式-->
</style>
</head>
<body>
</body>
</html>
3. 外部样式表
3.1 link 引入
此种方法使用频率最高，也是最常使用的方法，让结构与表现分离。
<link type="text/css" rel="stylesheet" href="外部 CSS 样式文件资源地址">
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="Two.css">
</head>
<body>
<p>p标签</p>
</body>
</html>
3.2 import 引入
这种方法导入方式和 <link/> 方式功能一样，就是语法不同，在 <style> 和 </style> 之间使用。
此种方法import结尾必须加 “；”。
@import "";
例：<style type="text/css"> @import "外部 CSS 样式文件资源地址"; </style><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> @import "Two.css"; </style> </head> <body> <p>p标签</p> </body> </html>@import url("");
例：<style type="text/css"> @import url("外部 CSS 样式文件资源地址"); </style><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> @import url("Two.css"); </style> </head> <body> <p>p标签</p> </body> </html>
五. 选择器
1. 全局选择器（*）
*{}- 作用于全局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.info{
color: red;
}
</style>
</head>
<body>
<p class="info">这是一个段落标签！</p>
<strong class="info">这是一个加粗标签！</strong>
</body>
</html>
2. 标签元素选择器
- 通过作用标签名进行设置。
- 如 p、h1、em、a，甚至可以是 html 本身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
background-color: midnightblue;
}
p{
color:white;
}
</style>
</head>
<body>
<p>这是一个段落标签！</p>
</body>
</html>
3. id 选择器
- 通过 id 属性的值进行设置。
- id 选择器具有唯一值，相同的 id 属性的值不可重复。
- 对应 #
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#info{
color: red;
}
</style>
</head>
<body>
<p id="info">这是一个段落标签！</p>
</body>
</html>
4. class（类）选择器
- 通过class属性的值进行设置
- 可以多个class属性值相同，开头不能用数字。
- 对应 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.info{
color: red;
}
</style>
</head>
<body>
<p class="info">这是一个段落标签！</p>
<strong class="info">这是一个加粗标签！</strong>
</body>
</html>
5. 选择器分组
- 可以将任意多个选择器分组在一起，对此没有任何限制。
- 设置多个标签为相同样式，可以用到使用此选择器。
- 多个标签之间用逗号分隔。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.info,strong{
color: red;
}
</style>
</head>
<body>
<p class="info">这是一个段落标签！</p>
<strong>这是一个加粗标签！</strong>
</body>
</html>
6. 后代选择器
- 又称为包含选择器。
- 后代选择器可以选择作为某元素后代的元素。
- 可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#ul li{
color:red;
}
</style>
</head>
<body>
<ol id="ul">
<li>一组
<ul>
<li>一组一列</li>
</ul>
</li>
<li>二组</li>
</ol>
</body>
</html>
7. 子元素选择器
- 与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
- 子选择器使用了大于号（>)作为子结合符。
- 子结合符两边可以有空白符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1 > strong{
color:red;
}
</style>
</head>
<body>
<h1>holle <strong>world</strong> !</h1>
</body>
</html>
8. 伪类选择器
:link未访问的状态:visited已访问的状态:hover鼠标经过的状态:active选定的状态，鼠标点击的一瞬间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*未访问的状态*/
a:link {
color: black;
}
/*已访问的状态*/
a:visited{
color: red;
}
/*鼠标经过的状态*/
a:hover{
color: blue;
}
/*选定的状态，鼠标点击的一瞬间*/
a:active{
color:yellow;
}
</style>
</head>
<body>
<a href="#">跳转</a>
</body>
</html>
a:hover必须被置于a:link和a:visited之后，才是有效的。a:active必须被置于a:hover之后，才是有效的。- 伪类名称对大小写不敏感。
六. 盒子模型
- 元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距的边缘是边框，边框以外是外边距。
- 盒子模型规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
- 一个盒子中主要的属性有五个：
width：内容的宽度
height：内容的高度
padding：内边距
border：边框
margin：外边距
1. 内边距（padding）
- 定义元素边框与元素内容之间的空白区域。
- padding 属性接受长度值或百分比值，但不允许使用负值。
- 有四个单独的属性，分别设置上、右、下、左内边距：
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距 - 可以同时设置上、右、下、左内边距：
(1).padding:10px;
上、右、下、左内边距都是10px
(2).padding:10px 20px;
上、下内边距为10px，左、右内边距为20px
(2).padding:10px 20px 30px;
上内边距为10px，左、右内边距为20px，下内边距为30px
(2).padding:10px 20px 30px 40px;
上内边距为10px，右内边距为20px，下内边距为30px，左内边距为40px
顺序：上 - 右 - 下 - 左
2. 边框（border）
- 边框是围绕元素内容和内边距的一条或多条线。
- border 属性允许你规定元素边框的样式、宽度和颜色。
- 每个边框有 3 个方面：宽度、样式，以及颜色。
- 样式：
(1).定义单边样式
border-top-style：上边框样式
border-right-style：右边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式
(2),同时定义多边样式：border-style: solid dotted dashed double; - 宽度
(1).定义单边宽度
border-top-width：上边框宽度
border-right-width：右边框宽度
border-bottom-width：下边框宽度
border-left-width：左边框宽度
(2),同时定义多边宽度：border-width: 10px 5px 15px 5px; - 颜色
(1).定义单边宽度
border-top-color：上边框颜色
border-right-color：右边框颜色
border-bottom-color：下边框颜色
border-left-color：左边框颜色
(2),同时定义多边颜色：border-color: 10px 5px 15px 5px; - 同时边框宽度、样式，以及颜色
(1).定义单边宽度、样式，以及颜色
border-top:1px solid blue;：上边框宽度为1px,样式为实线，颜色为蓝色
border-right:1px solid blue;：右边框宽度为1px,样式为实线，颜色为蓝色
border-bottom:1px solid blue;：下边框宽度为1px,样式为实线，颜色为蓝色
border-left:1px solid blue;：左边框宽度为1px,样式为实线，颜色为蓝色
(2),同时定义多边颜色：border: 1px solid blue;
3. 外边距（margin）
- 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
- 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
- 有四个单独的属性，分别设置上、右、下、左外边距：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距 - 可以同时设置上、右、下、左外边距：
(1).margin:10px;
上、右、下、左外边距都是10px
(2).margin:10px 20px;
上、下外边距为10px，左、右外边距为20px
(2).margin:10px 20px 30px;
上外边距为10px，左、右外边距为20px，下外边距为30px
(2).margin:10px 20px 30px 40px;
上外边距为10px，右外边距为20px，下外边距为30px，左外边距为40px
七. 定位
- 使用
position属性，可以选择 4 种不同类型的定位，将会影响元素框生成的方式。 position属性值的含义：
1. static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2. relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
3. absolute
(1). 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
(2). 可以覆盖页面上的其他元素。
(3). 可以设置z-index属性控制层叠顺序。
4. fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
