分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

CSS简介:初识CSS

  • 时间:2021-03-20 07:44 作者:前端dog 来源: 阅读:347
  • 扫一扫,手机访问
摘要:一.我们为什么需要CSS?使用css的目的就是让网页具备美观一致的页面,另外一个最重要的起因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要一一修改,费心费力。是时候做出改

一.我们为什么需要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真正走出试验室。

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为客户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长,为了满足页面设计者的要求,HTML增加了很多显示功能。但是随着这些功能的添加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计CSS。

其实当时在互联网界已经有过少量统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其余的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其余地方则继承或者“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展现了支持CSS的Arena浏览器。

同年,W3C组织(World WideWeb Consortium)成立,CSS的创作成员一律成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参加其中,例如微软公司的托马斯·莱尔顿(Thomas Reaxdon),他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其余少量人是这个项目的主要技术负责人。1996年底,CSS初稿已经完成,同年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level 1)完成,成为w3c的推荐标准。

1997年初,W3C组织负责CSS的工作组开始探讨第一版中没有涉及到的问题。其探讨结果组成了1998年5月出版的CSS规范第二版。

五,CSS工作原理

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于形容网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素,如文本段落或者链接的格式化指令。样式规则由一个或者多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。

六,CSS语言特点

6.1 丰富的样式定义

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创立边框,以及元素边框与其余元素间的距离,以及元素边框与元素内容间的距离;允许随便改变文本的大小写方式、修饰方式以及其余页面效果。

6.2 易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式公告在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式公告统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。假如要修改样式,我们只要要在样式列表中找到相应的样式公告进行修改。

6.3 多页面应用

CSS样式表可以单独存放在一个CSS文件中,这样我们即可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样即可以实现多个页面风格的统一。

6.4 层叠

简单的说,层叠就是对一个元素屡次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其余样式,即可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。

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就是衣服。

我目前是在职前台开发,假如你现在也想学习前台开发技术,在入门学习前台的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我的前台学习交流裙:前面:421 中间:374最后:697。里面聚集了少量正在自学前台的初学者,转行者,初阶者,我这里也有我做前台技术这段时间整理的少量前台学习手册,前台大厂面试题,前台开发源码教程,PDF文档书籍教程,需要的话都可以找裙猪获取。

十,当你已经学习了css,下一步学习什么呢?

下一步应该学习 JavaScript 。

10.1 JavaScript

  • JavaScript 是最流行的语言之一。

  • JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。

  • JavaScript可以使您的网站更具活力。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
【系统环境|软件环境】一步步教你开发、部署第一个去中心化应用 - 宠物商店(2022-03-15 15:13)
【系统环境|软件环境】循序渐进!一文学会高性能开发十大必需掌握的核心技术。(2022-03-15 15:13)
【系统环境|软件环境】Python游戏开发,pygame模块,Python实现贪吃蛇小游戏(2022-03-15 15:13)
【系统环境|软件环境】Spring Cloud Feign 记录单个服务耗时并处理 Hystrix 线程隔离模式!(2022-03-15 15:13)
【系统环境|软件环境】js数组方法全解(2022-03-15 15:12)
【系统环境|软件环境】字节二面:小伙子你来说下什么是伪共享?如何避免?(2022-03-15 15:12)
【系统环境|软件环境】写了Bug,误执行 rm -fr /*,我删删删删库了,要跑路吗?(2022-03-15 15:12)
【系统环境|软件环境】算法四:数字-复数计算(2022-03-15 15:12)
血鸟云
手机二维码手机访问领取大礼包
返回顶部