网站首页 > 知识剖析 正文
本教程我们来学习基本的 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 就是为骨架赋予血肉和皮肤外观,二者互相配合使用。
- 上一篇: CSS网页布局基础教程 css网页布局在线生成
- 下一篇: 十一款游戏教你学会 CSS css什么游戏
猜你喜欢
- 2024-11-09 软件测试学习笔记丨Web端测试—CSS讲解
- 2024-11-09 大型项目的CSS 大型项目的管理人员必须具有什么资质
- 2024-11-09 想做网页吗?HTML入门,一文解决 制作网页html
- 2024-11-09 HTML基础教程:脚本 html引用脚本文件
- 2024-11-09 程序员都必掌握的前端教程之HTML基础教程(上)
- 2024-11-09 高级版HTML视频教程(全网原创首发!)
- 2024-11-09 web前端基础之css入门 前端小白零基础入门html5+css3
- 2024-11-09 《CSS》实战指南2024 css实战案例
- 2024-11-09 【从零入门 Web 前端】HTML5 + CSS 简明教程
- 2024-11-09 HTML初学者入门视频教程,简单明了,学html看这一篇就够了
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)