HTML
13、样式器+标签选择器
内部样式表
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 内部样式表 -->
<style>
/* 标签选择器 */
h1 {
width: 960px;
height: 40px;
margin: 0 auto;
}
/* 类选择器 */
.a {
background-color: red;
}
.b {
background-color: orange;
}
.c {
background-color: yellow;
}
.d {
background-color: green;
}
.e {
background-color: cyan;
}
.f {
background-color: blue;
}
.g {
background-color: purple;
}
/* 文本类*/
.h {
color: blue;
text-align: center;
width: 100px;
height: 38px;
overflow: hidden;
}
.big{
font-size: 32px;
}
.normal{
font-size: 24px;
}
.small{
font-size: 12px;
}
/* ID 选择器，不同的ID使用相同属性，逗号隔开*/
/* ID 选择器只给唯一的ID值使用*/
#header,#footer{
width: 800px;
height: 120px;
border: 1px solid red;
margin: 10px auto;
}
/*通配符选择器*/
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id='header'>勇往直前</div>
<h1 class="a"></h1>
<h1 class="b"></h1>
<h1 class="c"></h1>
<h1 class="d"></h1>
<h1 class="e"></h1>
<h1 class="f"></h1>
<h1 class="g"></h1>
<p class="c h big">相信自己</p>
<!-- 就近选择最后的 -->
<p class="d f big">相信自己</p>
<div id='footer'>回归本真</div>
</body>
</html>
外部样式表
将所有样式写入style.css文件，
/* 标签选择器 */
h1 {
width: 960px;
height: 40px;
margin: 0 auto;
}
/* 类选择器 */
.a {
background-color: red;
}
.b {
background-color: orange;
}
.c {
background-color: yellow;
}
.d {
background-color: green;
}
.e {
background-color: cyan;
}
.f {
background-color: blue;
}
.g {
background-color: purple;
}
/* 文本类*/
.h {
color: blue;
text-align: center;
width: 100px;
height: 38px;
overflow: hidden;
}
.big{
font-size: 32px;
}
.normal{
font-size: 24px;
}
.small{
font-size: 12px;
}
/* ID 选择器，不同的ID使用相同属性，逗号隔开*/
/* ID 选择器只给唯一的ID值使用*/
#header,#footer{
width: 800px;
height: 120px;
border: 1px solid red;
margin: 10px auto;
}
/*通配符选择器*/
* {
margin: 0;
padding: 0;
}
然后在html文件中引用，可以多个地方引用。
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="a big">Hello, World</h1>
</body>
网页先加载内容，再加载样式表
页面加载一次样式，页面将其缓存，可以重复使用，降低流量消耗
页面风格统一
一般情况，网站首页会使用内部样式表，其他页面可共享一个或多个外部样式表，减少对传输带宽的使用。
内嵌样式表
<body>
<!-- 内嵌样式表 / 行内样式表 -->
<h1 class="a big" style="background-color: green; font-family: 'Courier';text-align: center;">Hello, World</h1>
<h1 class="a big" style="background-color: rgba(255, 25, 50, 0.5); font-family: 'Courier';text-align: center;">welcome back</h1>
<h1 class="a big" style="background-color: #ffff00; font-family: 'Courier';text-align: center;">You are the one</h1>
</body>
样式覆盖规则
不冲突的样式会叠加，冲突的样式遵循一下三原则：
就近原则：同一类型的选择就近
具体原则： ID > class > label
重要原则：!important 比具体更强
<head>
<meta charset="utf-8">
<title></title>
<style>
#h1{color: blue;}
.h1{ color: green !important;}
h1{color: red;}
</style>
</head>
<body>
<h1 class="h1" id="h1">Awesome</h1>
</body>
14、文本和字体属性
参考：https://www.runoob.com/cssref/pr-font-font.html
<head>
<meta charset="utf-8">
<title></title>
<style>
.ms{
width: 320px;
height: 100px;
border: 5px dotted gray;
line-height: 100px;
text-align: center;
margin: 10px auto;
text-decoration: underline;
text-shadow: 2px 2px gray;
font-family: Arial;
font-size: 300%;
}
.h3{
text-transform: uppercase;
font: italic bolder 2cm/60px Ariel;
}
</style>
</head>
<body>
<h1 class="ms">Test beautiful</h1>
<h1 class="h3">测试字体</h1>
</body>
15、边框和轮廓
<style>
/* 属性选择器：标签带上属性 */
/* form input后代选择器，在input前加form，表示只有表单下的标签才使用该属性 */
/* form>input:儿子选择器 */
form input[type="text"],form input[type="password"]{
border: none;
outline: none;
border-bottom: 2px dotted darkgray;
}
/* form+input相邻兄弟选择器，form~input兄弟选择器 */
form+input[type="text"]{
outline: none;
border: 1px solid lightgray;
}
<!-- focus 表示焦点,鼠标选中时使用该样式-->
form+input[type="text"]:focus{
outline: none;
border: 1px solid #00FFFF;
}
</style>
16、定位属性
<style>
.adv{
width: 200px;
height: 200px;
color: red;
background-color: blue;
position: fixed;
right: 50px;
top: 20px;
}
/* position定位：static 静态定位，正常的文档流 */
/* position定位：fixed 固定定位，相对于浏览器窗口，内容悬浮在固定位置 */
/* position定位：relative 相对定位，相对于原来正常的位置，移动对应的距离 */
/* position定位：abusolute 绝对定位，相比于父级元素，移动对应的距离 */
.p2{
position: fixed;
left: 50px;
top:20px;
}
</style>
17、表格边框
<style>
table{
border-collapse: collapse;
}
td,th{
border: 1px solid black;
}
</style>