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