CSS:页面美化和布局控制
1.概念:Cascading Style Sheets 层叠样式表
*层叠:多个样式可以作用在同一个html的元素上,同时生效
2.好处:
(1)功能强大
(2)将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
3.CSS的使用:CSS和html结合方式
(1)内联样式
<--*在标签内使用style属性指定css代码-->
<div style="color: red">hello css</div>
(2)内部样式
*在head标签内,定义style标签,style标签的标签体内容就是css代码
如下:
<head>
<style>
div{
color: blue;
}
</style>
</head>
<div>
hello css
</div>
(3)外部样式
- 1.定义css资源文件
2.在head标签内,定义style标签,引入外部的资源文件
如:a.css
div{
color: green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
注意:
- 1,2,3种方式作用范围越来越大
- 1方式不常用,2,3常用
- 第3种格式可以写为:
<style>
@import "css/a.css";
</style>
4.CSS语法
格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
…
}
选择器:筛选具有相似特征的元素
注意:每一对属性需要使用 ; 隔开,最后一对可以不用
5.选择器:筛选具有相似特征的元素
分类:
1.基础选择器
- 1.id选择器:选择具体的id属性值的元素:建议在一个html中id值唯一
#id属性值{} - 2.元素选择器:选择具有相同标签名称的元素
*语法:标签名称{}
*注意:id选择器优先级高于元素选择器 - 3.类选择器:选择具有相同的class属性值的选择
*语法:.class属性值{}
*注意:类选择器优先级高于元素选择器
2.扩展选择器
- 1.选择所有元素:*
语法:*{} - 2.并集选择器:
语法:选择器1,选择器2{ } - 3.子选择器:筛选选择器1元素下的选择器2元素
语法:选择器1 选择器2{ } - 4.父选择器:筛选选择器2的父元素选择器1
语法:选择器1>选择器2{ } - 5.属性选择器:选择元素名称,属性名=属性值的元素
语法:元素名称[属性名=“属性值”]{ } - 6.伪类选择器:选择一些元素具有的状态
语法:元素:状态{ }
如:<a>
状态:
ink:初始化的状态
visited:被访问过的状态
active:正在访问的状态
hover:鼠标悬浮状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p{
color: red;
}
div > p{
border: 1px solid;
}
input[type="text"]{
border: 5px solid;
}
a:link{
color: pink ;
}
a:hover{
color: green ;
}
a:active{
color: yellow ;
}
a:visited{
color: red ;
}
</style>
</head>
<body>
<div>
<p>老王编程</p>
</div>
<p>白云程序员</p>
<div>aaa</div>
<input type="text">
<input type="password">
<br><br>
<a href="#" >白云老王</a>
</body>
</html>
6.属性
1.字体、文本
(1)font-size:字体大小
(2)color:文本颜色
(3)text-align:对齐方式
(4)line-height:行高
2.背景
(1)background
3.边框
(1)border:设置边框
4.尺寸
(1)width:宽度
(2)height:高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style>
p{
color: #FF0000;
font-size: 30px;
text-align: center;
line-height: 200px;
/*
border 边框
*/
border: 1px solid red;
}
div{
border: 1px solid red;
/*
尺寸
*/
height: 200px;
width: 200px;
/*
背景
*/
background: url("img/login_bg.png") no-repeat center;
}
</style>
</head>
<body>
<p> 白云老王</p>
<div>隔壁老王程序员</div>
</body>
</html>
5.盒子模型:控制布局
(1)margin:外边距
(2)padding:内边距
- 默认情况下内边距会影响整个盒子大小
- box-sizing:border-box;设置盒子的属性,让width和height就是最终盒子的大小
(3)float:浮动
*left
*right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
border: 1px solid red;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
/*外边距*/
/*margin: 50px;*/
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
/*
设置盒子的属性,让width和height就是最终盒子的大小
*/
box-sizing: border-box;
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: right;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1">
</div>
</div>
<div class="div3">aaaa</div>
<div class="div4">bbbbbb</div>
<div class="div5">ccccc</div>
</body>
</html>