为了让网页元素的样式更加丰富
也为了让网页的内容和样式能拆分开
Cascading Style Sheets层叠样式表
有了CSS，html中大部分表现样式的标签就废弃不用了
html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁
CSS基本语法及页面引用
css基本语法
css的定义方法是：选择器{属性:值；属性:值；属性:值；}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性
div{width: 200px;height:200px;background-color: blue;}
css页面引入方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的使用</title>
<!-- 外链式,通过link标签引入css文件,在head标签中引入 -->
<link rel="stylesheet" type="text/css" href="./1.css">
<!-- 嵌入式,通过style标签来写css,写在head标签中 -->
<style type="text/css">
div{
width: 200px;
height:200px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 内联式 style属性设置css样式 -->
<div style="width: 200px;height: 200px;background-color: yellow;">
</div>
</body>
</html>
CSS选择器
常用选择器有以下几种：
1. 标签选择器
此种选择器影响范围大，建议尽量应用在层级选择器中
2. id选择器
id名一般给程序使用，所以不推荐使用id作为选择器
3. 类选择器
通过类名选择元素，一个类可应用于多个元素，一个元素也可以使用多个类，是css应用最多的一种选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的三种基本选择器</title>
<style type="text/css">
/* id选择器优先级最高,标签选择器优先级最低*/
/* 标签选择器 通过标签来设置元素的格式 影响范围最大*/
div{
width: 200px;
height:200px;
background-color: blue;
}
/* 类选择器 通过class类名来设置元素的样式*/
.haha{
width: 200px;
height:200px;
background-color: yellow;
}
/* id选择器 通过id属性的值来设置元素的样式,影响范围最小,id具有唯一性,不能重名*/
#hehe{
width: 200px;
height:200px;
background-color: green;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="haha"></div>
<div></div>
<div id="hehe"></div>
</body>
</html>
5. 层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级选择器</title>
<style type="text/css">
/* 通过父级元素来设置子级元素的样式 */
/* 多种选择器混合使用 */
.haha{
width: 200px;
height:200px;
background-color: yellow;
border: 5px solid black;
}
.haha div{
width: 100px;
height:100px;
background-color: blue;
}
.haha .hehe{
width: 100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<div class="haha">
<div></div>
<div class="hehe"></div>
</div>
</body>
</html>
6. 组选择器
给多个元素设置相同的格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组选择器</title>
<style type="text/css">
.haha,.heihei,.hehe{
width:200px;
height:200px;
}
.haha{
background-color: yellow;
}
.heihei{
background-color: blue;
}
.hehe{
background-color: red;
}
</style>
</head>
<body>
<div class="haha"></div>
<div class="heihei"></div>
<div class="hehe"></div>
</body>
</html>
7. 伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。伪元素选择器有before和after，通过样式在元素中插入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
.haha{
width:200px;
height:200px;
background-color: yellow;
}
.haha:hover{
width:500px;
height:500px;
}
.haha:after {
content: "hehehe";
}
.haha:before {
content: "heiheihei";
}
</style>
</head>
<body>
<div class="haha">
hahahahaha
</div>
</body>
</html>
CSS颜色、文本字体、边框、背景
颜色表示方法
- 颜色名表示
- 16进制数表示
- RGB
- RGBA
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颜色表示方式</title>
<style type="text/css">
.haha{
width: 200px;
height: 200px;
/* 使用英文单词表示颜色 */
background-color: blue;
/* 使用十六进制表示颜色 */
background-color: #0000ff;
/* 使用rgb表示颜色,0~255 */
background-color: rgb(0,0,255);
/* 带透明度的rgba */
background-color: rgba(0,0,255,0.5);
}
</style>
</head>
<body>
<div class="haha">
hahahahaha
</div>
</body>
</html>
文本字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本设置</title>
<style type="text/css">
.haha{
width: 200px;
height: 200px;
background-color:yellow;
/* 文字颜色 */
color: blue;
/* 文字大小 */
font-size: 25px;
/* 文字字体 */
font-family: '黑体';
/* 是否倾斜*/
font-style: italic;
/* 是否加粗 */
font-weight:bold;
/* 设置行高,文字垂直居中 */
line-height: 200px;
/* 首行缩进 */
text-indent: 24px;
/* 下划线 */
text-decoration: none;
/* 水平对齐方式 */
text-align: left;
}
</style>
</head>
<body>
<div class="haha">
这是一行字。
</div>
</body>
</html>
边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性</title>
<style type="text/css">
.haha{
width: 200px;
height: 200px;
/* border:宽度 样式 颜色
边框样式:solid实线 dotted点状线 dashed虚线;
*/
border: 2px dashed blue;
/* 单独设置上边框 */
border-top: 3px solid yellow;
/* 圆角设置
一个值，4个角同时设置
二个值，对角设置
四个值，顺时针设置
*/
border-radius:50px;
/* border-radius: 10px 60px; */
/* border-radius:10px 30px 60px 90px; */
/* 阴影效果
x、y轴偏移(正负)，模糊度，扩散程度，颜色，inset内阴影，设置或检索对象阴影
*/
box-shadow: 10px 10px 20px 10px yellow;
}
.haha:hover {
box-shadow: 20px 20px 50px 50px yellow;
}
</style>
</head>
<body>
<div class="haha">
这是一行字。
</div>
</body>
</html>
背景属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style type="text/css">
.haha{
width: 200px;
height: 200px;
background-color: yellow;
/* 背景图片 */
background-image: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3356162342,638206768&fm=26&gp=0.jpg);
/* 图片显示大小 */
background-size: 100% 100%;
/* 图片位置移动 */
/*background-position:-500px -500px;*/
/* 设置图片重复 */
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="haha">
这是一行字。
</div>
</body>
</html>
CSS内外间距、盒子模型
内外间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS内外边距</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.haha{
/* 内边距 指元素距离内部元素的间距 */
padding: 30px;
background-color: blue;
/*box-sizing: border-box;*/
}
.hehe{
background-color: yellow;
/* 外边距 指元素距离外部元素的间距 可为负值*/
margin-top: 20px;
}
.heihei{
background: black;
/* 垂直居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="haha">
这是一行字。
</div>
<div class="hehe">
这是一行字
</div>
<div class="heihei">
</div>
</body>
</html>
盒子模型
元素在页面中显示成一个方块，类似一个盒子
盒子尺寸 = width、height + padding + border
在布局中，想设置padding和边框，又不想改变盒子的尺寸：
box-sizing：content-box | border-box
CSS块元素、内联元素、内联块元素
块元素
块元素，也称为行元素，常用标签：div、p、ui、li、h1~h6、dl、dt等
在布局中的行为：
- 支持全部样式
- 若没有设置宽度，默认宽度为父级宽度的100%
- 盒子占据一行，即使设置了宽度
内联元素
内联元素，也称为行内元素，常用标签：a、span、em、b、strong等
在布局中的行为：
- 支持部分样式（不支持宽高，margin上下）
- 宽高由内容决定，盒子并在一行
- 代码换行,盒子会产生间距
内联块元素
内联块元素，也称为行内块元素，img、input等
在布局中的行为：
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块元素、内联元素、内联块元素</title>
<style type="text/css">
.haha{
/*
块元素
默认宽度为父级元素的100%
独占一行，即使设置了宽度
支持所有样式
*/
height: 200px;
background-color: blue;
}
span{
/*
内联元素
不支持高度和宽度，宽高由内容撑开
margin只支持左右，padding支持
*/
height: 100px;
width: 100px;
margin: 20px;
padding:20px;
}
input{
/*
不独占一行，盒子并在一行
支持所有样式
*/
width: 100px;
height: 100px;
margin: 50px;
}
</style>
</head>
<body>
<div class="haha">
这是一行字。
</div>
<span>这是一行字</span>,内联元素<br>
<span>这是一行字</span>,内联元素<br>
输入框<input type="text" name="text">输入框
</body>
</html>
三种元素之间的转换
display属性，设置元素的类型及隐藏
- none：元素隐藏且不占位置
- block：元素以块元素显示
- inline：元素以内联元素显示
- inling-block：元素以内联块元素显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素类型转换及隐藏</title>
<style type="text/css">
.ooo{
width: 700px;
height: 600px;
}
.ooo div{
width: 200px;
height: 200px;
/* 转为内联元素 */
/*display: inline;*/
/* 转为内联块元素 */
/*display: inline-block;*/
}
.haha{
text-align: center;
background: blue;
font-size: 20px;
line-height:200px;
color: yellow;
}
.hehe{
background: yellow;
}
.heihei{
background: green;
}
.haha:hover span{
display: none;
}
</style>
</head>
<body>
<div class="ooo">
<div class="haha"><span>1</span></div>
<div class="hehe">2</div>
<div class="heihei">3</div>
</div>
</body>
</html>
