0基础学CSS

本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

0基础学CSS

CSS快速入门-新手教程

CSS:层叠样式表,用于定义HTML元素的显示形式,为网站添加布局效果,是W3C推出的格式化网页内容的标准技术,网页设计者必须掌握的技术之一。

本CSS教程能够让你在数小时内入门CSS,学习CSS是很有趣的。你在学习本教程的过程中,记得留有充分的时间来实践你在每一课中学到的知识。

使用CSS要求你有基本的HTML经验。如果你不熟悉HTML,那么请在开始学习CSS之前先学习0基础学HTML

我需要什么软件?

在学习本教程时,请不要使用类似FrontPage、DreamWeaver或Word这样的软件。这些高级软件对你学习CSS没有帮助。相反,它们会限制你,并显著减慢你的学习进度。

采用简易文本编辑器来学习编写HTML和CSS是非常好的,因为它不会影响或修改你所输入的代码。这样,代码的对错完全取决于你自己,而不是软件。

你可以使用任何浏览器。但我们建议你把浏览器升级至最新版本。

你所需要的全部软件就是一个浏览器和一个简易文本编辑器。

我们现在开始学习CSS吧!

第1课:CSS是什么?

第2课:CSS的工作原理

第3课:颜色与背景

第4课:字体

第5课:文本

第6课:超链接

第7课:元素的分类与标识(class和id)

第8课:组织元素(span和div)

第9课:盒状模型

第10课:外边距和内边距

第11课:边框(border)

第12课:高度和宽度

第13课:浮动元素(float)

第14课:元素的定位

第15课:用z-index进行层次堆叠

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4948.html

(2)
江山如画的头像江山如画管理团队
上一篇 2020年2月22日 下午3:02
下一篇 2020年2月22日 下午3:57

99%的人还看了以下文章

  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    10.0K0
  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    7.2K0
  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    6.1K0
  • vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    2020年6月14日
    6.7K0
  • Marquee标签制作滚动公告、新闻列表

    效果演示 《Marquee标签实现跑马灯、滚动公告、通知效果》 Marquee标签制作滚动公告、新闻列表 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>marquee实现的滚动公告|www.125jz.com</titl…

    2019年2月28日
    10.5K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    4.7K0

发表回复

登录后才能评论