当前位置: 代码迷 >> HTML/CSS >> css学习初记(一)
  详细解决方案

css学习初记(一)

热度:268   发布时间:2012-10-09 10:21:45.0
css学习小记(一)

1.em单位是相对于包含它的规则而言

?

2.css用于将网页的内容与表现分离,所有的核心,框架性的内容放在(x)html文件中,而实际样式则是放在样式表文件中

?

3.关于颜色:http://en.wikipedia.org/wiki/Web_colors

? ?web安全颜色主要有216种,表示在任何平台上都能正常地显示216种颜色,当然会逐渐被淘汰

? ?css语言和HTML4规范一样都定义了16种具名颜色。加上css2.1添加的orange,一共是17种具名颜色。如图:

?

黑色(black) #000000
藏蓝色(navy) #000080
绿色(green) #008000
海蓝色(teal) #008080
银色(silver) #c0c0c0
蓝色(blue) #0000ff
酸橙色(lime) #00ff00
浅绿色(aqua) #00ffff
绛紫色(maroon) #800000
紫色(purple) #800080
橄榄色(olive) #808000
灰色(gray) #808080
红色(red) #ff0000
紫红色(fuchsia) #ff00ff
黄色(yellow) #ffff00
橙色(orange) #ffa500
白色(white) #ffffff

4.关于web调色板的一些基础网站。

ColorBlender:http://colorblender.com

Color Palette Generator: www.degraeve.com/color-palette/index.php

Color Lovers:www.colourlovers.com

Color Scheme Generator 2 :wellstyled.com/tools/colorscheme2/

深入的站点:

www.web-colors-explained.com

http://en.wikipedia.org/wiki/Web_colors

?

5.gif格式是背景图像最理想的图像格式,它通过使用特有的压缩模式使得文件大小达到最小

gif一般用来保存那些具有纯净颜色块得图像,比如说简单的logo或者简单的模式,对于大图像而言,它主要用来保存不带渐变色的图像

?

jpeg一般采用照片图像的有损压缩的标准方法,在反复的编辑和保存过程中,jpeg文件将逐渐退化,这一点和对照片副本进行再复制有点像,照片图像最好是以无损的非jpeg格式保存,如tiff

?

?6.背景图像:

重复:background-repeat:no-repeat/repeat-x/repeat-y/

定位:background- position:top left/top center/top right;center left/center center/center right;bottom..

x-%/y-%;x-pos/y-pos

粘连:background-attachment:scroll/fixed

?

缩写:background:颜色、图像、位置、重复

?

7.列表:

无需列表本身距离容器的上边框约10像素(默认margin)。大部分浏览器将列表项置于距离无序列表左边框30像素处(默认padding);

内联列表(display:inline) 不显示默认列表项目符。

?

?特定列表项目符:list-style-type

默认情况下,列表以小实心圆作为列表项目符,即使容器没有内部padding,列表距左边框也约有30像素。列表项目符一下五种经常使用:

none;disc;circle;square;latin;

另外三种:
upper-alpha:A,B,C,D,E

lower-alpha:a,b,c,d,e

upper-roman:I II III IV

?

ul设定的是它的第一级子列表的颜色,背景图像需要在每一级列表中设定。

ul{

? color:#000;

? font-size:20px; ? ? ?//或者字体也可以在li中进行设定

}

li{

? background-image:url(pic/o.gif);

}

?

8.表格

使用表格的诀窍是,只在必要的时候使用表格,然后将它们设计的完全可以理解并且看上去非常漂亮。

表格易于访问的适当要求:《web Accessibility:web standards and Regulatory compliance,Jim Thatcher等著【friends of ED,2006】包括了一些可访问表格的重要信息。

?

【样式表在使用的过程中一定要考虑被移除后出现的后果,这是一种比较成熟的设计思维】

各自都有定义的那一条声明,可以在公共声明中删除。

?

border-color:#ccc #666 #000 #ccc ------------灰色边框

border-color:#fff #aaa #666 #fff--------------三维边框

?

css不使用外边距来添加间隔;

?

有关表格模型和相关浏览器的支持信息,在www.w2.org/TR/REC-CSS2/tables.html中可以查看

?

border-collapse:collapse可以消除表格之间的间隔

类主要是用来在整体中修改局部的。?

padding是为了让元素内部的内容看起来不聚成一团,更舒展一些。

margin是用来定义元素与元素之间的距离。?

?

9.定义列表

所有的定义列表由三个基本元素组成:容器<dl>,定义项<dt>,定义描述<dd>;

定义列表十分灵活,与无序列表合用,功能会更强大。但记住,搜索引擎一般不把定义列表的内容用期望的方式编入索引中。主要是因为虽然给<dt>定义了样式,但是Google并不把它看看成是标题。

可以在定义描述中使用块级元素,但不能在定义项元素中使用块级元素。

推荐阅读:Max Design网站: www.maxdesign.com.au/presentation/definition,上的Definition lists-misused or misunderstood这篇文章。有很多经典css应用的例子

?

10.表单

一、和HTML不同,XHTML要求所有的<input>元素都要有一个自封闭的斜杠。

text

maxlength

size

checkbox

radio

<input type="submit" />

<textarea></textarea>

<select></select>

为了保证表单设计的灵活性,以及希望一些视力较差的甚至盲人用户也能使用表单,以下的元素比较有效

<fieldset>主要目的是将<input>域按节分组,相当于一个容器。在默认情况下,<fieldset>在内容周围画一个简单的边框,以定义表单节。不用说,由于<fieldset>担当了主父元素,它需要承担很多应用到表单的样式。

<legend>元素的功能与用于识别表格的<caption>元素作用很相似。

<lable></label>可以确保表单有输入焦点,并且具有良好的结构

tabindex属性允许用户只用键盘(通常用Tab键)来导航表单元素的输入焦点。通常按照数字顺序,为每个属性给一个数字值。tabindex是覆盖浏览器默认的顺序并指定你所希望的顺序的工具。

?accesskey

?

二、表单在不同的浏览器上有不同的显示方式,而且他们也给form元素应用了它们各自特定的margin和padding值。

设定width=100%可以保证所有的输入元素延伸并填满包含他们的元素

?

?关于表单的推荐阅读:《styling Form Controls》(www.456bereastreet.com/archive/200409/styling_form_controls)Roger Johansson

?

?

11.文字的属性

?大小(font-size),颜色(font-color),字体(font-family)

行距(line-height:150%),间距(letter-spacing:2px)

font-weight:bold,font-style:normal/italic/oblique

大小写字母:font-variant:normal/small-caps (用于将文本显示为小型大小写字母)

text-transform:none/uppercase(用于将所有的字符显示为大写字母但是不缩小字号)/capitalize(可以保证任何单词的首字符都显示为大写字符)

?

12.padding缩写为padding:2px 10px;时,表示上内边距为2px,左内边距为10px。

容器A和容器B,容器B在容器A中,注意设置容器A的内边距和设置容器B的外边距的区别。

  相关解决方案