css基础

========= CSS 基础 ========

css - 空格大小写敏感
-----------------------------
class, id对大小写是敏感的

CSS - 派生选择器
li strong {
font-style: italic;
font-weitht: normal;
} //只有li下的strong标签才会采用这种格式。
-----------------------------------
ID选择器（应用的最广泛）
#red {color: red;}
<p id="red"/>//大小写必需完全一样

<div id="sidebar/>
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
-------------------------
类选择器（应用也很广泛）
selector.className.....
eg:
H1.color-red{color: red}
H1.color-yellow{color: yellow}
<H1 class="color-red"/>
可以与ID选择器互换

.classname{...}//可以在任意地方使用。
----------------------------
伪类选择器
a:link {color:#ff0000}
a:visited {color: #00ff00}
a:hover {color:..}
a:active {...}
------------------------
* 复合选择器的优先级计算(重要)
ID选择器(100) > 类选择器(10) > 标记选择器(1)
#h1 {color:red}
.h1 {...}
h1 {...}
<h1 id="h1" class="h1"/>
------------------------
复杂选择器名称的分解
#menu a.class:hover b, .special b.class{...}
<div id="#menu"
  <table class="class">
    <a >
      <b>
a.class 表示 class里面的a
-----------------------------------
行内样式: 建议不常用
<p style="">
内嵌式： 不能共享
<style> ... </style>
链接式： 应用最广
<link href="1.css" type="text/css" rel="stylesheet"/>
导入式
<style>
  @import
</style>
--------------------------------------
CSS 背景
p {background-color: gray;}
可以为所有元素设置背景色，不继承
不指定则为：trasparent，透明的
body {background-image: url(/i/1.gif);}
----------------------------------------
CSS 的盒子模型
如图片：盒子模型.bmp

CSS 外边距合并，只有上下才合，左右不合
盒子模型的特性：
边界值margin可为负
边框border....

边框是实的，而填充和边界是虚的。
盒子模型只能设置边枉颜色和背景
大部分盒子模型默认值为0。
---------------------------------------