者:京东科技 杨健
CSS(全称 Cascading Style Sheets,层叠样式表)为开发人员提供声明式的样式语言,是前端必备的技能之一,基于互联网上全面的资料和简单易懂的语法,CSS 非常易于学习,但其知识点广泛且分散,很难做到精通,在我们日常开发中,常常忽视了 CSS 代码的质量,很容易写出杂乱无章的 CSS 文件。
代码优化建议
适用于: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
}
使用 "," 连接多个选择器定义公用属性,不仅能增加可读性,还能减小 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;
}
}
命名的时候以 “在你之后开发的人不会产生疑惑” 为目标 如下
.curr{
color:#FFFFFF;
background:red;
}
.future{
background:#9f6262;
}
// curr 是啥? future又是啥? ??
.current-count{
color:#FFFFFF;
background:red;
}
.future-count{
background:#9f6262;
}
选择器中属性数量较多时,将相关的属性声明放在一起,并按以下顺序排列:
建议:在属性数量较多时可以参考这 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;
& 是 Sass 和 Less 中提供的语法糖,用于表示对父选择器的引用
优点:非常适合用于编写组件的样式,减少了很多重复单词
缺点:从 HTML 的 class name 中寻找对应样式的成本增加
.first {
.first-title {/* styles */}
.first-title:after {/* styles */}
.first-content {/* styles */}
}
/* 用&引用来优化代码 */
.first {
&-title {
/* styles */
&:after {/* styles */}
}
&-content {/* styles */}
}
可嵌套的语法增加了样式文件的可读性和可维护性
变量与混合特性能够减少很多重复的样式声明
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代表超文本标记语言(Hypertext Markup Language)。它是一种用于构建网页的标记语言。HTML文件包含一组标签,这些标签用于定义网页的结构和内容。浏览器读取HTML文件,并根据标记中的指示呈现网页内容。
HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式,并提供交互元素,例如表单和按钮。
每个HTML文档都应该遵循以下基本结构:
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<!-- 内容在这里 -->
</body>
</html>
让我们逐步解释这个结构:
HTML标签是由尖括号括起来的名称,例如<p>表示段落,<img>表示图像。标签通常成对出现,有一个开始标签和一个结束标签。例如:
<p>这是一个段落。</p>
<p>是开始标签,</p>是结束标签,文本位于两个标签之间。标签定义了元素的类型和结构。
有些HTML标签是自封闭的,不需要结束标签,例如<img>用于插入图像。
在HTML中,你可以使用注释来添加说明性文字,注释不会在浏览器中显示。HTML注释使用<!--开头和-->结尾,如下所示:
<!-- 这是一个注释 -->
注释通常用于添加文档说明、调试代码或标记未来的修改。
HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素:
示例:
<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="图像描述">
通过使用<a>标签,可以在网页中创建链接。链接通常包含在文本或图像中,并使用href属性指定目标URL。
示例:
<a href="https://www.example.com">访问示例网站</a>
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表单的基本元素:
<form>元素用于创建表单,可以包含文本字段、复选框、单选按钮、下拉列表等。
示例:
<form action="submit.php" method="post">
<!-- 表单元素在这里 -->
</form>
输入字段用于接收用户输入的数据,常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。
文本框使用<input>标签,type属性设置为"text"。
示例:
<input type="text" name="username" 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">女
复选框使用<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>
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
Cascading Style Sheet
层叠样式表语言(不是编程语言,属于样式表语言,没有变量、数据类型、控制语句...)
CSS其实是专门用来修饰HTML的,让HTML更好看。
CSS是HTML的化妆品。
CSS是为HTML服务的,所以HTML还是主体,CSS是依附在HTML上的,
所以进行CSS的开发,我们还是需要新建html/htm文件。
第一种方式:内联定义
第二种方式:定义内部样式块对象
第三种方式:链入外部样式表文件(这种方式最常用!)
综合写法:
.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
文本缩进 :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;
链接的四种状态
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;
}
表格边框
table,th,td{border:1px solid red;}
折叠边框
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:1px solid red;
可以按顺序设置如下属性:
width/min-width/max-width
height/min-height/max-height
line-height
隐藏元素—–display:none或者visibility:hiddden
display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible
二者的区别在于display会将元素隐藏掉,并且位置不再被占据,而visibility则是占据原来的位置。
CSS块级元素和内联元素—-display:block/inline/inline-block;
position 属性值的含义:
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
设置浮动:float:left/right;
清除浮动:clear:both/left/right/null;
浮动的两个影响因素:1、文档流 2、显示类型
overflow:scroll(不管是否溢出都会有滚动条)、auto(自动添加)
overflow:hidden;
1、继承性
它不仅允许样式应用于某个特定的html标签元素,而且还可引用于其后代;
2、CSS层叠
当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用,后面的CSS样式会覆盖前面的样式。
总而言之:内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部引入文件)
*请认真填写需求信息,我们会在24小时内与您取得联系。