整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

如何优雅的写 css 代码

如何优雅的写 css 代码

者:京东科技 杨健

CSS(全称 Cascading Style Sheets,层叠样式表)为开发人员提供声明式的样式语言,是前端必备的技能之一,基于互联网上全面的资料和简单易懂的语法,CSS 非常易于学习,但其知识点广泛且分散,很难做到精通,在我们日常开发中,常常忽视了 CSS 代码的质量,很容易写出杂乱无章的 CSS 文件。

代码优化建议

1. 使用缩写属性精简代码

适用于:margin、padding、border、font、background 等

但并非所有情况下都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项,这时候需要开发者自行判断。

.content{
    // 缩写前
    margin-right:16px;
    margin-top:30px;
    width:184px;
    height:32px;
    background:#FFFFFF
    margin-left:10px;
}
.content{
    //缩写后
    margin:30px 16px 0 10px;
    width:184px; 
    height:32px; 
    background:#FFFFFF
}

2. 合并选择器

使用 "," 连接多个选择器定义公用属性,不仅能增加可读性,还能减小 css 文件大小。

.content{
  display: flex;
  .flush, 
  .include, 
  .underline{
   margin-right: 12px; 
   padding: 3px 6px; 
   border: 1px solid #a96161; 
   font-size: 12px; 
   color: #412c2c; 
   }
   .flush{ 
   color: #FFFFFF; 
   background-color: aqua; 
   }
   .include{ 
   color: #5d3e3e; 
   background-color: #657f7f; 
   }
    .underline{ 
    color: #7da938; 
    background-color: #7c6a6a; 
    }
}

3. 使用更语义化的单词命名 class

命名的时候以 “在你之后开发的人不会产生疑惑” 为目标 如下

.curr{
    color:#FFFFFF;
    background:red;
}
.future{
    background:#9f6262;
}
// curr 是啥? future又是啥? ??

.current-count{ 
    color:#FFFFFF; 
    background:red; 
} 
.future-count{ 
    background:#9f6262; 
}

4. 属性声明顺序

选择器中属性数量较多时,将相关的属性声明放在一起,并按以下顺序排列:

  1. 定位相关,如 position、top/bottom/left/right、z-index 等
  2. 盒模型相关,如 display、float、margin、width/height 等
  3. 排版相关,如 font、color、line-height 等
  4. 可视相关,如 background、color 等
  5. 其他,如 opacity、animation 等

建议:在属性数量较多时可以参考这 5 个类别归类排列。

  /* 定位相关 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* 盒模型相关 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* 排版相关 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  /* 可视相关 */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* 其他 */
  opacity: 1;

5. 使用 & 符号引用父选择器

& 是 Sass 和 Less 中提供的语法糖,用于表示对父选择器的引用

优点:非常适合用于编写组件的样式,减少了很多重复单词

缺点:从 HTML 的 class name 中寻找对应样式的成本增加

.first {
    .first-title {/* styles */}
    .first-title:after {/* styles */}
    .first-content {/* styles */}
}
/* 用&引用来优化代码 */
.first {
    &-title {
        /* styles */
        &:after {/* styles */}
    }
    &-content {/* styles */}
}

Sass .vs. Less?

预处理器将 CSS 从声明语言转换成一门编程语言

可嵌套的语法增加了样式文件的可读性和可维护性

变量与混合特性能够减少很多重复的样式声明

Less 更像 CSS,易于上手,能够从 CSS 平滑过渡;Sass 的缩进语法接受度因人而异,Sass3.0 中提出了兼容 CSS 的 Scss,用户可以选择使用 Sass 或 Scss。

当项目 CSS 中需要涉及复杂逻辑时,Sass/Scss 更适合,Sass 提供了更强大、更接近编程语言的 @function、@if/@else、@while 等语法;当项目的样式复杂度不高时,选 Sass 或 Less 都可以。 (下面是一个 Less 和 Scss 语法对比例子)

// Less
.mixin( @count )when( @count > 0 ){
    background-color: black;
}
.mixin( @count )when( @count <=0 ){
    background-color: white;
}
.tag {
    .mixin(100);
}
// Scss
@function selectCount($count) {
    @if $count > 0 {
        return black;
    }
    @else {
        return white;
    }
}
.tag {
    background-color: checkCount(100);
}

综上,CSS 作为一门前端必备的基础技能,具有许多原生的痛点。近年来,开发者们也在源源不断地提出了不同的优化方案,我们在日常关注 Vue、React、NodeJS、性能优化等热门前端话题的时候,也不要忘了好好写 CSS 代码呀~

一部分:HTML简介

什么是HTML?

HTML代表超文本标记语言(Hypertext Markup Language)。它是一种用于构建网页的标记语言。HTML文件包含一组标签,这些标签用于定义网页的结构和内容。浏览器读取HTML文件,并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式,并提供交互元素,例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构:

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构:

  • <!DOCTYPE html>:这是文档类型声明,它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
  • <html>:HTML文档的根元素。所有其他元素都包含在<html>标签内。
  • <head>:包含与文档相关的元信息,如页面标题、字符集声明和外部样式表链接。
  • <title>:定义网页的标题,显示在浏览器标签页上。
  • <body>:包含网页的主要内容,如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称,例如<p>表示段落,<img>表示图像。标签通常成对出现,有一个开始标签和一个结束标签。例如:

<p>这是一个段落。</p>

<p>是开始标签,</p>是结束标签,文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的,不需要结束标签,例如<img>用于插入图像。

HTML注释

在HTML中,你可以使用注释来添加说明性文字,注释不会在浏览器中显示。HTML注释使用<!--开头和-->结尾,如下所示:

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分:HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素:

  • <p>:定义一个段落。
  • <h1><h6>:定义标题,<h1>是最高级别的标题,<h6>是最低级别的标题。
  • <strong>:定义强调文本,通常以粗体显示。
  • <em>:定义强调文本,通常以斜体显示。
  • <a>:定义超链接,允许用户点击跳转到其他页面。

示例:

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像,可以使用<img>标签。它是一个自封闭标签,需要指定图像的src属性来指定图像文件的路径。

示例:

htmlCopy code
<img src="image.jpg" alt="图像描述">
  • src:指定图像文件的路径。
  • alt:提供图像的替代文本,用于无法加载图像时的文字描述。

链接

通过使用<a>标签,可以在网页中创建链接。链接通常包含在文本或图像中,并使用href属性指定目标URL。

示例:

<a href="https://www.example.com">访问示例网站</a>
  • href:指定链接的目标URL。

列表

HTML支持有序列表(<ol>)、无序列表(<ul>)和定义列表(<dl>)。

无序列表

无序列表使用<ul>标签定义,每个列表项使用<li>标签。

示例:

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义,每个列表项使用<li>标签。

示例:

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义,每个定义项目使用<dt>标签定义术语,使用<dd>标签定义描述。

示例:

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分:HTML表单

HTML表单允许用户与网页进行交互,提交数据。以下是HTML表单的基本元素:

<form>元素

<form>元素用于创建表单,可以包含文本字段、复选框、单选按钮、下拉列表等。

示例:

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>
  • action:指定表单数据提交的目标URL。
  • method:指定提交方法,通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据,常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签,type属性设置为"text"。

示例:

<input type="text" name="username" placeholder="用户名">
  • type:指定字段类型。
  • name:指定字段的名称。
  • placeholder:设置文本框的占位符文本。

密码框

密码框使用<input>标签,type属性设置为"password"。

示例:

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签,type属性设置为"radio"。

示例:

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
  • name:指定单选按钮组的名称。
  • value:指定每个选项的值。

复选框

复选框使用<input>标签,type属性设置为"checkbox"。

示例:

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select><option>标签创建。<select>定义下拉列表,而<option>定义选项。

示例:

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>
  • name:指定下拉列表的名称。
  • 每个<option>标签表示一个选项,使用value属性定义选项的值。

第四部分:HTML样式和CSS

HTML用于定义网页的结构和内容,但要使网页看起来更吸引人,需要使用CSS(层叠样式表)。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例:

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中,并通过<link>标签将其链接到HTML文档。

示例(style.css):

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表:

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素,你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单,HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识,但HTML是一个广泛的主题,还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助,让你能够开始创建自己的网页。继续学习和实践,你将成为一个熟练的网页开发者。

一篇文章说了HTML,现在再来说一说CSS,所谓CSS是指层叠样式表 (Cascading Style Sheets),通过引入样式表,从而极大的提高了工作效率。

搭配视频观看效果更佳~~

Web前端开发零基础入门HTML/CSS/JavaScript

https://www.ixigua.com/6907467670300393988


什么是CSS?

Cascading Style Sheet

层叠样式表语言(不是编程语言,属于样式表语言,没有变量、数据类型、控制语句...)

CSS其实是专门用来修饰HTML的,让HTML更好看。

CSS是HTML的化妆品。

CSS是为HTML服务的,所以HTML还是主体,CSS是依附在HTML上的,

所以进行CSS的开发,我们还是需要新建html/htm文件。

在HTML中怎么嵌入CSS样式呢?

第一种方式:内联定义

第二种方式:定义内部样式块对象

第三种方式:链入外部样式表文件(这种方式最常用!)

关于选择器的优先级:

  • 标签选择器优先级最低。
  • 其次是类选择器。
  • 最高优先级是id选择器。

CSS设置背景(background)

  • 背景颜色 background-color
  • 背景图片 background-image
  • 背景重复 background-repeat:repeat-x/repeat-y
  • 背景位置 background-position:bottom/left/top/right/center
  • 背景关联 background-attachment:fixed/scroll

综合写法:

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS设置文本格式

通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

文本缩进 :Text-indent:2em

文本对齐方式:Text-align:left/right/center/ justify

文本修饰:Text-decoration:underline/line-through/overline/none

字符间距:Word-spacing:px/em 英文单词之间的间隔;

Letter-spacing:px/em汉字和英文字母之间的间隔;

文本转换:Text-transform:uppercase/lowercase/ capitalize

行与行间距:Line-height:px/%

垂直对齐图像: vertical-align:text-top/text-bottom

文本阴影:text-shadow:水平偏移,垂直偏移 颜色

字体

字体类型:font-family:”sans-serif”;

字体样式:font-style:normal ;

字体大小:font-size:20px/3.75em/100%;默认大小为16px,字体为宋体

字体加粗:font-weight:normal;

字体的转变:font-variant:normal/smallcaps;

CSS链接

链接的四种状态

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

【注意】当为链接的不同状态设置样式时,请按照以下次序规则:

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

去掉a链接默认的下划线

text-decoration:{none/underline}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

创建链接块

display:block;

列表样式

在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型,可以使用属性 list-style-type:

ul {list-style-type : square;}

上面的声明把无序列表中的列表项标志设置为方块。

列表项图像

你可能想对各标志使用一个图像,这可以利用 list-style-image 属性做到:

ul li {list-style-image : url(xxx.gif);}

列表标志位置

ul{
  list-style-position:inside;
  }

CSS表格

表格边框

table,th,td{border:1px solid red;}

折叠边框

border-collapse:collapse;

  • 表格的宽度和高度

width,height

  • 表格的文字水平对齐

text-align:center/right/left;

  • 表格的文字垂直对齐

vertical-align:bottom;

  • 表格的内边距

padding

  • 表格的背景颜色

background

盒子模型

margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的。

根据上, 右, 下, 左的顺时针规则, 简写为

margin: 40px 40px 40px 40px;

为便于记忆, 请参考下图:

当上下, 左右margin值分别一致, 可简写为:

margin: 40px 40px;

前一个40px代表上下margin值, 后一个40px代表左右margin值.

当上下左右margin值均一致, 可简写为:

margin: 40px;

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离

【注意】当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 在此建议你尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象.

边框

  • 边框样式:border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
  • 边框宽度:border-width
  • 边框颜色:border-color

综合写法:

border:1px solid red;

轮廓(outline)

可以按顺序设置如下属性:

  • outline-color
  • outline-style
  • outline-width

CSS所有尺寸

  • 宽度

width/min-width/max-width

  • 高度

height/min-height/max-height

  • 行高

line-height

display显示类型

隐藏元素—–display:none或者visibility:hiddden

display通常可以设置为none、inline、block

visibility通常可以设置为hidden、visible

二者的区别在于display会将元素隐藏掉,并且位置不再被占据,而visibility则是占据原来的位置。

CSS块级元素和内联元素—-display:block/inline/inline-block;

CSS定位(position)

position 属性值的含义:

static

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

CSS浮动

设置浮动:float:left/right;

清除浮动:clear:both/left/right/null;

浮动的两个影响因素:1、文档流 2、显示类型

元素内容溢出

  • 溢出滚动条

overflow:scroll(不管是否溢出都会有滚动条)、auto(自动添加)

  • 溢出隐藏

overflow:hidden;

CSS的相关特性

1、继承性

它不仅允许样式应用于某个特定的html标签元素,而且还可引用于其后代;

2、CSS层叠

当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用,后面的CSS样式会覆盖前面的样式。

总而言之:内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部引入文件)