CSS3系列 01 基础知识
CSS介绍
基本介绍
CSS全称为Cascading Style Sheet，译为层叠样式表。
它能够为HTML进行样式美化以及页面布局。
如果将单纯的HTML所构成的页面当做一副素描画，那么CSS的作用就是为这幅素描画进行上色处理。
当然CSS也能对HTML文档进行布局，让其不再使用默认的文档流排列方式，而是利用CSS让元素进行自由的组合、排列。
值得一提的是在早期没有出现CSS时，对HTML布局我们大多会使用table标签来进行，但是CSS诞生后就不会那么做了，使用CSS布局更加的方便。
关于CSS的学习可分为三大块：
- 如何选择标签元素
- 如何操纵标签元素
- 如何对页面进行布局
版本更迭
CSS1
1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS。他们在1994年首次在芝加哥的一次会议上第一次展示了CSS的建议。
1996年[11]12月发表的CSS1的要求有：[13]
- 支持字体的大小、字形、强调
- 支持字的颜色、背景的颜色和其他元素
- 支持文章特征如字母、词和行之间的距离
- 支持文字的排列、图像、表格和其他元素
- 支持边缘、围框和其他关于排版的元素
- 支持id和class
CSS2-2.1
1998年[11]5月W3C发表了CSS2[14]，其中包括新的内容如：
- 绝对的、相对的和固定的定比特素、媒体型的概念、
- 双向文件和
- 一个新的字体。
CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。[15]
CSS3
CSS3标准已部分公布，但仍未全部制订完毕，还会有其它新内容继续加入。W3C网站上有专页展示CSS3发展的进展[16]。
CSS3的标志。
CSS3分成了不同类别，称为“modules”。而每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。CSS3早于1999年已经开始制订。[17]直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。[18]
CSS3里增加了不少功能，如：“border-radius”、“text-shadow”、“transform”以及“transition”。CSS3亦支持动画（animation）及立体（preserved-3d）。
部分属性（例如旋转类属性（如：transform），动画类属性，立体类属性），由于现时不同浏览器支持程度不同，需要加上不同的浏览器前缀来区分。
CSS4
W3C于2011年9月29日开始了设计CSS4[19][20]。直至现时只有极少数的功能被部分网页浏览器支持，如使用在HTML而非SVG上的pointer-events[21]。
CSS4增加了一些更方便的选择器，并简化了一些现有选择器的用法。
如何使用CSS
行内式
直接在HTML标签元素中添加style属性并书写CSS代码的方式即为行内式。
行内式并不推荐使用，它对后期维护造成了一些很大的困惑，且代码复用性也较低：
Document
HELLO WORLD
渲染结果：
嵌入式
在head标签中内嵌style标签，并在style标签中书写CSS代码的方式被称为嵌入式。
嵌入式在调试代码时使用很方便，但是后期项目上线应该将CSS代码和HTML做好分离：
Document
HELLO WORLD
渲染结果：
链接式
在head标签中内嵌子标签link，利用link标签来链接一个已经书写好的CSS样式文件的方式被称为链接式。
链接式是实际生产中最常用的导入CSS样式的方式。
HTML文档：
Document
HELLO WORLD
CSS文件：
span:nth-child(1){background-color: red;color: white;padding: 5px;font-style: italic;
}
渲染结果：
导入式
在head标签中内嵌子标签style，style标签中利用CSS所提供的语法@import url(“path”)来导入一个已经书写好的CSS样式文件的方式被称为导入式。
导入式的方式在整合CSS代码时比较常见，如下所示。
HTML文档：
Document
HELLO WORLDHELLO CSS
整合的CSS文件，all_style.css：
@import url("./style1.css");
@import url("./style2.css");
单独的CSS文件，style1.css：
span:nth-child(1){background-color: red;color: white;padding: 5px;font-style: italic;
}
单独的CSS文件，style2.css：
div:nth-of-type(1){background-color: blue;color: white;padding: 5px;font-style: italic;margin-top: 5px;
}
渲染结果：
样式重置
所有的HTML都有一些自带的样式，比如body文档有边距并不是直接铺满整个屏幕的，ol、ul等默认样式都是黑色实心圆、a标签有下划线等。
在实际的项目开发中，我们应当将这些默认样式全部取消掉，因此有人专门做了一个CSS文件，名为CSS Rest即为CSS样式重置，在编写CSS代码之前，我们应当先导入这个文件：
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: none (public domain)
*/html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}
注释语法
CSS中若要添加注释，格式如下：
/* Comment */
它可以支持多行注释。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！