- 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>
<link rel="stylesheet" href="css/Demo01.css">
<style>
div{
/* 这个里面设置所有的 div 样式 */
font-size: 20px;
width: 200px;
height: 100px;
background-color: #ff0000;
/* 边框设置的三个属性 */
border-color: rgb(0, 0, 0);
border-width: 1px;
border-style: solid;
}
</style>
</head>
<body>
优先级排序：自身 style 属性 > id > class > tag（标签）<br>
标题设置的div样式属性：【<br>
font-size: 20px;<br>
width: 100px;<br>
height: 100px;<br>
background-color: #ff0000;<br>
】
<div id="id01" style="width: 150px; height: 150px; background: #ff6700;">我有id01和自己设置的样式</div>
<div id="id01" class="class01">我有id01 和 class01</div>
<div class="class01">
我只有class01 <br>
<span>我是来捣乱的</span>
<div id="id02">
我是只有class01的子div，高为父的60%
<div style="background-color: rgba(30, 255, 0, 0.342); height: 50%;">
我是孙子辈了,高为父的50%
</div>
</div>
<div id="id03" style="height: 15%; font-size: 5px;">
我是高为父的60%的兄弟，我的 id 是id03
</div>
<span>我是来捣乱的</span>
<span>我是来捣乱的</span>
</div>
<div>我没有id，没有class，没有自己设置的样式</div>
<p>p标签</p>
<hr>
<b>伪类选择器</b>
<ul>
<li id="id04">:hover 鼠标经过时</li>
<li id="id05">:active 鼠标按下时</li>
<li><a href="https://www.so.com" id="id06" target="_bank">:visited 选择已访问的链接，并设置其样式，只针对 a 标签</a></li>
</ul>
<hr>
<div style="border-color: black; border-width: 10px; border-style: solid; margin: 10px;"></div>
<div style="border-color: green; border-width: 10px; border-style: solid; margin: 10px;"></div>
<hr>
<div style="border-color: black; border-width: 10px; border-style: solid; margin: 10px; float: left;"></div>
<div style="border-color: green; border-width: 10px; border-style: solid; margin: 10px; float: left;"></div>
<div style="border-color: rgba(10, 123, 230, 0.644); border-width: 10px; border-style: solid; margin: 10px; margin-top: 150px;"></div>
<hr>
<b>盒子样式</b>
<ul>
<li>边框：border:粗细, 颜色, 线条类型;【顺序可以改变】</li>
<li>外边距：margin:上, 右, 下, 左;【顺时针，从上面开始，一般都是用像素（px）为单位】</li>
<li>内边距：padding:上, 右, 下, 左;【顺时针，从上面开始，一般都是用像素（px）为单位】</li>
</ul>
<b>文本样式</b>
<ul>
<li>text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐：text-align:center;</li>
<li>text-decoration属性主要是用来删除链接的下划线：text-decoration:none;</li>
<li>文本的第一行的缩进：text-indent:50px;</li>
</ul>
需要更多信息可以参考网上的学习资料
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
- CSS 文件内容：
*{
/* 这个里面设置 body 里面所有的样式，包含 body 本身 */
padding: 0, 0, 0, 0;
}
p{
/* 这个里面设置所有 p 标签的样式 */
color: rgba(153, 0, 255, 0.507);
}
#id01{
/* 这个里面仅仅设置带有 id01 的样式 */
background-color: rgba(233, 126, 210, 0.507);
}
.class01{
/* 这个里面仅仅设置带有 class01 的样式 */
background-color: #000000;
color: #ffffff;
height: 350px;
}
.class01 div{
/* 这个里面设置的是 class01 后代 div 的样式，其中就包含儿子，孙子，... */
background-color: #fff;
color: black;
height: 60%;
}
.class01>div{
/* 这个里面设置的是 class01 的儿子辈 div 的样式，孙子辈不会享有 */
color: rgb(255, 0, 0);
}
/* 【注意】
* 空格 获取的是当前元素 后代 中所有的标签为 div 的元素
* > 获取的是当前元素 下一级 中所有的标签为 div 的元素
* 【属性设置的是 id 的也适用】
*/
#id02~span{
/* 这设置的是当前节点之后后弟弟中的所有 span标签的样式 */
background-color: #ff6700;
font-size: 3px;
}
#id04:hover{
/* 当鼠标移上时 */
background-color: red;
}
#id05:active{
/* 当鼠标按下时 */
background-color: green;
}
#id06:visited{
/* 当访问过后【只针对a标签】 */
color: #ff6700;
}
一点点笔记，以便以后翻阅。