html+css 常识

* 创建CSS 样式的三种方式

1, 加载外部样式.css文件

<link rel="stylesheet" type="text/css"     href="mystyle.css" /> 

 

2, 写入style标签内

<style type="text/css">
body{color:red}
</style>

 

3, 写入要设置CSS样式的标签内部

<p style="color: red; margin-left: 20px"> 
    This is a text
</p> 

 

 

 

* CSS 语法由三部分构成：选择器、属性和值：

          selector {property: value}

   选择器 (selector) 通常是你希望定义的HTML元素或标签，属性 (property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）,例如：

            body {color: blue} 

   当属性值多个时用分号; 隔开

如:

             body{color:blue;font-size:11px}

 *CSS选择器的使用方式

1, 直接写入标签名 

   <span>xxx</span>
   span{color:red}

 

2, id 选择

   <span id="ff">xxx</span>
   #ff{color:red}

 

3, class 选择

   

<span class="ff">xxx</span>

 

   样式选择   .ff{color:red}

4，class 和 id 的区别

     class 一般 可以作用于 id 的子标签， 但是id 不作用于class的子标签, 所以一般最高层的可以用ID其他所        包含的使用class

<div id="a">
	<div class="aa">
		<div class="aaa">
			xxx
		</div>
	</div>
</div>

 5, 如果选择器之间用“空格” 隔开 表示 前一个 标签下的子标签

   

<div id="a">
	<div class="aa">
		<div class="aaa">
			xxx
		</div>
	</div>
</div>
#a .aa .aaa{
	
}

   如上 表示 id="a" 下面的 class="aa" 下面的 class="aaa"

 

6 如果选择器之间 没有“空格” 直接紧贴写 , 表示当前标签

<div class="b">
</div>
div.b{
	color:red
}

   如上，div.b 指定的就是一个 class="b" 的div 标签

7 如果 选择器之间 用 “逗号（，）” 隔开，表示多选选择器，即所设置的样式给这些选择器都有指定

<div class="a"></div>
<div class="b"></div>
.a,.b{
	color:red;
}

   如上表示 class="a"的标签 和class="b" 的标签都起作用这个标签