CSS:页面美化和布局控制
概念: CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
好处:
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度,解耦
- 让分工协作更容易
- 提高开发效率
1. CSS的使用(CSS和HTML的结合方式)
- 内联样式: 在标签内使用style属性指定css代码
- 内部样式: 在head标签内,定义style标签,style标签的标签体内容就是css内容
- 外部样式:定义css资源文件;在head标签内,定义style标签,一般使用link标签引入外部资源文件
- < link> 标签定义文档与外部资源的关系。
- 也可以使用@import "外部资源文件位置"来引入外部资源文件
1、2、3三种方式,css作用的范围越来越大
2. 语法格式
格式:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
注意: 每一对属性需要用分号;隔开,最后一对属性可以不用;
选择器: 筛选具有相似特征的元素
3. 选择器
分类:
- 基本选择器
- id选择器: 选择具体的id属性值的元素
语法:#id属性值{} - 元素选择器: 选择具有相同标签名称的元素
语法:标签名称{} - 类选择器: 选择具有相同class属性值的元素
语法:.class属性值{} - 优先级: id选择器 > 类选择器 > 元素选择器
- id选择器: 选择具体的id属性值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
<!-- id选择器 -->
#div1{
color: red;
}
<!-- 标签选择器 -->
a{
color: blue;
}
<!-- 类选择器 -->
.cls1{
color: yellow;
}
</style>
</head>
<body>
<div id="div1">Hello</div>
<a>Hello</a>
<p class="cls1">Hello</p>
</body>
</html>
- 扩展选择器
- 选择所有元素:
语法:*{} - 并集选择器:
语法:* 选择器1,选择器2{} - 子选择器:筛选选择器1元素下的选择器2元素
语法:选择器1 选择器2{} - 父选择器:筛选选择器2的父元素选择器1
语法:选择器1 > 选择器2{} - 属性选择器:选择元素名称,属性名=属性值的元素
语法:元素名称[属性名=“属性值”]{} - 伪类选择器:选择一些元素具有的状态
语法:元素:状态{}
- 选择所有元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
<!-- 子选择器 -->
div p{
color: blue;
}
<!-- 父选择器 -->
div > p{
border: 1px solid;
}
<!-- 属性选择器 -->
input[type="text"]{
border: 3px solid;
}
</style>
</head>
<body>
<div><p>Hello</p></div> <br>
<div>Hello</div> <br>
<p>Hello</p> <br>
<input type="text">
<input type="password">
</body>
</html>
4. 属性
字体(Font)属性
- font-size:字体大小
- color:颜色
- text-align:对齐方式
- line-height:行高
背景
- background:复合属性,设置对象的背景特性
边框
- border:设置边框的特性,复合属性
尺寸
- width:宽度
- height:高度
盒子模型:控制布局
- margin:外边距
- padding:内边距,默认情况下内边距会影响整个盒子的大小
- box-sizing: border-box:设置盒子的属性,使盒子的大小不会改变
- float:浮动
- left:左浮动
- right:右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
border: 2px solid darkblue;
}
.div1{
width: 200px;
height: 200px;
/*
margin: 100px;
*/
}
.div2{
width: 400px;
height: 400px;
/*
设置盒子的属性,使盒子的大小不会改变
*/
box-sizing: border-box;
padding: 100px;
}
.div3{
width: 200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1">
</div>
</div>
<div class="div3">aaa</div>
<div class="div3">bbb</div>
<div class="div3">ccc</div>
</body>
</html>