一: 语法
/*css
1 html 表达结构
2 css 表达样式
3 样式和内容/结构是分离的
*/
/* 添加
1 外部文件
2 头部标记
<style>
p{background-color:gray;}
</style>
3 属性内嵌
<p style="background-color:yellow;">
我的第一个HTML页面
</p>
*/
/* 背景样式
1 颜色
<!-- <body style="background-color:#85eb5a"> -->
<!-- <body style="background-color:green"> -->
<!-- <body style="background-color:rgba(0, 255, 0, 0.1)"> <!-- 颜色 + 透明度 -->
2 属性
<body style="background-image:url(123.jpeg);
background-repeat:no-repeat; <!-- 重复 -->
background-position:center; <!-- 位置 -->
background-attachment:fixed"> <!-- 滚动 -->
*/
/* 文本样式: 段落
<p style="color:red"> <!-- 字体颜色 -->
<p style="text-indent: 2em"> <!-- 段首缩进 -->
<p style="text-indent: 10%"> <!-- 段首缩进 -->
<p style="text-indent:-2em; padding:2em"> <!-- 悬挂缩进 -->
<p style="text-indent:2em; line-height:2"> <!-- 行间距 -->
<p style="text-indent:2em; text-align:right"> <!-- 对齐: 靠右 -->
<p style="text-indent:2em; text-align:center"> <!-- 对齐: 靠右 -->
<p style="text-indent:2em; text-align:justify"> <!-- 对齐: 两端 -->
<p style="word-spacing: 10px"> <!-- 单词间距 -->
<p style="letter-spacing: 10px"> <!-- 字符间距 -->
<p style="text-transform: uppercase"> <!-- 字符变形:大写 -->
<p style="text-transform: lowercase"> <!-- 字符变形:小写 -->
<p style="text-transform: capitalize"> <!-- 字符变形:首字母大写 -->
<p style="text-decoration:underline overline line-through"> <!-- 下划线 上划线 中间线-->
<p style="white-space:pre"> <!-- 回车空格: 原文-->
<p style="white-space:pre-wrap"> <!-- 卷绕 -->
<p style="white-space:nowrap"> <!-- 不卷绕 -->
<p style="white-space:pre-line"> <!-- 合并空白 保留换行 -->
<p style="direction:rtl"> <!-- 文字书写方向 -->
*/
/* 文本样式: 字体
字体、大小、加粗、倾斜、阴影、外围轮廓、
<p style="font-family: cursive"> <!-- 手写 -->
<p style="font-family: hei"> <!-- 黑体 -->
<p style="font-family: Times, TimesNR, serif"> <!-- 默认字体顺序 -->
<p style="font-style: italic"> <!-- 倾斜 -->
<p style="font-style: obique"> <!-- 倾斜 -->
<p style="font-variant: small-caps"> <!-- 字母小写 -->
<p style="font-weight: bold"> <!-- 加粗 -->
<p style="font-weight: 100"> <!-- 加粗 -->
<p style="font-size: 2em"> <!-- 大小 -->
<p style="font-size: 0.4em"> <!-- 大小 -->
<p style="font-size: 10pm"> <!-- 大小 -->
*/
/* 文本样式: 效果
阴影 边框
<p style="text-shadow: 3px 5px 5px rgba(0, 255, 0, 0.5)"> <!-- 往左3个点 往下5个点 范围多大 颜色-->
<p style="text-shadow: 0px -1px 0px #000000, 0px 1px 3px #606060; color:#606060">
<p style="outline-color: red; outline-style:solid; outline- 5px"> <!-- 边框:直线; 粗细:5px -->
<p style="outline-color: red; outline-style:dotted; outline- thin"> <!-- 边框:点线; 粗细:细的 -->
<p style="outline-color: red; outline-style:dashe; outline- thin"> <!-- 边框:划线; 粗细:细的 -->
<p style="outline-color: red; outline-style:double; outline- 3px"> <!-- 边框:双线; 粗细:3px -->
<p style="outline-color: red; outline-style:groove; outline- 8px"> <!-- 边框:凹槽; 粗细:8px -->
<p style="outline-color: red; outline-style:ridge; outline- 8px"> <!-- 边框:凸槽; 粗细:8px -->
<p style="outline-color: red; outline-style:inset; outline- 8px"> <!-- 边框:凹边; 粗细:8px -->
<p style="outline-color: red; outline-style:outset; outline- 8px"> <!-- 边框:凸边; 粗细:8px -->
*/
/* 列表: 样式
无序列表
<ul>
<li> 语文</li>
<li> 数学</li>
<li> 物理</li>
</ul>
<ul style="list-style:square"> <!-- circle:空心圆; square:方的; -->
<ul style="list-style-image:url(123.jpeg)"> <!-- 插图 -->
<ul style="list-style-position:inside"> <!-- inside:换行-原点对齐; outside:换行-文字对齐 -->
<ul style="list-style:outside circle"> <!-- 组合 -->
*/
/* 表格: 样式
<table border="50"> <!-- 样式 -->
<caption>表格</caption> <!-- 表名 -->
<tr>
<td> 语文 </td>
<td> 数学 <td>
<td> 英语 <td>
</tr>
<tr>
<td> 1 </td>
<td> 2 <td>
<td> 3 <td>
</tr>
</table>
<table style="border:1px solid blue; <!-- 粗细 实线 蓝色 -->
border-collapse:collapse"> <!-- 重叠-去重 -->
<caption>表格</caption> <!-- 表名 -->
<tr>
<td style="border:1px solid blue"> 语文 </td>
<td style="border:1px solid blue"> 数学 <td>
<td style="border:1px solid blue"> 英语 <td>
</tr>
<tr>
<td style="border:1px solid blue"> 1 </td>
<td style="border:1px solid blue"> 2 <td>
<td style="border:1px solid blue"> 3 <td>
</tr>
</table>
<td style="border:1px solid blue; 50px; height:50px"> 语文 </td> <!-- 外框: 宽度 高度 -->
<td style="border:1px solid blue; 50px; height:50px;
vertical-align:top; text-align:right"> 语文 </td> <!-- 文字: 高度 宽度 -->
<td style="border:1px solid blue; padding:10px"> 语文 </td> <!-- 间距 -->
<table style="caption-side:bottom; <!-- 标题位置 -->
table-layout:fixed/automatic" <!-- 内容展示 -->
</table>
*/
/* css: 框模型
<table
style = "border: 1px solid blue; <!-- 粗细 实线 蓝色 -->
50px;
height: 100px;
vertical-align: top;
text-align: right;
padding:10 20 30 40; <!-- 内边距 -->
border-collapse: collapse"> <!-- 重叠-去重 -->
<caption>表格</caption> <!-- 表名 -->
<tr>
<td style="border:1px solid blue"> 语文 </td>
<td style="border:1px solid blue"> 数学 <td>
<td style="border:1px solid blue"> 英语 <td>
</tr>
<tr>
<td style="border:1px solid blue"> 1 </td>
<td style="border:1px solid blue"> 2 <td>
<td style="border:1px solid blue"> 3 <td>
</tr>
</table>
*/
/* css: 定位
普通流 浮动 绝对
<div style="position:absolute; top:120px">
<p style="position:relative; left: -20px; bottom: +20px"> <!-- 相对定位 -->
第一段
</p>
<p style="position:absolute; left: -20px; bottom: -20px"> <!-- 绝对定位 -->
第二段
</p>
</div>
<div>
<img src="123.jpeg" width=200 style="float:right"> <!-- 浮动 -->
</img>
</div>
*/
/* 样式选择器
元素选择器 类选择器
<html>
<head>
<style>
p, td, th, body {border:1px solid blue}
p {background-color:orange}
p em {background-color:white}
*.important{color:red}
p.important{color:red}
*#important2{color:green}
*[title]{color:red}
a:visited{color:#000000}
</style>
</head>
<body>
<table border-collapse:collapse"> <!-- 重叠-去重 -->
<caption>表格</caption> <!-- 表名 -->
<tr>
<td> 语文 </td>
<td> 数学 <td>
<td> 英语 <td>
</tr>
<tr>
<td> 1 </td>
<td> 2 <td>
<td> 3 <td>
</tr>
</table>
<p title = "Hello">
asd
</p>
<p class = "important">
123<br>
第<em>一</em>段
</p>
<p id = "important2">
important2
<a href="http://www.baidu.com"> 百度</a>
</p>
</body>
</html>
*/
二: code
<!DOCTYPE html>
<html>
<head>
<style>
p, td, th, body {border:1px solid blue}
p {background-color:orange}
p em {background-color:white}
*.important{color:red}
p.important{color:red}
*#important2{color:green}
*[title]{color:red}
a:visited{color:#000000}
</style>
</head>
<body>
<table border-collapse:collapse"> <!-- 重叠-去重 -->
<caption>表格</caption> <!-- 表名 -->
<tr>
<td> 语文 </td>
<td> 数学 <td>
<td> 英语 <td>
</tr>
<tr>
<td> 1 </td>
<td> 2 <td>
<td> 3 <td>
</tr>
</table>
<p title = "Hello">
asd
</p>
<p class = "important">
123<br>
第<em>一</em>段
</p>
<p id = "important2">
important2
<a href="http://www.baidu.com"> 百度</a>
</p>
</body>
</html>