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
第1课:CSS是什么?
下一篇 2020年2月22日 下午3:57

99%的人还看了以下文章

  • 跟永哥学HTML5(5):正确使用HTML5的nav和figure

    这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素,我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说,我们不应该滥用超语义化的元素。不幸的是,nav就是这样一个被滥用的例子。 nav元素的规范描述如下: n…

    2018年2月3日
    7.9K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    4.4K0
  • div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

    一、两个div水平顶部对齐 两个div都设置display:inline-block;  并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

    2018年12月10日
    10.0K0
  • 第13课:HTML音频/视频

    HTML 音频 在 HTML 中播放音频并不容易!您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。 <embed> 元素 <embed> 标签,这是一个 HT…

    2018年1月18日
    10.0K0
  • 3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转

    本实例制作需要学习《CSS3 transition transform属性及实例详解》,学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.

    2020年1月1日
    11.5K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    13.0K0

发表回复

登录后才能评论