CSS式样学习笔记之一：基础知识
日期：2014-05-17 浏览次数：20679 次
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="选择器.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"/>
?
６对ＣＳＳ文件进行引用会影响性能，因此，一般最好使用一个ＣＳＳ文件，也可以分成多个，在需要使用的时候在去加载它。尽量减少对服务器的开销。
?
?
