Web前端-CSS基础与应用

2022-06-09 分类：网站建设

CSS历史

Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。

年哈坤·利提出了CSS的最初建议

年初，W3C组织负责CSS的工作组开始讨论一版中没有涉及到的问题

年5月：是一套全新的样式表结构，是由W3C推行的，同以往的或完全不一样，推荐的是一套内容和表现效果分离的方式HTML元素可以通过的样式控制显示效果，可完全不使用以往HTML中的table和td来定位表单的外观和样式，只需使用div和此类HTML标签来分割元素，之后即可通过样式来定义表单界面的外观

年：增加了更多的CSS选择器，可以实现更简单但是更强大的功能

CSS特点简介

丰富的样式定义

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

易于使用和修改

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

多页面应用

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

层叠

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

页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。

CSS工作原理

工作原理：CSS全称层叠样式表,它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。是能够真正做到网页表现与内容分离的一种样式设计语言,能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言简而言之：css就是一种先选择html元素，然后设定选中元素css属性的机制实质：包含css的网页—>浏览器解析执行（Webkit CSS parser CSS解析器）---->解析后的效果呈现在页面上

CSS版本区别

1.区别：在CSS2基础上新增属性，比如圆角、阴影、:last-child与:nth-last-child()伪类选择器等以前CSS2也有的样式，因为浏览器版本不支持原因，现在CSS3中重新提出并使用，因为现在浏览器越来越高级智能，当然也就兼容HTML5 CSS3了

2.相同点：语法相同，目的相同

3.如何选择css2和css3：普通布局CSS2足够了，需要圆角、阴影、伪类等再使用CSS3，其实CSS3中90%以上css样式是css2的，只是在css2上新增和重用小部分CSS2的样式。

友情提示：要学习CSS3必须的掌握CSS2常用样式和语法、灵活应用

布局技巧，才能灵活使用CSS3样式

CSS的基本语法

选择器(即修饰对象){

对象的属性1：属性值

对象的属性2：属性值

}

</style>

CSS为HTML网页添加样式的三种方法

1.行内样式，直接写在特定标签的style属性中；

2.嵌入样式，在head元素中嵌入 <style type="text/css"></style>，将css规则放入<style>和</style>中；

3.链接样式，在<head>元素中使用外部的样式表，如：

友情提示：3种css样式的优先级：行内样式 > 嵌入样式 > 链接样式

CSS选择器

元素/标签选择器

通过元素进行选择，进行添加样式

分享题目：Web前端-CSS基础与应用
文章网址：https://www.cdcxhl.com/news30/165280.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站建设等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容