简单参考表比完整列表CSS术语更多:它旨在为您提供一种方式查找你最可能立即需要的信息CSS语法、选择器和属性详解访问W3CC教程http://www.w3schools.com/css/.
ss规则集
CSS样式表本质上由规则类组成规则由三方面组成:
-
选择器
-
即选择文档中哪些元素或几组元素会受样式信息影响
-
属性化
-
识别样式属性(如大小或颜色)
-
传值
-
每种属性都有特定值表示大小、颜色、边距或正在应用的其他样式信息
语法合并规则很简单选择器优先, 后接一组一个或多个属性- value
选择器 {属性1:值1属性2:值2}
例举 :
{字体重量:粗体颜色:红色;}
物价双对数随心所欲,但必须分号分离自由白空间令规则易读
选择器
选择器表示受样式信息影响的元素或元素组选择器可简单命名元素,或可计及嵌套元素或特定属性值
列表最常用选择者 和他们的语法
- 元素化
- 元素子元素
- 元素 >子元素
- element[attribute="value"]
- 元素前端或元素: 后
实例如下:
-
哥哥
-
匹配全部
哥哥元素化
-
foo>栏
-
相匹配
栏元素子
福市元素化
-
foo栏
-
相匹配
栏元素后代
福市元素化
-
primo:first-child
-
相匹配
普里莫元素为父首子
-
foo[bar]
-
相匹配
福市元素带
栏属性或值
-
foo[bar="horizontal"]
-
相匹配
福市元素带
栏属性带值
水平化
-
foo[bar~="Cheers"]
-
相匹配
福市中元素
栏属性值列表分空
词类中位
欢呼声
-
论坛:前
-
匹配
前置中选
福市脱机用插入文本
内容 :关键字前内容
更多例子使用实战TEI选择器,
-
{字体-家庭:arialsserif平面图2}
-
全部应用
iv语言元素,无论深度嵌套
-
p{文本缩进:1em}
-
缩进段内第一行
-
ibl名称{fort-量度:gold;}
-
makes
名称单当它显示为子孙
比布尔
-
作者名{字称:bold}
-
makes
名称单当元素子
写者空格环绕
>可选性
-
名称[类型=人] {color:红色;}
-
仅适用于
名称时它有
类型表示人白空间前
[不允许)
-
divs类型表示'Capter'>头{funt-size:200
-
令章节标题大
-
divs类型=Capte:############文本对齐:居中}
-
插入行星号后每一章
-
项前{内容:atrn)!}
-
插入值
N级中每个项前的时段
注意多选择器可同时使用,用逗号分离.g.:
rsssss类型表示“人”)}
属性和值
列表公共属性和最常用值类型注意某些属性(尤其是约束大小的属性)可用几种不同方式测量部分测量为绝对单位,如像素其他人相对字体大小(例如ems),其他人相对周围文本(例如百分数或大点或小点)
- 显示方式:无+++++
- 字尺寸:xx-Small+xxxxxxxxxxxxxxxx
- 字体大小:%++小
- 字型风格:正常++++Oblique
- 字量:正常++++900
- 字型家庭:serif sanserif
- 左偏差, 右偏差, 上边缘, 下边缘:1em, 2ex
- 左滑动,右滑动,顶滑动,顶滑动底层:1em,2ex
- 文本对齐:左+++cent
- 文本缩进:1em+++48px
- 边框:薄固蓝;
- 颜色:红色,#99ABB
- 内容:stuffattr_name/image.png
- 背景颜色:红色,#99AAB
- background-image: url("./image.png")
- 后台复用:重复+++++++++++++++
- 后台附加体:滚动++固定
- 后台位置: (顶端+++++
- 后台定位: 20% 70%
语言解析标记
可匹配特定语言中元素朗市伪类E.g.说:Lang(fr)匹配说元素带ml:lang表示自然语言为法语fr网路或FR-CA)ifa说元素没有ml:lang,然后对每个祖先元件逐次检验,直到ml:lang查找 。找不到选择器则不匹配
有特殊值内容类关键字处理引用标志即开首引用并近句引用.意思是使用此元素中适当的字符串引用属性类.见下例
说 {引文 : ''''''''''} /* generic straigt double quotes w/ nested straight singles by default */ said:lang(en) { quotes: '\201C' '\201D' '\2018' '\2019' } /* same, but curly, for English */ said:lang(fr) { quotes: '«' ' »' } /* guillemets for French */ said:lang(de) { quotes: '»' '«' '\2039' '\203A' } /* reversed guillemets w/ nested single angle quotes for German */ said:before { content: open-quote!}说:继{内容:近引用}
关联样式表与 XML文档
告诉浏览器要使用样式表,在 XML声明后放下下文(但如果DOCTYPE声明
去哪儿
filepath/my.css文件路径和名称与 XML文档相对举例说,这里是模板中相关线条,我们为该讲习班提供:
注意指针样式表
href)是一个 URL,样式表也可以上网直播
技巧解难
创建复杂CSS样式表后,你可做几件事情来提高样式表的强度并易管理:
- 按函数分组规则集样式表我们为这个讲义室提供列表 TEI教程中所有可用元素, 并按文档函数分组(例如讲义、诗歌、短语级元素等)。这使得更容易查找并处理作用相似的所有元素
- 可为控制不同环境行为或有不同属性和值的同元素创建多规则集举个例子,你可能想引用元素编码变换引文rnd=block或as引文rnd=.确定不创建多规则集并使用完全相同的选择器
上下有一些事物需要检查 时样式表不按预期工作
- 确定浏览器实际阅读样式表-可能最常见的错误是文档或样式表已被移动,但href未修改以反映移位
- 确保所有属性-值配对用分号分离
- 确保所有规则都嵌入卷圈内(不要忘记尾端支架! )
- 检查打字器(特别是元素名中的打字器,因为OXYGEN无法检查这些)
- 确定创建规则集的元素
- 确定你没有两条规则同元素