zoukankan      html  css  js  c++  java
  • 总结: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_洋。

  • 相关阅读:
    阿里云云计算认证ACP模拟考试练习题10套:第1套模拟题分享
    as3+java+mysql(mybatis) 数据自动工具(二)
    自动化登录账号密码并截图保存
    自动化读取csv文件
    自动化读取磁盘文件并逐一在百度上面进行搜索
    自动化打开百度搜索
    python自动化--数据驱动(从文件中提取)
    pycharm 命令行方式
    软件测试工程师 总结
    八大元素定位代码
  • 原文地址:https://www.cnblogs.com/Jvst-Live-WUYang/p/3548456.html
Copyright © 2011-2022 走看看