CSS基本介绍
一,我们为什么需要CSS?
使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力。是时候做出改变了,所以CSS就出现了。
CSS的出现解决了下面两个问题:
将HTML页面的内容与样式分离。 提高web开发的工作效率
二,什么是CSS?
CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
-
CSS 指层叠样式表 (Cascading Style Sheets)
-
样式定义如何显示 HTML 元素
-
样式通常存储在样式表中
-
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
-
外部样式表可以极大提高工作效率
-
外部样式表通常存储在 CSS 文件中
-
多个样式定义可层叠为一
-
样式对网页中元素位置的排版进行像素级精确控制
2.1 css的优势
样式表定义如何显示 HTML 元素
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
1.内容与表现分离 2.网页的表现统一,容易修改 3.丰富的样式,使页面布局更加灵活 4.减少网页的代码量,增加网页浏览器速度,节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录
2.2 如何使用CSS?
我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过link
标签引用该CSS文件即可。这样浏览器在解析到该link
标签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。
2.3样式解决了一个很大的问题
HTML 标签原本被设计为用于定义文档内容,如下实例:
<h1>这是一个标题</h1> <p>这是一个段落.</p>
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。
当代浏览器都支持 CSS .
2.4 样式层叠次序
当同一个 HTML 元素定义了多个样式时,应该使用哪个样式?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
三,CSS概念
CSS是Cascading Style Sheets的简称,中文称为层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或者XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化,用来控制网页数据的表现,可以使网页的表现与数据内容分离。
CSS指层叠样式表 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式表添加到HTML4.0中,是为了解决内容与表现分离的问题 外部样式表可以极大的提高工作效率 外部样式表通常存储在CSS文件中 多个样式定义可层叠为一
四,CSS发展历程
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。
五,CSS工作原理
六,CSS语言特点
6.1 丰富的样式定义
6.2 易于使用和修改
6.3 多页面应用
6.4 层叠
6.5 页面压缩
在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间。
七,CSS基础语法分类
css语法可以分为两部分:
- 1,选择器
- 2,声明
声明由属性和值组成,多个声明之间用分号分隔。
八,CSS注释
/*这是注释*/
九,css和html的区别
CSS和HTML都是前端技术的核心语言,那么这两者分别是干什么的?又有什么区别呢?
9.1 html(结构)
全称Hyper Text Markup Language(超文本标记语言),该语言是用于定义文档内容结构
功能:
1.该语言写的代码通常会被浏览器解析执行
2.超文本:不止包括文本,还有图片、链接、音乐…
3.一个页面就是一篇文档,而一篇文档最核心的就是内容,不同含义
注释格式:<!–注释内容–>
9.2 css(布局)
全称Cascading Style Sheets (层叠样式表)
功能:
1.用于定义html文档的样式(外观)
2.页面表现的基础,可以控制布局,控制元素的渲染
注释格式:/*注释内容*/
总的来说就是一句话:html是网页的结构,CSS是网页的样式。打个比方,如果把整个网页比喻成一个人,那么HTML就是骨头,CSS就是衣服。
十,当你已经学习了css,下一步学习什么呢?
下一步应该学习 JavaScript 。
10.1 JavaScript
JavaScript 是最流行的语言之一。 JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript可以使您的网站更具活力。
许多 HTML 开发者都不是程序员,但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
如果希望了解更多的javascript,怎么请参考下面博客