收藏
批改状态：合格
老师批语：不仅有图片, 还能在线运行, 不错
CSS简介：用来配合设置html文档的布局和显示方式！
1.CSS引入样式的三种常用方法：内联样式，内部style样式,外部引入样式!
第一种：内联样式如下图设置了背景色蓝色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS的简介与引入</title> </head> <body> <!-- 内联样式将元素的样式使用styel属性应用到当前元素上，只适用于当期标签 --> <p style="color: blue">学习CSS内联样式</p> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
第二种将元素的样式规则用style标签插入到当前文档中，这种内部样式只对当前html文档有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS的简介与引入</title>
</head>
<!-- 将元素的样式规则用style标签插入到当前文档中，这种内部样式只对当前html文档有效!-->
<style>
p {
color: aqua;
}
</style>
<body>
<p>学习CSS内部样式嵌入</p>
<p>学习CSS内部样式嵌入</p>
<p>学习CSS内部样式嵌入</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
给元素添加
第三种外部引入样式：一个.css样式文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS外部样式的引入</title> <link rel="stylesheet" href="static/css/style1.css"> </head> <body> <p>我希望能学习好CSSS的样式外部引入</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
当这三种样式同时出现在文档运用时，内联样式>style标签内容样式>外部引入样式！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS外部样式的引入</title>
<link rel="stylesheet" href="static/css/style1.css">
</head>
<style>
p {
color: aqua;
}
</style>
<body>
<p style="color: blue">我希望能学习好CSSS的样式外部引入</p>
<p style="color: blue">我希望能学习好CSSS的样式外部引入</p>
<p>我希望能学习好CSSS的样式外部引入</p>
<p>我希望能学习好CSSS的样式外部引入</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二，CSS样式有三种选择器：id选择器，类型选择器，标签选择器。
1.下面代码演示ID选择器，id选择器使用#号加id名称！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS常用的基本选择器</title>
</head>
<style>
#red {
color: red;
}
</style>
<body>
<!-- id选择器 -->
<p id="red">CSS常用选择器之ID选择器</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.下面代码演示类型选择器，类型选择器使用.号加名称！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS常用的基本选择器</title>
</head>
<style>
/* #red {
color: red;
} */
.gereen {
color: coral;
}
</style>
<body>
<p class="gereen">学习CSS常用选择器之类选择器class</p>
<p class="gereen">今天我学会使用class选择器改变样式</p>
<p class="gereen">以后记得运用</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.下面代码演示标签选择器，标签选择器使用标签名称！如下代码p{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS常用的基本选择器</title>
</head>
<style>
/* #red {
color: red;
} */
/* .gereen {
color: coral;
} */
p {
color: firebrick;
}
</style>
<body>
<p>学习CSS常用选择器 标签 选择器class</p>
<p>今天我学会使用 标签 选择器改变样式</p>
<p>以后记得运用</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结:在以上三种选择器中，ID选择器>类选择器>标签选择器！如下代码实验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#red {
color: red;
}
.class {
color: green;
}
p {
color: gold;
}
</style>
<body>
<p id="red" class="gereen">CSS基本选择器之优先级之分，现在有ID选择器，类选择器，及标签选择器同时给属性时，ID选择器最高其次是类选择器再到标签选择器</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、html文档中一切对象都是盒子
下面代码是学生吴峰设置的一个盒子！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
h3 {
/* 我给这个盒子设置 宽度 500像素，高度100像素 */
width: 500px;
height: 100px;
/* 给盒子四边添加1个像素的实线默认黑色边框 */
border: 1px solid;
/* 给盒子添加黄色背景 */
background-color: gold;
/* 给盒子外部：上边距110像素，右边距20像素，下边距40像素，左边距80像素 */
margin: 100px 20px 40px 80px;
/* 给盒子设置内边距，上部5像素，右边10像素，下边20像素，左边40像素 */
padding: 5px 10px 20px 40px;
/* 由于外边距和内边距是透明的，我们只能设置大小，宽高！ */
}
</style>
<body>
<h3>这是一个盒子，我学习着给他加上外边距margin,边框brder,内边距padding,宽度width,高度height,背景色background-color:这6种元素属性，html文档是从上，右，下左的顺时针</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.下面代码是一个视频引入video标签，给元素加上了控件属性，封面属性，视频宽高属性！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>学习视频标签</h1> <video src="static/images/demo.mp4" controls width="500" height="300" poster="static/images/bg.jpg"></video> </body> </html>
点击 "运行实例" 按钮查看在线实例
以上是吴峰学生对9月2日学习的全部总结，请老师批改 谢谢！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
