html好看的字体样式-20种CSS编码方法让你更高效

bendan520 html

2024-05-01 0 4,203 百度已收录

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在这里我想和大家分享一下各大CSS网站总结推荐的20条有用的规则和实践经验。 有些是针对CSS初学者的，有些知识点是高级的。 希望大家能从这篇文章中学到有用的知识。

1、注意外线间距的折叠

与大多数其他属性不同，上方和下方的垂直边距同时存在时会折叠。 这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个边距值中较大的一个。 例如：

HTML<div class="square red">

<div class="square blue">

红色小方块和蓝色方块的顶部和底部宽度是40px，而不是70px。 解决折叠外间距问题的方法有很多种。 对于初学者来说，最简单的一种方法是仅对所有元素在一个方向上使用边距。 例如，我们对所有上下外部间距使用 margin-bottom。

2.使用flex进行布局

Flex弹性布局的出现是有激励因素的。 Floating和inline-block看似能够实现很多布局效果，但本质上都是文本和块元素布局的工具，而不是整个网页的布局工具。 Flex 可以轻松地按照我们设想的方式创建布局。

Flex 具有一组“灵活容器”属性和一组“灵活项目”属性。 一旦你学会了它们，制作任何响应式布局都是小菜一碟。 目前各种浏览器最新版本支持flex都没有问题，所以应该多使用flex布局。

<pre class="code-snippet__js" data-lang="css">.container { display: flex;}

3.重置元素的CSS样式

尽管多年来有了很大的改进，但各种元素的默认样式在浏览器之间始终存在很大差异。 解决这个问题的最好方法是在 CSS 的开头为所有元素设置一个通用的 CSS Reset 代码。 这样，你在布局时就没有任何默认的内外行间距html好看的字体样式，并且得到的效果是统一的。

网上已经有成熟的CSS代码库为我们解决浏览器不一致问题，比如normalize.css、minireset、ress。 您可以在您的项目中引用它们。 如果你不想使用第三方代码库，你可以使用以下样式来执行非常基本的 CSS 重置：

* {    margin: 0;    padding: 0;    box-sizing: border-box;}

上面的代码看起来有点霸道。 它将所有元素的内外行距设置为0。不过，如果没有这个默认的内外行距的影响，我们之前的CSS设置将会变得更加容易。 同时，box-sizing: border-box也是一个很棒的设置，我们稍后会介绍。

4.将所有元素设置为Border-box

大多数初学者不知道盒子大小，但它实际上非常重要。 box-sizing 属性有两个值：

将所有元素设置为 border-box 可以更轻松地更改元素的大小，而不必担心 padding 或 border 值会拉伸元素、变换它们或将它们换行。

5.使用图片作为背景

在页面中添加图片时，尤其是图片需要响应式的时候，最好使用background属性来引入图片，而不是使用background属性来引入图片

标签。

使用图像可能看起来更复杂，但它实际上使图像样式变得更容易。 借助background-size、background-position等属性，可以更轻松地维护或更改图像的原始尺寸和长宽比。

举个反例：

超文本标记语言

<section>    <p>Img element</p>    <img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle"></section>
<section>    <p>Div with background image</p>    <div></div></section>

CSS

img {    width: 300px;    height: 200px;}
div {    width: 300px;    height: 200px;    background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');    background-position: center center;    background-size: cover;}
section{    float: left;    margin: 15px;}

在后台引入图像的一个缺点是页面的网络可访问性会受到轻微影响，因为屏幕阅读器和搜索引擎无法正确检索图像。 这个问题可以通过CSS的object-fit属性来解决。 到目前为止，不仅IE，其他浏览器都可以使用object-fit。

6.更好的表格边框

HTML 中的表格总是很难看。 它们很难做出响应并且通常很难设计样式。 例如，如果您想向表格及其单元格添加简单的边框，最可能的结果是：

可以看到，有很多重复的边框，看起来不太好看。 这是删除所有双边框的快速方法：border-collapse：折叠。 只要设置这个属性，表格边框就会看起来更好：

7.更友好的评论

CSS实际上并不是一种编程语言，但它的代码仍然需要文档化。 添加一些简单的注释可以对代码进行分类，方便自己和朋友后期维护。

对于大面积定义或重要组件，您可以使用以下注释样式：

/*---------------    #Header---------------*/header { }
header nav { }
/*---------------    #Slideshow---------------*/.slideshow { }

对于细节和不太重要的样式，您可以使用单行注释方法：

/*   Footer Buttons   */.footer button { }
.footer button:hover { }

另外，请记住 CSS 中没有 // 注释，只有 /**/ 注释：

/*  正确  */p {    padding: 15px;    /*border: 1px solid #222;*/}
/*  错误  */p {    padding: 15px;    // border: 1px solid #222;  }

8. 破折号的命名

当类或 ID 包含多个短语时，应使用连字符 (-)。 CSS 不区分大小写，因此不能使用驼峰式命名。 同样，不建议在CSS中使用逗号连接命名方式。

/*  正确     */.footer-column-left { }
/*  错误  */.footerColumnLeft { }
.footer_column_left { }

在命名方面，您还可以考虑 BEM，它遵循一组原则，并提供基于组件的开发方法，但一致性较低。

9.不要重复设置

大多数 CSS 属性的值都是从 DOM 树中的下一级元素继承的，因此称为层叠样式表。 以字体属性为例 - 它总是从父级继承，为什么您必须为页面上的每个元素单独设置它。

只需将您设置的字体样式添加到 或 元素中，并让它们手动向上继承即可。

html {    font: normal 16px/1.4 sans-serif;}

然后我们就可以一次更改页面上的所有文本样式。 当然，并不是CSS中的所有属性都是可继承的，我们仍然需要在每个元素上单独设置这些属性。

10.使用transform属性创建动画

最好使用transform()函数来创建元素的位移或大小动画。 尽量不要直接改变元素的宽度、高度和左/上/下/右属性值。

在以下示例中，我们向 .ball 元素添加了从左到右的动画。 推荐使用transform:translateX()函数来替换left属性。

.ball {    left: 50px;    transition: 0.4s ease-out;}
/* 不建议 */.ball.slide-out {    left: 500px;}
/* 建议 */.ball.slide-out {    transform: translateX(450px);}

Transform及其所有功能（平移、旋转、缩放等）几乎没有浏览器兼容性问题，可以随便使用。

11.不要DIY，多使用代码库

CSS 社区规模庞大，新的代码库不断涌现。 它们有多种用途，从微小的片段到用于构建响应式应用程序的完整框架。 其中大多数也是开源的。

下次当你遇到 CSS 问题时，在全力以赴解决它之前，请检查一下 Github 或 Codepen 上是否已经有可用的解决方案。

12.保持选择器重量轻

并非所有 CSS 选择器都是一样的。 当我第一次学习 CSS 时，我一直认为选择器会覆盖它之前的所有内容。 然而，事实并非如此，正如我们在下面的示例中所说明的：

超文本标记语言

<a href='#' id='blue-btn' class="active">按钮</a>

CSS

a{    color: #fff;    padding: 15px;}a#blue-btn {    background-color: blue;}a.active {    background-color: red;}

我们希望.active类中设置的样式能够生效，使按钮变成绿色。 但是不行，因为按钮内部有一个ID选择器，它也设置了background-color，而且ID选择器的权重较高，所以按钮的颜色是黄色。 选择器的权重大小如下：

ID (#id) > Class (.class) > Type (例如 header)

权重也会叠加，所以a#button.active的权重比a#button的要高。 从一开始就使用高权重的选择器，会导致你在之前的维护中不断使用更高权重的选择器，最终选择使用!important。 不建议这样做。 具体激励措施将在稍后提及。

13.不要使用!important

说真的，不要使用 !important。 现在看起来似乎是一个快速修复，但最终可能会导致大量重新绘制。 相反，我们应该花时间找出 CSS 选择器不起作用的原因并修复它。

唯一可以使用 !important 的地方是当你想要覆盖 HTML 中的内联样式时，但内联样式也是一个坏习惯，应该尽可能避免。

14. 使用text-transform 将字母转换为小写。 本文适合英文环境，不适合英文。

在 HTML 中，您可以通过全部大写字母书写短语来表达特定含义。 例如：

<h3>Employees MUST wear a helmet!</h3>

如果需要将某段文字转换为全部小写，我们可以正常用HTML编写，然后通过CSS进行转换。 这可以保持上下文内容的一致性。

<div class="movie-poster">Star Wars: The Force Awakens