目录
一、CSS简介
1.1 CSS是什么
CSS是层叠样式表（Cascading Style Sheets）的简称。
1.2 HTML和CSS的区别与价值
- HTML主要做结构，显示元素内容
- CSS负责美化HTML，布局网页
- CSS最大价值：由HTML专注去做结构呈现，样式交给CSS。即结构（HTML）与样式（CSS）相分离。
1.3 CSS语法规范
CSS规则主要由选择器以及一条或多条声明构成。
注 ：给谁改样式 + 改什么样式。
1.4 CSS代码风格
<style>
p {
color: red;
}
</style>- 展开格式√
- 小写字母√
- 属性值前面，冒号后面，保留空格√
- 选择器（标签）和大括号中间保留空格√
二、CSS基础选择器
2.1 CSS选择器的作用——选择标签
将需要设置样式的标签选择出来。
2.2 选择器分类
分为两大类：基础选择器、复合选择器
-
基础选择器
标签选择器：用HTML标签名作为选择器（将同一类标签全部选择出来）
<style>
h {
color: red;
}
div {
color: red;
}
</style>类选择器：单独选一个或某几个标签（点定义，类调用，别的标签都能调用）
<style>
.color-red {
color: red;
}
</style>
<body>
<div class="color-red">女生</div>
</body>注 ：
①类选择器以 ".＋自定义名"进行标识，以class="自定义名"来调用；
② 不用纯数字或中文，尽量使用英文字母；
③ 长名称可使用短横线"-"；
④ 类命名尽量有意义（见Web前端开发规范手册）；
类选择器——多类名：给一个标签指定多个类名，各类名之间用空格隔开（节省代码、统一修改）
<style>
.color {
color: red;
}
.size {
font-size: 20px;
}
</style>
<div class="color size"></div>id选择器（#定义，id调用。只能调用一次，别的标签不能再次调用）
<style>
#name {
color: red;
}
</style>
<div id="name">我是红色的</div>通配符选择器（*定义。表示给所有的标签修改样式）
<style>
* {
margin: 0;
padding: 0; //修改所有的内外边距，特殊情况才使用
}
</style>三、CSS字体属性
3.1 字体系列
<style>
/* 给body里所有的字体设置样式,优先级默认从左到右 */
body {
font-family: "Microsoft YaHei",tahoma,Arial,"Hiragino Sans GB";
}
</style>注 ：
①各种字体之间用英文逗号隔开；
②多个单词组成的字体要加引号，单双引号都可；
③尽量使用系统默认自带字体；
3.2 字体大小
<style>
body {
font-size: 16px;
}
</style>注 ：
①可以给整个body指定大小（ 标题标签比较特殊，需要单独指定文字大小）；
②谷歌浏览器默认的文字大小就是16px；
3.3 字体粗细
<style>
.fold {
/* font-weight: bold; */
font-weight: 700;
}
</style> 注 ：
①字体粗细: normal=400（默认值，不变粗），bold=700（加粗），boldder，lighter
②实际开发更推荐用数字，400
3.4 文字样式（如斜体）
<style>
.italic {
font-style: italic;
}
</style>注 ：字体样式: 倾斜italic，默认normal
3.5 字体复合属性
<style>
p {
/* font: font-style font-weight font-size/line-height font-family; */
font: italic 400 16px/25px "Microsoft YaHei";
}
</style>注 ：
①必须按照以下顺序书写（style-wight-size-family），不能更换顺序，各属性用空格隔开；
②不需要设置的属性可以忽略，但是必须保留font-size和font-family属性，否则font属性将不起作用
3.6 字体属性总结：
四、CSS文本属性——外观
4.1 文本颜色
<style>
/* 字体颜色,三种形式书写 */
div {
/* color: rgb(55, 111, 161); */
/* color: red; */
color: #FF0000;
}
</style>
4.2 对齐文本
<style>
h2 {
text-align: center;
/* text-align: right; */
/* text-align: left; */
}
</style>4.3 装饰文本
<style>
p {
/* 下划线 */
/* text-decoration: underline; */
/* 上划线 */
/* text-decoration: overline; */
/* 删除线 */
text-decoration: line-through;
}
a {
/* 取消a链接默认的下划线 */
text-decoration: none;
}
</style>
4.4 文本首行缩进
<style>
p {
/* em是相对单位,相对一个文字的大小 (2em=两个字的距离)*/
text-indent: 2em;
}
</style>4.5 行间距
<style>
p {
/* 行高=上间距+文字高度+下间距; */
line-height: 25px;
}
</style> 4.6 文本属性总结
五、CSS的引入方式
5.1 行内样式表 ——修改简单样式
写到html页面内部。将所有的CSS代码单独放到一个<style>标签中，属性间用分号。
<div style="color:rgb(148, 144, 33); font-size:25px">我是行内样式表</div>注 ：
①style其实就是标签的属性；
②可控制当前的标签设置样式；
③书写繁琐，未实现结构与样式相分离，只推荐修改简单样式时使用。
5.2 内部样式表——嵌入式引用
第三、四章都是用的此种引用方式。如：
注 ：
①<style>标签 理论放在任何地方，一般放在<head></head>标签中；
②代码结构清晰，未实现结构与样式完全分离。
5.3 外部样式表——结构与样式完全分离
步骤：
①新建一个.css文件，将所有CSS代码放入此文件
②在HTML文件中，使用<link>标签来引入这个文件（在head部分，输入link，按下tab键补全属性）
<link rel="stylesheet" href="css文件路径">
5.4 总结
六、综合案例
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻案例练习</title>
<link rel="stylesheet" href="08-综合案例的样式.css">
</head>
<body>
<h1 style="text-align: center; font-weight: 400;">北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
<!-- <table align="Center">
<tr>
<td><div>2019-07-03 16:31:47 来源: </div><td>
<td><a href="#" style="text-decoration: none;">中国天气网</a></td>
<td><input type="text" value="请输入查询条件"></td>
<td><input type="button" value="搜索"></td>
</tr>
</table> -->
<div>2019-07-03 16:31:47 来源:
<a href="#" style="text-decoration: none;"> 中国天气网 </a>
<input type="text" value="请输入查询条件 " class="search">
<button id="button">搜索 </button>
<!-- 用到了类选择器和id选择器 -->
</div>
<hr>
<p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
<h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
<p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
<!-- 想要图片居中,是给图片的父亲添加水平居中的按钮 -->
<div style="text-align: center;"><img src="ditu.jpeg" alt="图片暂时无法加载" title="中国气象图" width="500"/></div>
<p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
<h4>明日热度再升级！京津冀携手冲击38℃+</h4>
<p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
<p class="foot">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>
</html>CSS文件：（文件名：08-综合案例的样式.css）
p {
/* font-style: normal; 倾斜:省略
font-weight: 400; 粗细:省略 //不加粗
font-size: normal; 大小:必须写
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; 字体:必须写*/
font: 16px/28px "Microsoft YaHei";
color: black;
text-align: justify;
text-decoration: none;
text-indent: 2em;
/* line-height: 25px; 写到了font里,紧挨着size*/
}
div {
text-align: center;
color: grey;
font-size: 12px;
}
.search {
color: #666666;
width: 170;
}
#button {
color: #666666;
font-weight: 700;
}
.foot {
font-size: 10px;
color: gray;
}
七、Chrome调试工具
在网页中点击右键，打开检查。
扫一扫
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
