一.说明
如果你要了解web前端领域，那么三种语言是你必须要了解的，即html5、CSS、Javascript是你必须要了解的，通过前面的专栏内容你一定对html标记语言非常熟悉，那么其他两种语言是什么，他们怎么和html联系在一起，之前学习的时候就一直有这个疑惑，这一节通过一个例子来了解他们，即使以后你不了解深层次的东西，但是别人的.`html文件中哪些是CSS，哪些是Javascript，怎么修改得知道。
说实话，博主的前端领域也很差，单纯只是毕业找工作编写个人简历以及平时配合markdown记录学习笔记使用，个人并不在这个领域范围内，所以这个专栏的内容也比较基础。
下面这是网上找的一张非常好的形容这三者之间的关系图：
二.CSS
1.什么是CSS
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！
一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言, 解决了网页界面排版和美化的难题。
2.CSS在HTML5中体现
我们知道如果我们把一个网页源代码导出，它就是一个.html的文件，但是如果你学习过html的话，又会发现里面的很多内容单纯只是html的话就显得有些陌生。
下面是我们html语言常用的格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
添加CSS后其基本结构为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
对比你会发现其实就是相较于html基础结构多了一对<style type="text/css"></style>标签，其实多的这对标签中间即是你CSS代码存放的位置。
3.CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
● CSS的思想就是首先指定对什么“对象”进行设置,然后指定对该对象的哪个方面的“属性”进行设置,最后给出该设置的“值”。
● 因此,概括来说, CSS就是由3个基本部分一- “对象”、 "属性”和“值”组成的。
比如：p {color:red;text-align:center;}
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来.
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。SS注释以 /* 开始, 以 */ 结束.
三.Javascript
1.什么是Javascript
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都可以使用 JavaScript。
2.Javascript在HTML5中体现
我们知道如果我们把一个网页源代码导出，它就是一个.html的文件，但是如果你学习过html的话，又会发现里面的很多内容单纯只是html的话就显得有些陌生。
下面是我们html语言常用的格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
添加Javascrip后的基础结构为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
<script>
</script>
</head>
<body>
</body>
</html>
对比你会发现其实就是相较于html基础结构多了一对<script></script>标签，其实多的这对标签中间即是你Javascrip代码存放的位置。
3.Javascrip用法
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
相较于CSS，Javascrip更多的是设置动态特效，里面丰富的函数供我们使用，来实现动态效果。
四.CSS基础
1.id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>CSDN@终究还是散了</p>
</body>
</html>
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
2.class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">CSDN</h1>
<p class="center">@终究还是散了</p>
</body>
</html>
类选择器的优先级高于id选择器
3.交际选择器
没有特殊符号，多个选择器写在一起，可以找到同时满足所有条件的标签。
4.选择器分组
可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的, p段落div分区、span都是20像素字体。
h1,h2,h3,h4,h5,h6{
color:green;
}
p,div,span{
front-size:20px;
}
五.CSS方法
1.CSS继承
所谓继承,就是父元素的规则也会适用于子元素。比如给
设置为color:Red;那么他内部的元素如果没有其他的规则设置,也都会变成红色。
<style>
p{color:red}
</style>
<p>this is a test to show <em> css Inheritance </em>.</p>
2.CSS伪类
CSS伪类它不是一个真实的类,正常的类是以点开始,后边跟一个名称，而它是以标签开始后边跟个冒号, 再跟个状态限定字符。伪类使得用户体验大大提高。
CSS主要伪类：
常用样式及属性：
字体和文本属性：
3.加载CSS样式
内部样式及之前方法，这里是外部样式
<head>
<link href="layout.css" rel="stylesheet"
type="text/css"/>
</head>
这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接。它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式。文章来源：https://www.toymoban.com/news/detail-430084.html
六.总结
今天内容有点难以理解，可以自己结合代码理解！文章来源地址https://www.toymoban.com/news/detail-430084.html
到了这里，关于Web前端基础的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
