一.基本概念:
1.层次：由低到高：内联样式表（作用于单个html元素），文档样式表（对文档主体作用），外部样式表（可以应用于任意数目的文档）。较低的层次可以覆盖较高的层次。
2.作用：1. 至少为一个完整的文档提供统一的样式。
2. 将页面美化和HTML代码进行分离,提高复用性。所以不建议使用内联样式表。
3.CSS的优先级：
1.不同类选择器按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器。
2.同类选择器遵循就近原则。
4.基础知识：
4.1单位：像素（pixel）：px 英寸inch:in 厘米centimeter:cm 毫米millimeter:mm 点point:pt 12点活字pica:pc em:用像素表示字体大小 ex:表示字母x的高
4.2字体属性：字体族：font-family 字体大小：font-size 字体样式：font-style(italic斜体，normal默认) 字体粗细：font-weight（lighter,normal）
文本修饰：text-decoration(line-through,overline,underline,none)
文本间距：letter-spacing(单词中字母间距)，word-spacing(单词间距),line-height(行间距)
首先是.css代码部分（主要是一些选择器）
/*CSS选择器: 找到要修饰的标签或者元素
内部样式: 如果在html文件中写需要在<style></style>中写css
*/
/*元素选择器 元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}*/
div{
color: blue;
font-size: 50px;
}
/* ID选择器 以#号开头 ID在整个页面中必须是唯一的
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}*/
#span1{
color: red;
font-size: 50px;
}
/*类选择器:以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}*/
.class1{
color: green;
font-size: 50px;
}
/*选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}*/
h1, h2, h3{color: #FF0000;}
/*属性选择器:
a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']
*/
a[href][title]{
color: yellow;
}
/*后代选择器:有爷爷选择器 孙子选择器 可以找出所有的后代*/
h4 em{
color: greenyellow;
}
/*子元素选择器: 父选择器 > 儿子选择器*/
h5 > em{
color: hotpink;
}
/*伪类选择器: 通常都是用在A标签上*/
a:link {color: red} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */结合html查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--外部样式: 通过link标签引入一个外部的css文件-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--div标签: 默认占一行,自动换行-->
<div>java</div>
<div>c语言</div>
<div>python</div>
<!--span标签: 内容显示在同一行-->
<!--行内样式: 直接在标签中添加一个style属性, 编写CSS样式-->
<span id="span1" class="class2">html</span>
<span class="class2" style="color: aqua;">css</span>
<span class="class2">javascript</span>
<span class="class1">输入</span>
<span class="class1">输出</span>
<!--流式布局
CSS浮动 : 浮动元素不属于文档流,不占空间
float属性:浮动
left :左边浮动
right:右边浮动
clear属性: 清除浮动
both : 两边都不允许浮动
left : 左边不允许浮动
right: 右边不允许浮动
-->
<div style="float:left;width: 200px; height: 200px; background-color: red;"></div>
<div style="clear: both;"></div>
<div style="width: 250px; height: 200px; background-color: greenyellow;"></div>
<div style="width: 200px; height: 200px; background-color: blue;"></div>
<h1>hhh</h1>
<h2>hhh</h2>
<h3>hhh</h3>
<a href="#" title="aaa">张三</a>
<a href="#" >李四</a>
<h4>
This is a
<em>儿子</em>
<strong>
<em>孙子</em>
</strong>
heading
</h4>
<h5>
This is a
<em>儿子</em>
<strong>
<em>孙子</em>
</strong>
heading
</h5>
<a href="#">黑马程序员</a>
</body>
</html>接下来以注册页面为实例讲解盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--内边距: padding-top padding-right padding-bottom padding-left
控制的是盒子内容的距离
padding:10px; 上下左右都是10px
padding:10px 20px; 上下是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
外边距:margin-top:margin-right:margin-bottom:margin-left:
控制盒子与盒子之间的距离
CSS绝对定位:
position: absolute
top: 控制距离顶部的位置
left: 控制距离左边的位置
-->
<div>
<div style="position:absolute;top:50px;left:350px;border: 5px solid darkgray;width: 50%;height: 75%;background-color: white;">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6">用户注册</font></td>
</tr>
<input type="hidden" value="1060324372@qq.com" name="uid"/>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username" placeholder="请输入用户名" /></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" placeholder="请输入密码" /> </td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" /> </td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" /> </td>
</tr>
<tr>
<td>手机号码:</td>
<td><input type="tel" /> </td>
</tr>
<tr>
<td>照片:</td>
<td><input type="file" /> </td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" />读书
<input type="checkbox" />看报
<input type="checkbox" />睡觉
</td>
</tr>
<!--textarea :文本域,输入一段文本；cols:指定宽度；rows:指定高度-->
<tr>
<td>自我介绍:
<td><textarea cols="40" rows="4"></textarea></td>
</tr>
<td>家庭住址:</td>
<!--select :选择栏，option选项-->
<td><select>
<option>--请选择--</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="datetime-local" /> </td>
</tr>
<input type="submit" value="提交按钮"/>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
</table>
</div>
</div>
</body>
</html>
其他用法
<!DOCTYPE html>
<html>
<head>
<!--
CSS 指的是层叠样式表* (Cascading Style Sheets),也称级联样式表
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中
CSS 规则集（rule-set）由选择器和声明块组成：
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
-->
<!--
有三种插入样式表的方法：
外部 CSS
通过使用外部样式表，只需修改一个文件即可改变整个外观
每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用
部样式表以 .css 扩展名保存,不应包含任何 HTML 标签。
内部 CSS
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在 head 部分的 <style> 元素中进行定义。
行内 CSS
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
但是不建议使用，这样失去了CSS的优势
注意：如果使用多个样式，行内样式具有最高优先级，将覆盖外部和内部样式以及浏览器默认样式
-->
<!--
CSS 选择器分为五类：
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）
-->
<!--
CSS 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
-->
<style>
p {
text-align: center;
color: red;
}
</style>
<!--
CSS id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。id 名称不能以数字开头。
-->
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
<!--
CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素，也可以引用多个类。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
-->
<style>
.center {
text-align: center;
color: yellow;
}
.large {
font-size: 300%;
}
</style>
<!--
CSS 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
* {
text-align: center;
color: blue;
}
-->
<!--
CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
对选择器进行分组用逗号来分隔
-->
<style>
h1, h2 {
text-align: center;
color: red;
}
</style>
<style>
body {
background-color: lightblue;
background-image: url("paper.gif");
/*opacity: 0.5;*/
/*
background-color 属性指定元素的背景色.
background-image 属性指定用作元素背景的图像。
还可以为特定元素设置背景图像，例如 <p> 元素
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明
使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度
如果不希望对子元素应用不透明度，例如上面的例子，使用 RGBA 颜色值
*/
}
div {
background: rgb(0, 128, 0);
}
p {
background-image: url("paper1.jpg");
background-repeat: repeat-x;
background-position: right top;
background-attachment: fixed;
/*
默认情况下，background-image 属性在水平和垂直方向上都重复图像
如需水平重复, 设置(background-repeat: repeat-x;)
如需垂直重复，设置 (background-repeat: repeat-y;)
指定只显示一次背景图像：background-repeat: no-repeat;
background-position 属性用于指定背景图像的位置。
background-attachment 属性指定背景图像是应该滚动(scroll)还是固定(fixed)
如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性
body {
background: #ffffff url("tree.png") no-repeat right top;
}
在使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
其他 CSS 背景属性
属性 描述
background-clip 规定背景的绘制区域。
background-color 设置元素的背景色。
background-origin 规定在何处放置背景图像。
background-size 规定背景图像的尺寸。
*/
}
</style>
<!--
CSS 边框样式
border-style 属性指定要显示的边框类型,属性可以设置一到四个值（上边框、右边框、下边框和左边框）。
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-radius 属性用于向元素添加圆角边框
CSS 边框宽度
border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：
CSS 边框颜色
border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色：
name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
transparent
注释：如果未设置 border-color，则它将继承元素的颜色。
-->
<style>
p.dotted {border-style: dotted; border-width: thin;border-radius: 5px;}
p.dotted {border-style: dotted; border-width: thin;}
p.dashed {border-style: dashed;border-width: medium;}
p.solid {border-style: solid;border-width: thick;}
p.double {border-style: double;border-width: 5px;}
p.groove {border-style: groove;border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */}
p.ridge {border-style: ridge; border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */}}
p.inset {border-style: inset;border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */}
p.outset {border-style: outset;border-color: #ff0000; /* 红色 */}
p.none {border-style: none; border-color: rgb(255, 0, 0); /* 红色 */}
p.hidden {border-style: hidden;border-color: hsl(0, 100%, 50%); /* 红色 */}}
p.mix {border-style: dotted dashed solid double;}
</style>
<style>
h2 {
/*不同的边框样式*/
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
<!--
CSS 外边距
margin 属性用于在任何定义的边框之外，为元素周围创建空间。
margin-top
margin-right
margin-bottom
margin-left
所有外边距属性都可以设置以下值：
auto - 浏览器来计算外边距,将 margin 属性设置为 auto，以使元素在其容器中水平居中,
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距
注意：允许负值。
-->
<style>
#d1 {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
<!--
CSS 内边距
padding 属性用于在任何定义的边界内的元素内容周围生成空间。
padding-top
padding-right
padding-bottom
padding-left
width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。
所有内边距属性都可以设置以下值：
length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距
注意：不允许负值。
-->
<style>
#d2 {
border: 1px solid black;
background-color: lightblue;
width: 300px;/*<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 70px + 右内边距 30px）*/
/*box-sizing: border-box;若要将宽度保持为 300px，无论填充量如何，那么使用 box-sizing 属性。*/
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 70px;
}
</style>
<!--
CSS 设置高度和宽度
height 和 width 属性用于设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。
它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
height 和 width 属性可设置如下值：
auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。
inherit - 从其父值继承高度/宽度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
-->
<style>
#d3 {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
<!--
CSS 框模型
实质上是一个包围每个 HTML 元素的框。它包括：
内容 - 框的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的。
-->
<style>
#d4 {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
<!--
CSS 轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。
轮廓属性：
outline-style - 属性指定轮廓的样式
outline-color - 属性用于设置轮廓的颜色。
outline-width - 属性指定轮廓的宽度
outline-offset- 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的
outline-style 属性指定轮廓的样式，并可设置如下值：
dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。
outline-width 属性指定轮廓的宽度，并可设置如下值之一：
thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）
outline-color 属性用于设置轮廓的颜色。
name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）
注意：轮廓与边框不同！
轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。
同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
-->
<style>
p {outline-color:red;}
p.dotted {outline-style: dotted;outline-width: thin;outline-color: #FF0000;}
p.dashed {outline-style: dashed;outline-width: medium;outline-color:red}
p.solid {outline-style: solid;outline-width: thick;outline-color:rgb(255,0,0);}
p.double {outline-style: double;outline-width: 5px;outline-color:hsl(0, 100%, 50%);}
p.groove {outline-style: groove;outline-color:invert;border: 1px solid yellow;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
.offset {
margin: 30px;
background:yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
<!--
color 属性用于设置文本的颜色。
text-align 属性用于设置文本的水平对齐方式。
center - 居中
left - 左对齐
right - 右对齐
justify 将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的
direction 和 unicode-bidi 属性可用于更改元素的文本方向
vertical-align 属性设置元素的垂直对齐方式。
top - 上对齐
middle - 中对齐
bottom - 下对齐
text-decoration 属性用于设置或删除文本装饰。
overline - 上划线
line-through - 删除线
underline - 下划线
none - 从链接上删除下划线
text-transform 属性用于指定文本中的大写和小写字母。
它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写
uppercase - 转换为大写
lowercase - 转换为大写或小写字母
capitalize - 将每个单词的首字母大写
text-indent 属性用于指定文本第一行的缩进,px作为单位。
letter-spacing 属性用于指定文本中字符之间的间距，+-px作为单位增加或减少字符之间的间距。
line-height 属性用于指定行之间的间距。
word-spacing 属性用于指定文本中单词之间的间距,+-px作为单位增加或减少单词之间的间距。
white-space 属性指定元素内部空白的处理方式。
white-space: nowrap;禁用元素内的文本换行：
text-shadow 属性为文本添加阴影。
用法是指定水平阴影，垂直阴影，颜色，模糊效果
使用 font-family 属性规定文本的字体。
应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。
如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。
font-style 属性主要用于指定斜体文本。
此属性可设置三个值：
normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 属性指定字体的粗细：normal;bold
font-variant 属性指定是以 small-caps 字体（小型大写字母）还是normal显示文本。
font-size 属性设置文本的大小。
可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"），
文本将遵循浏览器窗口的大小缩放，1vw = 视口宽度的 1％。
-->
<style>
h3 {
text-shadow: 2px 2px 5px red;
}
</style>
<!--
链接 a 可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。
四种链接状态分别是：
a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时
如果为多个链接状态设置样式，请遵循如下顺序规则：
a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后
text-decoration 属性主要用于从链接中删除下划线
background-color 属性可用于指定链接的背景色：
-->
<style>
/* unvisited link */
a:link {
color: red;
text-decoration: none;
background-color: yellow;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
text-decoration: underline;
}
/* selected link */
a:active {
color: blue;
}
</style>
<!--
list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）
-->
<style>
ul {
list-style-image: url('/i/photo/sqpurple.gif');
}
</style>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
</style>
<!--
在 CSS 中设置表格边框，使用 border 属性
表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框
需要一个可以覆盖整个屏幕（全宽）的表格，则 <table> 元素添加 width: 100%
border-collapse 属性设置是否将表格边框折叠为单一边框
如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性
表格的宽度和高度由 width 和 height 属性定义
text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。
默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。
vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。
默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。
如需控制边框和表格内容之间的间距，在 <td> 和 <th> 元素上使用 padding 属性
向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线
在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行
使用 nth-child() 选择器实现斑马纹表格效果，为所有偶数（或奇数）表行添加 background-color：
在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果
注意：各个属性的作用范围
-->
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
height: 70px;
padding: 15px;
border-bottom: 1px solid #ddd;
background-color: #4CAF50;
color: white;
}
td {
text-align: center;
vertical-align: bottom;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color:red;}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>救命，这杯样式有毒</p>
<p>贼子，胆敢在样式中下毒</p>
<p>我也中毒了</p>
<p id="para1">我怎么没有中毒。</p>
<p class="center">俺也是</p>
<p class="center large">何止无毒，简直大补啊</p>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<!--
RGBA
颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
-->
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<!--
HEX 值
在 CSS 中，可以使用十六进制值指定颜色：#rrggbb
通常为所有 3 个光源使用相等的值来定义灰色阴影：
-->
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<!--
HSL 值
在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：
hsla(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
-->
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<!--
HSLA 值
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。
HSLA 颜色值指定为：hsla(hue, saturation, lightness, alpha)
-->
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
<p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p>
<h2>两种不同的边框样式。</h2>
<div id="d1">
<p class="ex1">本段落继承了 div 元素的左外边距。</p>
</div>
<div id="d2">这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 70px。</div>
<div id="d3">这个 div 元素的高度为 200 像素，宽度为 50%</div>
<div id="d4">此文本是盒子里的内容。我们添加了 50px 的内边距，20px 的外边距和 15px 的绿色边框。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。</div>
<p class="dotted">点状轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓。效果取决于 outline-color 值。</p>
<p class="ridge">凸脊轮廓。效果取决于 outline-color 值。</p>
<p class="inset">凹边轮廓。效果取决于 outline-color 值。</p>
<p class="outset">凸边轮廓。效果取决于 outline-color 值。</p>
<p class="offset">本段落在边框边缘外 15 像素处有一条轮廓线。</p>
<h3>文本阴影效果！</h3>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p>list-style-image 属性规定图像作为列表项标记：</p>
<ul>
<li>辣条</li>
<li>茶</li>
<li>肥宅快乐水</li>
</ul>
<ol>
<li>辣条</li>
<li>茶</li>
<li>肥宅快乐水</li>
</ol>
<div style="overflow-x:auto;">
<table>
<tr>
<th>部门</th>
<th>姓名</th>
<th>年薪</th>
<th>奖金</th>
<th>奖金</th>
<th>奖金</th>
<th>奖金</th>
<th>奖金</th>
<th>奖金</th>
<th>奖金</th>
<th>奖金</th>
<th>奖金</th>
<th>奖金</th>
</tr>
<tr>
<td>人事</td>
<td>A</td>
<td>100000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
</tr>
<tr>
<td>开发</td>
<td>B</td>
<td>150000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
</tr>
<tr>
<td>行政</td>
<td>C</td>
<td>200000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
</tr>
<tr>
<td>项目</td>
<td>D</td>
<td>250000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
<td>10000</td>
</tr>
</table>
</div>
</body>
</html>
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
