引入CSS_html/css_WEB-ITnose-html教程-PHP中文网

引入CSS_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:36:15

原创

1461人浏览过

前面的话

　　web早期，html是一种很有限的语言，这种语言不关心外观，它只是一种简洁的小型标记机制。随着mosaic网页浏览器的出现，网站开始到处涌现。对于页面改变外观的需求增加，于是增加了类似和之类的标记元素。几年之后，大多数网站标记几乎完全由表格和font元素组成，且对于所要表现的内容不能传达任何实际含义，使文档可用性降低，且不易于维护。于是1995年，w3c发布了css，试图解决结构与样式混杂的问题。

外部样式表

　　【使用link标记】

　　　　在link标记中rel和href属性是必须的，type属性和media属性可省略

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="sheet1.css"><title>Document</title></head><body></body>    </html>

登录后复制

body{    background-color: red;}

登录后复制

　　　　[注意]样式表中不能包含HTML标记语言，只能有CSS规则和CSS注释

/*若CSS文件中存在除了CSS样式和CSS注释的其他标记，则会导致在该标记后面的CSS样式将无法被识别*/<style></style>body{    background-color: red;}

登录后复制

　　　【多个样式表】

　　　　一个文档可能关联多个样式表，如果是这样，文档最初显示时只会使用rel为stylesheet的link标记　　　

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="sheet1.css"><link rel="stylesheet" href="sheet2.css"><title>Document</title></head><body></body>    </html>

登录后复制

/*sheet1*/body{    background-color: red;}

登录后复制

/*sheet2*/body{    height: 100px;    border: 10px solid black;}

登录后复制

　　【候选样式表】　　

　　　　将rel属性的设置为alternate stylesheet可以定义候选样式表，只有在用户选择这个样式表时才会用于文档表现。如果浏览器能使用候选样式表，它会使用link元素的title属性值生成一个候选样式列表，可在菜单栏中查看->样式中进行选择。(IE和firefox支持)

　　　　[注意]若一个候选样式表没有设置title，那么它将无法在候选样式列表中出现，则无法被引用　

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="sheet1.css" /><link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/><title>Document</title></head><body></body>    </html>

登录后复制

/*sheet1*/body{    background-color: red;}

登录后复制

/*sheet2*/body{    height: 100px;    border: 10px solid black;}

登录后复制

内部样式表

　　【使用style元素】

卡奥斯智能交互引擎

聚焦工业领域的AI搜索引擎工具

查看详情

　　　　内部样式表需要使用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style>body{    background-color: red;}    </style><title>Document</title></head><body></body>    </html>

登录后复制

　　【多个style标签】

　　　　文档中可出现多个style标签，且样式规则与层叠样式规则一致

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style>body{    background-color: red;}    </style><style>body{    background-color: blue;    height: 100px;    border: 10px solid black;}    </style><title>Document</title></head><body></body>    </html>

登录后复制

　　【使用@import指令】

　　　　与link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。@import指令常用于样式表需要使用另一个样式表中的样式的情况。

<style>@import url(sheet2.css);body{    background-color: red;}    </style>

登录后复制

　　　[注意]@import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style>/*将@import放置在CSS规则之后将不起使用*/body{    background-color: red;}    @import url(sheet2.css);</style><title>Document</title></head><body></body>    </html>

登录后复制

　　【多个@import指令】

　　　　可以使用@import指令导入多个CSS样式表，且可以使用media来限制应用场景。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style>@import url(sheet1.css) all;    @import url(sheet2.css);</style><title>Document</title></head><body></body>    </html>

登录后复制

行间样式(内联样式)

　　如果只是想为单个元素指定一些样式，而不需要嵌套或外部样式表，可以使用HTML的style属性来设置一个行间样式。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: red;"></body>    </html>

登录后复制

　　[注意]行间样式若存在多个style属性，只能识别第一个

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><!-- 只能识别第一个style属性的值，所以页面显示为红色--><body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: blue;"></body>    </html>

登录后复制