说明:归纳整理CSS相关知识
1、概念
CSS:(Cascading Style Sheets)层叠样式表
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
2、语法
<head>
<style>
选择器{
属性名:属性值;
属性名:属性值;
}
</style>
</head>
- 选择器:要修饰的对象
- 属性名:修饰对象属性的名称
- 属性值:修饰对象属性的值
3、举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-family: verdana;
font-size: 20px;
}
h1{
color: rgb(202, 41, 41);
text-align: center;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<h1>这是一个h1标签</h2>
</body>
</html>
效果如图:
4、CSS的3种使用方式
a. 內联样式
在HTML标签内使用style属性指定css代码
<div style="color:red;">hello css</div>
b. 内部样式
在head标签内,定义style标签,style标签的标签体内容就是css代码。即上述例子中的用法。
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
c.外部样式
在head标签内,定义link标签,引入.css资源文件。
- HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里引入css资源文件 -->
<link rel="stylesheet" href="a.css">
</head>
<body>
<h1>css测试</h1>
</body>
</html>
- a.css文件:
h1{
color:green;
}
- 测试:
5、选择器
-
基础选择器
1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一 语法:#id属性值{} 2. 元素选择器:选择具有相同标签名称的元素 语法: 标签名称{} 注意:id选择器优先级高于元素选择器 3. 类选择器:选择具有相同的class属性值的元素。 语法:.class属性值{} 注意:类选择器选择器优先级高于元素选择器
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* id选择器 */
#div1{
color: red;
}
/* 元素选择器 */
#div{
color: green;
}
/* 类选择器 */
.c1{
color: blue;
}
</style>
</head>
<body>
<!-- id选择器 -->
<div id="div1">id选择器测试!</div>
<!-- 元素选择器 -->
<div>元素选择器测试!</div>
<!-- 类选择器 -->
<div class="c1">类选择器测试!</div>
</body>
</html>
结果如下:
-
扩展选择器:
1. 选择所有元素: 语法: *{} 2. 并集选择器: 选择器1,选择器2{} 3. 子选择器:筛选选择器1元素下的选择器2元素 语法: 选择器1 选择器2{} 4. 父选择器:筛选选择器2的父元素选择器1 语法: 选择器1 > 选择器2{} 5. 属性选择器:选择元素名称,属性名=属性值的元素 语法: 元素名称[属性名="属性值"]{} 6. 伪类选择器:选择一些元素具有的状态 语法: 元素:状态{} 如: <a> 状态: link:初始化的状态 visited:被访问过的状态 active:正在访问状态 hover:鼠标悬浮状态
6、属性
1. 字体、文本
font-size:字体大小
color:文本颜色
text-align:对其方式
line-height:行高
2. 背景
background:
3. 边框
border:设置边框,符合属性
4. 尺寸
width:宽度
height:高度
5. 盒子模型:控制布局
margin:外边距
padding:内边距
默认情况下内边距会影响整个盒子的大小
box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
float:浮动
left
right