CSS3系列 01 基础知识( 二 )


导入式
在head标签中内嵌子标签style,style标签中利用CSS所提供的语法@ url(“path”)来导入一个已经书写好的CSS样式文件的方式被称为导入式 。
导入式的方式在整合CSS代码时比较常见,如下所示 。
HTML文档:
Document@import url("./all_style.css");HELLO WORLDHELLO CSS
整合的CSS文件,.css:
@import url("./style1.css");@import url("./style2.css");
单独的CSS文件,.css:
span:nth-child(1){background-color: red;color: white;padding: 5px;font-style: italic;}
单独的CSS文件,.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 */
它可以支持多行注释 。