日期:2014-05-17  浏览次数:20581 次

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

1 XHTML:指的是Extensible Hypertext Markup Language;

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

?

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

?

3常用的样式选择器

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

  A类型选择器

    body {
??       font-family: Arial, Helvetica, sans-serif;
       }

    h3{
      font-weight:bold;
     }

?

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

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

  B后代选择器

   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>

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

  C ID选择器,用#号表示

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

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

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

  D? 类选择器用.表示

  .datePosted{color:green;}

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

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

  E通用选择器*

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

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

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

???? F子选择器和相邻同胞选择器

 #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>

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

?

4对样式表进行注释

?

?? body{

?

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

??????? }

?

5在页面中引入样式表

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

?

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

?

?