CSS 教程

CSS 教程

通过使用 CSS 我们可以大大提升网页开发的工作效率!

在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。

CSS 实例

body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:Times New Roman; font-size:20px; }

什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件
  • 多个样式定义可层叠为一个

样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。不要在属性值与单位之间留有空格

CSS声明总是以分号(;)结束,声明总以大括号({})括起来

CSS注释以 /* 开始, 以 */ 结束注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “class”选择器。

CSS 中 id 选择器以 “#” 来定义。Remark ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class类选择器以一个点”.”号显示:

外部样式表调用

<head> <link rel=stylesheet type=text/css href=mystyle.css> </head>
内部样式表调用
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url(“images/back40.gif”);} </style> </head>
内联样式,就是直接改变样式
<p style=color:sienna;margin-left:20px>这是一个段落。</p>

优先级如下:

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
  • 无序列表 ul – 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 ol – 列表项的标记有数字或字母

CSS Border(边框) CSS 轮廓(outline)属性 CSS margin(外边距) CSS padding(填充)

visibility:hidden不显示元素display:none不解析代码

属性选择器

[title] { color:blue; }
盒子模型
  • Margin(外边距) – 清除边框外的区域,外边距是透明的。
  • Border(边框) – 围绕在内边距和内容外的边框。
  • Padding(内边距) – 清除内容周围的区域,内边距是透明的。
  • Content(内容) – 盒子的内容,显示文本和图像

边框属性及简写

  • border-width
  • border-style (required)
  • border-color
border:5px solid red;
padding:25px 50px 75px 100px;上右下左。padding:25px 50px 75px;上,左右,下。 padding:25px 50px;上下,左右。padding:25px;周围
分组选择器
h1,h2,p { color:green; }
通过鼠标悬浮和隐藏技术实现导航条。

Related Post

发表评论

电子邮件地址不会被公开。 必填项已用*标注