- 浏览: 52342 次
- 性别:
- 来自: 北京
最新评论
-
lehehe:
基站定位,使用接口很方便的,这里有免费的接口,你可以试试,ht ...
google API基站定位 -
donkeyji:
yongqi 写道hi,你好,请教一个问题我在安装python ...
python zeromq 介绍 -
yongqi:
hi,你好,请教一个问题我在安装python的zeromq包时 ...
python zeromq 介绍 -
mimicom:
看着晕乎乎的....
python zeromq 介绍 -
raojl:
不错,好像zeromq就在2011年一夜之间火了,特别的blo ...
python zeromq 介绍
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.csszengarden.com/tr/chinese/
发表评论
-
rails model best practices
2011-05-11 09:50 0name_scope :active, :conditions ... -
Ruby标准库
2011-05-10 15:02 0ruby标准库一览 文本 base64 yaml ... -
rails3测试理解
2011-04-30 10:23 1307Why RSpec? Clear, concise and ... -
linux系统备注
2011-04-29 10:49 1142bin "Essential binaries&qu ... -
vim备注
2011-04-29 10:03 0vim -
ruby
2011-04-28 10:33 1056Ruby编程基础知识概括: 1. ruby is an ob ... -
Javascript简明手册
2011-04-25 10:07 0Javascript和C++,java,Python一样是一种 ... -
KVM
2011-04-24 09:36 01 kvm安装 前期准备 ... -
Jquery
2011-04-22 16:10 01. jQuery解决了什么样的问题? -
Mysql相关知识
2011-04-22 14:30 11431. Mysql常规使用 安装 server: sudo ... -
PF_RING
2011-04-14 14:38 20531. PF_RING 安装 A clean insta ... -
thrift实践
2011-04-08 11:52 14581 安装thrift 通过svn获得源码 svn co h ... -
Cmake + protobuf-c + python自定义协议通信
2011-03-29 11:25 4772Cmake是一套跨平台的工程构建工具 sudo apt ... -
清除历史记录
2011-03-18 10:40 01. 选型 [语言] C++ [平台] wind ... -
pyzmq 使用
2011-03-16 16:02 50531. The Socket API Creating an ... -
nginx X-Accel-Redirect实现文件下载权限控制及rails devise实现
2011-03-14 13:52 3276问题1:Nginx的X-Accel-Redirect? 答: ... -
python zeromq 介绍
2011-03-10 10:38 11115简介: ZeroMQ并不是一个对socket的封装,不能用它 ... -
fabric自动部署
2011-03-09 14:00 2599Fabric commands run - run a ... -
nagios的工作场景及使用说明
2011-03-08 10:15 2029问题1:nagios配置文件说明? 答: comman ... -
在ubuntu下安装nagios监控平台
2011-03-07 16:56 1571问题1:Nagios是什么? 答:是一个监视系统运行状态和网 ...
相关推荐
学习HTML与CSS相关知识学习HTML与CSS相关知识学习HTML与CSS相关知识 学习HTML与CSS相关知识学习HTML与CSS相关知识学习HTML与CSS相关知识 学习HTML与CSS相关知识学习HTML与CSS相关知识学习HTML与CSS相关知识 学习HTML...
里面将知识点分了一下类。 详情
这里面讲述了css的一些基本知识点和一些常见的问题,在一学习过程中可能会用到
DIV+CSS教程——第一天XHTML_CSS基础知识
CSS理论知识,主要是对CSS的全面介绍,希望读者看后对CSS的语法、结构、应用有一个全面的了解,教你如何利用Dreamweaver4灵活运用CSS在网页中
光标形状 html css css知识 网页知识
自学JS/HTML5/CSS相关知识
整理好的一份关于css的知识大纲,希望能够帮助到大家,可以用来复习回顾
讲解一些刚入门的有关css的知识点,有助于我们能更容易的学懂css语言,例如表单制作,框架等等。
学习CSS基础知识时自己做的笔记,希望帮到有缘人
html,css,jsp相关知识总结,便于进行html,css,jsp的学习
阅读建议:此资源通过三个不同角度3D效果的制作,主要将CSS3D呈现的相关知识融入其中,让我们感受到3D的制作效果。我们在查看源代码时,可以将相关参数进行调整,从而对相关知识进行熟悉以及复习。
文档梳理了css知识点,并简要介绍了css的使用——冲突说明、选择器、颜色、背景、图像等属性。
CSS初级教程包括:CSS语法,CSS颜色,CSS文本与CSS字体,CSS边框,CSS列表等基础知识. CSS高级教程包括:CSS选择符,CSS相关特性,CSS盒模式,标准网页设计与页面排版,CSS伪类与伪元素等. 通过梦之都的CSS教程,你将学会怎样...
web前端的知识:css基础知识代码主要都是一些基础的小知识
CSS的基础知识,适合初学者参考此资料来进行学习。
常用css知识 html css css知识
自己总结的CSS相关知识骨架,互相学习,共同进步!!!
CSS