css禅意花园(一)

Posted 2023-03-26

参考技术A 第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）。反之亦然。