CSS 边框 CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框 红色底部边框 圆角边框 左侧边框带宽度，颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式 border-style 值: none: 默认无边框 dotted: dotted:定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 double: 定义两个边框。 两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值 尝试一下: 边框宽度 您可以通过 border-width 属性为边框指定宽度。 为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px,…
CSS 表格 使用 CSS 可以使 HTML 表格更美观。 Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Königlich Essen Philip Cramer Germany Laughing Bacchus Winecellars Yoshi…
CSS 列表 CSS列表属性作用如下： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中，有两种类型的列表： 无序列表 – 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 – 列表项的标记有数字或字母 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。 不同的列表项标记 list-style-type属性指定列表项标记的类型是：: 实例 ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} 一些值是无序列表，以及有些是有序列表。 作为列表项标记的图像 要指定列表项标记的图像，使用列表样式图像属性： 实例 ul { list-style-image: url(‘sqpurple.gif‘); } 上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。 如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下 浏览器兼容性解决方案 同样在所有的浏览器，下面的例子会显示的图像标记： 实例 ul…
CSS 链接 不同的链接可以有不同的样式。 链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： a:link – 正常，未访问过的链接 a:visited – 用户已访问过的链接 a:hover – 当用户鼠标放在链接上时 a:active – 链接被点击的那一刻 实例 a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ 当设置为若干链路状态的样式，也有一些顺序规则： a:hover 必须跟在 a:link 和 a:visited后面…
CSS 字体 CSS字体属性定义字体，加粗，大小，文字样式。 serif和sans-serif字体之间的区别 在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读 CSS字型 在CSS中，有两种类型的字体系列名称： 通用字体系列 – 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”） 特定字体系列 – 一个特定的字体系列（如 “Times” 或 “Courier”） Generic family 字体系列 说明 Serif Times New Roman Georgia Serif字体中字符在行的末端拥有额外的装饰 Sans-serif Arial Verdana “Sans”是指无 – 这些字体在末端没有额外的装饰 Monospace Courier New Lucida Console 所有的等宽字符具有相同的宽度 字体系列 font-family 属性设置文本的字体系列。 font-family…
CSS 文本格式 文本格式 This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the link. 文本颜色 颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定：…
CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position 背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中: 实例 body {background-color:#b0c4de;} CSS中，颜色值通常以以下方式定义: 十六进制 – 如：”#ff0000″ RGB – 如：”rgb(255,0,0)” 颜色名称 – 如：”red” 以下实例中, h1, p, 和 div 元素拥有不同的背景颜色: 实例 h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} 背景图像 background-image 属性描述了元素的背景图像. 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.…
CSS 创建 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。 如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部： <head> <link rel=“stylesheet“ type=“text/css“ href=“mystyle.css“> </head> 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子： hr {color:sienna;} p {margin-left:20px;} body {background-image:url(“/images/back40.gif“);} 不要在属性值与单位之间留有空格（如：”margin-left: 20 px” ），正确的写法是…
CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式，你需要在元素中设置”id” 和 “class”选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。 以下的样式规则应用于元素属性 id=”para1″: 实例 #para1 { text-align:center; color:red; } ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 class 选择器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS…
CSS 语法 实例 查看 查看 CSS 实例 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 CSS 实例 CSS声明总是以分号(;)结束，声明组以大括号({})括起来: p {color:red;text-align:center;} 为了让CSS可读性更强，你可以每行只描述一个属性: 实例 p { color:red; text-align:center; } CSS 注释 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。 CSS注释以 “/*” 开始, 以 “*/” 结束, 实例如下: /*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; }