CSS相干知识
日期：2014-05-17 浏览次数：20718 次
CSS相关知识
1. CSS是一种为结构化文档添加样式的计算机语言
?
使用场景1：一种样式重复使用。Do not Repeat Yourself.
使用场景2：简化网页设计
如：
?
<style type="text/css">
p {
text-align:center;
}
p.red {
color:red;
font-size:24px
}
p.purple {
color:purple;
font-size:18px
}
p.blue {
color:blue;
font-size:12px
}
p.left {
text-align:left;
}
</style>
?
?
?
<p class="red">It was the best of times, it was the worst of times,</p> <p class="purple">it was the age of wisdom, it was the age of foolishness,</p> <p class="blue">it was the epoch of belief, it was the epoch of incredulity</p> <p class="blue">it was the season of Light, it was the season of Darkness,</p> <p class="purple">it was the spring of hope, it was the winter of despair,</p> <p class="red">we had everything before us, we had nothing before us,</p> <p class="red">we were all going direct to Heaven, we were all going direct the other way</p> <p class="purple">in short, the period was so far like the present period,</p> <p class="blue">that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only. </p> <p class="left">-- Charles Dickens</p>
?
?
做成一个外部链接
CSS为什么叫做层叠样式表，对样式的设定可以是多层的，而究竟采用哪一层采用就近原则。
?
2. CSS与DIV
内联样式
?
<body> <h1 style="font-size:12pt;color:blue">A robot may not injure a human being or, through inaction, allow a human being to come to harm. </h1> </body>
?嵌入样式
?
<head>
<style type="text/css">
h1 {font-family:宋体;font-size:12pt;color:blue}
</style>
</head>
<body>
<h1>A robot must obey orders given it by human beings except where such orders would conflict with the First Law.</h1>
</body>
?
?外联样式(推荐)
?
<link rel="stylesheet" href="h1.css" type="text/css"> </head> <body><h1>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law. <head></h1></body>
? h1.css
?
h1 {font-family:宋体;font-size:12pt;color:blue}
?
?
CSS语句格式
选择符{属性：值} 如： p {font-size:16}
?
html选择符
class选择符，如：
?
<head>
<style type="text/css">
.center {text-align:center;color:blue}
</style>
</head>
<body>
<h1 class="center">The Creation of éa</h1>
<pre class="center">
Only in silence the word,
only in dark the light,
only in dying life:
bright the hawk's flight on the empty sky.
</pre>
</body
?
ID选择符，如：
?
<head>
<style type="text/css">
#title{text-align:center;color:blue}
</style>
</head>
<body>
<p id="title">To the time to life, rather than to life in time </p>
</body>
?
?包含选择符，如：
?
<head>
<style type="text/css">b
table p{font-size:20;color:red}
</style>
</head>
<body>
<table>
<tr><td><p>The Childhood Of Humankind Ends</p></td></tr>
</table>
<p>The Childhood Of Humankind Ends</p>
</body>
?
?组合选择符，如：
?
<style type="text/css">
h1,h2,h3{color:red}
</style>
?
?
DIV--层布局
传统的网页布局是用表格（table）来做的，整张网页其实就是一个大的嵌套的表格：简陋网页用表格来做布局还是相当方便的，不过当网页内容多起来，表格的嵌套会变的非常复杂。
?
另外一种常用方法是采用div，也就是层，来进行网页布局。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
