1、CSS整体感知
一):简介
前端研发3层:
HTML 结构层 语义、结构
CSS 样式层 样式
JS 行径层 交互、行径、动画
CSS 全叫作 cascading style sheets,层叠式样式表,是一种用来表现 HTML 的文件样式的计算机语言
功效:静态地修饰网页,并且能够协同各样脚本语言动态地对网页各元素进行格式化。
CSS的守护者亦是w3c,最新版本是CSS3,然则浏览器无那样的兼容
下图便是在Chrome和IE8中看设备猫:
二):产生背景
• 从 HTML 被发明起始,样式就以各样形式存在,最初的 HTML 只包括很少的表示属性。
• 随着 HTML 的成长,为了满足页面设计者的需求,HTML 添加了非常多表示功能,例如文本格式化标签。
• 然则随着这些功能的增多,HTML 变的越来越杂乱,况且 HTML页面亦越来越臃肿。
• 于是 CSS 便诞生了。
三):发展过程
CSS 的显现,实现了网页的结构和样式分离,拯救了混乱的 HTML,更加拯救了咱们 web 研发者。
2、CSS语法
2.1 CSS规则
CSS 规则由两个重点的部分形成:选取器,以及一条或多条声明
2.2 书写位置
css 的代码按照书写位置区别分为四种书写方式:内联式、内嵌式、 外联式、导入式。
2.2.1 内联式
• 内联式,亦被习惯叫做行内式。
• 书写位置:在 HTML 标签之上的 style 属性中书写 css 样式
• 所有的 css 样式属性总体构成标签的 style 属性的属性值
<div style="width: 100px;height: 200px;">
内联式缺点:
a、内联式必要写在标签上,无完全脱离 HTML 标签。
b、 css 样式代码让标签结构繁重,有害于 HTML 结构的诠释。 c、一个内联式的 css 代码
|