一、如何创建 CSS
插入样式表的方法有三种：
1.外部样式表
<head>
<link rel="stylesheet"
type="text/css"
href="/YGFMISWebRes/html/component/css/jquery.ygsoft.common.css"/>
</head>
2.
内部样式表(在html中,位于
<head> 标签内部)
<head>
<style type="text/css">
hr
{color: sienna;}
p
{margin-left: 20px;}
body
{background-image: url("images/back40.gif");}
</style>
</head>
3.
内联样式（在 HTML 元素内部）
<p
style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
优先级：内联样式 > 内部样式表 > 外部样式表
二、CSS选择器
1. id 选择器
ID属性用于定义一个元素的独特的样式。
DOM中id=
sidebar的样式定义。
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
2. 类选择器（class）
1) class =
center的样式定义。
.center {text-align: center}
2) 可以为对象的 class 属性(特性)指定多于一个值( className )，其方法是指定用空格隔开的一组样式表的类名。例如：<div class="class1
class2">。注：id不可以用此方法。
3. 元素选择器
最常见的
CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如
p、h1、td、a。
td { font-size:14px;
width:120px; }
a { text-decoration:none; }
4. 包含选择器（后代选择器）E1 E2 { sRules }
1)
实例：
table td { font-size:14px; }
div.sub a { font-size:14px; }
2) 在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在
... 找到”、“... 作为
... 的一部分”、“... 作为
... 的后代”，但是要求必须从右向左读选择器。
可以是ID选择器和类选择器之间相互包含，实用范围非常大。
5. 组选择器 E1 , E2 , E3 { sRules
}
1)
实例：
.td1, div a, body {
font-size:14px; }
td, div, a { font-size:14px; }
2) 将同样的定义应用于多个选择器，可以将选择器以逗号分隔的方式并为组。
6. 子对象选择器
E1 > E2 { sRules }
1) 实例：
h1 > strong {color:red;}
//这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：
<h1>This is
<strong>very</strong> important.</h1>
2) 如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，使用子元素选择器（Child selector）。
7. 相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p
{margin-top:50px;}
这个选择器读作：“选择紧接在
h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
8. 属性选择器
对带有指定属性的 HTML 元素设置样式。
[title] { color:red; }
input[type="text"]
{
background-color:yellow;
}
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
[abc^="def"]
选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]
选择 abc 属性值中包含子串 "def" 的所有元素
注：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。
三、伪类及伪对象
css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#ff0000;}
1. 伪类
CSS 伪类用于向某些选择器添加特殊的效果。
在支持
CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接
*/
提示：在
CSS 定义中，a:hover 必须被置于 a:link 和
a:visited 之后，才是有效的。
提示：在
CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
2. 伪对象
语法：（伪对象选择符共有4种）
1). Selector:first-letter
2). Selector:first-line
3). Selector:before
4). Selector:after
说明：
1). 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象，必须先设定对象具有块元素的表状。
2). 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象具有块元素的表状。
3). 用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
4). 用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。
注：first-letter和:first-line目前所有主流浏览器均支持；:before和:after非IE核心浏览器及IE8支持。
分享到：
相关推荐
css样式，很好用好，很不错，可以试试
**CSS样式基础和网页设计** **一、CSS简介** CSS，全称为Cascading Style Sheets，叠样式表，是一种用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现的样式语言。它的主要功能是将内容与表现分离，使...
**标准精悍CSS样式基础教程** CSS，全称Cascading Style Sheets，是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。本教程旨在帮助初学者深入理解CSS的基础知识，从而实现更具吸引...
**CSS样式基础知识讲解** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页元素的布局、颜色、字体等视觉表现。本教程主要针对JSP初学者，旨在帮助你们掌握CSS的基本概念和应用...
【CSS基础学习】是网页设计领域中的重要环节，它是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS（层叠样式表）让网页设计者能够分离内容与表现，使得网页设计更加灵活且易于...
**CSS样式基础** CSS（Cascading Style Sheets）是一种用于定义网页中元素样式的语言，它使得内容与表现分离，让网页设计更加灵活且易于维护。在这个“css样式（ppt）”的压缩包中，我们可以期待学习到关于CSS的...
这是我个人作的PDF格式的CSS基础教程，PDF中的所有内容均来自http://www.w3school.com.cn/包含该网站关于CSS基础的所有页面内容，供大家在不上网的时候学习，教程中的实例大家可以到它的网站上去看。
手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准，...
同时，这也使得设计师和开发者能够更好地协作，因为他们都基于同一种样式基础进行工作。 总的来说，"commonInitialize.css"是网页设计中必不可少的一部分，它确保了跨浏览器的一致性和良好的可维护性。在实际项目中...
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的...
CSS样式表基础.ppt
1. **CSS 样式基础**： - CSS（层叠样式表）用于控制网页的布局和视觉呈现，通过定义元素的样式属性（如颜色、大小、位置等）来美化页面。 - 样式可以内联（在 HTML 元素的 `style` 属性中），内部（在 `<style>` ...
综上，"经典的css样式"涵盖了网页设计中的许多重要概念和技术，它们构成了现代网页设计的基础，并持续影响着互联网的视觉呈现。通过学习和掌握这些经典样式，开发者能更好地驾驭CSS，创作出更具吸引力的网页作品。
选择器是 CSS 规则的基础，它用于选择要应用样式的 HTML 元素。下面是常见的选择器类型： 1. 派生选择器：用于选择 HTML 元素的子元素，例如：h1 p { color:red; }，该选择器将选择所有 h1 元素下的 p 元素。 2. id...
尝试创建自己的网页，通过修改CSS样式来调整布局和外观，不断实验和调试，将使你对CSS有更深的理解。 总的来说，《CSS 2.0 样式表中文手册》是一个良好的起点，它将帮助初学者系统地学习和掌握CSS的基础知识，为...
**CSS样式案例集大全** 本资源集合是一份全面的CSS样式案例集，旨在帮助开发者深入理解和熟练运用CSS在实际项目中的应用。CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...
### CSS样式表基础知识点 #### 一、CSS简介 **CSS**（层叠样式表，Cascading Style Sheets）是一种用于定义网页外观和布局的语言，它由W3C（World Wide Web Consortium）制定。CSS的主要功能是控制网页元素的样式...
"css样式初始化.zip"这个压缩包文件很可能包含了一组用于初始化CSS样式的代码，帮助开发者快速建立一个干净、一致的样式起点。初始化CSS样式的主要目的是消除浏览器之间的默认样式差异，确保在不同浏览器上呈现一致...