CSS语法
/* 目录: 一: 语法 二: code 三: 颜色 四: 边框线 五: 空间控制 六: 显示方式 七: 显示float 八: 引入 九: class&id 十: 定位: 固定; 相对; 绝对 十一: 透明度; 圆弧 十二: 标签 十三: 选择器 十四: 滑动 十五: animation 十六: 两轴显示 */
一: 语法
/*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-width: 5px"> <!-- 边框:直线; 粗细:5px --> <p style="outline-color: red; outline-style:dotted; outline-width: thin"> <!-- 边框:点线; 粗细:细的 --> <p style="outline-color: red; outline-style:dashe; outline-width: thin"> <!-- 边框:划线; 粗细:细的 --> <p style="outline-color: red; outline-style:double; outline-width: 3px"> <!-- 边框:双线; 粗细:3px --> <p style="outline-color: red; outline-style:groove; outline-width: 8px"> <!-- 边框:凹槽; 粗细:8px --> <p style="outline-color: red; outline-style:ridge; outline-width: 8px"> <!-- 边框:凸槽; 粗细:8px --> <p style="outline-color: red; outline-style:inset; outline-width: 8px"> <!-- 边框:凹边; 粗细:8px --> <p style="outline-color: red; outline-style:outset; outline-width: 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; width:50px; height:50px"> 语文 </td> <!-- 外框: 宽度 高度 --> <td style="border:1px solid blue; width: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; <!-- 粗细 实线 蓝色 --> width: 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>
三: 颜色
<!-- 颜色 --> 1 来源 (1) VS Code: 自带工具 (2) w3schools:Color Names; Color Picker (3) google: 色码表 2 使用: (1) name (2) # (3) rgb (4) hsl
四: 边框线
<div style="color: green; background-color: pink; font-size: 18px;"> <h1> css教学</h1> <p style="font-size: 36px; height: 100px; border: 5px solid blue;"> 实线边框</p> <p style="font-size: 36px; width: 200px; border: 5px dashed blue;"> 虚线边框</p> </div>
五: 空间控制
<!-- 空间控制 --> <!-- 空间内外 padding: 内部 margin: 外部 --> <!-- 范围四层: 1 文字宽度: font-size 2 内框距离: padding 3 边框宽度: border 4 外框距离: margin --> <body> <h1> css教学_start </h1> <div style = "font-size:18px; padding:36px; border: 72px solid blue; margin:144px; "> hello world </div> <h1> css教学_end </h1> </body> <!-- 微调 padding-top: 10px; /* 内间距 - 高 */ padding-bottom: 20px; /* 内间距 - 低 */ padding-left: 30px; /* 内间距 - 左 */ padding-right: 15px; /* 内间距 - 右 */ margin-top: 10px; /* 外间距 - 高 */ margin-bottom: 20px; /* 外间距 - 低 */ margin-left: 30px; /* 外间距 - 左 */ margin-right: 15px; /* 外间距 - 右 */ --> <!-- 连续写法: 上 左 下 右 padding:10px 20px 30px 40px; -->
六: 显示方式
<!-- 显示方式: block; inline --> <body> <!-- <p> 默认显示方式: block --> <p> hi </p> <p> world</p> </body> <body> <!-- <p> 改变显示方式: inline --> <p style="display: inline;"> hi </p> <p style="display: inline;"> world</p> </body> <body> <!-- <span> 默认显示方式: inline --> <span> hi</span> <span> world</span> </body> <body> <!-- <span> 改变显示方式: block --> <span style="display:block"> hi</span> <span style="display:block"> world</span> </body>
七: 显示float
<!--显示: float display--> <!-- float原理: 3D分层 --> <!-- 图片: 浮动左边 --> <body> <img src="123.png" width="300px" style="float:left;"> <p>VS Code: 自带工具</p> </body> <!-- 图片: 浮动右边 --> <body> <img src="123.png" width="300px" style="float:right;"> <p>VS Code: 自带工具</p> </body> <!-- 列表: 浮动左边 --> <body> <ul style=" float: left; background-color: lightblue;"> <li> 红茶 </li> <li> 咖啡 </li> <li> 牛奶 </li> </blockquote> </ul> <p>VS Code: 自带工具</p> <p>VS Code: 自带工具</p> </body>
八: 引入
<!-- 引入 --> <!-- 行内式 --> <!-- 内嵌式 --> <!-- 外链式 -->
九: class&id
<!-- class & id --> <!-- class --> .food{ color: orange; } .country{ color: blue; } <p class="food background-grey"> 麻婆豆腐</p> <p class="food"> 烧饼</p> <p class="food"> 宫保鸡丁</p> <p class="country background-grey"> 大洋洲</p> <p class="country"> 亚洲</p> <p class="country"> 欧洲</p> <!-- id --> <!-- 作用: 唯一识别名称 --> #css_h1{ color: crimson; } <h1 id="css_h1"> CSS 教学</h1>
十: 定位: 固定; 相对; 绝对
<!-- position: fixed; relative; absolute--> <!-- 固定定位 --> <body style="height: 1500px;"> <!-- position: fixed --> <div style=" position: fixed; width: 80px; height: 80px; background-color: blue;"></div> <div style="width: 120px; height: 120px; background-color: red;"></div> </body> <body style="height: 1500px;"> <!-- position: 固定定位 - 底部 --> <div style=" position: fixed; bottom: 0px; width: 80px; height: 80px; background-color: blue;"></div> <div style="width: 120px; height: 120px; background-color: red;"></div> </body> <!-- 相对定位--> <!-- 本来位置做偏移; 原本空间还在--> <body style="height: 1500px;"> <!-- position: 相对定位 - 右移下移 --> <div style=" position: relative; left: 35px; top: 15px; width: 80px; height: 80px; background-color: blue;"></div> <div style="width: 120px; height: 120px; background-color: red;"></div> </body> <!-- 绝对定位--> <div style="padding: 30px; border: 5px solid red;"> <div style="padding: 30px; border: 5px solid red;"> <div style=" position: absolute; width: 40px; height: 40px; background-color: blue;"> </div> </div> </div> <!-- 根据最近外层位置: 绝对定位--> <div style="padding: 30px; border: 5px solid red;"> <div style=" position: relative; padding: 30px; border: 5px solid red;"> <div style=" position: absolute; top:0px; right: 0px; width: 40px; height: 40px; background-color: blue;"> </div> </div> </div> <!-- 绝对定位: 对比--> <body style="height: 1500px;"> <h1> CSS 教学</h1> <p style="position: relative; top: 65px; left: 25px;">你好</p> <div style="opacity: 5; width: 80px; height: 80px; background-color: pink;"></div> <p> 123 </p> <p> 456 </p> <div style="width: 80px; height: 80px; background-color: pink;"></div> </body> <body style="height: 1500px;"> <div style="position: fixed; opacity: 0.8; width: 80px; height: 80px; background-color: blue;"> <p style="position: absolute; top: 15px; left: 25px;">你好</p> </div> </body>
十一: 透明度; 圆弧
<!-- fixed; border-radius --> <!-- position: 透明度 0~1; --> <body style="height: 1500px;"> <!-- position: fixed --> <h1> CSS 教学</h1> <p style="position: relative; top: 65px; left: 25px;"> 你好</p> <div style="opacity: 1; width: 80px; height: 80px; background-color: rgb(0, 0, 225);"></div> </body> <!-- border-radius: 圆弧; --> <body style="height: 1500px;"> <!-- position: fixed --> <h1> CSS 教学</h1> <p style="position: relative; top: 65px; left: 25px;"> 你好</p> <div style="opacity: 0.7; border-radius: 30px; width: 80px; height: 80px; background-color: rgb(0, 0, 225);"></div> </body>
十二: 标签
<html> <head> <meta charset="UTF-8"><meta> <title>小白的网页</title> <style> p{ color: black; background-color: green; } p1{ color: orange; background-color: green; } h1{ color: red; } </style> </head> <body style="height: 1500px;"> <h1> CSS 教学</h1> <p > 麻婆豆腐好吃</p> <p style="color: palegreen;"> 麻婆豆腐好吃</p> <p > 麻婆豆腐好吃</p> <p > 麻婆豆腐好吃</p> <p > 麻婆豆腐好吃</p> <p1> 麻婆豆腐好吃</p> <p1> 1111111111</p1> </body> </html>
十三: 选择器
<!-- 组 选择器 --> .food, #css_h1{ <!-- 类标签为food，和id标签为css_h1 --> background-color: darkgray; } <p class="food"> 烧饼</p> <h1 id="css_h1"> CSS 教学</h1> <!-- 所有 --> *{ background-color: darkgray; } <!-- 属性 --> [href]{ background-color: darkgray; }
十四: 滑动
<!-- 滑动 --> h1:hover{ background-color: darkgreen; }
十五: animation
/*box设置*/ .box{ width: 200px; height: 200px; background-color:grey; } /*写法一*/ @keyframes change-color{ from {background-color: red;} to {background-color:blue;} } /*写法二*/ @keyframes change-color{ 0% {background-color: red; top: 10px; left: 10px;} 20% {background-color:blue; top: 20px; left: 20px;} 40% {background-color:orange; top: 30px; left: 30px;} 60% {background-color:palegreen; top: 40px; left: 40px;} 80% {background-color:blueviolet; top: 50px; left: 50px;} 100% {background-color:orangered; top: 60px; left: 60px;} } /*动画设置*/ .box-animation:hover{ animation-name: change-color; animation-duration: 2s; /*播放时长: */ animation-iteration-count: 1; /*循环次数: 数字; infinite-无线次数*/ animation-delay: 1s; /*延迟开始: */ position: relative; }
<link rel="stylesheet" href="style.css"> <body> <h1> css教学 </h1> <div class="box box-animation"></div> </body>
十六: 两轴显示
/* 功能: 横轴显示; 调整比例; 调整顺序 */ /* html页面*/ <div class="container"> <div class="box-1"> 区块1 </div> <div class="box-2"> 区块2 </div> <div class="box-3"> 区块3 </div> </div> /* CSS页面*/ /* 内容画框 */ .container div{ border: 1px solid rgb(202, 201, 201); padding: 10px; width: 100px; } /* 外框设置 */ .container { display:flex; /* 显示方式: 行显示*/ } .box-1{ flex: 1; /* 显示比例: 按照数字*/ order: 2; /* 显示位置: 按照序号*/ } .box-2{ flex: 1; order: 1; /* 显示位置: 按照序号*/ } .box-3{ flex: 1; order: 3; /* 显示位置: 按照序号*/ }
/* 功能: 横轴显示: 自动换行 */ /* html页面*/ <div class="container"> <div class="box-1"> 区块1 </div> <div class="box-2"> 区块2 </div> <div class="box-3"> 区块3 </div> <div class="box-1"> 区块4 </div> <div class="box-2"> 区块5 </div> <div class="box-3"> 区块6 </div> <div class="box-1"> 区块7 </div> <div class="box-2"> 区块8 </div> <div class="box-3"> 区块9 </div> </div> /* CSS页面*/ /* 外框设置 */ .container { display:flex; /* 显示方式: 行显示*/ flex-wrap: wrap; /* 自动换行*/ } /* 内容画框 */ .container div{ border: 1px solid rgb(202, 201, 201); padding: 10px; width: 100px; }
/* 功能: 主轴显示: 4种 */ /* html页面*/ <div class="container"> <div class="box-1"> 区块1 </div> <div class="box-2"> 区块2 </div> <div class="box-3"> 区块3 </div> <div class="box-1"> 区块4 </div> <div class="box-2"> 区块5 </div> <div class="box-3"> 区块6 </div> <div class="box-1"> 区块7 </div> <div class="box-2"> 区块8 </div> <div class="box-3"> 区块9 </div> </div> /* CSS页面*/ /* 内容画框 */ .container div{ border: 1px solid rgb(202, 201, 201); padding: 10px; width: 100px; } /* 外框设置 */ .container { display:flex; /* 显示方式: 行显示 */ flex-wrap: wrap; /* 自动换行 */ flex-direction: column; /* 主轴: 从上到下 */ /*flex-direction: column-reverse; */ /* 主轴: 从上到下 - 反转 */ /*flex-direction: row; */ /* 主轴: 从左到右 */ /*flex-direction: row-reverse; */ /* 主轴: 从左到右 - 反转 */ height: 300px; /* 外框高度: 300px */ border: 1px solid red; /* center:中间; flex-end:末尾; flex-start:开始; space-around:两边空格; space-between:两边内容; space-evenly:两边空格*/ }
/* 功能: 两轴单多行组合 */ /* html页面*/ <div class="container"> <div class="box-1"> 区块1 </div> <div class="box-2"> 区块2 </div> <div class="box-3"> 区块3 </div> <div class="box-1"> 区块4 </div> <div class="box-2"> 区块5 </div> <div class="box-3"> 区块6 </div> <div class="box-1"> 区块7 </div> <div class="box-2"> 区块8 </div> <div class="box-3"> 区块9 </div> </div> /* CSS页面*/ /* 内容画框 */ .container div{ border: 1px solid rgb(202, 201, 201); padding: 10px; width: 100px; height: 20px; } /* 外框设置 */ .container { height: 300px; /* 外框高度: 300px */ border: 1px solid red; display:flex; /* 显示方式: 行显示 */ flex-wrap: wrap; /* 自动换行 */ flex-direction: row; /* 主轴: 从左到右 */ /*flex-direction: column; */ /* 主轴: 从上到下 */ /*flex-direction: column-reverse; */ /* 主轴: 从上到下 - 反转 */ /*flex-direction: row-reverse; */ /* 主轴: 从左到右 - 反转 */ /* center:中间; flex-end:末尾; flex-start:开始; space-around:两边空格; space-between:两边内容; space-evenly:两边空格 */ justify-content: center ; /* 第二轴: 单行*/ /* align-items:center; */ /* 第二轴: 多行 */ align-content: space-between; }
