![]()
1. 选择器作用：选中页面中对应的标签（找她），方便后续设置样式（改她）
2、标签选择器：标签名 { css属性名：属性值； }
3. 类选择器：.类名 { css属性名：属性值； }
4. id选择器：#id属性值 { css属性名：属性值； }
5. 通配符选择器：* { css属性名：属性值；}
字体相关属性总结
字体大小： font-size
• 数字+px
➢ 字体粗细：font-weight
• 正常：normal 或 400
• 加粗：bold 或 700
➢ 字体样式：font-style
• 正常：normal
• 倾斜：italic
➢ 字体系列：font-family
• 具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
➢ 字体连写：font
• font : style weight size family;
font : style weight size/line-height family ; // line-height行高
![]()
➢ text-align : center 能让哪些元素水平居中？
1. 文本
2. span标签、a标签
3. input标签、img标签
➢ 注意点： 1. 如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置
➢ 如果需要让div、p、h（大盒子）水平居中？
• 可以通过margin : 0 auto ; 实现
➢ 注意点： 1. 如果需要让 div、p、h（大盒子） 水平居中，直接给 当前元素本身 设置即可
2. margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
开发中会使用 text-decoration : none ; 清除a标签默认的下划线
浏览器调试 f12 或者右键：检查
出现删除线：被覆盖
出现黄色三角感叹号：语法错误
调试加代码：选中30px 按tab键![]()
![]()
一行内容要分开用span标签
切换用英文 自动提示代码
新闻网页案例 实现效果图
![]()
代码：
<title>self新闻网页</title>
<style>
.center {
text-align: center;
}
div {
width: 800px;
height: 600px;
margin: 0 auto;
}
.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>
小米官网卡片居中示例效果图
<style>
body {
background-color: #f5f5f5;
}
.goods {
background-color: #ffffff;
width: 234px;
height: 300px;
/* 标签div居中 */
margin:0 auto;
/* 内容居中 */
text-align: center;
}
img {
width: 160px;
}
.title {
line-height: 25px;
font-size: 14px;
}
.name {
line-height: 30px;
font-size: 12px;
color: #ccc;
}
.price {
font-size: 14px;
color: #ffa500;
}
</style>
</head>
<body>
<!-- div 用来网页布局, 一个页面可能用无数次, 原则: 如果使用div ,尽量使用类名控制样式 -->
<div class="goods">
<img src="./car.jpg" alt="">
<div class="title">九号平衡车</div>
<div class="name">成年人的玩具</div>
<div class="price">1999元</div>
</div>
</body>
浙公网安备 33010602011771号