文本编码基本原理:CSS床单

CSS规则集

CSS样式表实质上是一组规则集。规则集是由三件事:

选择器

这些都是你选择哪些元素或文档中元素组将样式信息的影响。

属性

这些标识样式属性(如大小或颜色)所控制。

值

每个属性都有一个特定的值指示大小、颜色、边缘,或其他应用的样式信息。

将这些组合成一个规则集的语法很简单。选择器是第一位,紧随其后的是一组一个或多个属性-值括在大括号和分号隔开:

选择器{property1: value1;property2: value2;}

例如:

头{粗细:大胆的;颜色:红色,}

你可以尽可能多的属性-值,但他们必须用分号分隔。使用空格大方地让你的规则集容易阅读。

选择器

选择器的方式识别元素或元素组,将影响你的样式信息。选择器可能只是一个元素的名称,或者他们可能考虑元素的嵌套,或一个特定的属性值。

下面列出最常见的选择器和语法。

• 元素
• 元素的后代元素
• >元素的子元素
• 元素(属性=“价值”]
• 前元素:或元素:

一些例子:

我

匹配所有我元素

foo >栏

匹配每个酒吧元素是一个孩子的喷火元素

foo酒吧

匹配每个酒吧元素的后代喷火元素

第一:第一个孩子

匹配每个首先元素的第一个孩子的父母

foo(酒吧)

匹配每个喷火元素有一个酒吧属性,无论价值

foo (bar = "水平")

匹配每个喷火元素有一个酒吧属性的值水平

foo[酒吧~ =“欢呼”)

匹配每个喷火元素的酒吧属性值是一个空格分隔的列表单词,其中一个是干杯

foo:在

匹配之前每一个喷火;用于插入文本(使用内容:关键字)之前的内容

这里有一些更多的例子,使用真实的TEI选择器,和一些有用的属性-值:

div{字体类型:arial,无衬线;padding-top: 2 em;}

适用于所有div元素,无论多么深层嵌套的

p {indent: 1 em}

每一段的第一行缩进1 em空间

bibl名字{粗细:大胆;}

使的名字元素大胆的只有当它出现的后裔bibl

作者名字>{粗细:大胆的;}

使的名字元素大胆的只有当这是一个孩子的作者(空格>可选)

名字(type = "人"]{颜色:红色;}

仅适用于的名字当它type = "人"(前面的空格(不允许)

div[类型=“章”]>头{字体大小:200%}

让章标题大

div[类型=“家伙”):在{内容:“* * * * *”;text-align:中心;}

每一章之前插入一行星号

项目:在{内容:attr (n)”。”;}

插入的值n,一个空间,前一段时间列表中的每一项

请注意,多个选择器可以同时使用,之间用逗号分隔。例如:

rs (type =“人”)、名称(type = "人"],persName{颜色:红色;}

属性和值

下面列出的共同属性和他们最常见的类型的值。注意,一些性质(尤其是那些管理大小)可以以几种不同的方式。一些测量绝对像素等单位;其他人则相对于字体大小(例如,ems),和其他国家相对于周围的文本(例如,百分比或更大的或小)。

• 显示:没有| |内联块
• 字体大小:xx-small | x-small |小|中|大|从小到大| xx-large
• 字体大小:% | |小大
• 字体样式:正常|斜体|斜
• 大胆粗细:正常| | 900年
• 字体类型:衬线|无衬线|草书| |幻想等宽字体
• margin-left、margin-right margin-top margin-bottom: 1 em, 2例
• padding-left、padding-right padding-top padding-bottom: 1 em, 2例
• text-align:左| | |为中心
• indent: 1 em | 48 px
• 边界:薄固体蓝色;
• 颜色:红色,# 99 aabb
• 内容:“东西”| attr (attr_name)|。/ image.png
• 背景颜色:红色,# 99 aabb
• 背景图片:url (“。/ image.png”)
• 平铺方式:重复| repeat-x | repeat-y |不再重演
• background-attachment:滚动|固定
• 背景位置:(顶部中心| |底部)(左|中|右)
• 背景位置:20% - 70%

语言和引号

您可以匹配元素在一个特定的语言:朗伪类。例如,说:朗(fr)匹配说元素有一个xml: lang表明法国自然语言(例如,fr或fr - ca)。如果一个说元素没有xml: lang检查,那么每个祖先元素之前xml: lang是发现。如果没有发现,选择器不匹配。

有特殊的价值内容关键字来处理跟进标志。即个引号和引号的。他们的意思使用适当的从这个元素的字符串报价财产。看下面的例子。

说{引用:““”“”“”“”;}/ * w /通用straigt双引号嵌套连续单打默认* /说:朗(en){报价:‘\ 201 c’‘\ 201 d’‘\ 2018 \ 2019”} / *相同,但卷曲,英语* /说:朗(fr){引用:“«”“»”}为法国* / / *用引号表示:朗(de){引用:“»”“«”‘\ 2039 \ 203“}/ *逆转心中w /嵌套单角引号德国* /说:{前内容:开引号;}说:{后内容:引号;}

将样式表的XML文档

告诉浏览器使用哪个样式表,后把下面的XML声明(但DOCTYPE声明之前,如果有的话)

< ?xml样式表type = " text / css " href = " filepath / my.css”? >

在哪里filepath / my.cssfilepath和CSS文件的名称,相对于你的XML文档。例如,这里有从我们提供的模板相应的行车间:

< ?xml version = " 1.0 " encoding = " utf - 8 " ?> < ?xml样式表type = " text / css " href = " . . / . . /指向样式表/ yaps-tei.css”?> < TEI xmlns = " http://www.tei-c.org/ns/1.0 " xml: lang =“en”>

请注意,样式表的指针(href)是一个URL,所以样式表在网上也可以生活。

提示和故障

在创建更复杂的CSS样式表时,有几件事你可以让您的样式表更加强大和易于管理:

• 你的规则集分组功能。我们提供的样式表对于这个车间列出了所有可用的TEI元素在我们的教学模式,根据它们的功能组合在一起在文档(例如,散文、诗歌、短语级元素)。这使它更容易找到并使用所有的元素,也有类似的作用。
• 您可以创建多个规则集相同的元素,控制其行为在不同的上下文中,或使用不同的属性和值。例如,您可能想要的报价元素不同的编码时引用撕裂= "块"或者是引用撕裂=“内联”。确保你不要用相同的选择器,创建多个规则集。

这里有一些事情要检查当样式表没有按预期工作:

• 确保您的浏览器阅读实际上是样式表——可能我们看到的最常见的错误文档或样式表被移动,但是href没有被改变,以反映这一举动
• 确保你所有的属性-值由分号分隔
• 确保每一个规则集是封闭在花括号(别忘了最后撑!)
• 检查拼写错误(特别是元素名称的拼写错误,因为氧气不能为你检查这些)
• 确保你创建的元素是元素的规则集你看在你的编码
• 确保你没有两个相同的元素而没有意识到这一点的规则集。