> 웹 프론트엔드 > HTML 튜토리얼 > 引入CSS_html/css_WEB-ITnose

引入CSS_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:36:15
원래의
1325명이 탐색했습니다.

前面的话

  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元素】

    内部样式表需要使用