CSS样式学习笔记之一：基础知识

1 XHTML：指的是Extensible Hypertext Markup Language;

  (X)HTML: 这的是XHTML和HTML的结合

 

2 浏览器根据区分DOCTYPE来区分要使用哪个ＤＴＤ，进而进行网页的解析。

 

３常用的样式选择器

--------------------------------------------------------------------------------------------

　　Ａ类型选择器

　　　　body {    　　　　　 font-family: Arial, Helvetica, sans-serif; 　　　　　　　} 　　　　h3{ 　　　　　　font-weight:bold; 　　　　　}

 

　　　　<h3>Zeldmain.com turns 10</h3>

--------------------------------------------------------------------------------------------

　　Ｂ后代选择器

　　　li a {text-decoration:none}

　<ul id="mainNav">         <li><a href="##">Home</a></li>         <li><a href="##">About Us</a></li>         <li><a href="##">Contact</a></li>         <li><a href="##">XXXX</a></li>     </ul>

--------------------------------------------------------------------------------------------

　　Ｃ　ＩＤ选择器，用＃号表示

　　#mainContext h5{font-size:10px;}

　　<div id="mainContext">         <li><h1>This is the H5 Test</h1></li> 　　</div>

-----------------------------------------------------------------------------------------------

　　Ｄ  类选择器用.表示

　　.datePosted{color:green;}

　　<p class="datePosted">Another for Jeffrey as zeldmain.com</p>

-----------------------------------------------------------------------------------------------

　　Ｅ通用选择器*

   *{      padding:50;/*填充*/      margin:50 /*页边的空白,边缘*/     }

<link href="&#36873;&#25321;&#22120;.css" rel="stylesheet" type="text/css"/>

-----------------------------------------------------------------------------------------------

     Ｆ子选择器和相邻同胞选择器

　#nval li *{background-image:url(aa.gif)no-repeat left top;} 　#nval li *{background:background-repeat;}

　　<ul id="navl">         <li>Home</li>         <li>Services             <ul>                 <li>Design</li>                 <li>Design</li>                 <li>Design</li>             </ul>         </li>         <li>                Contact Us            </li>     </ul>

***相邻同胞选择器*****

h1 + p{font-weight:bold;}

    <h1>main Heading</h1>     <p>First Paragraph</p>     <P>Second Paragraph</p>

-----------------------------------------------------------------------------------------------

 

４对样式表进行注释

 

   body{

 

             font-size :67.5%    /*字体的大小*/

        }

 

５在页面中引入样式表

　<link href="样式表路径.css" rel="stylesheet" type="text/css"/>

 

６对ＣＳＳ文件进行引用会影响性能，因此，一般最好使用一个ＣＳＳ文件，也可以分成多个，在需要使用的时候在去加载它。尽量减少对服务器的开销。