CSS : 层叠样式表, 是用来定义页面上的html元素如何显示的一组规则或声明
基本语法: 选择器 {样式声明}
1. 选择器: 最基本的有标签,类class, id
2. 样式声明: 包括属性和值二部分
3. 样式规则 = 选择器 + 样式声明
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3 style="background-color:lightgreen; color:red">样式规则=选择器+样式声明</h3> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
引用外部的css样式文件
<link rel="stylesheet" href="static/css/style1.css">
link标签要放在head标签里面
常用选择器与优先级：
选择器优先级：style行内样式>id>class>标签
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
/* 标签选择器 */
h3 {
background-color:lightgreen;
color: red;
}
/* class类选择器 */
.bg-blue {
background-color: skyblue;
}
/* id选择器 */
#bg-yellow {
background-color: yellow;
}
</style>
<h3>样式规则=选择器+样式声明</h3>
<h3 class="bg-blue">样式规则=选择器+样式声明</h3>
<h3 class="bg-blue" id="bg-yellow">样式规则=选择器+样式声明</h3>
<h3 style="background-color:orchid;" class="bg-blue" id="bg-yellow">样式规则=选择器+样式声明</h3>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
视频播放 video
controls视频可以点击
poster 视频封面
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <video src="static/video/5秒视频.mp4" controls width="500px" height="300px" poster="static/video/5秒视频封面.jpg"></video> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
盒子模型
1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
2. 盒子默认都是块级元素: 独占一行,支持宽度设置
(根据盒子模型示意图分析)
3. 盒子模型可以设置5个样式: 宽高背景内外边距与边框
(1): width: 宽度(水平方向)
(2): height: 高度(垂直方向)
(3): background-color: 背景 (默认透明)
(4): padding: 内边距, 内容与边框之间的填充区域
(5): margin: 外边距,决定当前盒子与其它盒子之间的位置与关系
(3): border: 边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色
4. 根据是可见性可以分为二类:
(1). 可见的: width, height, border
(2). 透明的: background, padding, margin
注: padding,margin 只允许设置宽度, 不允许设置样式与颜色
子元素默认继承父元素的 width,而height需要增加inhert属性
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 300px;
height: 300px;
background-color: coral;
/*padding-top:10px;*/
/*padding-right:20px;*/
/*padding-bottom:10px;*/
/*padding-left:20px;*/
/* 可以简写:按顺时针 */
padding: 10px 20px;
/*!*上边框*!*/
/*border-top-width:10px;*/
/*border-top-style: dashed;*/
/*border-top-color:green;*/
/*!*右边框*!*/
/*border-right-width:5px;*/
/*border-right-style:solid;*/
/*border-right-color:blue;*/
/*!*底边框*!*/
/*border-bottom-width:10px;*/
/*border-bottom-style:double;*/
/*border-bottom-color:blue;*/
/*!*左边框*!*/
/*border-left-width: 5px;*/
/*border-left-style:solid;*/
/*border-left-color:blue;*/
/*简写：*/
border: 5px solid blue;
}
.box2{
/*子元素自动继承了宽度,所以这个样式是多余的*/
/*width: inherit;*/
height:inherit;
/*padding:50px;*/
background-color:lawngreen;
}
</style>
</head>
<body>
<!--<video src="static/video/5秒视频.mp4" controls width="500px" height="300px" poster="static/video/5秒视频封面.jpg"></video>-->
<!--<ul>-->
<!--li.item{$}*5>a{最新产品$}-->
<!--<li class="item">1<a href="">最新产品1</a></li>-->
<!--<li class="item">2<a href="">最新产品2</a></li>-->
<!--<li class="item">3<a href="">最新产品3</a></li>-->
<!--<li class="item">4<a href="">最新产品4</a></li>-->
<!--<li class="item">5<a href="">最新产品5</a></li>-->
<!--</ul>-->
<h2>盒子模型</h2>
<div class="box1">
<div class="box2">子元素默认继承父元素的 width,<br>而height需要增加inhert属性</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
