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"/>

 

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