xhtml+css基础知识2

常见标签：

<div>块</div>
<img src="1.png" alt="美女"/><!-- 单标签 -->
<a href="#">a标签（链接，下载，锚点）</a>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<p>段落</p>
<strong>强调（页面展示为粗体）</strong>
<em>强调（页面展示为斜体）</em>
<span>区分样式</span>

<ol><!-- 有序列表 -->
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

<ul><!-- 无序列表 -->
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

<dl><!-- 定义列表 -->
    <dt>定义列表标题</dt>
    <dd>定义列表项</dd>
    <dd>定义列表项</dd>
</dl>

 

 

 

标签<base />是定义页面中所有链接打开方式

<base target="_blank"/>

标签<a></a>

1. href
   • 连接地址

     <a href="http://www.baidu.com/">a标签（链接）</a>

      

   • 锚点（在href里加id）

     <a href="#box1">百步飞剑(锚点)</a>
     <a href="#box2">夜尽天明</a>
     <a href="#box3">诸子百家</a>
     <a href="#box4">万里长城</a>
     <a href="#box5">君临天下</a>
     <div style="height:1000px;" id="box1">
     百步飞剑<br/><!-- 折行符 -->
     ………………………………
     </div>
     <div style="height:1000px;" id="box2">
     夜尽天明<br/><!-- 折行符 -->
     ………………………………
     </div>
     <div style="height:1000px;" id="box3">
     诸子百家<br/><!-- 折行符 -->
     ………………………………
     </div>
     <div style="height:1000px;" id="box4">
     君临天下<br/><!-- 折行符 -->
     ………………………………
     </div>
     <div style="height:1000px;" id="box5">
     万里长城<br/><!-- 折行符 -->
     ………………………………
     </div>
     

   • 下载

   •  

     <a href="css2—常见标签（上）.ppt">a标签（下载）</a>　

2. target打开方式

 

---

 

 

 

选择符：

1. 包含选择符：div里的span里的p

   <style>
   div span p{width:100px; height:100px; background:blue;}
   </style>

2. id选择符(唯一)：#box

   <style>
   #box{width:100px; height:100px; background:blue;}
   </style>

3. class选择符(可重复): .box

   <style>
   .box{width:100px; height:100px; background:blue;}
   </style>

4. 类型选择符(我觉得就是标签选择)：

   <style>
   p{width:100px; height:100px; background:blue;}
   </style>

5. 群组选择符：#box1,#box2,#box3共用一个样式

   <style>
   #box2,#box1,#box3{width:100px; height:100px; background:blue;}
   </style>

6. 通配符： *

   <style>
   *{border:1px solid red;}
   </style>

    

同级样式：默认后者覆盖前者，下面的li会覆盖掉上面的

<style>
li{height:40px;background:red;}
li{background:blue;}
</style>

样式优先级
类型(1) < class(10) < id(100) < style行间样式(1000) < js

 

 

---

 

伪类：IE6不支持a以外其它任何标签的伪类；IE6以上的浏览器支持所有标签的hover伪类；

1. link 未访问（默认）
2. hover 鼠标悬停（鼠标划过）
3. active 链接激活（鼠标按下）
4. visited 访问过后（点击过后）