What is the best web note-taking tool for organizing digital notes efficiently?
- 内容介绍
- 文章标签
- 相关推荐
本文共计4819个文字，预计阅读时间需要20分钟。
web笔记，HTML笔记，列表标记：无序列表，有序列表。可通过type属性定义列表序号格式！HTML结构：列表HTML元素css样式javascript脚本项目1
web notehtml note 列表
ul 无序列表
ol 有序列表 并且可以通过 type 来定义列表序号的形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list</title>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<ol type="1">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ol type="A">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ol type="I">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
</body>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
table,td,td{border: 1px solid silver;}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小杰</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小红</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<body>
<img src="../image/computer.jpg" alt="computer" title="computer">
<img src="../image/dome.png" alt="dome" title="dome">
<img src="../image/Tqqj2.jpg" alt="tqqj" title="tqqj">
</body>
</html>
超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!--锚节点 跳转到本页面的任意位置-->
<a href="#runoob">菜鸟编程</a><br>
<a href="#inside">内部链接</a><br>
<a href="#text">文本</a><br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
<div id="runoob">
<a href="www.runoob.com" target="_blank"><img src="../image/runoob-logo.png" alt="菜鸟编程" title="菜鸟编程"></a>
<br>
<a href="www.runoob.com" target="_blank">菜鸟编程——学的不仅是技术，更是梦想！</a>
<!-- target 默认为从当前页面打开链接，就是_self
_blank 从新页面打开链接 --最重要的
_parent 从父窗口打开链接
_top 在顶层窗口打开链接
-->
</div>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
<!--超链接分为外部链接和内部链接-->
<div id="inside">
<a href="../html/表格.html" target="_parent">内部链接</a>
</div>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
<div id="text">
<p>文本</p>
</div>
</body>
</html>
表单
如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。
例如：手机注册，话费充值，用户登陆等界面
数据传输有两种方式，一种是get ，明文，所有人都可以看见，不安全；
另一种是post， 暗文，看不见，安全
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form method="post" action="index.php">
昵称：<input type="text"><br>
密码：<input type="password"><br>
邮箱：<input type="email">
<select>
<option>qq.com</option>
<option selected>gmail.com</option>
<option>yahoo.com</option>
</select><br>
<!--name需要一样， value不能一样-->
性别：<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
爱好：<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="photo">摄影
<input type="checkbox" name="hobby" value="sport">运动
<br>
个人简介：
<br>
<textarea rows="5" cols="20">请介绍一下你自己</textarea>
<br>
上传个人照片：
<br>
<input type="file">
<br>
<hr>
<input type="submit" value="立即注册">
</form>
</body>
</html>
框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<body>
<iframe src="www.runoob.com" width="500" height="200"></iframe>
<br>
<iframe src="www.tqqj.top" width="500" height="200"></iframe>
</body>
</html>
css note css的四种引入方式
<!DOCTYPE html>
<html>
<!--一般最常用的是外部样式表-->
<!--想要在一个页面引入CSS，共有以下三种方式。
外部样式表
内部样式表
行内样式表-->
<head>
<meta charset="uft-8">
<title></title>
<!--外部样式表定义在link标签内-->
<link rel="stylesheet" type="text/css" href="../css/01css.css">
<!--内部样式表定义在<head>里的<style>标签内-->
<style type="text/css">
div{color: aqua;}
</style>
</head>
<body>
<!--行内样式表-->
<div style="color: aqua;">绿叶学习网</div>
</body>
</html>
第四种引入方式是@import，不常用，不需要了解
css选择器
<!DOCTYPE html>
<html>
<!--最实用的5种选择器
元素选择器
id选择器：id相当于一个人的身份证，全国唯一
class选择器：class相当于一个人的姓名，全国不唯一
后代选择器
群组选择器-->
<head>
<meta charset="utf-8">
<title></title>
<!--元素选择器，最前面的是元素-->
<!--id选择器，最前面的是 # 加 id -->
<!--class选择器，最前面的是 .class-->
<style>
div{color: aqua;}
#lover{color: aquamarine;}
.lei{color: blueviolet;}
#father1 div{color: black;}
#father2 span{color: blue;}
h1,.ko,#oops{color: aliceblue;}
</style>
<!--父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素-->
<!--对于群组选择器，两个选择器之间必须要用英文逗号（，）隔开，不然群组选择器就无法生效-->
</head>
<body>
<h1>Hello, css</h1>
<div id="oops">hello!</div>
<div class="ko">goooooood!</div>
<div>I love css!</div>
<div id="lover">I love css2!</div>
<p class="lei">I love css3!</p>
<span class="lei">I love css3 too!</span>
<div id="father1">
<div>Aaaaa</div>
<p>sssss</p>
</div>
<div id="father2">
<div>hello</div>
<span>afaf</span>
</div>
</body>
</html>
字体样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体样式</title>
<!--在实际开发中，一般只会用到bold这一个-->
<!--有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果-->
<style type="text/css">
#div1{font-family: 'Courier New'; font-weight: lighter; color: aqua;}
#div2{font-family: 'Franklin Gothic Medium';font-weight: bold;}
#div3{font-family: 'Gill Sans';font-size: 200px; font-style: italic;}
/*这是css的注释*/
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: aqua;
}
</style>
</head>
<body>
<div id="div1">hello</div>
<div id="div2">hello</div>
<div id="div3">hello</div>
<p>“有规划的人生叫蓝图，没规划的人生叫拼图。”</p>
</body>
</html>
文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本样式</title>
<style type="text/css">
#pp p{
font-size: 14px;
text-indent: 28px;
text-align: center;
text-decoration: underline;
}
#s{
text-decoration: overline;
}
#ss{
text-decoration: line-through;
}
a{
text-decoration:none;
}
#ass{
text-transform: uppercase;
}
#p1 p{
line-height: 15px;
letter-spacing: 0px;
}
#p2 p{
line-height: 20px;
letter-spacing: 3px;
}
#p3 p{
line-height: 25px;
letter-spacing: 5px;
}
#p4 p{
word-spacing: 30px;
}
</style>
</head>
<body>
<div id="pp">
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<span id="s">顶划线</span>
<span id="ss">delete</span>
<a href="www.baidu.com" target="_blank">去掉下划线的百度</a>
<br>
<hr>
<p id="ass">hello</p>
<div id="p1">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<div id="p2">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<div id="p3">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<div id="p4">
<p>Rome is was't built in a day.</p>
</div>
</body>
</html>
边框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框样式</title>
<!--想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border color这三个属性才会有效果-->
<style type="text/css">
div{
width: 100px;
height: 30px;
}
#div1{border: 1px dashed red;}
#div2{border: 1px solid red;}
img{
/*border-width: 2px;
border-style: solid;
border-color: red;*/
border:1px solid red;/*简写，等价于上面的三行代码*/
border-top: 5px dashed blue;
border-left: 5px solid wheat;
border-bottom: 0px;
}
</style>
</head>
<body>
<div id="div1"></div><br>
<div id="div2"></div><br>
<img src="../image/runoob-logo.png" alt="runoob" title="runoob">
</body>
</html>
列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ol{list-style-type:lower-roman;}
ul{list-style-type: none;}
#ul1 ul{
list-style-image: url(../image/ba.png);
}
</style>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="ul1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{list-style-type: none;}
a{text-decoration: none; color: pink;}
div{
width: 180px;
height: auto;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="www.baidu.com" target="_blank">Top1：百度</a></li>
<li><a href="www.taobao.com" target="_blank">Top2：淘宝</a></li>
<li><a href="www.weibo.com" target="_blank">Top3：新浪</a></li>
<li><a href="www.163.com" target="_blank">Top4：网易</a></li>
<li><a href="www.sohu.com" target="_blank">Top5：搜狐</a></li>
</ul>
</div>
</body>
</html>
表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格样式</title>
<style type="text/css">
table,th,td{border: 1px solid red;}
table{
caption-side: bottom;
/*border-collapse: collapse; 合并边框*/
border-spacing: 8px;
}
</style>
</head>
<body>
<table>
<caption>表头</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身1</td>
<td>表身2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾1</td>
<td>表尾2</td>
</tr>
</tfoot>
</table>
</body>
</html>
图片样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片样式</title>
<style type="text/css">
div{
width: 300px;
height: 80px;
border: 1px solid silver;
}
.div1{text-align: left;}
.div2{text-align: center;}
.div3{text-align: right;}
img{width: 60px; height: 60px;}
#img1{vertical-align: top;}
#img2{vertical-align: middle;}
#img3{vertical-align: bottom;}
#img4{vertical-align: baseline;}
</style>
</head>
<body>
<div class="div1">
<img src="../image/computer.jpg" alt="">
</div>
<div class="div2">
<img src="../image/computer.jpg" alt="">
</div>
<div class="div3">
<img src="../image/computer.jpg" alt="">
</div>
<br>
电脑<img id="img1" src="../image/Tqqj2.jpg" alt=""> 电脑(top)
<hr>
电脑<img id="img2" src="../image/Tqqj2.jpg" alt=""> 电脑(middle)
<hr>
电脑<img id="img3" src="../image/Tqqj2.jpg" alt=""> 电脑(bottom)
<hr>
电脑<img id="img4" src="../image/Tqqj2.jpg" alt=""> 电脑(baseline)
</body>
</html>
小demo—float 实现文字环绕图片
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{float: right;}
p{
font-family: fantasy;
font-size: 12px;
}
div{width: 500px;height: 150px;}
</style>
<body>
<div>
<img src="../image/dome.png" alt="">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
</body>
</html>
背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景样式</title>
<style type="text/css">
div{
width: 100px;
height: 60px;
}
#div1{background-color: hotpink;}
#div2{background-color: #87CEFA;}
p{
color: white;
background-color: hotpink;
}
.divv{background-image: url(../image/ba.png);
background-repeat: repeat-y;}
</style>
</head>
<body>
<div id="div1">背景颜色为：hotpink</div>
<div id="div2">背景颜色为：#87CEFA</div>
<p>文本颜色为white，背景颜色为hotpink</p>
<div class="divv"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 3000px;
height: 12000px;
border:1px solid red;
background-image: url(../image/Tqqj2.jpg);
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
/*fixed 图片固定不动 scroll 图片随着元素滚动*/
}
</style>
<body>
<div></div>
</body>
</html>
讲一张图片铺满整个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100%;
height: 100%;
background-image:url(../image/Tqqj2.jpg);
background-size: 100% 100%;
position: absolute;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
超链接样式
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>超链接样式</title>
<style type="text/css">
/*定义这四个伪类，必须按照link、visited、hover、active的顺序进行，不然浏览器可能无法正常显示这四种样式。请记住，这四种样式定义顺序不能改变。*/
a{text-decoration: none;}
a:link{color: red;}
a:visited{color: purple;}
a:hover{color: yellow;}
a:active{color:blue}
div{
width: 200px;
height: 100px;
color: red;
line-height: 50px;
background-color: yellow;
text-align: center;
}
div:hover{background-color: aqua;
width: 100px;
}/* hover可以用在任何元素上
:hover伪类应用非常广泛，任何一个网站都会大量用到它，我们要好好掌握。*/
img:hover{border: 3px solid red;}
#1{cursor: default;}
#2{cursor: url(../image/ba.png),pointer;}
</style>
<body>
<a href="www.taobao.com" target="_blank">淘宝</a>
<div>aaaaaaaaaaaaa</div>
<div id="1"></div>
<div id="2"></div>
<br>
<img src="../image/Tqqj2.jpg" alt="">
</body>
</html>
本文共计4819个文字，预计阅读时间需要20分钟。
web笔记，HTML笔记，列表标记：无序列表，有序列表。可通过type属性定义列表序号格式！HTML结构：列表HTML元素css样式javascript脚本项目1
web notehtml note 列表
ul 无序列表
ol 有序列表 并且可以通过 type 来定义列表序号的形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list</title>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<ol type="1">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ol type="A">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ol type="I">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
</body>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
table,td,td{border: 1px solid silver;}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小杰</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小红</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<body>
<img src="../image/computer.jpg" alt="computer" title="computer">
<img src="../image/dome.png" alt="dome" title="dome">
<img src="../image/Tqqj2.jpg" alt="tqqj" title="tqqj">
</body>
</html>
超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!--锚节点 跳转到本页面的任意位置-->
<a href="#runoob">菜鸟编程</a><br>
<a href="#inside">内部链接</a><br>
<a href="#text">文本</a><br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
<div id="runoob">
<a href="www.runoob.com" target="_blank"><img src="../image/runoob-logo.png" alt="菜鸟编程" title="菜鸟编程"></a>
<br>
<a href="www.runoob.com" target="_blank">菜鸟编程——学的不仅是技术，更是梦想！</a>
<!-- target 默认为从当前页面打开链接，就是_self
_blank 从新页面打开链接 --最重要的
_parent 从父窗口打开链接
_top 在顶层窗口打开链接
-->
</div>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
<!--超链接分为外部链接和内部链接-->
<div id="inside">
<a href="../html/表格.html" target="_parent">内部链接</a>
</div>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
<div id="text">
<p>文本</p>
</div>
</body>
</html>
表单
如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。
例如：手机注册，话费充值，用户登陆等界面
数据传输有两种方式，一种是get ，明文，所有人都可以看见，不安全；
另一种是post， 暗文，看不见，安全
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form method="post" action="index.php">
昵称：<input type="text"><br>
密码：<input type="password"><br>
邮箱：<input type="email">
<select>
<option>qq.com</option>
<option selected>gmail.com</option>
<option>yahoo.com</option>
</select><br>
<!--name需要一样， value不能一样-->
性别：<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
爱好：<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="photo">摄影
<input type="checkbox" name="hobby" value="sport">运动
<br>
个人简介：
<br>
<textarea rows="5" cols="20">请介绍一下你自己</textarea>
<br>
上传个人照片：
<br>
<input type="file">
<br>
<hr>
<input type="submit" value="立即注册">
</form>
</body>
</html>
框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<body>
<iframe src="www.runoob.com" width="500" height="200"></iframe>
<br>
<iframe src="www.tqqj.top" width="500" height="200"></iframe>
</body>
</html>
css note css的四种引入方式
<!DOCTYPE html>
<html>
<!--一般最常用的是外部样式表-->
<!--想要在一个页面引入CSS，共有以下三种方式。
外部样式表
内部样式表
行内样式表-->
<head>
<meta charset="uft-8">
<title></title>
<!--外部样式表定义在link标签内-->
<link rel="stylesheet" type="text/css" href="../css/01css.css">
<!--内部样式表定义在<head>里的<style>标签内-->
<style type="text/css">
div{color: aqua;}
</style>
</head>
<body>
<!--行内样式表-->
<div style="color: aqua;">绿叶学习网</div>
</body>
</html>
第四种引入方式是@import，不常用，不需要了解
css选择器
<!DOCTYPE html>
<html>
<!--最实用的5种选择器
元素选择器
id选择器：id相当于一个人的身份证，全国唯一
class选择器：class相当于一个人的姓名，全国不唯一
后代选择器
群组选择器-->
<head>
<meta charset="utf-8">
<title></title>
<!--元素选择器，最前面的是元素-->
<!--id选择器，最前面的是 # 加 id -->
<!--class选择器，最前面的是 .class-->
<style>
div{color: aqua;}
#lover{color: aquamarine;}
.lei{color: blueviolet;}
#father1 div{color: black;}
#father2 span{color: blue;}
h1,.ko,#oops{color: aliceblue;}
</style>
<!--父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素-->
<!--对于群组选择器，两个选择器之间必须要用英文逗号（，）隔开，不然群组选择器就无法生效-->
</head>
<body>
<h1>Hello, css</h1>
<div id="oops">hello!</div>
<div class="ko">goooooood!</div>
<div>I love css!</div>
<div id="lover">I love css2!</div>
<p class="lei">I love css3!</p>
<span class="lei">I love css3 too!</span>
<div id="father1">
<div>Aaaaa</div>
<p>sssss</p>
</div>
<div id="father2">
<div>hello</div>
<span>afaf</span>
</div>
</body>
</html>
字体样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体样式</title>
<!--在实际开发中，一般只会用到bold这一个-->
<!--有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果-->
<style type="text/css">
#div1{font-family: 'Courier New'; font-weight: lighter; color: aqua;}
#div2{font-family: 'Franklin Gothic Medium';font-weight: bold;}
#div3{font-family: 'Gill Sans';font-size: 200px; font-style: italic;}
/*这是css的注释*/
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: aqua;
}
</style>
</head>
<body>
<div id="div1">hello</div>
<div id="div2">hello</div>
<div id="div3">hello</div>
<p>“有规划的人生叫蓝图，没规划的人生叫拼图。”</p>
</body>
</html>
文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本样式</title>
<style type="text/css">
#pp p{
font-size: 14px;
text-indent: 28px;
text-align: center;
text-decoration: underline;
}
#s{
text-decoration: overline;
}
#ss{
text-decoration: line-through;
}
a{
text-decoration:none;
}
#ass{
text-transform: uppercase;
}
#p1 p{
line-height: 15px;
letter-spacing: 0px;
}
#p2 p{
line-height: 20px;
letter-spacing: 3px;
}
#p3 p{
line-height: 25px;
letter-spacing: 5px;
}
#p4 p{
word-spacing: 30px;
}
</style>
</head>
<body>
<div id="pp">
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<span id="s">顶划线</span>
<span id="ss">delete</span>
<a href="www.baidu.com" target="_blank">去掉下划线的百度</a>
<br>
<hr>
<p id="ass">hello</p>
<div id="p1">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<div id="p2">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<div id="p3">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<div id="p4">
<p>Rome is was't built in a day.</p>
</div>
</body>
</html>
边框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框样式</title>
<!--想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border color这三个属性才会有效果-->
<style type="text/css">
div{
width: 100px;
height: 30px;
}
#div1{border: 1px dashed red;}
#div2{border: 1px solid red;}
img{
/*border-width: 2px;
border-style: solid;
border-color: red;*/
border:1px solid red;/*简写，等价于上面的三行代码*/
border-top: 5px dashed blue;
border-left: 5px solid wheat;
border-bottom: 0px;
}
</style>
</head>
<body>
<div id="div1"></div><br>
<div id="div2"></div><br>
<img src="../image/runoob-logo.png" alt="runoob" title="runoob">
</body>
</html>
列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ol{list-style-type:lower-roman;}
ul{list-style-type: none;}
#ul1 ul{
list-style-image: url(../image/ba.png);
}
</style>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="ul1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{list-style-type: none;}
a{text-decoration: none; color: pink;}
div{
width: 180px;
height: auto;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="www.baidu.com" target="_blank">Top1：百度</a></li>
<li><a href="www.taobao.com" target="_blank">Top2：淘宝</a></li>
<li><a href="www.weibo.com" target="_blank">Top3：新浪</a></li>
<li><a href="www.163.com" target="_blank">Top4：网易</a></li>
<li><a href="www.sohu.com" target="_blank">Top5：搜狐</a></li>
</ul>
</div>
</body>
</html>
表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格样式</title>
<style type="text/css">
table,th,td{border: 1px solid red;}
table{
caption-side: bottom;
/*border-collapse: collapse; 合并边框*/
border-spacing: 8px;
}
</style>
</head>
<body>
<table>
<caption>表头</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身1</td>
<td>表身2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾1</td>
<td>表尾2</td>
</tr>
</tfoot>
</table>
</body>
</html>
图片样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片样式</title>
<style type="text/css">
div{
width: 300px;
height: 80px;
border: 1px solid silver;
}
.div1{text-align: left;}
.div2{text-align: center;}
.div3{text-align: right;}
img{width: 60px; height: 60px;}
#img1{vertical-align: top;}
#img2{vertical-align: middle;}
#img3{vertical-align: bottom;}
#img4{vertical-align: baseline;}
</style>
</head>
<body>
<div class="div1">
<img src="../image/computer.jpg" alt="">
</div>
<div class="div2">
<img src="../image/computer.jpg" alt="">
</div>
<div class="div3">
<img src="../image/computer.jpg" alt="">
</div>
<br>
电脑<img id="img1" src="../image/Tqqj2.jpg" alt=""> 电脑(top)
<hr>
电脑<img id="img2" src="../image/Tqqj2.jpg" alt=""> 电脑(middle)
<hr>
电脑<img id="img3" src="../image/Tqqj2.jpg" alt=""> 电脑(bottom)
<hr>
电脑<img id="img4" src="../image/Tqqj2.jpg" alt=""> 电脑(baseline)
</body>
</html>
小demo—float 实现文字环绕图片
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{float: right;}
p{
font-family: fantasy;
font-size: 12px;
}
div{width: 500px;height: 150px;}
</style>
<body>
<div>
<img src="../image/dome.png" alt="">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
</body>
</html>
背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景样式</title>
<style type="text/css">
div{
width: 100px;
height: 60px;
}
#div1{background-color: hotpink;}
#div2{background-color: #87CEFA;}
p{
color: white;
background-color: hotpink;
}
.divv{background-image: url(../image/ba.png);
background-repeat: repeat-y;}
</style>
</head>
<body>
<div id="div1">背景颜色为：hotpink</div>
<div id="div2">背景颜色为：#87CEFA</div>
<p>文本颜色为white，背景颜色为hotpink</p>
<div class="divv"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 3000px;
height: 12000px;
border:1px solid red;
background-image: url(../image/Tqqj2.jpg);
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
/*fixed 图片固定不动 scroll 图片随着元素滚动*/
}
</style>
<body>
<div></div>
</body>
</html>
讲一张图片铺满整个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100%;
height: 100%;
background-image:url(../image/Tqqj2.jpg);
background-size: 100% 100%;
position: absolute;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
超链接样式
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>超链接样式</title>
<style type="text/css">
/*定义这四个伪类，必须按照link、visited、hover、active的顺序进行，不然浏览器可能无法正常显示这四种样式。请记住，这四种样式定义顺序不能改变。*/
a{text-decoration: none;}
a:link{color: red;}
a:visited{color: purple;}
a:hover{color: yellow;}
a:active{color:blue}
div{
width: 200px;
height: 100px;
color: red;
line-height: 50px;
background-color: yellow;
text-align: center;
}
div:hover{background-color: aqua;
width: 100px;
}/* hover可以用在任何元素上
:hover伪类应用非常广泛，任何一个网站都会大量用到它，我们要好好掌握。*/
img:hover{border: 3px solid red;}
#1{cursor: default;}
#2{cursor: url(../image/ba.png),pointer;}
</style>
<body>
<a href="www.taobao.com" target="_blank">淘宝</a>
<div>aaaaaaaaaaaaa</div>
<div id="1"></div>
<div id="2"></div>
<br>
<img src="../image/Tqqj2.jpg" alt="">
</body>
</html>