农业网站平台建设方案,公众号怎么制作链接,wordpress工程师,免费ppt模板下载 素材一.说明
如果你要了解web前端领域#xff0c;那么三种语言是你必须要了解的#xff0c;即html5、CSS、Javascript是你必须要了解的#xff0c;通过前面的专栏内容你一定对html标记语言非常熟悉#xff0c;那么其他两种语言是什么#xff0c;他们怎么和html联系在一起那么三种语言是你必须要了解的即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 langen
headmeta charsetUTF-8titleDocument/title
/head
body/body
/html添加CSS后其基本结构为
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle typetext/css/style
/head
body/body
/html对比你会发现其实就是相较于html基础结构多了一对style typetext/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 langen
headmeta charsetUTF-8titleDocument/title
/head
body/body
/html添加Javascrip后的基础结构为
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle typetext/css/stylescript/script
/head
body/body
/html对比你会发现其实就是相较于html基础结构多了一对script/script标签其实多的这对标签中间即是你Javascrip代码存放的位置。
3.Javascrip用法
通常我们需要在某个事件发生时执行代码比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中就可以在事件发生时调用该函数。
相较于CSSJavascrip更多的是设置动态特效里面丰富的函数供我们使用来实现动态效果。
四.CSS基础
1.id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id“para1”:
!DOCTYPE html
html
head
meta charsetutf-8
titleCSDN/title
style
#para1
{text-align:center;color:red;
}
/style
/headbody
p idpara1Hello World!/p
pCSDN终究还是散了/p
/body
/htmlID属性不要以数字开头数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
2.class选择器
class 选择器用于描述一组元素的样式class 选择器有别于id选择器class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中类选择器以一个点 . 号显示
在以下的例子中所有拥有 center 类的 HTML 元素均为居中。
!DOCTYPE html
html
head
meta charsetutf-8
titleCSDN/title
style
.center
{text-align:center;
}
/style
/headbody
h1 classcenterCSDN/h1
p classcenter终究还是散了/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
pthis is a test to show em css Inheritance /em./p2.CSS伪类
CSS伪类它不是一个真实的类,正常的类是以点开始,后边跟一个名称而它是以标签开始后边跟个冒号, 再跟个状态限定字符。伪类使得用户体验大大提高。
CSS主要伪类 常用样式及属性 字体和文本属性 3.加载CSS样式
内部样式及之前方法这里是外部样式
head
link hreflayout.css relstylesheet
typetext/css/
/head这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接。它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式。
六.总结
今天内容有点难以理解可以自己结合代码理解
