• 总结: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_洋。

  • 相关阅读:
    Spring Boot----freemark使用
    vue----解决跨域问题
    CSS----精灵图
    Spring MVC----文件上传
    Mybatis----Mybatis使用
    Django url引用异常
    Django ORM异常
    django sqlite3 报错问题
    爬虫 requests的超时和重试
    python 异常 NameError: name 'ModuleNotFoundError' is not defined
  • 原文地址:https://www.cnblogs.com/Jvst-Live-WUYang/p/3548456.html
Copyright © 2020-2023  润新知