XML关联CSS、CSS的属性、浮动定位、属性选择器

最新推荐文章于 2023-11-09 20:56:40 发布

zhang111han

最新推荐文章于 2023-11-09 20:56:40 发布

阅读量95

点赞数

文章标签： xml css

本文链接：https://blog.csdn.net/zhang111han/article/details/134255264

版权

XML关联CSS

1)调用独立样式文件

独立的css样式文件是一个文本文件，扩展名是“.css”。

XML为了使用层叠样式表，必须使用预处理指令。

<?xml-stylesheet type="text/css" href="show.css"?>

2)将样式语句嵌入到XML文件

还有一种方法，在标记内使用"style"属性来定义样式。

3)混合方法指定样式

综合应用内部css样式和外部css样式。

4)使用多个样式文件

一个XML文件可以同时调用多个样式表文件。

说明：

一个XML文件同时引用多个样式表文件时，如果样式表文件中的内容发生冲突，则以声明靠后的样式表文件中所定义的样式为准。

）XML的核心是描述数据的组织结构，其元素名称是对元素所包含的数据内容含义的抽象，而不是数据的显示格式。

）XML文件通过CSS或XSL来显示数据，从而有效的分离了数据的组织结构和显示外观。

将CSS与XML结合有以下3点好处：

1）实现数据与显示方式分离，发挥XML的优势。

2）将显示样式统一于CSS中，便于对显示样式进行统一管理。

3）CSS语法结构简单，兼容性强，适用平台广泛。

HTML关联CSS

1）内嵌样式表

在HTML的<head>标签中的<style>标签中添加css样式，使用内嵌样式表定义的 css 样式只能在当前页面使用。

<!DOCTYPE html>
<html>
    <head>
        <title>内嵌样式</title>
        <style>
            div {
                background-color: pink;
                border:1px 1px 1px 1px solid;
            }
        </style>
    </head>  
    <body>
        <div>内嵌样式</div>
    </body>
</html>

2）内联样式

内联样式就是将样式信息直接定义在 HTML 标签的 style 属性中，由于内联样式定义在标签内部，所以它只对所在的标签有效。

<!DOCTYPE html>
<html>
    <head>
        <title>内联样式</title>
    </head>  
    <body>
        <h1 style="color: red; margin: auto;">内联式</h1>
    </body>
</html>

3）外部样式表

外部样式表是最常见也是最推荐的引用 CSS 的方式，您只需要将 CSS 样式定义在一个什么.css 格式的文件中，然后使用 HTML 的<link>标签将这个什么 .css 格式的样式文件应用到 HTML 文档中。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="style.css">
    </head>  
    <body>
        <h1>外部样式表</h1>
    </body>
</html>

CSS属性

1)显示属性 display

HTML默认有display属性:

inline、block、inline-block、none

2)字体属性

1.字体大小 font-size

用于定义字体大小，单位是px。

div{
    font-size: 16px;
}

2.字体粗细 font-weight

设置文本的粗细。

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗的字符，400等于默认

div{
    font-weight: bold;
}

3.字体样式 font-style

用于定义下划线，斜体等。

div{
    font-style:normal;
}

4.字体类型 font-family

用于定义文字字体。

div{
    font-family: 'Courier New', Courier, monospace;
}

3)颜色属性 color

规定字体的颜色

div{ color:red; }
div{ color:blue; }
div{ color:green; }

4)背景属性

1.背景颜色 background-color

div{
    background-color: aquamarine;
}

2.背景图片 background-image

用于定义图片背景图片，用url()函数引入图片。

div{
    background-image: url("images/1.png");
}

5)文本属性

1.对齐方式 text-align

值	描述
left	文本居左排列，默认
right	文本居右排列
center	文本居中排列

div1{text-align:center;}
div2{text-align:left;}
div3{text-align:right;}

2.文本装饰 text-decoration

值	描述
underline	定义下划线
overline	定义上划线
line-through	定义删除线

div1{text-decoration:underline}
div2{text-decoration:overline}
div3{text-decoration:line-through}

3.文本大小写 text-transform

值	描述
captialize	定义每个单词开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

div1{text-transform:capitalize;}
div2{text-transform:uppercase;}
div3{text-transform:lowercase;}

4.文本缩进 text-indent

div1{text-indent: 50px;}

6)边框属性 border-XXX

指定CSS表格边框

简写值	效果
值1	4个边为同一值
值1 值2	上下边为值1；右左边为值2
值1 值2 值3	上边为值1；右边和左边为值2；下边为值3
值1 值2 值3 值4	上边为值1；右边为值2；左边为值3；下边为值4

7)浮动属性 float

float浮动的原则：

1）上方元素不浮动，则浮动元素上不去；

2）浮动元素，脱离原来的文档流；

3）下方元素会占据浮动元素的位置；

4）浮动会对后续元素有影响，要清楚浮动的影响

清除浮动的影响：

兄弟元素之间：

clear:left/right/both;

父子元素之间的父元素：

overflow:hidden;

8)定位属性

1.绝对定位 absolute 是以父元素(设置了position属性)的左上角为原点，通过偏移量来

决定显示的位置。

偏移后，原来的位置不再占用空间

偏移量通过left属性和top属性来决定

2.相对定位 relative 是指相对于自身原来位置的偏移量来决定显示的位置。

偏移后，原来的位置还要占用空间。

偏移量通过left属性和top属性来决定

9)列表属性

1.list-style-type

值	描述
none	无标记
disc	标记是实心圆
circle	标记是空心圆
square	标记是实心方块
decimal	标记是数字

div1{list-style: circle;}
div2{list-style: square;}

2.list-style-image

div1{list-style-image:url('1.png')}

3.list-style-position

值	描述
inside	列表项目标记放置在文本内
outside	列表项目标记放置在文本外

div1{list-style-position:inside}

4.复合属性 list-style

可以设置的属性：list-style-type 、list-style-position、list-style-image

div1{list-style:none;}

Selector选择器

1）类型选择器

类型选择器也称标记选择器，元素选择器。

title{display: block;}

在CSS中可以使用“*”标识选择器，它表示匹配任意元素。它可以为XML中的每个元素设置相同的样式。*，表示通用选择器。

*{
    margin: 0px;
    padding: 0px;
}

2）class属性、ID属性

1. 有时需要将同一类型元素的两个实例设计成不同样式，可以为需要特定样式的元素

实例加上class属性

XML允许为元素指定class属性

2.ID属性也是用来标识同一元素中特定的实例。

ID侧重于定义一个元素的独有特性，class侧重于定义一类元素的共有样式

3）复合选择器

1.成组选择器

可以把一个规则同时应用于多个元素。

例如，下列规则同时定义title、type、author元素以块级元素显示。

title.c1{
   display: block;
}
并集

第1个是元素名；

第2个是class属性值或ID属性值。

title.c1{
   display: block;
}
交集

2.后代选择器

在CSS语句的选择器中，可在元素名称之前加上父元素的名称，甚至加上父元素的父元素的名称。

A B{ }，称为上下文选择器，即后代选择器。

A>B{ }，称为子元素选择器。

4）伪元素、伪类

伪元素(pseudo-element)是指将文档中不能作为独立元素看待的部分作为元素对待。

1.首行伪元素

一个元素的首行常被格式化成与其他部分不同的特殊效果，例如加黑显示。
首行伪元素是在元素名后加first-line来选择的。

title:first-line
{font-weight:bold;}

2.首字符伪元素

首字符伪元素是选择一个元素的首字符，在元素名后加first-letter来选择的。
例，将元素的首字符显示为下沉的大写字母效果

title:first-letter
{
    font-size:200%;
    vertical-align:text-top;
}

         CSS中的伪类包括——
        :link, :visited, :hover , :active, :focus，:first-child等.
        :first-child 用来指定元素的第一个子元素.

book:first-child
{
font-style:bold;
}

5）属性选择器

使用style属性可以将特定元素样式直接应用在一个特定的元素上。这样的设置方式也称为内联样式。

style属性的具体格式为

<元素名 style="规则1[；规则2；...]">

zhang111han

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XML关联CSS、CSS的属性、浮动定位、属性选择器

独立的css样式文件是一个文本文件，扩展名是“.css”。
复制链接

扫一扫