<!-- 1-HTML的局限性 只关心结构 操作HTML属性不方便 HTML里面添加样式带来无尽的雍准 所以HTML只在乎工能的实现不在乎美不美观 2-CSS是网页的美容师 让网页更加丰富多彩，布局更灵活 CSS最大的贡献就是让HTML从样式中脱离 3-CSS知识 CSS通常称为层叠样式表 作用 主要用于设置HTML页面中的文本内容（字体大小对齐方式），图片的外形（宽高边框边距）以及版面布局 以及版面布局和外观显示样式 CSS以及HTML为基础，提供了丰富的功能，如颜色背景和控制及整体排板等，而且换可以针对不同浏览器 设置不同的样式 --> <!-- 4-引入CSS样式表的书写位置 1.行内样式 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 style="color: blueviolet; font-size: 18px;">hello world</h1> </body> </html> <!-- 2.内部样式表 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/CSS"> h1{ color: brown; font-size: 20px; } h4{ color: #000000; font-size: 20px; } p{ color: chartreuse; } </style> </head> <body> <h1>hadoop </h1> <h4>spark</h4> <h4>java web</h4> <p>fack</p> <p>me</p> </body> </html> <!-- CSS设置表格 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> tr{ height: 20px; width: 30px; } </style> </head> <body> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html> <!-- 3.外部样式 --> <!-- 1.新建CSS文件 命名demo.css--> h3{ color:red; } <!-- 2.写HTML代码 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 这句话的意思是把css文件连接到HTML里 --> <link rel="stylesheet" href="demo.css"> </head> <body> <h3>全栈工程师</h3> </body> </html> <!-- 5-样式共享 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="demo.css"> </head> <body> <h3>调用上一个样式</h3> </body> </html> <!-- 6-CSS书写规范 1.选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。⒉属性和属性值以"键值对”的形式出现。 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。4.属性和属性值之间用英文“∵"连接。 5.多个"键值对"之间用英文"∵"进行区分。 --> <!-- 7-选择器的作用 找到特定的HTML标签 --> <!-- 8-CSS选择基础选择器 --> <!-- 标签选择器 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ color: chartreuse; } span{ color: crimson; } </style> </head> <body> <div>edsa</div> <div>sdcs</div> <span>sdcc</span> <span>dczcx</span> </body> </html> <!-- 类选择器 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .red{ color: red; } .green{ color: green; } </style> </head> <body> <h1 class="red">hello world</h1> <h1 class="green">hello world</h1> <h1>hello world</h1> <h1>hello world</h1> <h1>hello world</h1> <h1>hello world</h1> <h1>hello world</h1> <h1>hello world</h1> <h1>hello world</h1> <h1>hello world</h1> </body> </html> <!-- 谷歌log --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Google案例</title> <style type="text/css"> .blue { font-size: 100px; color: blue; } .red { font-size: 100px; color: red; } .orange { font-size: 100px; color: orange; } .green { font-size: 100px; color: green; } </style> </head> <body> <span class="blue">G</span> <span class="red">o</span> <span class="orange">o</span> <span class="blue">g</span> <span class="green">l</span> <span class="red">e</span> </body> </html> <!-- 08-Google案例(多类名) --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Google案例</title> <style type="text/css"> .font100 { font-size: 80px; } .blue { color: blue; } .red { color: red; } .orange { color: orange; } .green { color: green; } </style> </head> <body> <!-- 在一个标签内部只能有一个class --> <span class="blue font100">G</span> <span class="red font100">o</span> <span class="orange font100">o</span> <span class="blue font100">g</span> <span class="green font100">l</span> <span class="red font100">e</span> </body> </html> <!-- 09-id选择器 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #pink { color: pink; } </style> </head> <body> <p>愿你出走半生，</p> <p>归来仍是少年。</p> <p>愿我洗尽铅华，</p> <p id="pink">依旧笑魇如花。</p> </body> </html> <!-- 10-通配符选择器.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { color: pink; } </style> </head> <body> <div>所有的，我都要</div> <div>所有的，我都要</div> <p>所有的，我都要</p> <span>所有的，我都要</span> </body> </html> <!-- 11-font字体样式 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { font-size: 16px; } .title { /* 字体大小 */ font-size: 20px; /*设置字体 */ font-family: Arial, "Microsoft YaHei", "微软雅黑" , "黑体"; /*字体加粗 */ /*font-weight: bold; */ /*这个 700 一定不要跟单位 700 等价于 bold*/ font-weight: 700; /*字体倾斜*/ font-style: italic; } h1 { /*让粗体的不加粗*/ /*font-weight: normal; 400 等价于 normal*/ font-weight: 400; } em { /* 让倾斜的字体 不倾斜 */ font-style: normal; } </style> </head> <body> <p class="title">粉红色的回忆</p> <p>夏天夏天悄悄过去留下小秘密</p> <p>压心底 压心底 不能告诉你</p> <p>晚风春过温暖我心底 我又想起你</p> <p>多甜蜜 多甜蜜 怎能忘记</p> <h1> 韩宝仪 </h1> <em>韩宝仪音乐专辑</em> </body> </html> <!-- 12-font综合写法 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { font-size: 16px; } .title { /* font: font-style font-weight font-size/line-height font-family;*/ /*综合性写法*/ font: italic 700 20px "微软雅黑"; } h1 { /*让粗体的不加粗*/ /*font-weight: normal; 400 等价于 normal*/ font-weight: 400; } em { /* 让倾斜的字体 不倾斜 */ font-style: normal; } </style> </head> <body> <p class="title">粉红色的回忆</p> <p>夏天夏天悄悄过去留下小秘密</p> <p>压心底 压心底 不能告诉你</p> <p>晚风春过温暖我心底 我又想起你</p> <p>多甜蜜 多甜蜜 怎能忘记</p> <h1> 韩宝仪 </h1> <em>韩宝仪音乐专辑</em> </body> </html> <!-- 13-综合案例-体育页面 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合案例-体育页面</title> <style> body { font-size: 16px; } .title { font-size: 28px; /*让字体不加粗*/ font-weight: 400; /*color: #FF6700;*/ /*color: rgb(255,103,0);*/ } em { /*让倾斜的标签 不倾斜*/ font-style: normal; color: skyblue; } .time { color: #ccc; /*#ff0000 #f00 #000000 #000 #ffffff #fff #ff1234 #ff1122 #f12*/ } .people { /*color: #990000;*/ color: #900; text-decoration: underline; } .search { color: red; } .btn { color: green; font-weight: 700; } /*文本 水平居中对齐*/ .tac { text-align: center; } p { /*行高 */ line-height: 26px; /*首行缩进2个字的距离 em 是倍数关系， 1em 就是1个字的距离 2em 就是2个字的宽度*/ text-indent: 2em; } a { /*取消下划线 a 默认自带下划线的*/ text-decoration: none; } </style> </head> <body> <h1 class="title tac">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1> <div class="tac"> <span class="time">2017年07月16日20:11</span> <span class="people"> 新浪体育 评论中大奖 （11人参与）</span> <a href="#">收藏本文</a> <input type="text" value="请输入查询条件" class="search" /> <input type="button" value="搜索" class="btn" /> </div> <hr /> <p> 新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。 </p> <p> 在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。 </p> <p> 据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。 </p> <p> 这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong> </p> </body> </html> <!-- 14-使用emment语法 --> <!-- Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。 1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div> 2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div 3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了 4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p 5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了 6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $ -->
素材
<!-- 1-HTML的局限性
只关心结构
操作HTML属性不方便
HTML里面添加样式带来无尽的雍准
所以HTML只在乎工能的实现不在乎美不美观
2-CSS是网页的美容师
让网页更加丰富多彩，布局更灵活
CSS最大的贡献就是让HTML从样式中脱离
3-CSS知识
CSS通常称为层叠样式表
作用
主要用于设置HTML页面中的文本内容（字体大小对齐方式），图片的外形（宽高边框边距）以及版面布局
以及版面布局和外观显示样式
CSS以及HTML为基础，提供了丰富的功能，如颜色背景和控制及整体排板等，而且换可以针对不同浏览器
设置不同的样式 -->
<!-- 4-引入CSS样式表的书写位置
1.行内样式 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color: blueviolet; font-size: 18px;">hello world</h1>
</body>
</html>
<!-- 2.内部样式表 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/CSS">
h1{
color: brown;
font-size: 20px;
}
h4{
color: #000000;
font-size: 20px;
}
p{
color: chartreuse;
}
</style>
</head>
<body>
<h1>hadoop </h1>
<h4>spark</h4>
<h4>java web</h4>
<p>fack</p>
<p>me</p>
</body>
</html>
<!-- CSS设置表格 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
tr{
height: 20px;
width: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!-- 3.外部样式 -->
<!-- 1.新建CSS文件 命名demo.css-->
h3{
color:red;
}
<!-- 2.写HTML代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 这句话的意思是把css文件连接到HTML里 -->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<h3>全栈工程师</h3>
</body>
</html>
<!-- 5-样式共享 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<h3>调用上一个样式</h3>
</body>
</html>
<!-- 6-CSS书写规范
1.选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。⒉属性和属性值以"键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。4.属性和属性值之间用英文“∵"连接。
5.多个"键值对"之间用英文"∵"进行区分。 -->
<!-- 7-选择器的作用
找到特定的HTML标签 -->
<!-- 8-CSS选择基础选择器 -->
<!-- 标签选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: chartreuse;
}
span{
color: crimson;
}
</style>
</head>
<body>
<div>edsa</div>
<div>sdcs</div>
<span>sdcc</span>
<span>dczcx</span>
</body>
</html>
<!-- 类选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<h1 class="red">hello world</h1>
<h1 class="green">hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
</body>
</html>
<!-- 谷歌log -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google案例</title>
<style type="text/css">
.blue {
font-size: 100px;
color: blue;
}
.red {
font-size: 100px;
color: red;
}
.orange {
font-size: 100px;
color: orange;
}
.green {
font-size: 100px;
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
<!-- 08-Google案例(多类名) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google案例</title>
<style type="text/css">
.font100 {
font-size: 80px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<!-- 在一个标签内部只能有一个class -->
<span class="blue font100">G</span>
<span class="red font100">o</span>
<span class="orange font100">o</span>
<span class="blue font100">g</span>
<span class="green font100">l</span>
<span class="red font100">e</span>
</body>
</html>
<!-- 09-id选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#pink {
color: pink;
}
</style>
</head>
<body>
<p>愿你出走半生，</p>
<p>归来仍是少年。</p>
<p>愿我洗尽铅华，</p>
<p id="pink">依旧笑魇如花。</p>
</body>
</html>
<!-- 10-通配符选择器.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
color: pink;
}
</style>
</head>
<body>
<div>所有的，我都要</div>
<div>所有的，我都要</div>
<p>所有的，我都要</p>
<span>所有的，我都要</span>
</body>
</html>
<!-- 11-font字体样式 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 16px;
}
.title {
/* 字体大小 */
font-size: 20px;
/*设置字体 */
font-family: Arial, "Microsoft YaHei", "微软雅黑" , "黑体";
/*字体加粗 */
/*font-weight: bold; */
/*这个 700 一定不要跟单位 700 等价于 bold*/
font-weight: 700;
/*字体倾斜*/
font-style: italic;
}
h1 {
/*让粗体的不加粗*/
/*font-weight: normal; 400 等价于 normal*/
font-weight: 400;
}
em {
/* 让倾斜的字体 不倾斜 */
font-style: normal;
}
</style>
</head>
<body>
<p class="title">粉红色的回忆</p>
<p>夏天夏天悄悄过去留下小秘密</p>
<p>压心底 压心底 不能告诉你</p>
<p>晚风春过温暖我心底 我又想起你</p>
<p>多甜蜜 多甜蜜 怎能忘记</p>
<h1> 韩宝仪 </h1>
<em>韩宝仪音乐专辑</em>
</body>
</html>
<!-- 12-font综合写法 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 16px;
}
.title {
/* font: font-style font-weight font-size/line-height font-family;*/
/*综合性写法*/
font: italic 700 20px "微软雅黑";
}
h1 {
/*让粗体的不加粗*/
/*font-weight: normal; 400 等价于 normal*/
font-weight: 400;
}
em {
/* 让倾斜的字体 不倾斜 */
font-style: normal;
}
</style>
</head>
<body>
<p class="title">粉红色的回忆</p>
<p>夏天夏天悄悄过去留下小秘密</p>
<p>压心底 压心底 不能告诉你</p>
<p>晚风春过温暖我心底 我又想起你</p>
<p>多甜蜜 多甜蜜 怎能忘记</p>
<h1> 韩宝仪 </h1>
<em>韩宝仪音乐专辑</em>
</body>
</html>
<!-- 13-综合案例-体育页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例-体育页面</title>
<style>
body {
font-size: 16px;
}
.title {
font-size: 28px;
/*让字体不加粗*/
font-weight: 400;
/*color: #FF6700;*/
/*color: rgb(255,103,0);*/
}
em {
/*让倾斜的标签 不倾斜*/
font-style: normal;
color: skyblue;
}
.time {
color: #ccc;
/*#ff0000 #f00
#000000 #000
#ffffff #fff
#ff1234
#ff1122 #f12*/
}
.people {
/*color: #990000;*/
color: #900;
text-decoration: underline;
}
.search {
color: red;
}
.btn {
color: green;
font-weight: 700;
}
/*文本 水平居中对齐*/
.tac {
text-align: center;
}
p {
/*行高 */
line-height: 26px;
/*首行缩进2个字的距离 em 是倍数关系， 1em 就是1个字的距离 2em 就是2个字的宽度*/
text-indent: 2em;
}
a {
/*取消下划线 a 默认自带下划线的*/
text-decoration: none;
}
</style>
</head>
<body>
<h1 class="title tac">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<div class="tac">
<span class="time">2017年07月16日20:11</span>
<span class="people"> 新浪体育 评论中大奖 （11人参与）</span>
<a href="#">收藏本文</a>
<input type="text" value="请输入查询条件" class="search" />
<input type="button" value="搜索" class="btn" />
</div>
<hr />
<p>
新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p>
<p>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
</p>
<p>
据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
</p>
<p>
这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong>
</p>
</body>
</html>
<!-- 14-使用emment语法 -->
<!-- Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。
1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $ -->
浙公网安备 33010602011771号