2018年8月30 w3school CSS

CSS

css指层叠样式表，把样式表添加到HTML中是为了解决内容于表现分离的问题。
内联样式> 内部样式表 > 外部样式表 >浏览器缺省设置
创建CSS
外部样式表：< link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
内部样式表：< style type=“text/css”>……< /style>
内联样式：< p style="cloor:sienna;>< /p>（慎用）
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将会从更具体的样式表中被继承过来。（组合，并且内联最大）
当使用RGB百分比时，即使当值为0时也要写%。但在其他情况下就不需要这么做了。比如说当像素为0时，不需要加单位。！！
继承问题
通过CSS的继承，子元素将继承最高级元素所拥有的属性。（Netscape4不支持继承），若p元素不想继承父元素的样式，则针对p元素单独创建规则即可摆脱父元素。
**派生选择器（上下文选择器）（li strong{}) **
ID选择器（#）
类选择 （ . ）
属性选择器（ )
[title] 对Title进行设置
[title=W3school] 对title指定值设置
[title~=hello】含有hello的词组就行，适用于由空格分隔的属性值( ）
[lang|=en] 对以en开头的属性进行设置，适用于由连字符分割的属性值(-)
[title ^=en】对以en开头的属性进行设置
[title $=en】对以en结尾的属性进行设置
[title *=en】对包含en的属性进行设置
所有背景属性都不能继承
将块元素或表元素居中，要通过在这些元素上适当的设置左右外边距来实现。
若两个不同的装饰都与同一元素匹配，胜出规则会完全取代另一值。因为text-decoration值会替换而不会累积
在对字体样式进行设置时，font-style设置字体风格。normal文本正常显示。italic文本斜体显示。oblique文本倾斜显示。
italic和oblique的区别：ilalic是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。oblique文本则是正常竖直文本的一个倾斜版本。
推荐使用em来设置字体大小 em=px/16
设置链接的样式

 1. link：普通的，未被访问的链接
 2. visited：用户已访问的链接
 3. hover：鼠标指针位于链接上面
 4. action：链接被点击的时刻

当为链接设置不同状态的样式时，按照以下次序：

1. hover必须位于link和visited之后
2. action必须位于hover之后

边框颜色
默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为color可以继承）。
透明边框： border-color: transparent;
利用 transparent ，使边框就像是额外的内边距一样；此外还有一个好处，能在需要的时候可见。
外边距合并
当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），他们的上和/ 或下外边距也会发生合并。
若没有内容填充，则上下边距会和在一起
只有在普通文档流中块框的垂直外边距才会发生外边距合并。行内框，浮动框或绝对定位之间的外边距不会合并。
CSS定位
相对定位是相对于元素在文档中的初始位置，而绝对定位是相对于最近的已定位的祖先元素，如果不存在已定位的祖先元素，那么相对于最初的包含块。