css禅意花园(一)

html-css06

css禅意花园(一),第1张

第1章结构

 1、 带有语义的标记 ,选择何种HTML标签取决于标签本身的语义,而不是其默认显示出的样式。使用CSS进行设计时的主要任务之一就是从编写合法的、带有良好结构并拥有语义的HTML文档开始。

2、 创建良好的标记   选择DOCTYPE,指定语言和字符集,指定标题,选择恰当的元素,避免过度使用div和span,尽可能少用标签,适当使用class和id(class 和id可以选用字母或数字,下划线命名,但是必须以字母开头)

UTF-8是一种Unicode,Unicode是一种流行的国际性编码方案,使用UTF-8好处是,不同的字符集的多种语言,例如法语、日语、阿拉伯语和希腊语等,将能够共存于同一张页面中。

第2章  设计

在css中使用的颜色,css支持17种颜色分别为black(黑色)、sliver(银色)、gray(灰色)、white(白色)、maroon(栗色)、red(红色)、purple(紫色)、fuchsia(紫红色)、green(绿色)、lime(鲜绿色)、olive(橄榄色)、yellow(黄色)、navy(藏青色)、blue(蓝色)、teal(蓝绿色)、aqua(浅蓝绿色)、orange(橙色)。

RGB(绝对值表示) 红(Red ,R)R,绿(Green,G),蓝(Blue,B)三种颜色的绝对值来描述某种颜色。RGB值(百分比表示)如:color:rgb(93%,51%,93%)表示紫色 (十六进制值)如color:#0000FF;(十六进制简写值)#ff6699 ->#f69

使用CSS的关键之处是将页面的表现形式从页面结构中分离出来

将HTML结尾部分的照片图像定位到页首。 绝对定位在处理居中时并不那么方便。shea使用了一种非常有用的技巧来处理这个问题:首先将父元素绝对定位于页面的最左边,并将其宽指定100%,在水平方向占满整个浏览器窗口。然后将其子元素,设置居中。

例如:#eDiv1{

position:absolute

top:41px

left:0

text-align:center

width:100%

}

#eDiv1 span{

background:transparent url(aa.jpg) top left no-repeat

display:block

margin-left:auto

margin-right:auto

height:123px

width:770px

}

如果不想绝对居中,为元素加上一定的内边距(padding)能够增加元素的总宽度,但是这个偏移量的值在指定到内边距时要加倍计算——因为在给元素添加内边距的同时也增加了元素的总宽度。还有内边距要添加在与期望偏移方向相反的一侧,例如若要让在正中央图像像左移动,那么应该为图像添加右侧的内边距值(padding-right)。反之亦然。

1.是一种银灰色,或者说是银色,或者可以说是灰色,或者是铁灰色都可以。2.#ccc这个编号是CSS设置的颜色编号。根据每个编号来对应不同的颜色。是一种属性设置的编号。3.每个编号对应一个颜色。每个颜色只有一个标准值。标准颜色不可以更改或者是替换,一般都会有一个标准,超过标准范围的话,都不认定是这个颜色。4.除了这个,还有潘通色号,也是一种颜色的编号。除了数字,英文字母,还有英文一起来表达一种颜色的具体的颜色。每个颜色都有固定的标准保证所有说到这个颜色的人们都知道是哪种颜色,并且知道如何跟进。5.而且这个颜色编号是在慢慢增加的,每年都会有新的颜色值产生,因为会有新的时尚的创新的颜色来丰富这个记录。

<fieldset><legend style="position:absoluteleft:20px">户籍地址</legend><p>this is p1</p><p>this is p2</p></fieldset>

参考以上代码,说明下:<fieldset>就是那个框框,<legend>就是“标题”,

style="position:absoluteleft:20px"是样式,让"标题"绝对定位并右移20像素(如果你希望的话,20可以改成200)。

针对补充问题:

可以方角,虽然据说<fieldset>在不同的主题下可能会在圆角方角之间作出不同有选择,但有一个办法一定能让它方角显示,就是加样式,示例如下:

<fieldset style="border:silver solid 1px"><legend style="position:absoluteleft:20px">户籍地址</legend><p>this is p1</p><p>this is p2</p></fieldset>

其中你要换的可能只有颜色,silver是银色,你可以把它换成red,black,#CCCCCC等。