1. 学习内容
1.1 引入方式
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | 写在style标签中 | 当前页面 | 小案例 |
| 外联式 | 写在单独的css文件中，通过link标签引入 | 多个页面 | 项目 |
| 行内式 | 写在标签的style属性中 | 当前标签 | 配合js使用 |
1.2 选择器
| 选择器 | 结构 | 作用 | 注意点 |
|---|---|---|---|
| 标签 | 标签名{css属性名：属性值} | 当前所有标签 | ①选择器选择的是一类标签 |
| 类 | .类名{css属性名：属性值} | 所有含class属性的标签 | ①需要定义和使用才能生效 ②一个标签可有多个类名，类名以空格隔开 |
| id | #id属性值{css属性名：属性值} | 带有该id属性值的标签 | ①一个标签只能有一个id属性值 |
| 通配符 | *{css属性名：属性值} | 所有标签 | ①极少使用 |
| 后代 | 选择器1 选择器2{css} | 选择器1找到的标签的后代（儿子、孙子……） | 选择器间用"空格"隔开 |
| 子代 | 选择器1>选择器2{css} | 选择器1找到的标签的子代（儿子） | 选择器间用">"隔开 |
| 并集 | 选择器1,选择器2{css} | 多个选择器选中的标签 | 选择器间用","隔开 |
| 交集 | 选择器1选择器2{css} | 同时满足多个选择器的标签 | ①选择器间紧挨着 ②标签选择器必须写在最前面 |
| 伪类 | 选择器:hover{css} | 任何标签 |
1.3 文字/文本样式
| 属性名 | 属性值 | 样式 |
|---|---|---|
| font-size | 数字+px | 字体大小 |
| font-weight | normal（正常）/bold（加粗） | 字体粗细 |
| font-style | normal（正常）/italic（倾斜） | 字体倾斜 |
| font-family | 相应字体 | 设置字体（网页中是非衬线字体） |
| text-indent | 数字+em(和字体大小一样) | 文本缩进 |
| text-align | cente/left/right | 文本对齐 |
| text-decoration | underline/line-through/overline/none | 文本修饰 |
| line-height | 倍数（当前字体大小的倍数） | 行高 |
font复合属性
font：倾斜 粗细 大小 字体（前两个可省略）
1.4 背景
背景复合属性
background：颜色 图片 平铺 位置
1.5 三大特性
- 继承性
- 层叠性
- 优先级
1.6 元素显示模式
| 元素显示模式 | 特点 | 代表标签 |
|---|---|---|
| 块级 | ①换行 ②可设置宽高 | div、p |
| 行内 | ①不换行 ②不可设置宽高 ③尺寸和内容大小相同 | a、span |
| 行内块 | ①不换行 ②可设置宽高 | img、button、input |
显示模式转换
| 属性 | 效果 |
|---|---|
| display:block | 转换成块级元素 |
| display:inline-block | 转换成行内块元素 |
| display:inline | 转换成行内元素 |
嵌套规范
- 块级元素作为大容器，可以嵌套文本、块级元素、行内元素。（p标签中不要嵌套div、p、h）
- a标签内部可以嵌套任意元素，但不能嵌套a
2. 学习目标
2.1 目标
- 掌握CSS的引入方式
- 理解选择器的作用并熟悉各类选择器
- 掌握常见文字、文本、背景样式的代码书写
- 熟悉常见元素的显示模式，并掌握各显示模式的转换方法
2.2 demo
2.2.1 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO</title>
<style>
/*CSS注释*/
/*选择器 {CSS属性}*/
div{
font-family: 微软雅黑,黑体,sans-serif;
margin: 0 auto;
}
div p{
/* 后代选择器 */
text-indent: 2em;
text-align: center;
text-decoration: underline;
}
div>a:hover{
color:red
}
table {
color:black;
font-family: 'Times New Roman', Times, serif;
font-size: 30px;
background-color: aliceblue;
}
.unordered{
color: aqua;
font-size: medium;
font-weight: bold;
font-style: italic;
}
#table-head{
color: rgb(147, 122, 170);
}
*{
margin: 0;
padding: 0;
}
</style>
<!--关系：样式表-->
<link rel="stylesheet" href="./mystyle.css">
</head>
<body>
<div style="background-color: antiquewhite;">
标题：
<h1>我是一个一级标题</h1>
<h2>我是一个二级标题</h2>
<h6>我是一个六级标题</h6>
</div>
<hr>
<br>
文本段落:
<div>
<p>这是一个<b>文本</b>段落这是一个<i>文本</i>段落这是一个<u>文本</u>段落
这是一个文本段落这是一个文本段落</p>
<p>这是一个<span style="background-color: aquamarine;">文本段落</span><br>这是一个文本段落<span style="background-color: azure;">这是一个文本段落</span></p>
<hr>
</div>
图片：
<div>
<img src="./1.jpg" width="500px">
<hr>
<br>
</div>
链接：
<div>
<a href="https://www.baidu.com/" target="_blank">百度</a>
</div>
<div>
<a href="https://www.baidu.com/" target="_blank" alt="百度"><img src="./百度.jpeg" width="150px" title="百度"></a>
<hr>
</div>
<div>
有序表：
<ol>
<li>我是第一项</li>
<li>我是第二项</li>
</ol>
无序表：
<div class="unordered">
<ul>
<li>我是一项</li>
<li>我是另一项</li>
</ul>
</div>
自定义列表：
<dl border="1">
<dt>选购中心</dt>
<dd>手机</dd>
<dd>电脑</dd>
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
</dl>
<hr>
</div>
表格：
<div>
<table border="1" class="data-table">
<thead id="table-head">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>评语</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>10</td>
<td>男</td>
<td rowspan="2">好</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>男</td>
</tr>
</tr>
</tbody>
</table>
</div>
<hr>
表单：
<div>
<form>
<h1>注册界面</h1>
昵称: <input type="text" placeholder="请输入昵称">
<br>
<br>
密码: <input type="password" placeholder="请输入密码">
<br>
<br>
性别：
<label><input type="radio" name="sex" checked> 男 </label>
<label><input type="radio" name="sex"> 女</label>
<br>
<br>
所在城市：
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
<br>
<br>
爱好：
<label><input type="checkbox" checked>读书</label>
<label><input type="checkbox">运动</label>
<label><input type="checkbox">旅游</label>
<br>
<br>
个人介绍：
<div>
<textarea cols="50" rows="10"></textarea>
</div>
<br>
<input type="checkbox" checked>我同意所有条款
<br>
<br>
<input type="submit" value="免费注册">
<button type="reset">重置</button>
</form>
</div>
</body>
</html>
2.2.2 展示
3.学习成果
3.1 新闻
3.1.1 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻</title>
<style>
div{
text-align: center;
}
.time{
color: #808080;
}
.owner{
color: #87ceeb;
text-decoration: none;
}
.function{
color: blueviolet;
text-decoration: none;
}
p{
text-indent: 2em;
line-height: 1.5;
}
</style>
</head>
<body>
<div>
<h1>《自然》评选改变科学的10个计算机代码项目</h1>
<span class="time">2017年01月2814:58</span>
<a href="#" class="owner" title="新浪科技">新浪科技</a>
<a href="#" class="function" title="收藏本文">收藏本文</a>
<hr>
</div>
<p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这—发现。其他研究者也可以在此甚础上进一步加以分析.</p>
<p>这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。剪国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>
<p>如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员。一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》(Nature)东志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
<p>最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了柯翘语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，便得许参科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如×=+5。然后由编译器持这些指令转换成快速、高效的机器代码。</p>
</body>
</html>
3.1.2 展示
3.2 卡片
3.2.1 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡片</title>
<style>
body{
background-color: #f5f5f5;
}
.goods{
background-color: #fff;
width: 234px;
height: 300px;
/* 标签居中 */
margin: 0 auto;
/* 内容居中 */
text-align: center;
}
img{
height: 160px;
}
.phone{
text-align: center;
font-size: 14px;
line-height: 25px;
}
.introduction{
color: #cccccc;
font-size: 12px;
height: 30px;
}
.price{
color: #ffa500;
font-size: 14px;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="goods">
<img src="./卡片.png" alt="手机">
<p class="phone">Redmi 12 5G</p>
<p class="introduction">5G骁龙芯，大屏大电量</p>
<p class="price">9999元</p>
</div>
</body>
</html>
3.2.2 展示
3.3 导航栏
3.3.1 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏</title>
<style>
span>.navigation{
width: 100px;
height: 50px;
text-decoration: none;
color: rgb(112, 112, 112);
border-radius: 10px 25px;
border: 2px solid pink;
background-color: white;
display: inline-block;
text-align: center;
line-height: 50px;
}
span>.navigation:hover{
color:rgb(37, 142, 227)
}
</style>
</head>
<body>
<span><a href="#" class="navigation">导航1</a></span>
<span><a href="#" class="navigation">导航2</a></span>
<span><a href="#" class="navigation">导航3</a></span>
<span><a href="#" class="navigation">导航4</a></span>
<span><a href="#" class="navigation">导航5</a></span>
</body>
</html>
3.3.2 展示
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
