Web前端开发——CSS技术大梳理

前言

之前在看牛腩的时候对CSS进行了一下总结,那会儿刚接触,对CSS的理解还是不够系统和全面,现在看完CSS

了,再对CSS整体梳理一下。

整体概括

话不多说,先上图,对CSS进行一下整体了解。

css是英文Cascading Style Sheets的缩写。中文翻译为层叠样式,是用于控制网页样式并允许将样式信息与网

页内容分离的一种标记性语言。

之前在做牛腩的时候已经把CSS的基本知识和用法进行了详细的讲解(CSS之浅入浅出CSS之核心篇)。这里就

不再累述。这里主要讲一下CSS与javascript,XML以及AJAX交互。

CSS与javascript交互

<span style="font-family:KaiTi_GB2312;font-size:18px;">script language="javascript">
var number = new Date().getSeconds() % 3 + 1; //随机数,从1到3
//随机选择CSS外部文件
document.write('<link href="0' + number.toString() + '/0' + number.toString() + '.css" rel="stylesheet" type="text/css">');
</script></span>

其实和html与CSS交互一样,只需要引入javascript标记即可。通过与javascript交互实现动态的效果。

CSS与XML交互

与CSS和javascript交互类似,引入XML即可。这里XML可以看成一个存放数据的地方,而CSS美化了XML文件的显

示。

CSS与AJAX交互

AJAX是一项比较复杂的技术。他是由javascript,CSS,DOM,XMLHttpRequest等技术融合而成的。

javascript是整个AJAX最底层的部分,通过javascript去调用CSS,DOM,XMLHttpRequest

CSS,美术大师。CSS是控制整个页面的,没有CSS就没有网页

DOM,非常重要的html模型,html中的一棵树

XMLHttpRequest,实现异步操作。

AJAX由于刚接触,还不是很了解。以目前的水平就只能介绍到这里了。

个人点睛

还是那句话,CSS将网页的内容和样式解耦,通过CSS文件,将具有相同样式的样式封装在一起,日后对网站的升

级和维护很是方便。

时间: 2024-10-05 06:49:36

Web前端开发——CSS技术大梳理的相关文章

Web前端开发——JS技术大梳理

什么是JS JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称 为javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.JavaScript 是一种具有面向对象能力的.解 释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 因为他不需要 在一个语言环境下运行,而只需要支持它的浏览器即可.它的主要目的是,验证发往服务器端的数据.增加 Web互 动.加强用户体验度等. 下面对js从整体的角

1+x 证书 Web 前端开发 css 专项练习

官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/ 原文地址:https://www.cnblogs.com/zhsh666/p/11967944.html

web前端开发必备技术

1.Vue.js是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 如果你是有经验的前端开发者,想知道 Vue.js 与其它库/

10个极客Web前端开发jquery资源大荟萃

1.基于TweenMax.js的网页幻灯片 今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮. 在线演示 源码下载 2.pagePiling.js - 创建漂亮的全屏滚动效果 全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果. 在线演示 源码下载 3.使用 CSS3 伪元素实现立体的照片堆叠效 CSS3 里引入的伪元素

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言

1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下拉菜单.或鼠标滑过表格的背景颜色改变.还有焦点新闻(新闻图片)的轮换.可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的.

web前端开发——css

一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得美观: 将HTML页面的内容与样式分离: 提高web开发的工作效率. 3.css的优势 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使页面布局更加灵活 减少网页的代码量,增加网页浏览器速度,节省网络带宽 运用独立页面的css,有利于网页被搜索引擎收录 二.css语法 css语法分为两部分:

Mobile Web 前端开发 CSS动画经验分享

谈到动画作用.CSS动画是Mobilweb开发的利器,CSS动画不得不谈.受限于Mobil设备功能等疑问,PC上的动画完结计划在Mobil上大都行不通,幸运的Mobil上我能够用CSS动画,今日我就来了解一下CSS动画的3个首要成员. CSS改换(Transit transit默许的突变动画.当CSS特点改动的时分,界说好需求改换的CSS特点.transit动画被触发.可是并不是一切的CSS特点改动都会触发translat当前,并没有一个官方的文档列出来那些能够,那些不能够,可是能够经过一些小窍

Web前端开发css基础样式总结

颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 px:像素,与分辨率设置相关. %相对于浏览器的百分之多少,可以对宽度width做设置,不可以对height做设置 文本样式(text) color:设置文本颜色 text-align:设置文本对齐方式 center left right letter-spacing:字间距/字母间距 word-

Web前端开发基础 第一天(Html和CSS)

学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下拉菜单.或鼠标滑过表格的背景颜色改变.还有焦点