CSS 入门

原创
09/09 09:38
阅读数 9

本教程我们来学习基本的 CSS 知识,在学习 CSS 之前,大家肯定已经学习过了 HTML,在学习 HTML 的时候我们就已经讲到过,有很多的标签和属性其实都能直接通过 CSS 样式来代替实现,并且通过 CSS 样式来实现会更加方便。

相对于我们平时看到的网页来说,如果仅仅通过 HTML 代码是无法达到某些比较复杂视觉效果的,但是如果配合 CSS 就能很容易实现啦。

CSS 介绍

CSS 的英文全称为 Cascading Style Sheets,翻译成中文叫做层叠样式表,是一种用来表现 HTMLXML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

也就是说我们可以通过 CSS 样式来定义如何显示 HTML 代码,CSS 中的样式多种多样,比如说字体的样式,有设置字体大小、颜色、加粗、倾斜,还有列表样式、背景样式等等,后面我们都会慢慢的学到。

示例:

我们来看一段 CSS 代码:

div{
	font-size: 16px;
	line-height: 20px;
	color: #ccc;
	margin: 0;
	padding: 0;
}

其实从这段 CSS 代码中,我们也不难看出 CSS 的语法格式。

CSS 语法格式

每个 CSS 样式都是由两个部分组成的,即选择器和声明,而声明又包括属性和属性值,每个声明后面都有一个分号。

语法:

选择器{
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

选择器的种类挺多的,像比如标签选择器、类选择器、ID选择器、后代选择器等,后面我们都会讲到。

要注意的是,每一句样式声明后面的分号 ; 千万别忘记,特别是有多个样式声明的时候。

CSS 注释

这里我们再来讲一下 CSS 中的注释,注释大家应该不陌生,就是对代码的解释和说明,不同编程语言的注释代码可能存在差别,CSS 中的注释如下所示:

/* 这是CSS中的注释 */

CSS 特点

CSS 语言的特点有下面几点:

  • 丰富的样式定义:CSS 提供了丰富的文档样式外观,以及设置文本和背景属性的能力。允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离。允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
  • 易于使用和修改:CSS 可以将样式定义在 HTML 元素的 style 属性中,也可以将其定义在 HTML 文档的 header 部分,也可以将样式声明在一个专门的 CSS 文件中,以供 HTML 页面引用。
  • 多页面应用:CSS 样式表可以单独存放在一个 CSS 文件中,这样我们就可以在多个页面中使用同一个 CSS 样式表。
  • 层叠:层叠就是对一个元素多次设置同一个样式,这种情况下将使用最后一次设置的属性值。
  • 页面压缩:样式声明在 CSS 样式表中,可以大大的减少 HTML 页面的内容,减少页面加载的时间。

总结

HTML 为页面定义结构,而 CSS 就是为 HTML 结构定义外观,简单理解就是:HTML 就是骨架,而 CSS 就是为骨架赋予血肉和皮肤外观,二者互相配合使用。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部