从前端小白到大佬第九天

CSS上

1.css简介
2.css语言规范
3.css代码风格
4.css基础选择器
5.css字体属性
6.css文本属性
7.css样式
①内部样式
②行内样式
③外部样式
8.综合案例-新闻页面
9.Chrome调试工具

7.css样式
①内部样式
写在html页面内部，将所有的css代码抽出来，单独放到<style>中，就像是我们前面一直书写的那些。<style>标签理论上可以放在html文档的任何地方，但一般约定放在<head>中。方便控制整个页面中的元素样式设置，代码结构清晰，但并没有实现结构与样式完全分离。

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网站</title><style>li {/*font:font-style font-weight font-size/line-height font-family*/font: italic 700 16px '宋体';}h4 {font-family: '微软雅黑', serif;font-size: 20px;}</style>
</head><body><h4>5.css字体属性 css fonts</h4><ol><li>各种字体之间必须使用英文状态下的逗号隔开</li><li>一般情况下，如果有空格隔开的多个单词组成的字体，要加引号</li><li>尽量使用系统默认自带字体，保证兼容</li><li>书写多个字体时，以第一个字体为最高优先级标准，如果系统里面没有这个字体，则以第二字体为优先，以此类推</li><li>字体设计可写在body标签内</li></ol>
</body></html>

②行内样式
在元素标签内部的style属性中设定css样式。适合于修改简单的样式，只可以控制当前的标签设置样式，给谁写就控制了谁，没有实现结构与样式完全分离。

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网站</title>
</head><body><h4>5.css字体属性 css fonts</h4><ol><li style="font-family: '微软雅黑';font-size: 50px;">书写多个字体时，以第一个字体为最高优先级标准，如果系统里面没有这个字体，则以第二字体为优先，以此类推</li><li style="color: brown;">字体设计可写在body标签内</li></ol>
</body></html>

③外部样式
实际开发使用的都是链接式，适用于样式比较多的情况，核心是将样式单独写到css文件中，之后把css文件引入到html也弥漫中使用。
新建一个后缀名为.css的文件，把所有css代码都放在此文件中，再再HTML页面中使用link标签引入css文件。

<link rel="stylesheet" href="style.css">

01.html：

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个网站</title><link rel="stylesheet" href="01style.css">
</head><body><h4>5.css字体属性 css fonts</h4><ol><li>各种字体之间必须使用英文状态下的逗号隔开</li><li>一般情况下，如果有空格隔开的多个单词组成的字体，要加引号</li><li>尽量使用系统默认自带字体，保证兼容</li><li>书写多个字体时，以第一个字体为最高优先级标准，如果系统里面没有这个字体，则以第二字体为优先，以此类推</li><li>字体设计可写在body标签内</li></ol>
</body></html>

01style.css：

li {/*font:font-style font-weight font-size/line-height font-family*/font: 700 16px '宋体';
}body {color: sandybrown;
}h4 {font-family: '微软雅黑', serif;font-size: 20px;
}

效果：

8.综合案例-新闻页面

新闻页面.css

body {/* 全局字体大小，行间距 */font: 16px/28px '微软雅黑';
}h1 {/* 标题另外设置：行高，居中，不加粗 */line-height: 40px;text-align: center;font-weight: 400;
}div {/* 盒子内设置字体灰色，字体大小，居中 */color: gray;font-size: 12px;text-align: center;
}.xiahuaxian {/* 链接不要下划线 */text-decoration: none;
}.sousuo {/* 搜索框内的文字设置为灰色，设置搜索框的宽度 */color: gray;width: 170px;
}.anniu {/* 按钮的搜索加粗 */font-weight: 700;
}p {/* 首行缩进 */text-indent: 2em;
}.juzhong {/* 图片居中对齐，注意，直接给img标签加center是无效的 */text-align: center;
}.dibu {/* 底部注释灰色，字体变小 */color: gray;font-size: 12px;
}

新闻页面.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻页面</title><link rel="stylesheet" href="新闻页面.css">
</head><body><h1>华北东北黄淮及西南地区多降雨<br> 华南江南等地有高温天气</h1><div>2019-07-03 16:31:47 来源：<a href="#" class="xiahuaxian">中国天气网 </a><input type="text" value="请输入查询条件" class="sousuo"><button class="anniu">搜索</button></div><!-- 横线 --><hr><p>昨日，强降雨主要集中在四川盆地中北部，出现暴雨或大暴雨，四川遂宁和内江、重庆合川局地降雨量200～242毫米（最大小时降雨量50～120毫米）；河南东南部、安徽西北部、湖北中西部、湖南东部和南部、江西南部、广西东部、云南东部等地出现分散性大雨或暴雨，安徽亳州、湖南长沙等局地大暴雨（100～133毫米，最大小时降雨量50～95毫米）；内蒙古中东部、黑龙江中西部、吉林中东部、陕西中南部、山西北部、河北北部、山东南部及新疆沿天山一带的部分地区出现中到大雨，山西大同、河北张家口局地暴雨（50～87毫米）。</p><p>未来三天，华北、东北地区、黄淮等地多阵雨或雷阵雨，降水量分布不均，局地有大雨或暴雨，并伴有短时强降水、雷暴大风或冰雹等强对流天气；四川、云南、西藏等地多降雨，四川盆地中部和西部局地有暴雨或大暴雨。</p><p>未来三天，华南西部和北部、江南大部、江淮、江汉等地将先后出现35℃以上的高温天气，部分地区最高温度可达37～39℃。2日开始，华南高温天气自南向北缓解。</p><p>受热带扰动影响，未来三天，广东南部、广西南部、海南岛等地的部分地区将有大雨或暴雨，局地大暴雨</p><h4>未来三天具体预报 </h4><p>7月31日08时至8月1日08时，东北地区北部、华北北部、黄淮、江淮北部以及河南东南部、湖北东南部、湖南西部、四中部和南部、广东南部沿海、海南、新疆西南部和青藏高原东南部等地的部分地区有中到大雨，其中，山东中东部、江苏北部、四川盆地中部、广东南部沿海等地部分地区有暴雨（50～80毫米）。内蒙古中部和西北部、新疆南疆盆地、江苏南部、浙江南部等地部分地区有4～6级及以上风。南海北部、琼州海峡将有6～7级、阵风8～9级大风，南海中部和南部将有6～7级、阵风8～9级大风，部分海域风力可达8级，阵风9～10级。</p><p class="juzhong"><img src="imgs/1.jpg" alt=""></p><p>8月1日08时至2日08时，东北地区北部、华北中部和西部、黄淮、广东南部、广西南部、海南、四川中部和北部、云南西部和北部、甘肃东南部、陕西西南部、西藏东南部等地部分地区有中到大雨，其中，广东南部沿海和中南部等地部分地区有暴雨或大暴雨（100～150毫米）。内蒙古中部、辽东半岛、浙江北部和南部、福建东南部、广西东南部沿海等地部分地区有4～6级及以上风。南海北部将有6～7级、阵风8～9级大风，南海中部和南部将有6～7级、阵风8～9级大风，部分海域风力可达8级，阵风9～10级。</p><p class="juzhong"><img src="imgs/2.jpg" alt=""></p><P>8月2日08时至3日08时，内蒙古东北部、东北地区西部和东南部、华北东北部和南部、黄淮、华南南部沿海以及四川盆地西南部、新疆西部和西藏东南部等地部分地区有中到大雨，其中，内蒙古东北部、黑龙江西部、吉林西北部、四川盆地西南部、广西南部、广东西南部等地部分地区有暴雨或大暴雨（100～130毫米）。北部湾、南海西北部将有6～7级、阵风8级大风，南海东北部、南海中部和西南部将有6～7级、阵风8级大风，其中北部湾北部、南海部分海域风力可达8级，阵风9～10级。</P><p class="juzhong"><img src="imgs/1.jpg" alt=""></p><p class="dibu">本文来源：中国天气网 责任编辑：XX_NO123</p></body></html>

效果：

9.Chrome调试工具
①打开调试工具方法
-快捷键f12
-右键->检查

②使用调试工具
-注意选中的是element
-左边是结构框，右边是样式框
-选中小黑箭头，光标移动到目的地，出现样式提示，样式框内可直接调试网页样式，但修改的东西不会保存，需要自己到代码文件修改
-ctrl+0恢复浏览器原样
-样式前面有黄色感叹号且有横穿线，表示样式书写错误