CSS入门
什么是CSS
css全称为Cascading Style Sheets，翻译为层叠样式表。
样式定义如何显示HTML元素，样式通常存储在样式表中。css是能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML表现而言，css能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
CSS发展历程
早在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯（Bert Bos） 当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计 CSS。
哈坤于 1994 年在芝加哥的一次会议上第一次展示了 CSS 的建议，1995 年他与波斯一起再次展示这个建议。当时 W3C 组织刚刚创建，W3C 对 CSS 的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996 年底，CSS 已经完成。1996 年 12 月 CSS 要求的第一版本被出版。
1997 年初，W3C 内部组织了专门管理 CSS 的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是 1998 年 5 月出版的第二版要求。
目前，CSS 的最新版本已经更新到了第三版。CSS3 融入在了 HTML5 新版本的特性里面。
怎么使用CSS
CSS样式分为三种：内联样式，内嵌样式表，外联样式表。
内联样式
1
2<div style="color: lightcoral;">这是测试内容.</div>
缺点：只能对当前元素有效，CSS代码出现冗余。
内嵌样式表
1
2
3
4
5
6
7<style type="text/css"> p { color: lightcoral; font-size: 24px; } </style>
通过style元素进行设置，旧版本需要设置type属性值为"text/css"。
优点：可以通过css选择器定位HTML页面中一个或一类元素。
缺点：将css代码内嵌到HTML页面中，只能对当前页面有效。
- 编码的风格不符合编码原则中的低耦合
- 导致css代码可能冗余
外联样式表
1
2<link rel="stylesheet" href="style/demo.css">
使
- 用外联样式前先创建一个css文件，用来存储css样式内容。
- 在HTML页面中通过<link>元素引入外部指定的css文件。
<link>元素：
- 作用：用来引入HTML页面外部资源。
- 属性：
- rel属性：用来设置外部资源与当前HTML页面的关系。
- href属性：用来设置引入外部资源的路径。
相对路径：目标文件相对于当前文件的路径。（推荐使用）
绝对历经：目标文件相对于根目录的路径。
优点：相对于内嵌样式表和内联样式表。
- 将css样式与HTML页面进行分离（低耦合）
- 不会出现内嵌样式表或内联样式产生的代码冗余。
缺点：可能会对HTML页面的加载造成负担，导致性能下降。
使用css样式
在一个HTML页面中同时使用内联样式，内嵌样式表和外联样式表：
- 内联样式的优先级别是最高的。
- 内嵌样式表和外联样式表与编写顺序有关：最后的是优先级别更高。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>优先级</title> <link rel="stylesheet" href="style.css"> <style> p{ color: aqua; } </style> </head> <body> <p style="color: aquamarine;">19级启嘉班</p> </body> </html>
style.css文件内容。
1
2
3
4p { color: blue; }
语法结构
1
2
3
4
5
6选择器{ 属性名称：属性值； 属性名称：属性值； ··· }
语法特点：
- css声明总是以键值对（keyvalue）形式存在。
- css声明总是以分号(;)结束。
- 声明组以大括号({})括起来。
- 为了让css可读性更强，每行只描述一个属性。
CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。css注释以/*开始以*/结束。
1
2
3
4
5
6
7
8<style> /* 代码注释 */ p{ /* 代码注释 */ color: aqua; } </style>
最后
以上就是悦耳鞋垫最近收集整理的关于css入门的全部内容，更多相关css入门内容请搜索靠谱客的其他文章。
发表评论 取消回复