1、概念:Cascading Style Sheets 层叠样式表
*层叠:多个样式可以作用在同一个html元素上,同样生效
2、好处:
1.功能强大
2.将内容展示与样式控制分离(降低耦合度)
3、CSS使用
1.内联样式
在标签内使用style属性指定css代码
<div style="color: red;">hello css</div>
2.内部样式
在head标签内,定义style标签,style标签的标签体就是css代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>方式2</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>hello css</div>
</body>
</html>
3.外部样式
定义css资源文件,在head标签内定义link标签,引入外部的资源
css文件
div{
color: green;
}
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>方式3</title>
<link rel="stylesheet" href="../css/a.css"/>
</head>
<body>
<div>hello css</div>
<div>hello css</div>
</body>
</html>
注意:1.2.3中方式应用范围越来越大
4、CSS语法
格式:
选择器{
属性名1:属性值1;
属性名2:属性名2;
}
选择器:筛选具有相似特征的元素
每一对属性需要使用;隔开,最后一对可以不加
5、选择器
分类
*基本选择器
1. id 选择器(选择器具有id属性值的元素)
语法:#id属性值{}
2. 元素选择器(选择具有相同标签名称的元素)
语法:标签名称{}
注意:id选择器优先级高于元素选择器
3. 类选择器
语法:.class属性值{}
注意:类选择器优先级高于元素选择器,低于id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器</title>
<style>
#div1{
color: #0000FF;
}
.class1{
color: #008000;
}
</style>
</head>
<body>
<div id="div1"> 好好学习</div>
<div>天天向上</div>
<p class="class1">天天学JAVA</p>
</body>
</html>
*扩展选择器
1.选择所有元素
语法:*{}
2.并集选择器
语法:选择器1,选择器2 {}
3.子选择器(筛选选择器1下的选择器2)
语法:选择器1 选择器2 {}
4 .父选择器(选择器1是选择器2的父选择器)
语法:选择器1 > 选择器2 {}
5.属性选择器(选择元素名称,属性名=属性值的元素)
语法:元素名称 [属性名称=“属性值”]{}
6. 伪类选择器
语法:标签名:状态{}
6、属性
1.字体、文本
*font-size:字体大小
*color:文体颜色
*text-align:对齐方式
*line-height:高度
2.背景
*background
3.边框
*border :设置边框,符合属性
4.尺寸
*width:宽度
*height:高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
p{
font: 30px;
color: #0000FF;
line-height: 100px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<p>JAVA天下第一</p>
</body>
</html>
5.盒子模型
*margin:外边距
*padding:内边距
*box-sizing:border-box :设置盒子的属性让weight 和 height就是最终大小
*float:浮动
*left
*right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内外边距</title>
<style>
div{
border: blue solid 1px;
}
.div1{
width: 200px;
height: 200px;
}
.div2{
width: 100px;
height: 100px;
margin: 50px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>