整合营销服务商

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

免费咨询热线:

「笔记」零基础学前端笔记,什么是CSS们到底发挥怎样

「笔记」零基础学前端笔记,什么是CSS们到底发挥怎样的价值

SS(层叠样式表)。您将使用让您的网站栩栩如生地展现在用户眼前(而不仅仅是屏幕上的标准黑白文本)。但是 CSS 究竟是如何工作的呢?我们该如何使用它呢?我们将会在本次笔记里分享。那么CSS和html有怎样的区别,在整个网页是怎么分工的,我来给大家分享一张图来看看!

这也就意味着,html是骨架,而CSS就是让网页有肉感,有漂亮的衣服!这就是CSS的价值!让在我们继续学习!

CSS 让你的页面增添趣味

CSS 是一种语言,可用于更改页面呈现给受众的方式。例如,您可以使用 CSS 将您的客户品牌应用到他们的网站上。你几乎可以设计任何东西,包括:

  • 标题和标题
  • 段落和正文
  • 颜色和字体
  • 链接
  • 背景和不透明度
  • 动画和效果(虽然没什么技术含量)
  • 以及更多

您可以通过三种方式使用 CSS

您可以通过三种不同的方式在文档(即网页)中包含 CSS:

  • Inline :您将在 HTML 元素中使用 style 属性
  • 内部:您将在文档的 head 部分中使用样式元素
  • 外部:您将在其中使用链接元素链接到外部CSS 文件

为什么要使用内联样式?

当您需要更新页面上的特定部分时,您就会使用它。违反你通常规则的事情,你只会做一次。它非常适合快速改变事物的外观。但是,如果您希望很多零件都遵循此规则,则永远不要使用它。(这只是对代码的浪费。)否则,当您想要进行大规模更新时,您会费尽心思。 请记住,任何编码的一个主要原则是压缩您的代码并避免重复自己。这里也一样。

为什么要使用内部样式?

这是针对特定页面的。一个不遵循网站其余部分规则的页面,但页面本身需要保持一致。也许你正在制作一个登陆页面,而这些段落想要分开一点点。也许您想使用不同的颜色来强调,而不是通常的颜色。因此,如果您需要对页面进行大规模更改,您可以从代码顶部完成所有操作。

为什么要使用外部样式?

这是一个专用于您的样式代码的完整文件,并保持每个页面的一致性。当您设计整个网站的样式时,您通常会使用它。这意味着如果您需要更新,例如,标题 1 样式,您只需要在 CSS 文档中更改它。然后每个页面都会自动更新。因此,您的外部样式就是您的主文档。

CSS 遵循规则

您需要创建一组规则来定义您希望页面的外观。因此,如果您希望标题 1 为蓝色、粗体且大小为 30pts,那么您可以这样写:

h1 {
    color: blue;
    font-size: 30;
    font-weight: bold;
}

这是一个简单的样式,你只能在你的外部样式表上找到它(内联和内部看起来不同)。但让我们进一步分解。

该代码如何工作

您会注意到代码与 h1 开头。这是我们要设置的样式的 HTML 元素。因此,我们正在设计标题 1(在您的 html 中间看起来像<h1>)。

然后我们有花括号。在里面,你会发现不同的属性集,然后是它们的属性。(它们实际上不需要在单独的行动上,但它更易于阅读。重要的是分号。这就是告诉浏览器您已移动到不同属性的原因。)您可以添加尽可能多的属性随你便。我们在冒号之前有属性(所以颜色或字体大小)。然后我们有值(蓝色或30)。浏览器然后通过按顺序应用它们。

你的外部样式表会有很多规则

您希望如何对样式表进行排序取决于您,但您通常会在一个样式表中包含多个规则。所以它可能看起来像这样:

h1 {
    color: blue;
    font-size: 30;
    font-weight: bold;
}
h2 {
    color: red;
    font-size: 20;
}

但显然要长得多。您的页面上可以有数百条规则,所有规则都一个接一个地编写。因此,请确保将相似的元素聚集在一起,以帮助您更轻松地进行分类。

如何编写内部 CSS

您将创建和添加内部 CSS,并在 HTML 页面或文档的 <head> 部分中定义它。它将在 <style> 元素中。所以,给你举个例子:

<!DOCTYPE html>
<html>
<head>
<style>
h1   {color: blue;}
h2    {color: red;}
</style>
</head>
<body>
<h1>这是你的标题 1</h1>
<h2>这是你的标题 2</h2>
</body>
</html>

所以在这里,我们将标题 1 的样式设置为蓝色,将标题 2 设置为红色。这只会影响此单个文档或页面,并且不会更新您网站上的其他任何地方(除非您将其复制过来)。

如何编写内联 CSS

内联 CSS 是您为特定元素赋予独特样式的地方。它将使用 HTML 元素的样式属性。 因此,向您展示它的外观:

<h1 style=”color:blue;”>I’m a blue h1 heading</h1>
<h2 style=”color:red;”>I’m a red h2 heading</h2>

与我们之前使用的示例类似,我们现在用新颜色更新了每个特定标题。但除非我们在文档的其他地方使用了这种内联样式,否则您不会更新任何其他标题。

对此大家是有怎样的学习心得也可以交流交流 #艾编程学习笔记

件行业在不断发展。几年前处于领先地位的许多语言要么看起来过时,要么已经变得多余。

新语言惊人的频率出现,以满足用户不断变化的需求。这些语言被用于构建具有高级功能并满足企业苛刻需求的新应用程序。

为了在编程领域保持稳定的地位,开发人员需要跟踪所有 的编程语言,但没有那一位开发人员是掌握所有语言的。

新语言的出现并不意味着编程领域一直在进行大规模的改革。有一种语言,它一直流行在编程语言当中,并且深受开发人员的喜欢。它就是JavaScript。虽然也有很多人反对它,质疑它是否是一种真正的编程语言,但这并没有影响到它的发展,从前端网页到移动端网页都可以看见它的身影。

那什么是JavaScript呢?

JavaScript是一种用于在Web浏览器中编写交互式效果脚本的计算机编程语言。

能被所有流行浏览器支持,如Microsoft Internet Explorer(从3.0版开始),Firefox,Safari,Opera,Google Chrome等。

JavaScriptD的诞生

为了实现类似于Apple的HyperCard的东西- 主要是为了帮助轻松构建应用程序而开发的,Netscape开发了LiveScript。

后来,LiveScript被重新命名为JavaScript。

JavaScript最初是一种客户端语言,后来迁移到服务器端,从而成为一种无处不在的语言。

为什么JavaScript是开发人员的首选?

早些时候,行业分析公司RedMonk发布了一则编程语言人气排名 ; 根据这个排名,JavaScript领先于首位,紧随其后的是Java,PHP,C#和Python。

在这之后的许多年里,JavaScript任然还是很受欢迎的语言。根据调查,88%的网站使用JavaScript 。比如移动网站,游戏和web应用程序等等里面都可以找到JavaScript的影子。

首先,JavaScript之所以受欢迎的原因主要是因为它本身的优点:

1. 简单易学:可以让开发人员容易学习

2. 扩展的网页功能:第三方附加组件可帮助JavaScript开发人员编写可在必要网页上使用的代码段。

3. 客户端处理:代码在客户的处理器中执行,从而节省带宽并减少服务器的额外负载。

4. 易于实现:能够在前端和后端使用相同的语言使开发团队的工作更轻松。

5. 内置JavaScript的浏览器:网站用户不需要特殊的软件和下载来查看JavaScript; 每个用户都获得相同的体验。

6. . 对于最终用户来说相对较快:访问者不再需要填写整个表单并提交它以便被告知他们在第一个字段中输入错误并且他们需要再次填写整个表单。使用JavaScript,每个字段都可以在用户输入时进行验证; 这可以在他们犯错时提供即时反馈。

为什么JavaScript有价值?

JavaScript成为主流编程语言的原因有很多。我这里简单说几个:

1. 谷歌推出了使用V8 JavaScript引擎的JavaScript。

2. 您甚至可以用JavaScript编写硬件,包括播放DVD。

3. GitHub上的Atom编辑器是一个几乎完全围绕的CoffeeScript,它编译成JS。

4. 亚马逊在浏览器中推出了AWS SDK for JavaScript。这使开发人员可以编写动态JavaScript应用程序,这些应用程序可以从浏览器访问AWS服务,而无需编写任何服务器端代码并配置应用程序服务器进行托管。

TML作为一门标记语言,在各大领域的运用是非常广泛的,很多的公司对于HTML5的需求是非常的旺盛的,很多的公司对于HTML工程师的人才一直是处于供不应求的状态,这个也就是为什么HTML5开发仍然如此受欢迎的的原因了。

1、语义特性

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

2、HTML语法较弱。

在w3c制定的HTML5规范中,对于HTML5在语法结构上的规格限制是较松散的,如、或在浏览器中具有同样的功能,是不区分大小写的。另外,也没有严格要求每个控制标记都要有相对应的结束控制标记。

3、设备兼容特性

从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。

4、HTML标记数目有限

在w3C所建议使用的HTML5规范中,所有控制标记都是固定的且数目是有限的。固定是指控制标记的名称固定不变,且每个控制标记都已被定义过,其所提供的功能与相关属性的设置都是固定的。

5、本地存储特性

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储重要的技术之一)和API说明文档。

6、HTML5编写简单

即使用户没有任何编程经验,也可以轻易使用HTML来设计网页,HTML5的使用只需将文本加上一些标记(Tags)即可。

HTML5语言之所以会受到企业的重视除了自身的发展前景之外肯定也是离不开HTML5自身的特征的,这些特征才是其发展好的原因。