这篇博客详细介绍了CSS的基础知识，包括CSS概述、选择器的种类、常用样式如背景、文本、字体和链接的设置，以及框模型和定位的概念。此外，还讲解了伪类和伪元素在超链接状态控制中的应用。
目录
CSS
Cascading Style Sheets层叠样式表。
修饰HTML标签的显示。
一、CSS概述
CSS：数据(html)和显示(css)分离
外部样式的引入方式：<link rel="stylesheet" type="text/css" href="xxx.css"/>
优先级：就近原则，后加载的覆盖先加载的。
二、CSS的选择器
2.1 CSS语法
选择器{
属性：属性值；
}
选择器：选取HTML页面中的标签元素。
属性：设置相关的属性值。
2.2 选择器--基本类型
元素选择器、id选择器(不推荐使用，JS使用元素id属性)、类选择器(推荐使用)
2.3 选择器--分组、继承
2.4 选择器--高级类型
属性选择器： 选择器[属性='值']
/* 元素选择器 */
p{
color: blue;
}
/* id选择器 */
/* 不建议在CSS中使用，JS要使用元素的id属性 */
#pId{
color: aqua;
font-size: 24px;
}
/* 类选择器 */
.pClass{
color: aqua;
font-size: 24px;
}
/* 分组选择器 --多个元素共享*/
p,h1,#pId,.pClass{
font-weight: bolder; /* 字体加粗*/
}
/* 继承选择器 --body下子元素受到影响*/
body{
font-family: 宋体; /* 设置字体*/
}
/* 后代选择器:影响所有后代 */
h1 span{
color: red;
}
/* 子元素选择器：只影响直属的子元素 */
h2 > strong{
color: red;
}
/* 相邻兄弟选择器 */
h2+p{
color: red;
}
/* 属性选择器 */
input[type="password"]{
border-color: red;
}
三、CSS常用样式
3.1 样式--背景
3.2 样式--文本
3.3 样式--字体
3.4 样式--链接
3.5 样式--表格
3.6 样式--轮廓
四、CSS框模型
4.1 CSS框模型示意图
Box Model--盒子模型，规定了元素框处理 元素内容、内边距、边框和外边距 的方式。
4.2 CSS框模型--内边距、边框、外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIV盒子--系统后台</title>
<style type="text/css">
body{
margin: 0px;
}
.top{
background-color: #0000FF;
height: 30px;
}
.left{
background-color: #00FFFF;
height: 600px;
width: 100px;
position: absolute;
top:30px;
bottom: 0px;
left: 0px;
}
.main{
background-color: black;
height: 600px;
position: absolute; /* 绝对定位，需要定义上下左右的距离*/
top:30px;
bottom: 0px;
left: 100px;
right: 0px;
}
</style>
</head>
<body>
<div id="" class="top"></div>
<div id="" class="left"></div>
<div id="" class="main"></div>
</body>
</html>
五、值复制
六、CSS定位
定位-position：流、相对、绝对、固定、浮动定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style type="text/css">
body{
margin: 0px;
}
.yellow{
background-color: yellow;
position: relative; /* 相对定位 没有脱离流定位 */
top: 10px; /* 相对元素原来的位置移动 */
left: 10px;
}
.green{
background-color: green;
position: absolute; /* 绝对定位 脱离流定位*/
top: 40px; /* 参照物：最靠近的外围已定位的元素*/
left: 80px;
}
.red{
background-color: red;
position: fixed;/* 固定定位 脱离流定位*/
top: 10px; /* 参照物：浏览器窗口--body */
left: 10px;
}
.subdiv{
height: 100px;
width: 100px;
}
.maindiv{
border: 1px solid;
position: absolute;
width: 80%;
margin: 20px;
height: 500px;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="yellow subdiv"></div>
<div class="green subdiv"></div>
<div class="red subdiv"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动定位</title>
<style type="text/css">
body{
margin: 0px;
}
div{
/* background-color: #000000 */
height: 100px;
width: 100px;
float: left; /* 浮动定位 */
}
.yellow{
background-color: yellow;
}
.green{
background-color: green;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div class="yellow"></div>
<div class="green"></div>
<div class="red"></div>
<div style="clear:both"> </div> <!-- 消除浮动 -->
</body>
</html>
七、伪类&伪元素
7.1 伪类--主要针对超链接
超链接的几种状态。
结合display实现简单的下拉窗口。
7.2 伪元素
扫一扫
4823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
