CSS学习笔记01 CSS简介
2018-06-24 01:25:37来源：未知 阅读 ()
1、CSS定义
CSS 指层叠样式表 (Cascading Style Sheets)，是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
2、为何使用CSS
网页是由HTML标签组成的，那么这些标签会根据浏览器的默认方式进行排版与样式的渲染，如果想要更改这些默认的样式，推荐用CSS，因为这样不仅实现了内容与表现分离的问题，而且更易于维护。
3、CSS语法
CSS 语法由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
其中每条声明由一个属性和一个值组成。
selector {property: value}
下面这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
这张图形象的表示了上面代码的结构
CSS对空格和大小写都不敏感，也就是说大小写均可，是否包含空格不会影响 CSS 在浏览器中的工作效果
/* 属性为大小，值为小写，并且冒号后面有多个空格 */ .box { COLOR: blue; } /* 建议写法 */ .box { color: blue; }
上面的两种写法在浏览器中显示的效果是一样的。
4、CSS注释
与HTML语言一样，CSS也同样存在着注释
4.1、单行注释
/* 这是表示单行的注释 */
注意：注释不能嵌套，例如下面的写法都是错误的
/* 这是表示*/单行的注释 */ /* 这是表示单行的注释 /* */ */
4.2、多行注释
/* * 这是表示多行的注释 * 注释内容1 * 注释内容2 */
5、引入方式
5.1、行内式
行内式是在标签的style属性中设定CSS样式。
<div style="..."></div>
5.2、嵌入式
嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中
<head> <meta charset="UTF-8"> <title>嵌入式</title> ... <style type="text/css"> ...在这里写CSS样式 </style> </head>
5.3、外联式
将CSS样式写在一个独立的文件中，然后通过link标签引入CSS样式文件
<head> <meta charset="UTF-8"> <title>外联式</title> ... <link rel="stylesheet" href="outer.css" /> </head>
type属性：只有一个选项，“text/css"，指定当前为css文本文件
rel：指定当前HTML文件与CSS文件的关系是样式表
href：指定外联样式表的路径
5.4、导入式（不推荐使用）
将CSS样式写在一个独立的文件中，然后通过@import标签引入CSS样式文件
<head> <meta charset="UTF-8"> <title>导入式</title> <style type="text/css"> @import url(css/outer.css); /*其他css样式*/ </style> </head>
注意：导入样式的书写必须在所有的css规则书写之前，否则失效，导入外部样式表与链入外部样式表类似，相当于在文件中直接使用，这会占用html文件的空间，故不推荐使用该方法，而且有些浏览器会最后加载导入的样式，导致刚开始打开网页的时候，没有任何的样式，到加载完毕之后才会导入样式，用户体验不好
导入外部样式表的另一种用途是，如果一个文件需要引用很多外部样式表，可以把这些要引用的样式表放在一个文件中，然后需要引用的文件则只需引用一个文件即可，如
import.css内容如下
@import “a.css”
@import “b.css”
@import “c.css”
除了以上4种导入的样式之外，这里需要知道所有的标签都有一个默认样式，我们称为浏览器样式，或者默认样式。也就是不加任何样式，HTML标签在浏览器中的显示的样子。
6、建议与注意点
一些建议
- 为了以后的对代码的优化，建议在每个属性值的后面加一个分号，如：p { font-style: normal; }
- 某些html属性有自定默认的CSS属性值，如：<h1></h1>
- 为了兼容浏览器，建议将所有的元素的CSS属性值重置，如：<h1></h1>———>h1 { font-size: 12px; }
- 如果想要用某种特殊字体的话，又担心用户的上面没有该字体，则可以用图片代替
- 中英文字体的设置顺序，先设置英文的字体，再设置中文的字体，如：p { "Courier New", "宋体" }，建议字体用双引号
样式应用顺序
- 行内样式优先级最高
- 针对相同的样式属性，不同的样式属性将以合并的方式呈现
- 相同样式并且相同属性，呈现的方式由在<head>中的顺序决定，后面会覆盖前面定义过的属性
- !important 指定样式规则应用最优先
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
