CSS全称Cascading Style Sheet。层叠式样式表。
一、CSS的四种实现方式：
1.内嵌式：
<style type="text/css">
<!--
CSS代码段
-->
</style>
2.外链式：
<link href="*.css" rel="stylesheet" type="text/css">
3.导入式
<style type="text/css">
<!--
@import url("*.css");
-->
</style>
3.属性式：
<div style="position:absolute; width:200px; height:115px; z-index:1; left: 209px; top: 154px;"></div>
二.CSS的定义：
选择对象{属性1:值1;属性2:值2;属性3:值3;属性n:值n……}
如：
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
三.四种选择对象
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊对象 (a:hover a:link a:visited a:active)
1.HTML selector
HTML selector就是HTML的置标符，如：DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。
例：
<html>
<head>
<title>艺网CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
td
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td>艺网--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族设计风格 网聚全球艺术精华</td>
</tr>
</table>
</body>
</html>
注意：在<TD>中没有应用什么，其中文字自动变红色。
2.class selector
定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class="classname"”的置标符。
例：
<html>
<head>
<title>艺网CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.fontRed
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td class="fontRed">艺网--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族设计风格 网聚全球艺术精华</td>
</tr>
</table>
</body>
</html>
注意：在第二个<TD>中没有“class="fontRed"”，所以文字没有变红色。
3.ID selector
定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID="classname"”的置标符。
例：
<html>
<head>
<title>艺网CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
#fontRed
{
color: #FF0000;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td ID="fontRed">艺网--ArtHtml.com</td>
</tr>
<tr>
<td>探索民族设计风格 网聚全球艺术精华</td>
</tr>
</table>
</body>
</html>
注意：在第二个<TD>中没有“ID="fontRed"”，所以文字没有变红色。
4.特殊对象
特殊对象包括四种，是针对链接对象设置的:
a:hover 鼠标移上时的超链接
a:link 常规，非访问超链接
a:visited 访问过的超链接
a:active 鼠标点击时的超链接
特殊对象的作用范围是所有<a>置标符（这句话有待商榷，因为下面很快就有一种方法可以把“所有”两个字推翻）。
例：
<html>
<head>
<title>艺网CSS教程 作者：木子李</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
a
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<table width="300" border="0">
<tr>
<td><a href="http://www.ArtHtml.com">艺网--ArtHtml.com</a></td>
</tr>
<tr>
<td>探索民族设计风格 网聚全球艺术精华</td>
</tr>
</table>
</body>
</html>
注意下面，很有用！！！
a.classname:hover
a#IDname:hover
这两种写法，是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class="classname"”或“ID="IDname"”的<a>置标符。这种写法，可以帮助你在同一页面中实现多种a:hover效果，可以看一下艺网(http://www.ArtHtml.com)的主页上导航栏文字与普通文章标题在鼠标时的区别。
四.应用：
1.置标符 自动应用
2.特制类 class="NAME"
3.ID ID="IDname"
4.特殊对象 自动应用
五.CSS属性
CSS的属性有很多，像上文中用到最多的color，表示文字的颜色。background-color表示背景色。这个是最主要的，但是因为没有什么难度，参考一下相关手册就可以了。
CSS属性参考：http://www.arthtml.com/eNews/news/200502/0011_0000000271.html
CSS 标签属性/属性
行为属性 behavior
字体和文本属性 direction*
direction
font
font-family
font-size
font-style
font-variant
font-weight
ime-mode
layout-grid
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
letter-spacing
line-break
line-height
min-height ++
ruby-align
ruby-overhang
ruby-position
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow ++
text-transform
text-underline-position
unicode-bidi
vertical-align
white-space**
word-break
word-spacing ++(于 Macintosh 版本 4.0 中可用)
word-wrap
writing-mode
颜色和背景属性 background-attachment
background-color
background-image
background-position
background-position-x
background-position-y
background-repeat
color
版面属性 border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse*
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
clear
float
layout-flow
margin
margin-bottom
margin-left
margin-right
margin-top
padding
padding-bottom
padding-left
padding-right
padding-top
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
table-layout*
zoom
分类属性 display
list-style
list-style-image
list-style-position
list-style-type
定位属性 bottom*
clip
height
left
overflow
overflow-x
overflow-y
position
right*
top
visibility
width
z-index
打印属性 page**
pageBreakAfter
pageBreakBefore
滤镜属性 filter
伪类和其它属性 :active
@charset
cursor
:first-letter**
:first-line**
@font-face
:hover
@import
!important
:link
@media*
@page**
:visited
分享到：
相关推荐
CSS技术和JavaScript技术 CSS技术是用于控制网页样式的语言，主要用于设置网页的布局、颜色、字体、背景图片等样式。CSS技术分为三种类型：内联样式、内部样式和外部样式。内联样式是将样式直接写在HTML标签中，...
CSS技术测距定位原理是一种利用无线通信技术进行距离测量和定位的技术，主要应用于物联网精确定位系统。CSS（Chirp Spread Spectrum）技术，即频移键控技术，是一种特殊的扩频技术，其特点是利用脉冲信号的频率变化...
《CSS技术彻底研究》这本书是一本深度探讨CSS设计技术的专业指南，旨在引领读者深入理解CSS的核心原理，并通过实例展示如何运用这些技术实现创新的网页布局和视觉效果。CSS虽然已经存在了超过十年，但它的魅力随着...
【JSP CSS技术详解】 JSP（JavaServer Pages）是一种基于Java的技术，用于创建动态网页。它将HTML、XML或其他标记语言与Java代码相结合，允许开发者在服务器端处理数据并生成响应的页面内容。JSP的核心特性包括模板...
DIV+CSS 技术在 WEB 页面布局实践中的应用 随着互联网技术的发展，WEB 页面布局设计变得越来越重要。DIV+CSS 技术作为一种新的网页布局方法，正越来越多地被应用于 WEB 页面设计中。下面我们将通过对 DIV+CSS 技术...
基于html css技术的儿童节礼物 有兴趣的同学可以打开看一下。很不错啊。 基于html css技术的儿童节礼物 有兴趣的同学可以打开看一下。很不错啊 基于html css技术的儿童节礼物 有兴趣的同学可以打开看一下。很不错啊 ...
**CSS技术参考手册——CSS技术集锦** CSS（Cascading Style Sheets）是网页设计中的核心技术，用于控制网页的布局和样式。它让开发者能够独立于内容来定义页面的呈现方式，实现页面的美观和易读性。CSS2是CSS的第二...
基于html+js+css技术，实现百度官网首页的仿写.zip 基于html+js+css技术，实现百度官网首页的仿写.zip 基于html+js+css技术，实现百度官网首页的仿写.zip 基于html+js+css技术，实现百度官网首页的仿写.zip 基于...
### PostCSS技术概述 #### 一、PostCSS简介 **1.1 PostCSS的基本概念** - **定义**：PostCSS是一种先进的CSS预处理器，通过插件系统的方式对CSS进行转换和优化，支持最新CSS特性的同时确保了良好的浏览器兼容性。...
基于HTML+CSS技术的期末网页作业模仿的是halo的Saruka主题博客，二次元风格.zip 基于HTML+CSS技术的期末网页作业模仿的是halo的Saruka主题博客，二次元风格.zip基于HTML+CSS技术的期末网页作业模仿的是halo的...
本实例聚焦于“css技术实例应用，简单的网页风格”，我们将深入探讨如何利用CSS来创建具有吸引力且功能完善的网页。 首先，我们需要理解CSS的基本概念。CSS是层叠样式表，它分离了网页的内容（HTML或XML）与它的...
**CSS技术全科教程参考资料** **一、CSS基础** 1.1 CSS简介 CSS（Cascading Style Sheets）是层叠样式表的简称，是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式语言。在学习CSS之前，...
《电子书css技术集合》是一本专为初学者和进阶者设计的CSS技术指南，旨在帮助读者掌握和精通使用CSS进行网页布局的各种技巧。在网页设计领域，CSS（层叠样式表）是不可或缺的一部分，它能实现网页的美观呈现和高效...
### CSS技术知识点详解 #### 一、实验目的与意义 本次实验主要目的是让学习者深入了解并掌握CSS（层叠样式表）技术的应用。具体目标包括： 1. **理解CSS的基本概念及其在网页设计中的作用**：了解如何通过CSS来...
**CSS技术资料总集** CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。它控制着网页的布局，包括字体、颜色、大小、位置等视觉效果。本资料总集...
《CSS技术文萃》、《苏昱样式表中文手册2.0》以及《样式表中文手册》这三本书籍，都是关于CSS（Cascading Style Sheets）这一关键Web设计技术的重要资源。CSS是一种用于描述HTML或XML（包括如SVG、MathML等各种XML...
CSS技术基本概述 CSS是 Cascade Style Sheet 的缩写，译为级联样式表。它是一种用于描述网页样式的语言，由 W3C 组织制定。CSS 能让网页制作者有效地定制、改善网页的显示效果。 CSS 定义： CSS 是一种用来定义...
【个人网页设计与DIV+CSS技术详解】 网页设计是互联网时代不可或缺的一项技能，尤其是在信息化高度发展的今天，一个吸引人的、功能完善的个人网页可以展示自我、推广业务或分享兴趣爱好。本篇文章将深入探讨如何...
网页布局是设计网站的基础，而CSS技术是实现网页布局的重要手段之一。CSS全称层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。在网页设计中，CSS能够与DIV标签结合使用，...