web——CSS基础
发布时间：2024-07-10 17:01
作者：小 琛
欢迎转载，请标明出处
文章目录
-
- 引入方式
- 选择器
- 字体样式
- 文本样式
- 例子1：新闻网页
- 例子2：产品推荐图
css:在web中，用于渲染网页的工具
引入方式
三大引入方式：内嵌、外联、行内
- 内嵌：在html的head中，定义style，将所有渲染内容写在里面
- 外联：定义一个.css文件，将所有渲染写在该文件内，在对应的html文件中，link该文件
- 行间：写在某一个标签内
一般的工程开发多用外联式，这样可以让工程文件看起来清晰；内嵌式通常用于演示等简单操作；行间式在css渲染阶段一般不使用，通常和js配合完成某些功能。
选择器
选择器有四种：标签选择器、类选择器、id选择器、通配符选择器
-
标签选择器
以标签的名字作为选择标准，css会找到所有的该类标签，进行渲染
![\"web——CSS基础_第1张图片\"](\"https://img.it610.com/image/info8/1e85ed0d40674c74b814f25fdf943659.jpg\")
该方法有优点亦有缺点，当某些场景下，多个相同的标签要显示不同内容，该方式并不适用 -
类选择器（重要）
在style中定义类，格式为.+类名，对应的页面中带有该类名的内容全部渲染，一个标签可以使用多个类名
![\"web——CSS基础_第2张图片\"](\"https://img.it610.com/image/info8/4696f4019b614b098216e2ad3ba79c4c.jpg\")
-
id选择器
id选择器和类选择器类似，定义方式为#+类名，在css中不适用，js中大量使用 -
通配符选择器
定义方式：*{}，找到所有的标签，进行定义
字体样式
font的属性有非常多个，这里介绍常见的几个属性
- 字体粗细：font-weight
normal/400：普通
bold/700：加粗
字体粗细支持500、600，但一般只是用400、700 - 字体风格：font-style
normal：普通
italic：倾斜，效果与em、i相同 - font-size：字体大小
- font-fame：字体选择，有宋体、微软雅黑等
字体支持符合属性，例如：font：italic 700 60px 宋体
默认字体大小为16px
文本样式
- 文本缩进：text-indent
一般设置为2em，即缩进两个单位，这种方式可以避免字体大小改变导致缩进改变 - text-align：文本对齐方式
left：左对齐
right：右对齐
center：中心对齐
该属性不仅仅适用于文本，亦可用于图片、标题等内容 - text-decoration：文本修饰
underline：下划线
none：无
line-through - line-height：行高
数字+px或倍数（当前font-size）
例子1：新闻网页
完成以下内容：
![\"web——CSS基础_第3张图片\"](\"https://img.it610.com/image/info8/6cf019e64bfe42408d92a9dd08b73ed3.jpg\")
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>
.center {
text-align: center;
}
.time {
color: #808080;
}
.address {
color: #87ceeb;
font-weight: bold;
}
a {
text-decoration: none;
}
.text {
text-indent: 2em;
}
style>
head>
<body>
<div>
<h1 class=\"center\">《自然》评选改变科学的10个计算机代码项目h1>
<p class=\"center\">
<span class=\"time\">2077年01月2日14:58span>
<span class=\"address\">新浪科技span>
<span><a href=\"#\">收藏本文a>span>
p>
<hr>
div>
<div class=\"text\">
<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>
例子2：产品推荐图
![\"web——CSS基础_第4张图片\"](\"https://img.it610.com/image/info8/06ad06152d9542bb87bce989443dad20.jpg\")
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;
}
.product {
width: 234px;
height: 300px;
background-color: #ffffff;
}
.car {
text-align: center;
}
img {
width: 160px;
height: 140px;
}
.平衡车 {
font-size: 14px;
line-height: 25px;
}
.成年人 {
font-size: 12px;
line-height: 30px;
color: #cccccc;
}
.price {
color: #ffa500;
font-size: 14px;
}
style>
head>
<body>
<div class=\"product\">
<div class=\"car\">
<img src=\"./1.jpg\" alt=\"平衡车\" title=\"平衡车\">
<div class=\"平衡车\">九号平衡车div>
<div class=\"成年人\">成年人的玩具div>
<div class=\"price\">1999元div>
div>
div>
body>
html>