search.png
关于我
 menu.png
XML（4）——CSS装饰XML（1）

利用CSS装饰XML

CSS简介

CSS(Cascading Style Sheets，层叠样式单)可以对XML输出样式进行控制：设置字体、页边距、排列对齐方式等。
CSS现在有三个版本：CSS1，CSS2，CSS3。

在这里插入图片描述
在这里插入图片描述

CSS在技术方面的优势

内容与表现分离,有了CSS,网页的内容与表现就可以分开了.
表现的统一,可以使网页的表现统一,并且容易修改.
CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等.
使用CSS可以减少网页的代码量,增加网页的浏览速度,减少硬盘容量.

CSS基本语法

CSS 样式规则由三部分构成：选择器、属性和值：
selector {property: value}
例：

body {
    color: red;
    background: green;
    margin: 0;
    padding: 0;
    font-family: Georgia, Palatino, serif;
}
XML使用CSS样式有两种方式：

  • 外部样式表

    <?xml version="1.0" encoding="ISO-8859-1"?> 
<?xml-stylesheet type="text/css" href="cd_catalog.css"?> 
<CATALOG>
    <CD> 
          <TITLE>Empire Burlesque</TITLE> 
          <ARTIST>Bob Dylan</ARTIST>      
          <COUNTRY>USA</COUNTRY>    
          <COMPANY>Columbia</COMPANY> 
          <PRICE>10.90</PRICE>   
          <YEAR>1985</YEAR>    
     </CD> 
     <CD>
          <TITLE>Hide your heart</TITLE>     
          <ARTIST>Bonnie Tyler</ARTIST> 
          <COUNTRY>UK</COUNTRY> 
          <COMPANY>CBS Records</COMPANY>   
          <PRICE>9.90</PRICE> 
           <YEAR>1988</YEAR> 
     </CD>
      . . . . 
</CATALOG>

    cd_catalog.css

    CATALOG 
 {
 background-color: #ffffff; 
 width: 100%;
 } 
CD 
{ 
display: block;
margin-bottom: 30pt;
margin-left: 0; 
} 
TITLE { color: #FF0000; font-size: 20pt; } 
ARTIST { color: #0000FF; font-size: 20pt; }
COUNTRY,PRICE,YEAR,COMPANY { display: block; color: #000000; margin-left: 20pt; }

  • 内部样式表

    <?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css"?>
<student xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
<HTML:STYLE>
student{
display:block;
background-color:orange;
}
name{
display:line;
font-size:12pt;
color:red;
}
sex{
display:line;
font-size:20pt;
font-style:italic;
}
</HTML:STYLE>
<name>卫青</name>
<sex>男</sex>
<name>杨玉环</name>
<sex>女</sex>
</student>
    CSS与HTML

    外部样式表
    内部样式表（位于 标签内部）
    内联样式（在 HTML 元素内部）

       其中，内联样式（在 HTML 元素内部）拥有最高的优先权
元素定位

元素的定位方式position分为绝对定位(absolute)和相对定位(relative) 。

  • (1) 绝对定位，以上一级元素的左上角为坐标系的原点。
  • (2) 相对定位，以自己的默认位置为坐标系的原点。
文本显示方式

CSS中所有的元素都有一个元素显示方式，它的取值是block、inline(默认值)、或none。由元素的display属性确定：
block表明该元素出现在自己的方框中，并以换行的形式与其他块分开。
inline表示后面的内容可以接在本行的后面。（默认）
none表示该元素不可见。
list-item表示以列表的形式显示。

 description 
  { 
     display:block; 
     position:relative; 
     left:125; 
     width:340; 
     padding:5; 
}
设置元素大小

CSS通过高度（height）和宽度（width）参数设置元素显示的大小。

字体显示方式

可以设置字体的多种属性，如font-style，font-variant，font-weight, font-size，font-family。

font-family属性用于指定字体名称，属性值使用逗号分隔的字体名称。如果字体名称中出现空格，必须使用双引号将字体括起来，如“Times New Roma”。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

文本控制

用于控制文档的编排，其属性主要有：text-align、text-indent、text-transform、text-decoration、vertical-align，letter-spacing，line-height

  • text-transform
    完全控制字母大小写：
    全部大写：h2 {text-transform:uppercase};
    全部小写：h2 {text-transform:lowercase};
    单词第一个字母大写：
    h2 {text-transform:capitalize};
    取消所有设定：h2 {text-transform:none};

  • text-decoration
    文字下划线：A:link{text-decoration:underline};
    文字上划线：A:link{text-decoration:overline};
    文字删除线：A:link{text-decoration:line-through};
    文字闪烁：A:link{text-decoration:blink};
    不要任何效果：A:link{text-decoration:none}

版权声明

知识共享许可协议 本文章由作者“衡于墨”创作，转载请注明出处，未经允许禁止用于商业用途

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
发布时间：2019年02月01日 09:06:01

评论区#

还没有评论哦，期待您的评论！

备案号： 闽ICP备19015193号-1 
关闭特效