WEB前端

WEB前端新人第二篇

 5个月前 (04-16)     209  
文章目录

放下生活中的不如意,傲慢与偏见,静下来听一段rap舒缓歌曲进入学习状态吧!

大家好,我是王梓。今天我们来讲CSS正式的环节,我个人建议先学CSS基础然后再引入HTML的元素效率会更高一些,为什么呢?一个网页中为什么能够清晰的分辨哪个是导航区,哪个是内容区,哪个是搜索区?因为他们进行了区域分块处理,让每个模块去做单独的事,在html表和CSS样式表里进行单独的控制,从而达到页面的完美展示

WEB前端新人第二篇

也不乏有些网站制作的非常不符合逻辑,东一块,西一块,样式表里的属性写的非常乱。其实做出来是完全没有问题的,但是等后期进行修改,进行处理的时候就非常的麻烦了

所以我认为,先把整体的页面布局分区及技巧掌握了,是首要的

然后再把内容里的核心,就是文字,图片,链接等引入进去

但是前期给大家演示的时候是必须要有HTML的元素介入的,我们主要讲CSS,HTML顺带着讲一些。 :razz: :razz: 

不用特别着急的把所有的教学视频全看完,那样会适得其反,熟悉-训练-巩固-下一章节

首先我们以我的软件Sublime Text为例,下载好,有英文版和中文破解版,看同学们的需要选择。

打开文件是空的,因为我们还没有任何实际的操作

WEB前端新人第二篇

以中文版为例,首先,我们创建一个文件夹,里面包含HTML文件夹,CSS文件夹及IMG文件夹,前期我们用这3个就可以。然后回到软件界面,新建文档WEB前端新人第二篇

输入一个HTML或者CSS的名称,后缀一定要是.HTML或者.CSS进行结束,要不然自己操作再多也打不开网页

WEB前端新人第二篇 WEB前端新人第二篇

建立好后我们要进行实际操作的第一课了

我们的网页是要有一个框架才能让浏览器承载

所以我们写的内容也要有承载它的框架才行,这是格式:

<!DOCTYPE html>(声明,告诉浏览器,这是一个HTML的文件)

<html lang="en">(文件的语言)

<head>(顶部区域,在页面内看不见的操作)

<meta charset="UTF-8"> (字体设置为UTF-8样式)

<title>动画</title>(这个是页面的最上方的抬头)

<link rel="stylesheet" href="style/css/css动画-动画.css">(引入css的样式表)

</head>(头部结束)

<body>(正文,页面内可以看见的)

 

 

 

</body>(正文结束)

</html>

一个开头一个结尾,每一个元素都必须遵循这样的规则。

WEB前端新人第二篇

快捷键是Tab

例:输入body后立马按下 TAB键就会变成下面这个样子,是不是特别简单

我的HTML快捷键样式表是感叹号键,然后加上TAB键就会把整个HTML框架打出来,非常的便捷,不是的同学自行百度

然后大家自己练习一下,从创建,到打开样式表,再输入框架,多练习几遍

注意点:如果想要把自己设置的CSS文字效果进行页面展示要进行一个引入设置

WEB前端新人第二篇

link加快捷键TAB,在herf中添加文件的目录路径就可以了,这里需要手动输入

上一级用/加文件名表示

我的文件在style文件,CSS文件内

这一步一定要做对,要不然没有效果

接下来我们进行正题,CSS的样式和属性选择器的使用

CSS的基础语法

我们写一个元素,来对他在CSS样式表里进行控制

写一个h1吧,h1是一个元素,我们把它写在HTML表里,按上面的快捷键方法h1加上TAB键

随便写一些文字,我们要把字体的颜色和大小改变一下

WEB前端新人第二篇

然后我们进入CSS样式表界面操作一下

WEB前端新人第二篇

例h1{color:red;fontsize:14px;}

操作非常简单,但是要记住几个关键点

1.把元素h1写上(h1在HTML表里表示标题,字体默认变大)

2.要用大括号把要设置文字的属性包起来

3.属性和属性之间必须要用分号隔开

Color:red这是一个属性。表示的意思是把文字的颜色变成红色的

Fontsize:14px这还是一个属性。表示的是把文字的大小变为14PX(px是像素单位)

属性大于1个之后,中间必须要有分号;不然变化显示不出来

如果值大于一个单词,则需要加上双引号

例:p{font-family:”sans serif’’}(p元素代表一个段落)

san和serif中间用空格隔开

然后点击保存快捷键CTRL+S进行保存,把HTML文件拖拽到网页中看看变化吧

WEB前端新人第二篇

这样一个简单的字体颜色的变化及大小的变化就展示好了

今天我们就讲这些,大家消化一下

下一章节我们把CSS的属性选择器讲一下

谢谢大家,不懂得下方评论区提问。

 

广告也精彩
版权声明:王子殿下 发表于 5个月前 (04-16),共 1904 字。
转载请注明:WEB前端新人第二篇 | MGDSS

您可能感兴趣的

广告也精彩

暂无评论

暂无评论...
2020/4/2 14:00
透漏下!芒果大叔密谋中的计划 详情