初学css

我是一个系统工程师&MySQL DBA, 所以页面设计一直不是自己擅长的。对于页面设计就懂点非常基础的。

最近一直在看<dom scripting>这本书,一本比较基础的书,第二章有很多css的内容。于是就当css基础来学了。

css的内容是加在<head>里面的<style>部分的。一个简单的css内容如下:





<title>Shopping list</title>

p{
color: yellow;
font-family: "arial", sans-serif;
font-size: 1.2em;
}
li{
color: blue;
font-size: 1em;
}
body{
color: white;
background-color: black;
}
.special{
font-style: italic;
color: red;
}
h2.special{
text-transform: uppercase;
}
#purchases{
border: 1px solid white;
background-color: #333;
color: #ccc;
padding: 1em;
}
#purchases li{
font-weight: bold;
}



<h1>What to buy</h1>
<p>Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
<p class="special">This paragraph has the special class</p>
<h2 class="special">So does this headline</h2>



其中大括号外的p,li,body等等这些都是表示匹配的对象,大括号里面的都是匹配的内容。

比如p 就是针对了

<p class="special">This paragraph has the special class</p>

而.special 实际表示的就是*.special,就是匹配所有

<p class="special">This paragraph has the special class</p>
&lt;h2 class=&quot;special&quot;&gt;So does this headline&lt;/h2&gt;

因为这2行实际就是p.special和h2.special。看来.这种表示法是来表示class name的。

 

而最后一种#purchases应该就是表示id name,比如这里就是匹配了

<ul id="purchases">

最后我们看到很少的Html代码就能表现出来如下这种样子:

 

css的存在就是希望把html中用来表示的部分分离开来,这样以后就可以方便的调整这个页面的格式,就算是不改变这个html文件内容,而只需要更改css部分。

当然css的内容还有很多,远不止这些,今天问公司里借了<css禅意花园>还没好好看呢,望能提高自己的html页面水平。

 

 

###########################################

Best regards
Timo Seven
blog: http://www.timoseven.com
twitter: http://twitter.com/zauc
Linux System Admin & MySQL DBA

关于 Timo
XNIX SA & MYSQL DBA

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: