`
zhou.xingbo
  • 浏览: 53475 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS相关知识

CSSGmailSpringHTML 
阅读更多

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，也就是层，来进行网页布局。

首先是页面作为最底层，放上一层背景，在背景上建立一个新层，放上logo，header，sidedar，foot，content几个块，在每个块上根据需要继续建立层。

这种方式非常自然，做起来也像搭积木一样流畅。

 

例子：

1 html

 

<html>
<head>
<title>Yeats</title>

<style type="text/css" media="screen">

</style>
</head>
<body>
<h1>When You Are Old</h1>
<pre>
When you are old and grey and full of sleep,
And nodding by the fire, take down this book,
And slowly read, and dream of the soft look
Your eyes had once, and of their shadows deep;
How many loved your moments of glad grace,
And loved your beauty with love false or true,
But one man loved the pilgrim Soul in you,
And loved the sorrows of your changing face;
And bending down beside the glowing bars,
Murmur, a little sadly, how Love fled
And paced upon the mountains overhead
And hid his face amid a crowd of stars.
</pre>

<hr>
<a href="mailto:renw1990@gmail.com">My Email</a>
</body>
</html>

 

2 css

body {font-size:20px;margin:0px;text-align:center}

#container {width:100%}

#header {
width:800px;
margin:0 auto;
height:100px;
background-color:green;
}

#mainbody {
width:800px;
height:400px;
margin:0 auto;
}

#sidebar {
float:left;
width:200px;
height:400px;
background-color:orange;
}

#content {
float:right;
width:600px;
height:400px;
color:white;
background-color:black;
}

#foot {
margin:0 auto;
height:100px;
width:800px;
background-color:yellow;
}

3 div

 

<div id="container">
  <div id="header">
    <h1>When You Are Old</h1>      
  </div>
  <div id="mainbody">

    <div id="sidebar">
      <p><br><br>index</p>
      <p>download</p>
      <p>William Yeats</p>

      <p>Contact Me</p>
    </div>
    <div id="content">
      <pre>


        When you are old and grey and full of sleep,
        And nodding by the fire, take down this book,
        And slowly read, and dream of the soft look
        Your eyes had once, and of their shadows deep;
        How many loved your moments of glad grace,
        And loved your beauty with love false or true,
        But one man loved the pilgrim Soul in you,
        And loved the sorrows of your changing face;
        And bending down beside the glowing bars,
        Murmur, a little sadly, how Love fled
        And paced upon the mountains overhead
        And hid his face amid a crowd of stars.
      </pre>

    </div>
  </div>
  <div id="foot">
    <hr>      
    <a href="mailto:renw1990@gmail.com">My Email</a>
  </div>

</div>
 

ps：

http://www.w3school.com.cn/

http://www.csszengarden.com/tr/chinese/

 

 

分享到：
| Mysql相关知识
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics