总结:XHTML中链接CSS的四种方法(笔记)

      我们是使用HTML进行布局头部、段落、表单、图像和列表,将网页上的每个元素合理地做出标记,定义元素在整个框架中的作用。但仅仅用XHTML创建出来的页面样式过于平淡简单。此时,则需要引入CSS将网页的元素样式化,使其产生不同的视觉表现。

      总结XHTML中引入CSS的四种方法 :行内式、内嵌式、链接式和导入式。

        1、 行内排版样式:在标记的style属性中设定CSS样式

            格式:<标记名称 style=”属性1:属性值1;属性2:属性值2”>…</标记名称>

                    标记名称:<span>、<div>

        2、内嵌式排版样式:将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

             可以分为三种:标记定义型、class定义型、id定义型

               ①标记定义型:

                    格式: <head>

                             <style type="text/css">

                               标记名称{属性1:属性值1;属性2:属性值2;}

                                ...

                             </style>                 

                             </head>

                             <body>

                                  <标记名称>...</标记名称>

                            </body> 

             ②class定义型:

                    格式:<head>

                            <style type=”text/css”>

                              .定义名称{属性1:属性值1;属性2:属性值2;}

                              .定义名称1,.定义名称2{属性1:属性值1;属性2:属性值2;}

                            </style>

                            </head>

                            <body>

                                <标记名称 class=”定义名称”>…</标记名称>

                            </body>

             ③id定义型格式:<head>

                                 <style>

                                   #定义名称{属性1:属性值1;属性2:属性值2;}

                                  #定义名称1,#定义名称2{属性1:属性值1;属性2:属性值2;}

                                </style>

                               </head>

                               <body>

                                  <标记名称 id=”定义名称”>…</标记名称>

                               </body>

           CSS规定,范围越小,优先级越高。行内的优先级高于id级,id的优先级高于class级,class的优先级高于标记定义行。

       3、链接排版样式:将一个独立的.css文件引入HTML文件中,它在网页的<head>...</head>标签对中使用<link>标记来引入外部样式。

            格式: <head>

                         <link rel=”stylesheet” type=”text/css” href="mystyle.css" />

                      </head>

       4、导入排版样式:将一个独立的.css文件引入HTML文件中,它在网页的在<head>…</head>之间<style>...</style>标签对中使用<@import >标记来引入外部样式。

            格式:<head>

                      <style type="text/css">

                         @import "style.css"

                      </style>

                    </head>

                                                                                                                                                                                        ~Jvst_Live_洋。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。