css样式大全(整理版)？css样式代码
本篇文章给大家谈谈css样式大全(整理版)，以及css样式代码对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
定义css样式的语法结构
什么是CSS?
中文翻译为样式表!它的作用简单的说：就是可以使你在同一页面里使用不同的超链接样式。
更神奇的是，用CSS，仅仅改变一个文件就可以改变数百个网页的外观......个性化的表现而不损失访问者......所有这些都因为网页样式表的强大和灵活特性。
让我们开始吧！
CSS速成
层叠样式表的基础入门。
CSS结构和规则
各种选择符、伪类、伪元素和层叠顺序的入门。
CSS属性
各种层叠样式表级别一有效的属性的描述。
将样式表加入到HTML中
各种将样式表加入到HTML文本中的方法。
依赖样式表
怎样会是滥用样式表和使你的网页难以处理。
CSS参考
连接到介绍CSS的规范和其它方面的文章。
CSS速成
------------------------------------------------------------------------------
一个样式表由样式规则组成,以告诉浏览器怎样去呈现一个文档.有很多将样式规则加入到你的HTML文档中的方法,但最简单的启动方法是使用HTML的STYLE组件.这个元素放置于文档的HEAD部分,包含网页的样式规则.
要注意到尽管STYLE元素是试验样式表的好方法,它具有某些在用户使用这种方法之前应该考虑的缺点.不同方法的优点和缺点在将样式表加入到HTML中部分中有讨论。
每个规则的组成包括一个选择符--通常是一个HTML的元素,例如BODY, P,或EM--和该选择符所接受的样式.
有很多的属性可以用于定义一个元素.每个属性带一个值,共同地描述选择符应该如何呈现.
样式规则组成如下:
选择符{属性:值}
单一选择符的复合样式声明应该用分号隔开:
选择符{属性1:值1;属性2:值2}
以下是一段定义了H1和H2元素的颜色和字体大小属性:
<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
H1{ font-size: x-large; color: red}
H2{ font-size: large; color: blue}
</STYLE>
</HEAD>
上述的样式表告诉浏览器用加大、红色字体去显示一级标题,用大、蓝色字体去显示二级标题. CSS1规格正式地定义了所有的有效属性和值.属性和值在本网站的CSS属性部分也给出了.
本教程专门介绍了CSS非常基础的知识,以提供足够的信息去让你试验自己的样式.要获得CSS更深入的知识,阅读继续阅读以下部分:
CSS结构和规则
CSS属性
将样式表加入到HTML中
CSS结构和规则
基本语法
规则
选择符
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如，
P{ text-indent: 3em}
当中的选择符是P。
类选择符
单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码:
code.html{ color:#191970}
code.css{ color:#4b0082}
以上的例子建立了两个类，css和html，供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类，例如，
<P CLASS=warning>每个选择符只允许有一个类。
例如，code.html.proprietary是无效的。</p>
类的声明也可以无须相关的元素:
.note{ font-size: small}
在这个例子，名为note的类可以被用于任何元素。
一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。
ID选择符
ID选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下:
#svp94O{ text-indent: 3em}
这点可以参考HTML中的ID属性:
<P ID=svp94O>文本缩进3em</P>
关联选择符
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如，以下的上下文选择符
P EM{ background: yellow}
是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。
声明
属性
一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。
值
声明的值是一个属性接受的指定。例如，属性颜色能接受值red。
组合
为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明:
H1, H2, H3, H4, H5, H6{
color: red;
font-family: sans-serif}
继承
实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。
有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。
注解
样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED*/
伪类和伪元素
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。
伪类或伪元素规则的形式如
选择符:伪类{属性:值}
或
选择符:伪元素{属性:值}
伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:
选择符.类:伪类{属性:值}
或
选择符.类:伪元素{属性:值}
定位锚伪类
伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。
一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下:
A:link{ color: red}
A:active{ color: blue; font-size: 125%}
A:visited{ color: green; font-size: 85%}
首行伪元素
通常在报纸上的文章，例如Wall Street Journal中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:
P:first-line{
font-variant: small-caps;
font-weight: bold}
首个字母伪元素
首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:
P:first-letter{ font-size: 300%; float: left}
会比普通字体加大三倍。
层叠顺序
当使用了多个样式表，样式表需要争夺特定选择符的控制权。在这些情况下，总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。
! important
规则可以用指定的! important特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。同样地，当网页制作者和读者都指定了重要规则时，网页制作者的规则会超越读者的。以下是! important声明的例子:
BODY{ background: url(bar.gif) white;
background-repeat: repeat-x! important}
Origin of Rules(Author's vs. Reader's)
正如以前所提及的，网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突，网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。
网页制作者应该小心地使用! important规则，因为它们会超越用户任何的! important规则。例如，一个用户由于视觉关系，会要求大字体或指定的颜色，而且这样的用户会有可能声明确定的样式规则为! important，因为这些样式对于用户阅读网页是极为重要的。任何的! important规则会超越一般的规则，所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。
选择符规则:计算特性
基于它们的特性级别，样式表也可以超越与之冲突的样式表，一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。
统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。(注意，你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:
#id1{xxx}/* a=1 b=0 c=0-->特性= 100*/
UL UL LI.red{xxx}/* a=0 b=1 c=3-->特性= 013*/
LI.red{xxx}/* a=0 b=1 c=1-->特性= 011*/
LI{xxx}/* a=0 b=0 c=1-->特性= 001*/
特性的顺序
为了方便使用，当两个规则具同样权重时，取后面的那个。
css样式表
如何将样式表加入您的网页：
你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
链入外部样式表文件(Linking to a Style Sheet)
你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：
<head>
<title>文档标题</title>
<link rel=stylesheet rel="external nofollow" rel="external nofollow" href="" type="text/css">
</head>
而在XML中，你应该如下例所示在声明区中加入：
<? xml-stylesheet type="text/css" rel="external nofollow" rel="external nofollow" href=""?>
定义内部样式块对象(Embedding a Style Block)
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。示例如下：
<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body{font: 10pt"Arial"}
h1{font: 15pt/17pt"Arial"; font-weight: bold; color: maroon}
h2{font: 13pt/15pt"Arial"; font-weight: bold; color: blue}
p{font: 10pt/12pt"Arial"; color: black}
-->
</style>
</head>
<body>
请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。
内联定义(Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：
<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>
>>CSS基本语法
引入css样式的方式有几种
1.使用HTML标签的STYLE属性
将STYLE属性直接加在单个的HTML元素标签上，控制HTML标签的表现样式。这种引入CSS的方式是分散灵活方便，但缺乏整体性和规划性，不利于后期的修改和维护，当需要修改网站的样式时，一个相同的修改可能涉及多个地方，维护成本高。使用STYLE属性的样式效果最强，会覆盖掉其它几种引入方式的相同样式效果。
2.将样式代码写在页面<STYLE>...</STYLE>标签之中
<STYLE>...</STYLE>结构可以位于页面<HTML>标签中的任何位置，也可以多次出现。通常是将整个<STYLE>...</STYLE>结构写在页面的<HEAD>...</HEAD>部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性，一个页面内部便于复用和维护，但多个页面之间的CSS代码复用仍然不够。
3.使用 LINK标签，引入外部CSS文件
将css代码写在一个单独的文件中，用link标签直接引入该文件到页面中。一个页面可以多次使用LINK标签引入多个外部css文件，注意这些CSS代码的相互影响，通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。这种引入CSS的方式是目前最为流行的，可以在站个网站范围内进行CSS代码的规划，方便复用和维护，但这样将代码高度集中，代码量可能过大，维护不当的话又容易出现混乱。
4.使用@import引入CSS文件
使用@import引入CSS文件有两种方式，一种可以放在页面中的<STYLE>...</STYLE>中,用法如下：
@import url(index2.css);
另外也可以放在CSS文件中使用，用法如下：
@import"sub.css";
使用用@import引入CSS可以很方便的引入外部文件的CSS代码，方便维护和规划。但是每多引入一个CSS文件，就会对服务器增加一次连接请求，当访问量较大时，需在维护性和性能上进行权衡。
如果你还想了解更多这方面的信息，记得收藏关注本站。