Tag Archives: css
CSS的文字font和text系列属性
有一系列属性可以改变网页文字的大小和形状，概要如下： font-family 文字使用的字体，比如宋体，Times New Roman，Arial等等 这个属性必须详细制定，不能使用偏僻的字体，要使用安全字体（比如arial，verdana和times new roman和宋体），可以同时指定许多字体，只要使用逗号分开即可。这样的用意是，如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用，因为不同的电脑拥有不同的字体。例子font-size: arial,helvetica，pc用户可以使用arial而苹果mac用户可以使用helvetica。 注意：如果字体的名称有许多单词组成，使用双引号组合，比如，font-family: "Times New Romes"。 font-size 字体的大小，要小心使用。比如标题不会和段落一样，它要用大字体，你可以使用h1h2等等。 font-weight 这个属性决定字体是否加粗。在实际运用中通常使用font-weight: bold或font-weight: normal。理论上还可以使用 bolder,lighter,100,200, 300, 400, 500, 600, 700, 800 or 900，但有些浏览器不认，仍坚持 bold和normal。 font-style 这个属性决定字体是否是斜体，可能是font-style: italic或font-style: normal。 text-decoration 这个属性决定是文本否需要下划线。可以是： text-decoration: overline，加上划线 text-decoration: line-through，加通过文本的线条。 text-decoration:underline，这应该使用在链接上，因为用户习惯认为它代表链接。 … Continue reading
CSS的color颜色
css可以处理16,777,216颜色，可以使用名字、rgb值或十六进制代码。 red红色 等同于 rgb(255,0,0) 等同于 rgb(100%,0%,0%) 等同于 #ff0000 等同于 #f00 有17个预先确定的颜色，它们是： aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent 也是一个正确的值。 rgb的三个值都是从0到255，0是最低级，255是最高级，这些值同样可以是百分比。 我们通常使用10进制即0-9，但hexadecimal使用16进制，即0到f。 十六进制三或六个数字长度前面带上#字符，三个长度是六个的压缩形式，比如#f00是ff0000的压缩，#c96是#cc9966。三位数很好理解，像rgb，第一个是红色，第二个是绿色，第三个蓝色。但六位数给于更多的颜色控制。 color和background-color 颜色可以使用color和background-color，是美国英语中"color"不是"colour"。 蓝色背景，黄色文字： h1 { color: … Continue reading
CSS 选择器 、属性、值
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。 每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。 值在冒号（不是等号）后面，分号分离属性。 body { font-size: 0.8em; color: navy; } 上面的意思是为body选择器设置font-size字体大小和color字体颜色。 所以基本的，当它作用与HTML页面时，在body标签（整个窗口中的内容）之间的文字颜色是navy字体大小是0.8ems。 长度和百分比 CSS里面有许多属性值要指定单位，但有些基本单位被使用在一些属性上，在这之前值得属性下它们。 em比如font-size:2em给于字体计算出的大小，所以2em就是实际字体大小的两倍。 px比如font-size:12px是pixel像素的单位。 pt比如font-size:12px是points镑的单位。 %比如font-size:80%是百分比 其他单位包括pc（12点西文活字）、cm（厘米）、mm（毫米）和in（英寸） 当值是零的时候，不需要单位，例如：border:0意思没有边框。 网页不是静态的、绝对的媒体。这意味着内能伸缩变形，用户应该被允许调整自己喜欢的方式，包括字体大小和屏幕大小。 因为这样，建议使用"em"和"%"在font-size上（宽度和高度），相比下px不能够在大部分浏览器改变大小，所以要少用，可以用在边框的大小上。
CSS的应用
有三种方法应用CSS 一、In-line 行内 行内样式是在html标签里直接使用style属性 <p style="color: red">text</p> 设定段落文字红色。 但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。 二、Internal 内部 使用于整个页面的植入内部样式在head标签里面，style标签包围样式。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <style type="text/css"> p { color: red; } a { color: blue; } </style> … … Continue reading
css中文字体用utf8转码
最近在用zend studio开发一个系统，在做前台设计的时候，碰到了如图的问题，一个lexical error，google了一下，aptana插件编辑器中，对于css中的cjk文字都需要使用utf编码来表示，所以把宋体改为\5b8b\4f53，因为有些浏览器无法识别cjk文字。 参考：http://lifesinger.org/blog/2009/08/font-family-in-css/
两个css立体按钮
、 第一个按钮 html代码： <a class="button" href="#"><span>Button One</span></a> css代码 a.button{ float:left; font-size:110%; font-weight:bold; border-top:1px solid #999; border-left:1px solid #999; border-right:1px solid #333; border-bottom:1px solid #333; color:#333; width:auto; } a.button:hover{ border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #999; border-bottom:1px solid #999; … Continue reading
将小型、现代的产品主页由psd转换成XHTML/CSS模板
原文地址：http://sixrevisions.com/tutorials/web-development-tutorials/minimal-and-modern-layout-psd-to-xhtmlcss-conversion 本教程将会指导你将一个photoshop网页设计转换为可以使用的HTML/CSS模板。这是web设计和代码转换系列教程的第二部分。 第一部分: 用Photoshop设计一个小型、现代的产品主页 第二部分: 将小型、现代的产品主页由psd转换成XHTML/CSS模板 demo 点击下面的图片将会看到本次制作的 demo 的效果。 开始之前 如果你还没有准备好，我们建议您阅读完这个教程系列的第一部分: 用Photoshop设计一个小型、现代的产品主页 ， 因 为第二部分需要第一部分做好了的psd文件。 如果你想跳过第一部分，你可以直接在第一部分中下载源文件，下面将会需要它才能继续。 创建文件结构，准备文件 1 在桌面上创建新的空目录，取名portfolio。 2 在portfolio目录下面继续创建images目录用于存放图片。 3 接下来创建两个空文件 styles.css和index.html 4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用Adobe Dreamweaver。 5 在文档的标签加入对styles.css的链接。可以使用如下代码： 代码段1 页面分区 以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。 6 我们将从在浏览器中居中、包含整个文档的主容器开始（也被称之为外壳（wrapper））。在容器内部内的5个div将组成一个完整的页面：这些div是：#top, #welcome, #sidebar, #content … Continue reading