本文详细介绍了CSS的基础知识，包括引入方式、基础选择器、文字属性、盒子模型、定位和浮动等。通过实例展示了如何进行页面布局，如小米卡片居中、京东页面案例等，强调了CSS的三大特性——继承性、层叠性和优先级。最后，还涉及了定位的静态、相对、绝对和固定方式，以及浮动、清除浮动的方法。
第一天
css引入方式
嵌入式
<style>
/* 选择器 {
属性名: 属性值;
属性名: 属性值;
属性名: 属性值;
} */
p {
color: pink;
font-size: 30px;
}
</style>
外链式
<!-- 外链式 使用 link 标签 来引入 css 文件 -->
<!-- 一个 html 文件 可以引入 N 个 css 文件 -->
<!-- 一个 css文件 可以被 多个 html 文件引入 -->
<!-- <link rel="stylesheet" href="css文件的路径"> -->
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/index1.css">
行内式
<!-- 在 html 标签里面 有一个属性 是 style -->
<!-- <标签名 属性名="属性值"> -->
<h1 style="color: red ; font-size: 100px;">一级标题</h1>
基础选择器
标签选择器
p {
color: red;
}
类选择器
/* 类选择器 */
/* .类名 {
属性名: 属性值;
属性名: 属性值;
属性名: 属性值;
} */
.box {
color: red;
}
结构：
<!-- 类名：html 标签里面 的 class 属性值 称之为类名 -->
<div class="box">hello</div>
<div>hello</div>
<p class="box">111</p>
<h1 class="box">我是大标题</h1>
样式点定义，结构类调用
多类名使用
<!-- 多类名：一个标签 可以有 多个class 属性值 类名与类名之间使用空格分割 --> <!-- 多个类名身上的样式可以 同时作用与 一个标签 --> <div class="box box1">hello</div>
id选择器
/* .找 class # 找 id */
/* #id属性的值 {
css属性名: 属性值;
css属性名: 属性值;
css属性名: 属性值;
css属性名: 属性值;
} */
#box {
color: red;
}
结构：
<!-- #box -->
<div id="box">hello</div>
通配符选择器
可选择所有标签
* {
color: aqua;
}
结构：
<div>我是一个大盒子</div>
<h1>一级标题</h1>
<p>段落</p>
<span>小盒子</span>
应用: 清除内外边距
* {
margin:0;
padding:0;
}
文字属性
font属性
/* 需求：想要 让 hello 变成 20px */
.box {
/* 简写 fz数字 */
font-size: 20px;
}
加粗
h1 {
/* 让 加粗的文字 变成不加粗 */
font-weight: normal;
}
.box {
font-weight: bold;
}
h2 {
font-weight: 400;
}
p {
font-weight: 700;
}
倾斜
i {
/* 将 i 标签 和 em 标签 原本 倾斜的文字 变成 正常的文字 */
font-style: normal;
}
.box {
font-style: italic;
}
body {
font-family: 微软雅黑, 苹方, sans-serif;
}
font属性连写
.box {
/* font属性可以 一次设置 针对于字体样式 */
/* font属性 前两个属性值 可以省略不写 后两个不能省略 */
/* font属性 前两个属性值 可以交换位置 后面两个不能交换位置 */
/* font-size: 20px;
font-weight: bold;
font-style: italic;
font-family: 楷体; */
/* font: font-style font-weight font-size font-family */
/* font: italic bold 30px 黑体; */
/* font: 30px 楷体; */
/* font: italic bold; */
/* font: bold italic 黑体 30px; */
font-size: 30px;
font: italic bold 20px 宋体;
}
一般来说分开写
text属性
.box {
/* font-size: 19px;
text-indent: 32px; */
/* px 绝对单位 */
/* em 相对单位 1em = 当前文字的 font-size */
font-size: 30px;
text-indent: 2em;
}
文字水平居中
.box {
color: pink;
/* 边框 bd */
border: 1px solid #000;
/* 水平居中：text-align:center tac */
/* text-align: center; */
/* text-align: right; */
text-align: center;
}
/* 大盒子 里面的文字 可以通过 text-align:center 直接水平居中 */
/* 小盒子 需要将其包裹在 大盒子里面 再给大盒子 设置 text-align: center; */
div {
text-align: center;
}
span {
border: 1px solid #000;
/* text-align: center; */
}
p {
text-align: center;
}
结构：
<div>
<span>hello</span>
</div>
<p>
<img src="./images/1.jpg" alt="">
</p>
去掉下划线
a {
color: pink;
/* 去掉下划线 */
text-decoration: none;
}
.box {
/* text-decoration: line-through; */
/* text-decoration: overline; */
/* text-decoration: underline; */
/* 添加下划线 */
text-decoration: underline;
}
行高
作用1：
调整行间距
作用2：
让文本垂直居中
.box {
/* 宽 */
width: 300px;
/* 高 */
height: 50px;
/* 边框 */
border: 1px solid #000;
text-align: center;
/* 想要让 一行文字在一个盒子内垂直居中 将 line-height的属性值与 height属性值 设置一样即可 */
line-height: 50px;
}
作用3：line-height:1; 去除行高
盒子水平居中方法
/* margin: 0 auto 是让 大盒子在浏览器上面水平居中 */
/* 小盒子想要在 浏览器上也要水平居中
1. 将 小盒子放在大盒子里面
2. 给 大盒子 text-align:center
*/
.box {
width: 300px;
height: 300px;
border: 1px solid #000;
/* marign: 0 auto 可以让 大盒子水平居中 */
前提：该盒子必须有宽度
margin: 0 auto;
text-align: center;
}
/* span {
border: 1px solid #000;
margin: 0 auto;
} */
p {
/* margin: 0 auto; */
text-align: center;
}
结构：
<div class="box">hello</div>
<p>
<span>1111</span>
</p>
栗子
综合案例-排版
<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>Document</title>
<style>
.box {
width: 800px;
margin: 0 auto;
}
h1 {
text-align: center;
}
.title {
text-align: center;
}
p {
text-indent: 2em;
/* 设置行与行之间的距离 */
line-height: 30px;
}
.time {
color: #808080;
}
.sina {
color: #87ceeb;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<h1>《自然》评选改变科学的10个计算机代码项目</h1>
<div class="title">
<span class="time">2077年01月28日14:58</span>
<span class="sina">新浪科技</span>
<a href="#">收藏本文</a>
</div>
<hr>
<p>
2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
</p>
<p>
这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”
</p>
<p>
如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。
</p>
<p>
最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x
= 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
</div>
</body>
</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>Document</title>
<style>
/* 1. 需要给 body 标签设置 背景颜色 */
body {
background-color: #f5f5f5;
}
/* 2. 给 box 盒子 设置 宽高 背景颜色 水平居中*/
.box {
/* w234+h300 */
width: 234px;
height: 300px;
background-color: #fff;
margin: 0 auto;
text-align: center;
}
/* 3. 给 img 设置 宽度 */
img {
width: 160px;
}
.title {
height: 25px;
font-size: 14px;
}
.info {
height: 30px;
font-size: 12px;
color: #ccc;
}
.price {
font-size: 14px;
color: #ffa500;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/car.jpg" alt="">
<div class="title">九号平衡车</div>
<div class="info">成年人的玩具</div>
<div class="price">1999元</div>
</div>
</body>
</html>
第二天
笔记整理
选择器进阶
后代选择器
空格
.box h2 {
color: #f00;
}
子代选择器
/*
选择器1 > 选择器2 {
属性: 值;
属性: 值;
属性: 值;
}
*/
.box > h2 {
color: #f00;
}
并集选择器
逗号
/* h2 {
color: #f00;
}
p {
color: #f00;
}
a {
color: #f00;
} */
h2, p , a {
color: #00f;
}
.box h2, .news p {
color: #f00;
}
交集选择器
/* p {
color: #f00;
} */
/* .red {
color: #f00;
} */
/* 先找到 p 标签 同时 匹配 p标签身上 有 类名 将 red 的 才会被选择到 */
p.red {
color: #00f;
}
<!-- 需求：只让小可爱变红（不能改变html结构） -->
<!-- 解决：找到页面中，既是p标签，又有red这个类名的标签，设置样式 -->
<div class="red">小姐姐</div>
<p class="blue">小帅哥</p>
<p class="red">小可爱</p>
hover伪类选择器
.box {
width: 100px;
height: 100px;
background-color: pink;
}
.box:hover {
background-color: #f00;
}
<!-- 需求：鼠标悬停 box 盒子身上时 让 这个.box 盒子的背景颜色 变成红色 -->
<div class="box"></div>
emmet语法
快速输入语法
ul>li*8 等等
背景样式
.box {
width: 500px;
height: 500px;
border: 1px solid #000;
/* background-color: pink;
background-image: url(./image
最低0.47元/天 解锁文章
扫一扫
2111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
