本教程咱们来学习根本的 CSS
常识,在学习 CSS
之前,大家必定曾经学习过了 HTML
,在学习 HTML
的时候咱们就曾经讲到过,有很多的标签和属性其实都能间接通过 CSS
款式来代替实现,并且通过 CSS
款式来实现会更加不便。
绝对于咱们平时看到的网页来说,如果仅仅通过 HTML
代码是无奈达到某些比较复杂视觉效果的,然而如果配合 CSS
就能很容易实现啦。
CSS 介绍
CSS
的英文全称为 Cascading Style Sheets
,翻译成中文叫做层叠样式表,是一种用来体现 HTML
或 XML
等文件款式的计算机语言。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 就是为骨架赋予血肉和皮肤外观,二者互相配合应用。