标签：html 简单 padding sheet 特征 test styles 背景 --
Cascading Style Sheets 层叠样式表
<div style="color: red">Hello</div>在<head>标签内，定义<style>标签，<style>标签的标签体内容就是CSS代码
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS和HTML的结合-方式二</title>
<!-- 内部样式 -->
<style>
div {
color: blue;
}
</style>
</head>
<body>
<div>Hello css</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS和HTML的结合-方式三</title>
<!-- 外部样式 -->
<link rel="stylesheet" href="css/a.css" >
</head>
<body>
<div>Hello css</div>
</body>
</html>
/*a.css文件*/
div {
color: green;
}格式
选择器 {
? /* 这是注释 */
? 属性名1:属性值1;
? 属性名2:属性值2;
? 属性名3:属性值3;
? ......
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
#IDSTest {
color: red;
}
div {
color: green;
}
.CSTest {
color: blue;
}
</style>
</head>
<body>
<!-- ID选择器 -->
<div id="IDSTest">ID选择器测试一</div>
<div>ID选择器测试二</div>
<!-- 元素选择器 -->
<div>元素选择器测试</div>
<!-- 类选择器 -->
<p class="CSTest">p标签测试一</p>
<p class="CSTest">p标签测试二</p>
<p class="CSTest">p标签测试三</p>
</body>
</html>选择所有元素
语法：* {}
并集选择器
语法：选择器1, 选择器2 {}
后代选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2 {}
嫡长子(大雾)选择器：筛选选择器1的直接的子元素选择器2
语法：选择器1 > 选择器2 {}
属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称[ 属性名=属性值 ] {}
伪类选择器：选择一些元素所具有的状态
语法：元素: 状态 {}
如：<a> 不同状态
border：设置边框（复合属性）
用法：border: 边框粗细 边框样式 边框颜色;
<!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;
}
.div2 {
width: 200px;
height: 200px;
padding: 50px;
/*
设置合资的属性，让width和height就是最终盒子的大小
*/
box-sizing: border-box;
}
.div3 {
float: left;
}
.div4 {
float: left;
}.div5 {
float: right;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1" ></div>
</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">ccccc</div>
</body>
</html>标签：html 简单 padding sheet 特征 test styles 背景 --
原文地址：https://www.cnblogs.com/klenkiven/p/12508127.html
