这更多的是一种简短的参考表不是一个详尽的清单的CSS方面:它的目的是为您提供一种方式来查找你最可能需要的信息。CSS语法的详细信息、选择器和属性,请访问W3C CSS教程页面[
http://www.w3schools.com/css/](http://www.w3schools.com/css/)。
CSS规则集
CSS样式表实质上是一组规则集。规则集是由三件事:
-
这些都是你选择哪些元素或文档中元素组将样式信息的影响。
-
这些标识样式属性(如大小或颜色)所控制。
-
每个属性都有一个特定的值指示大小、颜色、边缘,或其他应用的样式信息。
将这些组合成一个规则集的语法很简单。选择器是第一位,紧随其后的是一组一个或多个属性-值括在大括号和分号隔开:
选择器{property1: value1;property2: value2;}例如:
头{粗细:大胆的;颜色:红色,}你可以尽可能多的属性-值,但他们必须用分号分隔。使用空格大方地让你的规则集容易阅读。
选择器
选择器的方式识别元素或元素组,将影响你的样式信息。选择器可能只是一个元素的名称,或者他们可能考虑元素的嵌套,或一个特定的属性值。
下面列出最常见的选择器和语法。
-
元素
-
元素的后代元素
-
>元素的子元素
-
元素(属性=“价值”]
-
前元素:
或元素:
一些例子:
-
匹配所有
我元素
-
匹配每个
酒吧元素是一个孩子的
喷火元素
-
匹配每个
酒吧元素的后代
喷火元素
-
匹配每个
首先元素的第一个孩子的父母
-
匹配每个
喷火元素有一个
酒吧属性,无论价值
-
匹配每个
喷火元素有一个
酒吧属性的值
水平
-
匹配每个
喷火元素的
酒吧属性值是一个空格分隔的列表
单词,其中一个是
干杯
-
匹配
之前每一个
喷火;用于插入文本(使用
内容:关键字)之前的内容
这里有一些更多的例子,使用真实的TEI选择器,和一些有用的属性-值:
-
适用于所有
div元素,无论多么深层嵌套的
-
每一段的第一行缩进1 em空间
-
使
的名字元素大胆的只有当它出现的后裔
bibl
-
使
的名字元素大胆的只有当这是一个孩子的
作者(空格
>
可选)
-
仅适用于
的名字当它
type = "人"(前面的空格(
不允许)
-
让章标题大
-
每一章之前插入一行星号
-
插入的值
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没有被改变,以反映这一举动
-
确保你所有的属性-值由分号分隔
-
确保每一个规则集是封闭在花括号(别忘了最后撑!)
-
检查拼写错误(特别是元素名称的拼写错误,因为氧气不能为你检查这些)
-
确保你创建的元素是元素的规则集你看在你的编码
-
确保你没有两个相同的元素而没有意识到这一点的规则集。