| <!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Document</title> |
|
<style type="text/css"> |
|
ul{ |
|
list-style-type:decimal; |
|
border:1px solid gray; |
|
} |
|
.first{ |
|
border:1px solid green; |
|
padding-left:10px; |
|
margin-left:0; |
|
} |
|
.second{ |
|
list-style-position: outside; |
|
border:1px solid red; |
|
} |
|
a[href]:before{content:attr(href);} |
|
h2:before{ |
|
content:open-quote; |
|
} |
|
h2:after{ |
|
content:close-quote; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<ul> |
|
<li class="first">你好</li> |
|
<li class="second">你好</li> |
|
<li>你好</li> |
|
<li>你好</li> |
|
<li>你好</li> |
|
<li>你好</li> |
|
<li>你好</li> |
|
</ul> |
|
|
|
<li>我靠</li> |
|
<a href="http://www.baidu.com">新浪</a> |
|
<a href="http://www.baidu.com">网易</a> |
|
<a href="http://www.baidu.com">百度</a> |
|
<h2></h2> |
|
<scrip> |
|
CSS名词解释 |
|
--元素： |
|
元素是文档结构的基础，文档中的每个元素都对文档的表现起一定的作用.。每个元素都会生成一个框，其中包含元素的内容。 |
|
--替换和非替换元素 |
|
并非所有的元素都以同样的方式创建，图像和段落就不是同类元素，span和div也不同，在css中元素通常有两种形式：替换和非替换， |
|
--替换元素 |
|
替换元素指的是用来替换元素内容的部分，并非由文档内容直接表示；最熟悉的例子就是img，它由文档本身之外的一个图像文件来替换，input元素与之类似，取决于input的类型，要由一个单选钮，复选框或文本输入框替换，替换元素显示时也生成框； |
|
|
|
--非替换元素 |
|
|
|
大多数html元素都是非替换元素，这意味着其内容由浏览器在元素本身生成的框中显示，例如<span>hi there</span>就是一个非替换元素，文本hi there将由浏览器显示。 |
|
|
|
--元素显示角色 |
|
|
|
除了替换元素和非替换元素，css还使用另外两种基本元素类型，块级元素和行内元素。 |
|
|
|
--块级元素 |
|
|
|
块级元素生成一个元素框，默认他会填充其父元素的内容区，旁边不能有其他元素，也就是他会独占一行，替换元素可以是块级元素，不过通常都不是 ； |
|
列表项是块级元素的一个特例，列表项会生成一个标记符，无序列表中通常是一个点，有序列表中是一个数字，这个标记符会关联到，元素框，除了这个标记符外，列表项的所有其他地方都与块级元素相同； |
|
--行内元素 |
|
行内元素在一个文本框内生成元素框，而不会打断这行文本，可以出现在另一个元素的内容而不会破坏其显示。因为他之前或之后没有分隔符，而块级元素之前或之后是有分隔符的所有他独占一行。 |
|
|
|
display： |
|
由于display的默认值是inline,默认地其内容会显示为行内文本。 |
|
|
|
css具有影响显示角色的基本功能， 例如吧p变成行内元素 吧span变成块级元素，、 |
|
|
|
对于link标签属性的定义：可以参考css权威指南第21页。 |
|
|
|
@import url(fuck.css); |
|
CSS要求@import指令出现在样式表其他规则之前， |
|
|
|
特定属性类型选择器 |
|
*[lang|="en"]{color:white;} |
|
这个规则会选择lang属性等于en或者以en-开头的所有元素， |
|
一般地[attr|="val"]可以用于任何属性及其值， |
|
img[src|="figure"]{border:1px solid gray;} |
|
这个规则会选择图片地址以figure开发或等于figure的所有图片； |
|
关于后台选择器，两个元素之间的层次间隔是可以无限的。 |
|
|
|
实际上有两种个基本的锚类型：已访问的和未访问的。这些类型称为伪类使用这些伪类的选择器则称为伪类选择器 |
|
|
|
动态伪类 |
|
：focus 只是当前拥有输入焦点的元素； |
|
：hover |
|
:active |
|
静态伪类 |
|
：link |
|
:visited |
|
|
|
伪类的顺序很重 link-visted-focus-hover-active |
|
|
|
动态伪类可以应用到任何元素而静态伪类只可以应用到a标签 |
|
|
|
静态伪类：first-child |
|
从对应的模式来讲 ：lang()伪类就像是|=属性选择器 |
|
*：lang(fr){font-style:italic;} |
|
表示吧所有的法语元素变成斜体 |
|
在html中语言由lang属性和meta元素的组合来确定， |
|
因此伪类比属性选择器稍微健壮一些在需要语言特定的样式时，大多数情况下伪类都是更好的选择 |
|
|
|
伪元素选择器 |
|
：first-letter 用于设置一个块级元素首字母的样式而且仅对应该首字母设置样式 |
|
：first-line 设置第一行样式 |
|
这两个选择器都只能应用于标记或段落之类的块级元素而不能应用于超链接等的行内元素 |
|
|
|
：before :after设置之前和之后元素的样式 |
|
|
|
每个选择器的特殊性对于每个规则浏览器会选择计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明如果一个元素有两个或多个冲突属性声明，那么具有最高特殊性的声明将会胜出。 |
|
所有样式冲突的解决都由层叠来处理。 |
|
|
|
选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分如 0 0 0 |
|
一个选择器的具体特殊性由下确定 |
|
如果两个规则的权重，来源和特殊性完全相同，那么在样式表中后出现的一个会胜出， |
|
|
|
正在"点击"的未访问链接可以与其中3个规则匹配即：：link:hover和：active所以这三个规则当中最后声明的一个将会胜出， |
|
冲突的声明要通过这个层叠过程排序，并由此确定最终的文档显示，这个过程的核心是选择器及其相关声明的特殊性，以及集继承机制。 |
|
*{color:red;} |
|
p { |
|
color:gray; |
|
} |
|
<p>wo kao <em>我艹</em></p> |
|
如果有这样一段样式这样一段代码，那么em中的颜色为红色，因为继承的属性没有特殊性，而通配符选择器的特殊性是0所以通配符选择器会胜出 |
|
|
|
一个1em等于当前元素字体的大小比如当前元素的字体大小是16px那么如果设置margin-top:1em;就是说元素的上外边距为16px; |
|
如果设置font-size：1em那么这个字体的大小继承自他父元素字体的大小； |
|
css定义了五种通用字体系列 |
|
serif字体（衬线体） |
|
这些字体成比例而且有上下短线如果字体中的所有字符根据其不同大小有不同的宽度，则称该字体是成比例的。例子有Georgia; |
|
sans-serif字体（无衬线字体） |
|
这些字体是成比例的，而且没有上下短线 例子有verdana; |
|
monospace字体（等宽字体） |
|
字体不是成比例的，每个字符的宽度都完全相同，可能有上下短线 也可能没有，如果一个字体的的字符宽度完全相同，则归类为monospace字体通常用于模拟打自己打出的文本，例子courier |
|
cursive字体（手写体） |
|
这些字体试图模仿人的手写体，通常他们主要由曲线和 serif字体中没有的笔划装饰组成 例子:author |
|
fantasy字体(幻想体) |
|
这些字体无法用任何特征来定义，只有一点是确定的那就是我们无法很容易的将其划归为任何一种其他的字体系列当中例子western |
|
<p style="font-family:Georgia;">abcdefghiABCEDFG</p> |
|
<p style="font-family:verdana;">abcdefghiABCEDFG</p> |
|
<p style="font-family:courier;">abcdefghiABCEDFG</p> |
|
<p style="font-family:author;">abcdefghiABCEDFG</p> |
|
<p style="font-family:western;">abcdefghiABCEDFG</p> |
|
理论上来讲用户安装的任何字体都会落入上面描述的某种通用系列当中。 |
|
|
|
只有当一个字体中有一个或多个空格时才需要在font-family声明中添加引号 |
|
字体设计中一个很常见的特性就是9级 加粗度， |
|
|
|
font-size：如果是百分数的话 ，百分数值总是根据从父元素继承的大小来计算， |
|
|
|
css中font-size是可以继承的，不过集成的是计算值不是百分数， |
|
font-family; |
|
font-bold |
|
font-size |
|
font-style:normal,italic,oblique |
|
normal表示非斜体或倾斜的文本，或竖直字体 |
|
italic:斜体是一种单独的的字体风格，对每个字母的结构有一些小改动，来反映变化的外观，对于serif字体尤其如此，除了文本字符有些斜以外serifs |
|
可以修改为一种倾斜字体， |
|
oblique:倾斜文本则是正常竖直字体的一个倾斜版本 |
|
如果没有italic字体，但是有一种oblique字体，则要在需要前者的地方使用后者；如果反过来则不会这样使用。用户代理可能只是计算竖直字体的一个倾斜版本来生成oblique字体 |
|
通常italic和oblique看上去完全一样； |
|
|
|
字体变形 |
|
font-variant:small-caps | normal |inherit |
|
|
|
拉伸和调整字体 |
|
font-stretch |
|
<strong style="font-stretch:wider;font-family:serif;">fuckme</strong> |
|
|
|
font-size-adjust 127页 |
|
|
|
font简写 |
|
font:italic 900 small-caps 30px verdana,serif; |
|
规则就是font-size必须要在font-family前面而且是作为声明中的最后两个值，而且font声明中必须有这两个值font还可以设置行高 |
|
|
|
line-height是一个文本属性而不是一个字体属性 |
|
行高是可选的但是他格式是这样写的 font-size/line-height |
|
例子：font:12px/12px serif; |
|
|
|
p 131页使用系统字体 |
|
|
|
p132 字体匹配 |
|
|
|
text-indent:文本缩进无法应用到行内元素； 图像之类的替换元素上也无法应用,如果设置为百分数，相对的是其父元素的宽度 |
|
line-height指的是文本行基线之间的距离而不是字体的大小，他确定了将各个元素框的高度增加或减少了多少。 |
|
line-height控制了行间距，这是文本行之间超出字体大小的额外空间。 换句话说line-height值和字体大小之差就是行间距 |
|
在应用到块级元素时， line-height定义了元素中文本基线之间的最下距离， |
|
|
|
line-height的默认值通常都是字体大小的1.2倍 |
|
当line-height值从父元素继承的时候，要从父元素计算，而不是在子元素上计算， |
|
但是当line-height的值是指定的的一个数时， 缩放因子将是继承值而不是计算值，这个数会应用到该元素及其所有子元素所以各元素都根据其自己的font-szie来计算line-height |
|
|
|
|
|
vertical-align：属性只应用于行内元素和替换元素 和表格单元 该属性不能继承 |
|
baseline|sub|super|top| text-top|middle|bottom|text-bottom|percentage |length|inherit |
|
text-transform:uppercase|lowercase|capitalize|none|inherit |
|
capitalize会对每个单词的首字母大写； |
|
text-decoration:none|underline|overline|line-through|blink|inherit 不能继承 |
|
overline会在元素的顶端画一个上划线 |
|
word-sapcing:字间隔 |
|
letter-sapcing:字符间隔 |
|
|
|
text-shadow:每个阴影都由一个颜色和3个长度值来定义，可以设置多个阴影 |
|
前两个长度决定了阴影与文本的偏移距离，第三个长度可选定义了阴影的模糊半径 |
|
模糊半径定义为从阴影轮廓到模糊效果边界的距离。 |
|
white-space:noraml|nowrap|pre|pre-wrap|pre-line|inherit |
|
|
|
direction:ltr|rtl|inherit 属性影响块级元素中文本的书写方向；表中列布局的方向，内容水平填充其元素框的方向。以及两端对齐元素中最后一行的位置，对于行内元素只有当 |
|
unicode-bidi属性设置为embed或bidi-override时才会应用direction属性。 |
|
|
|
尽管css试图处理书写方向，但是Unicode有一种更强壮的方案来处理方向性，利用属性unicode-bidi，CSS创作人员可以充分利用Unicode的某些功能。 |
|
|
|
unicode-bidi:normal|embed|bidi-override|inherit; p164 |
|
normal：元素不会对双向算法打开附加的一层个嵌套，对于行内元素，顺序的隐式重排会跨越元素边界进行。 |
|
embed:如果是一个行内元素，这个值对于双向算法会打开附加的一层嵌套，这个嵌套层的方向由direction属性指定，会在元素内部隐式的完成顺序重排， |
|
bidi-override: |
|
这会为行内元素创建一个覆盖，对于块级元素，将为不在另一块中的行内后代创建一个覆盖，这说明，顺序重排在元素内部严格按direction属性进行，忽略双向算法的隐式部分 |
|
每个元素都相对于其包含块摆放，可以这么说包含快就是一个元素的“布局上下文”对于正常的西方语言文本流中的的一个元素，包含快由最近的块级祖先框，表单元格或 |
|
行内块祖先框的内容边界构成， |
|
|
|
可以设置为auto的水平属性有witdh margin-right margin-left |
|
|
|
一般地一个元素的width被定义为从左内边界到右内边界的距离，height则是从上内边界到下内边界的距离。这些属性都可以应用到元素 |
|
|
|
</scrip> |
|
</body> |
|
</html> |