本文介绍了CSS的基本语法，包括选择器的作用，如基础选择器（标签选择器、类选择器、ID选择器和通配符选择器），类选择器的多类名使用，以及字体和文本属性的设置。此外，还讨论了CSS的引入方式，如行内样式、内部样式和外部样式，并提供了综合案例进行示例。
CSS：美化html，布局网页，让结构样式相分离
CSS主要由两个主要部分组成：选择器以及一条或多条声明
1 CSS选择器的作用
选择器就是根据不同需求把不同标签选出来这就是选择器的作用。简单来说，就是选择标签用的。
选择器分为基础选择器和复合选择器
- 基础选择器是由单个选择器组成的
- 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
标签选择器：标签名作为选择器
类选择器：想要差异化选择不同的标签，单独选择一个或者某几个标签（开发最常用）
id选择器：为标有特定id的html元素定义样式 （只能调用一次，别人不能使用）
通配符选择器：改变所有html元素样式
1.1 小案例
<!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>
.red {
/* color: red; */
background-color: red;
width: 100px;
height: 100px;
}
.green {
/* color: red; */
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="red">红色</div>
<div class="green">绿色</div>
<div class="red">红色</div>
</body>
</html>
结果：
2 类选择器-多类名
可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
简单理解就是一个标签有多个名字。
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
<div class="red font35">刘德华</div>
多类名开发使用场景：
1）可以把一些标签元素相同的样式（共同的部分）放到一个类里面。
2）这些标签都可以调用这个公共的类，然后在调用自己独有的类。
3）适合统一修改，节省css代码
3 CSS字体属性
font-family: '宋体'; 改变字体 //多个字体使用引号包裹，单字体不用
font-size: '120px'; 字体大小
font-weight: '700'; 字体粗细 后不需要跟单位 实际开发中更多使用数字 400：不加粗 700：加粗
font-style: normal; italic:斜体 normal：正常 常将倾斜字体变为不倾斜
字体复合属性：
/* 复合形式有格式要求 不能随意换顺序*/
/* font: font-style font-weight font-size/line-height font-family; */
书写时，font-size、font-family不可省略，其他皆可
font: italic 700 16px 'Microsoft yahei';
font: 20px 'Microsoft yahei';
4 CSS文本属性
可以定义文本外观，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。
color: 颜色
color: red;
color: #ff0000; 红黄蓝三原色
color: rgb(200, 0, 0); 红黄蓝三原色
color: rgba(255, 22, 22, 0.5); a：表示透明度，0最透明 取值范围是0~1
对齐文本：
text-align: center; 居中 水平对齐 left：左对齐（默认） right：右对齐
装饰文本：
text-decoration: none; /* 默认none underline：下划线 overline：上划线 line-through：删除线 */ a链接自带的下划线可以用该css去掉
text-indent: 20px; //首行缩进 正负可取
text-indent: 2em; //1em：相对于当前元素一个文字的大小。
行间距：
line-height: 25px; //行高
5 CSS的引入方式
CSS样式表可以分为三大类：
1.行内样式表（行内式）：在元素标签内部的style属性中设定CSS样式，适合于修改简单样式
<p style="color: pink;">刘德华</p>
2.内部样式表（嵌入式）：就是在html页面内部写样式，但是是单独写到style标签内部
<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>
<style>
/* .red {
line-height: 50px;
} */
p {
line-height: 25px;
}
</style>
</head>
3.外部样式表（链接式）
开发中使用最多的
- 在外部新建一个.css文件
- 在使用页面引入
<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="ys.css">
</head>
6 综合案例
案例一
<!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>
<style>
div {
margin: 0 auto;
/* background-color: pink; */
width: 800px;
height: 600px;
}
.center {
text-align: center;
}
.color1 {
color: gray;
}
.color2 {
color: rgb(0, 204, 255);
font-weight: 700;
}
.color3 {
text-decoration: none;
}
p {
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="#" class="color3">收藏本文</a>
</p>
<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>案例二</title>
<style>
body {
/* background-color: #f5f5f5; */
background-color: pink;
}
.goods {
width: 234px;
height: 300px;
background-color: white;
/* 标签居中 */
margin: 0 auto;
/* 内容居中 */
text-align: center;
}
img {
width: 160px;
}
.center1 {
line-height: 25px;
font-size: 14px;
}
.center2 {
color: #cccccc;
font-size: 12px;
line-height: 30px;
}
.center3 {
color: #ffa500;
font-size: 14px;
}
</style>
</head>
<body>
<!-- div网页布局 ,尽量使用类名控制样式 -->
<div class="goods">
<img src="../picture/car.jpg" alt="小车">
<div class="center1">九号平衡车</div>
<div class="center2">成年人的玩具</div>
<div class="center3">1999元</div>
</div>
</body>
</html>
结果：
扫一扫
1230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
