CSS基础
CSS简介
-
层叠样式表
<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>
/* css的注释 */
/* 这里写的都是css */
/* 内联式 */
/* 选择器 {css属性} */
/* 选择器作用：查找标签 */
p{
/* 文字颜色变成红色 */
color: red;
/* 字变大 px：像素*/
font-size: 30px;
/* 背景颜色 */
background-color: aquamarine;
/* height width */
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
CSS引入方式
-
内嵌式：CSS写在style标签中
-
提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
-
作用范围：当前页面
-
使用场景：小案例
-
<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>
<!-- rel="stylesheet"即关系为样式表 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<!-- css到底能写在哪里 -->
<p>这是p标签</p>
<!-- 行内式 -->
<div style="color: aquamarine; font-size: 30px;">这是div标签</div>
</body>
</html>
-
外联式：CSS写在一个单独的.css文件中
-
提示：需要通过link标签在网页中引入
-
作用范围：多个页面
-
使用场景：项目中方
-
-
行内式：CSS写在标签的style属性中
-
使用范围：当前标签
-
使用场景：配合js使用
-
<div style="color: aquamarine; font-size: 30px;">这是div标签</div>
基础选择器
-
标签选择器
-
结构：标签名 { css属性名: 属性值; }
-
作用：通过标签名，找到页面中所有这类标签，设置样式
-
注意点
-
1、标签选择器选择的是一类标签，而不是单独一个
-
2、标签选择器无论嵌套关系有多深，都能找到对应的标签
-
-
<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>
/* 选择器 {} */
/* 标签选择器 就是 以标签名命名的选择器 */
p{
color: red;
}
</style>
</head>
<body>
<!-- 标签选择器
- 结构：标签名 { css属性名：属性值；}
- 作用：通过标签名，找到页面中所有这类标签，设置样式
- 注意点
- 1、标签选择器选择的是一类标签，而不是单独一个
- 2、标签选择器无论嵌套关系有多深，都能找到对应的标签 -->
<p>pppppppppppppppp</p>
<p>这个p是什么颜色呢？</p>
<p>介个呢</p>
</body>
</html>
-
类选择器
-
结构：.类名{ css属性名: 属性值; }
-
作用：通过类名，找到页面中所有带这个类名的标签，设置样式
-
注意点：
-
1、所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
-
2、类名可以由数字、字母、下划线、中间线组成，但不能以数字或者中划线开头
-
3、一个标签可以同时有多个类名，类名之间以空格隔开
-
4、类名可以重复，一个类选择器可以同时选中多个标签
-
-
<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>
.red{
color: red;
}
.size{
font-size: 66px;
}
</style>
</head>
<body>
<!-- 类选择器，先定义后使用 -->
<p>11111</p>
<!-- 一个标签可以使用多个类名，需要空格隔开即可 -->
<p class="red size">22222</p>
<div class="red">这个标签文字也要变红</div>
</body>
</html>
-
id选择器
-
结构：#id属性值{ css属性名: 属性值; }
-
作用：通过id属性值，找到页面中带有id属性值的标签，设置样式
-
注意点：
-
1、所有标签上都有id属性
-
2、id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
-
3、一个标签上只能有一个id属性值
-
4、一个id选择器只能选中一个标签
-
-
<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>
/* 定义id选择器 */
#bule{
color: skyblue;
}
</style>
</head>
<body>
<!-- id选择器
- 结构：**#id属性值{ css属性名: 属性值; }**
- 作用：通过id属性值，找到页面中带有id属性值的标签，设置样式
- 注意点：
- 1、所有标签上都有id属性
- 2、id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
- 3、一个标签上只能有一个id属性值
- 4、一个id选择器只能选中一个标签 -->
<div id="bule">这个div文字是蓝色的</div>
</body>
</html>
-
通配符选择器
-
结构：*{ css属性名: 属性值; }
-
作用：找到页面中所有的标签，设置样式
-
注意点：
-
1、开发中使用极少，只会在特殊情况下才会用到
-
2、在基础小页面中可能会用于去除默认的margin和padding
-
-
<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>
*{
color: red;
}
</style>
</head>
<body>
<!-- - 通配符选择器
- 结构：*{ css属性名: 属性值; }
- 作用：找到页面中所有的标签，设置样式
- 注意点：
- 1、开发中使用极少，只会在特殊情况下才会用到
- 2、在基础小页面中可能会用于去除默认的margin和padding
-->
<div>div</div>
<p>ppp</p>
<h1>h1</h1>
<span>span</span>
</body>
</html>
字体和文本样式
-
字体大小
-
属性名： font-size
-
取值：数字 + px
-
注意点：
-
谷歌浏览器默认文字大小是16px
-
单位需要设置，否则无效
-
-
<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>
p {
font-size: 30px;
}
</style>
</head>
<body>
<!-- 字体大小
- 属性名： font-size
- 取值：数字 + px
- 注意点：
- 谷歌浏览器默认文字大小是16px
- 单位需要设置，否则无效 -->
<!-- 浏览器默认字号是16 -->
<p>这是段落文字</p>
</body>
</html>
-
字体粗细
-
属性名：font-weight
-
取值：
-
关键字
-
正常---normal
-
加粗---bold
-
-
纯数字：100~999的整百数（推荐）
-
正常---400
-
加粗---700
-
-
-
注意点
-
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
-
实际开发以：正常、加粗两种取值使用最多。
-
-
<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>
div{
/* 加粗 */
font-weight: 700;
}
/* 不加粗 */
h1{
font-weight: 400;
}
</style>
</head>
<body>
<div>这是div</div>
<h1>这是一级标题</h1>
</body>
</html>
-
字体样式（是否倾斜）
-
属性名：font-style
-
取值：
-
正常（默认值）：normal
-
倾斜：italic
-
-
<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>
div{
/* 倾斜 */
font-size: initial;
}
em{
/* 正常的，不倾斜 */
font-size: normal;
}
</style>
</head>
<body>
<div>div文字</div>
<em>em</em>
</body>
</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>
div{
/* font-fmaily: 宋体; */
/* 如果用户电脑没有安装微软雅黑，就按黑体显示文字 */
/* 如果电脑没有安装黑体，就按任意一种非衬线字体系列显示 */
font-family: 微软雅黑, 黑体, sans-serif;
}
</style>
</head>
<body>
<div>这是一个div标签</div>
</body>
</html>
-
样式的层叠问题
-
问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？
-
结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
-
TIP：
-
CSS（Cascading style sheets）层叠样式表
-
所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
-
-
<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>
p {
color: red;
color: blue;
}
</style>
</head>
<body>
<p>ppppp</p>
</body>
</html>
-
字体font相关属性的连写
-
属性名： font（复合属性）
-
取值：
-
font: style weight size family;
-
-
省略要求：
-
只能省略前两个，如果省略了相当于设置了默认值
-
-
注意点：如果需要同时设置单独和连写形式
-
要么把单独的样式写在连写的下面
-
要么把单独的样式写在连写的里面
-
-
<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>
p {
/* 一个属性冒号后面书写多个值的写法 -- 复合属性 */
font: italic 700 66px 宋体;
font-style: normal;
/* 省略写法 */
font: 100px 微软雅黑;
}
</style>
</head>
<body>
<p>这是p标签</p>
</body>
</html>
-
文本缩进
-
属性名：text-indent
-
取值：
-
数字+px
-
数字+em（推荐：1em = 当前标签的font-size的大小）
-
-
<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>
p {
/* text-indent: 50px; */
/* 首行缩进2个字的大小 */
/* 默认字号：16px; 32即缩进2个字 */
text-indent: 32px;
/* em：一个字的大小 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>2016年9月27日，获得亚洲新歌榜2016年度盛典最佳男歌手奖；同年10月加盟东方卫视《天籁之战第一季》；同年12月2日，获得2016MAMA亚洲最佳艺人奖。2017年3月14日，发行专辑《H》；同年6月，参加旅行真人秀《旅途的花样》。2018年2月参加湖南卫视《歌手2018》，获得总决赛亚军；同年9月8日-9日在鸟巢体育场连开两场2018火星演唱会。2019年2月担任浙江卫视《王牌对王牌第四季》固定MC；同年11月15日-17日在海口五源河体育场连开3场2019火星演唱会。2020年2月21日再次加盟综艺节目《王牌对王牌第五季》；4月24日成为《歌手·当打之年》总冠军；同年4月8日，发行数字专辑《新世界NEW WORLD》，5月11日发布实体版。</p>
</body>
</html>
-
文本水平对齐方式
-
属性名：text-align
-
取值：
-
属性值 效果
-
left 左对齐
-
center 居中对齐
-
right 右对齐
-
-
注意点：
-
如果需要让文字水平居中，text-align属性给文本所在标签（文本的父元素）设置
-
-
<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>
h1 {
/* text-align: left; */
/* text-align: right; */
text-align: center;
}
</style>
</head>
<body>
<h1>新闻标题</h1>
</body>
</html>
-
水平居中方法总结text-align：center
-
text-align: center能让哪些元素水平居中？
-
1、文本
-
2、span标签、a标签
-
3、input标签、img标签
-
-
注意点：
-
1、如果需要让以上元素水平居中，text-align:center需要给以上元素的父元素设置
-
-
<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>
h1 {
/* text-align: left; */
/* text-align: right; */
text-align: center;
}
/* 让图居中！！！ */
body {
text-align: center;
}
</style>
</head>
<body>
<h1>新闻标题</h1>
<img src="./images/1.jpg" alt="">
</body>
</html>
-
文本修饰
-
属性名：text-decoration
-
取值：
-
属性值 效果
-
underline 下划线（常用）
-
line-through 删除线（不常用）
-
overline 上划线（几乎不用）
-
none 无装饰线（常用）
-
-
注意点：
-
开发中会使用text-decoration: none;清除a标签默认的下划线
-
-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>Document</title>
<style>
div {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
h2 {
text-decoration: overline;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div>div</div>
<p>ppp</p>
<h2>h2</h2>
<a href="#">我是超链接</a>
</body>
</html>
-
行高
-
作用：控制一行的上下行间距
-
属性名：line-height
-
取值：
-
数字+px
-
倍数（当前标签font-size的倍数）
-
-
应用：
-
1、让单行文本垂直居中可设置line-height：文本父元素高度
-
2、网页精准布局时，会设置line-height: 1; 可取消上下间距
-
-
行高与font连写的注意点：
-
如果同时设置了行高和font连写，注意覆盖问题
-
font: style weight size/line-height family;
-
-
<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>
p {
/* line-height: 50px; */
/* 自己字号的1.5倍 */
line-height: 1.5;
/* 66px 宋体 倾斜 加粗 行高2倍 */
font: italic 700 66px/2 宋体;
}
</style>
</head>
<body>
<p>2016年9月27日，获得亚洲新歌榜2016年度盛典最佳男歌手奖；同年10月加盟东方卫视《天籁之战第一季》；同年12月2日，获得2016MAMA亚洲最佳艺人奖。2017年3月14日，发行专辑《H》；同年6月，参加旅行真人秀《旅途的花样》。2018年2月参加湖南卫视《歌手2018》，获得总决赛亚军；同年9月8日-9日在鸟巢体育场连开两场2018火星演唱会。2019年2月担任浙江卫视《王牌对王牌第四季》固定MC；同年11月15日-17日在海口五源河体育场连开3场2019火星演唱会。2020年2月21日再次加盟综艺节目《王牌对王牌第五季》；4月24日成为《歌手·当打之年》总冠军；同年4月8日，发行数字专辑《新世界NEW WORLD》，5月11日发布实体版。</p>
</body>
</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>
div {
width: 552px;
height: 400px;
background-color: pink;
text-align: center;
/* 文字是单行的 */
/* !!!垂直居中技巧：设置行高属性值 = 自身高度属性值 */
line-height: 400px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
-
拓展 标签水平居中方法总结 margin : 0 auto
-
如果需要让div、p、h（大盒子）水平居中？
-
可以通过margin : 0 auto ; 实现
-
-
注意点：
-
1、如果需要让 div、p、h（大盒子） 水平居中，直接给当前元素本身设置即可
-
2、margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
-
-
<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>
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto; /* 上下边界为0，左右自适应相同值 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
综合案例1
<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>
div {
width: 800px;
height: 600px;
/* */
margin: 0 auto;
}
/* h1 {
text-align: center;
} */
/* p {
text-align: center;
} 后面还有其他的段落, 其他段落不居中 */
/* 类选择器设置段落居中 */
.center {
text-align: center;
}
.color1 {
color: #808080;
}
.color2 {
color: #87ceeb;
font-weight: 700;
}
a {
text-decoration: none;
}
/* 段落内容首行缩进 */
.suojin {
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
<p class="center">
<span class="color1">2077年01月28日14:58</span>
<span class="color2">新浪科技</span>
<a href="#">收藏本文</a>
</p>
<hr>
<p class="suojin">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
<p class="suojin">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>
<p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
<p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
</div>
</body>
</html>
-
综合案例2
<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>
body {
background-color: #f5f5f5;
}
.goods {
width: 234px;
height: 300px;
background-color: #fff;
/* 标签div居中 */
margin: 0 auto;
/* 内容居中 */
text-align: center;
}
img {
width: 160px;
}
/* 产品标题 */
.title {
font-size: 14px;
line-height: 25px;
}
.info {
color: #ccc;
font-size: 12px;
line-height: 30px;
}
.money {
font-size: 14px;
color: #ffa500;
}
</style>
</head>
<body>
<!-- div 用来网页布局, 一个页面可能用无数次, 原则: 如果使用div ,尽量使用类名控制样式 -->
<div class="goods">
<img src="./images/car.jpg" alt="">
<div class="title">九号平衡车</div>
<div class="info">成年人的玩具</div>
<div class="money">1999元</div>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器