当前位置:首页 > 经验 >

css教程从零开始学(css基本知识掌握)

来源:原点资讯(www.yd166.com)时间:2022-10-31 22:40:11作者:YD166手机阅读>>

今天要学习的是CSS,CSS是什么?

CSS指的是层叠样式表,它和HTML是一对好朋友,可以对HTML网页进行修饰。

为什么要学CSS?

要想让浏览器显示以下内容:

css教程从零开始学,css基本知识掌握(1)

以我们所学的知识,就需要一个一个的去添加 font 样式:

css教程从零开始学,css基本知识掌握(2)

键盘的TAB可以缩进,代码看起来更美观

非常麻烦,一个网页可能有几百个样式要设置,难道一个一个的去添加吗?即使你很有耐心,这么多的样式全写在一个页面(CSS会新建一个专门存放样式的页面),别说别人了,自己看了都觉得乱。

为了省时省力、简洁易改、维护方便、增强网页……

所以,引入CSS样式表,就是为了解决这些问题。

第一步

在盘符下面建立一个文件夹,在文件夹里面建立两个文档:

例如,我在C盘下面建立了文件夹 new_20200831,在这个文件夹里面在建立两个文本文档,并修改扩展名:new.html 和 newcss.css

之所以放在同一个文件夹里面,是为了更好管理和方便链接,下面的 [1] 会解释为什么方便链接。

css教程从零开始学,css基本知识掌握(3)

打开new.html ,输入基础html代码:

css教程从零开始学,css基本知识掌握(4)

在<head></head>中写入下方代码:

<link href="css 文件的路径" type="text/css" rel="stylesheet" />

css教程从零开始学,css基本知识掌握(5)

<link/> 标签定义文档与外部资源的关系,也就是你想链接CSS样式表,就要用到<link/>标签。

<link/>标签需要放在<head>头部标记中,并且指定3个必需属性:

href:规定被链接文档的位置。 [1]

type:规定被链接文档的类型。这里指定为 “text/css” 表示链接的外部文件为CSS样式表。

rel:规定当前文档与被链接文档之间的关系。这里指定为 “stylesheet” 表示链接的文档是一个样式表文件

——————————————————————————————

[1] 我来解释一下为什么放在同一个文件夹会方便链接:

引用的路径分为两种:

绝对路径:完整描述文件路径

相对路径:相对于当前文件的路径,不带有盘符。(推荐)

相对路径分为以下3种:

· 文件和html文件位于同一文件夹;只需输入文件名即可,如<link href="new.css" />

· 文件位于html文件的下一级文件夹;输入文件夹和文件名,之间用 / 隔开,如 <link href="new_20200831/new.css" />

· 文件位于html文件的上一级文件夹;在文件名之前输入 ../ ,如果是上两级,则需要用 ../../ 以此类推,如 <link href="../new.css" />

例如,上面我输入href="new.css" 就是相对路径的第1种情况,我放在同一个文件夹,所以只要输入文件名 new.css 即可,而不是输入绝对路径 C/new_20200831/new.css ,明显后者麻烦多了。

未完待续~

栏目热文

女人每天吃蚕豆好不好(癌症最怕的三种豆)

女人每天吃蚕豆好不好(癌症最怕的三种豆)

蚕豆是有些人非常偏爱的一道美食,这不新鲜蚕豆上市了,很多人开始蜂拥而至,尤其是对于主食习惯吃米饭的人群,蚕豆用来焖饭就是...

2022-10-31 22:40:06查看全文 >>

干蚕豆的家常做法大全(干蚕豆怎样做好吃法大全)

干蚕豆的家常做法大全(干蚕豆怎样做好吃法大全)

春至浓时,蚕豆飘香。三月末,四月初,是蚕豆上市的日子。春日的鲜蚕豆青绿鲜嫩,粒大饱满。口感也与平日下酒吃的香酥蚕豆大不相...

2022-10-31 22:28:38查看全文 >>

干蚕豆怎么做好吃法大全(干蚕豆的二十种做法)

干蚕豆怎么做好吃法大全(干蚕豆的二十种做法)

做法步骤1、将干胡豆(蚕豆)洗净后下入锅内小火慢炒,不用放油,不停翻炒会出现“啪啪”响声;2、等炒至响声停止并两面略有微...

2022-10-31 22:28:07查看全文 >>

干蚕豆的功效与作用(干蚕豆泡发后怎么吃法)

干蚕豆的功效与作用(干蚕豆泡发后怎么吃法)

蚕豆是豆科植物,花期通常在四到五月,果期则在五到六月,我国很多地区均有栽培,长江以南地区较多。那么现在的蚕豆是多少钱一...

2022-10-31 22:44:00查看全文 >>

干锅蚕豆的正宗做法(怎样炒干蚕豆才好吃)

干锅蚕豆的正宗做法(怎样炒干蚕豆才好吃)

藿香胡豆 特点:藿香味浓,回味带酸甜。菜品提供:罗德军,拉萨喜玛拉雅饭店中厨凉菜及食雕主管.  原料:干胡豆(即蚕豆)2...

2022-10-31 23:02:20查看全文 >>

css菜鸟入门基础知识(css菜鸟教程)

css菜鸟入门基础知识(css菜鸟教程)

很多朋友想学一下网页制作,上网一看,只要涉及到网页制作,都离不开HTML这个词语,HTML是HyperText Mark...

2022-10-31 22:43:37查看全文 >>

css学习方法和技巧(css学习基础知识)

css学习方法和技巧(css学习基础知识)

CSS 是自定义网页呈现的语言。它用于添加颜色、背景图像和纹理,以及在页面上排列元素。然而,CSS 不仅仅是绘制漂亮的图...

2022-10-31 23:06:01查看全文 >>

初学css基础知识(css基本知识大全)

初学css基础知识(css基本知识大全)

哈喽,大家好前面一篇给大家分享了网页设计中, HTML标签语言的内容分享,今天接着分享css,层叠样式表的知识内容。...

2022-10-31 22:51:08查看全文 >>

css初学者快速入门(css100个基础入门教程)

css初学者快速入门(css100个基础入门教程)

css入门:css定义:cascading style sheetscss作用:修饰美化页面css引入方式分为3种:内部...

2022-10-31 22:19:38查看全文 >>

css学习笔记入门(css入门学习笔记案例详解)

css学习笔记入门(css入门学习笔记案例详解)

CSS简介由于HTML单纯关注定义内容,CSS用于美化HTML页面CSS是层叠样式表(英文全称:CascadingSty...

2022-10-31 22:55:21查看全文 >>

文档排行