13518219792
在当今的网页制作中，几乎所有漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写，有些书上把它译为 “层叠样式表”。有了CSS的控制，我们的网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。 一、看下面的样式：
目前创新互联已为1000多家的企业提供了网站建设、域名、网站空间、网站托管运营、企业网站设计、文成网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
a:link { text-decoration: none} //a:link 指正常的未被访问过的链接
a:active { text-decoration: none } //a:active 指点击链接的瞬间出现的链接情况
a:visited { text-decoration: none } //a:visited 指已经访问过的链接
a:hover { text-decoration: none; } //a:hover 指鼠标放上去链接出现的情况
hover是一个经常会被混淆的属性，一般大家都认为链接是三个属性：link,active,visited，而且一般的网页制作软件里也只有这三个设置，但是hover其实也是一个非常重要的属性，它还可以在链接上加上背景色（BACKGROUND:#ccffcc;），其它的设置与上面三个一样，所以大家现在可以记住，链接上可以做四个属性设置，分别是：link,active,visited,hovertext-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线。还有一个是blink参数，顾名思义是闪烁效果，但是他要在NetScape浏览器上才能显示。
二、使粗体文字加上删除线。粗体文字使用的代码是：B { text-decoration: line-through }使粗体文字中所有的字母大写。使用代码： B { text-transform: uppercase }（这个在NS中才显示出来，IE没有相应效果显示）产生既大写，又有颜色，又有删除线的效果的代码是：b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF} 。另外，用lowercase使所有字母小写显示，capitalize 使每个单词的首字母大写显示。
三、产生链接变色效果：经过在对链接的几个属性进行颜色设置后，可以使具有link,active,visited属性的链接显示不同的颜色，但是却不会产生鼠标覆盖变色效果。
a:link { text-decoration: none ; color: green } //正常链接文字显示绿色
a:active { text-decoration: none ; color: yellow } //点击瞬间的链接显示黄色
a:visited { text-decoration: none ; color: red } //已经访问过的链接显示红色要想产生鼠标放上去产生变色效果，就要用到另一个属性了,这就是 hover。如：a:hover { text-decoration: none ; color: yellow；background:white; } 表示鼠标移动到链接文字上时，文字修饰风格为“无”，同时链接文字显示黄色，链接文字的底色显示为白色。四、看一下下面链接设置的总体运用情况：
a:link { text-decoration: none ; color: blue ; font-size: 9pt }
a:active { text-decoration: underline ; color: yellow;font-size: 10pt }
a:visited { text-decoration: none ; color: red;font-size: 10.5pt }
a:hover { text-decoration: underline; color: green ; font-size: 11pt;background:white; }上面这样设置含义为：
a:link 链接文字没有下划线，蓝色（blue）显示，字为9pt大小；
a:active鼠标点击链接的瞬间文字再现下划线，颜色变成黄色（yellow），并且文字大小变成10pt；
a:visited 访问过的链接没有下划线，文字变成红色（red），同时文字大小变成10.5pt；
a:hover鼠标放到链接上时出现下划线，颜色为绿色（green），字符大小11pt，同时文字上出现一个白色（white）的背景区域。
:active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。
并且 :active 可以和 :link 以及 :visited 状态同时发生。 a:active { font-size: 14pt; text-decoration: underline; color: blue; }
:hover
设置对象在其鼠标悬停时的样式。
在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。
a:hover { font-size: 14pt; text-decoration: underline; color: blue; }
a:hover span{ color:red; }
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1.基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
3.定义字体
web标准推荐如下字体定义方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
Lucida Grande字体适合Mac OS X；
Verdana字体适合所有的Windows系统；
Lucida适合UNIX用户
"宋体"适合中文简体用户;
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
4.群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
5.派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italic; font-weight : normal；}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
6.id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
div id="menubar"/div
然后在样式表里这样定义：
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
id选择器也同样支持派生，例如：
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
6.类别选择器
在CSS里用一个点开头表示类别选择器定义，例如：
.14px {color : #f60 ;font-size:14px ;}
在页面中，用class="类别名"的方法调用：
span class="14px"14px大小的字体/span
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
7.定义链接的样式
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
link;visited;hover;active解释及正确顺序：
a:link 选择器设置指向普通的、未被访问页面的链接的样式
a:visited 选择器用于设置指向已被访问的页面的链接
a:active 选择器用于活动链接
a:hover 选择器用于选择鼠标指针浮动在上面的元素。
text-decoration 属性大多用于去掉链接中的下划线：
例如：a:link{text-decoration：none;}看到别人总结的两点参考下记忆：
在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。
“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。
再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active
扩展资料：
css链接link时，链接可以使用任何css属性,包括字体.颜色.背景等等. 链接有四个状态,可在四个状态时设置不同的属性 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover -
当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 当为链接的不同状态设置样式时,需要遵循a:hover 必须位于a:link 和a:visited之后,a:active 必须位于 a:hover 之后。
实际应用，更多的使用italic属性值
实际应用中， 行高的数值通过设计图获取， 量取数值时需要使用一些辅助软件工具
选中文字工具，属性选中：不消除锯齿
字体、 字号、 行高、 加粗、 斜体 都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写， 属性值可以有2到多个， 值之间用空格进行分隔。
font进行综合书写时， 必须有字号和字体参与， 而且必须字号在前， 字体在后， 不能颠倒顺序。
font属性经常对字体、 字号、 行高进行合写， 书写顺序必须是字号、 行高、 字体， 字号和行高之间必须用/进行分隔
如果font属性需要设置加粗和斜体， 两个属性值只能写在最前面， 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置
作用：设置文本整体是否有线条的装饰效果
作用：设置段落首行是否进行缩进
实际应用中，常用em
属性值区分正负， 正数表示向右缩进， 负数表示向左缩进
浏览器控制台中的盒模型图
作用： 设置可以添加元素内容的区域的宽度。
作用： 设置可以添加元素内容的区域的高度。
如果一个元素不添加 height 属性， 默认属性值为auto， 浏览器会自动计算出实际高度， 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。
书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左
设置四个属性值， 分配方向上、 右、 下、 左。
设置三个值分配给上、 左右、 下。
设置两个值， 分配给上下、 左右 。
设置属性值只有一个， 四边的值相同。
作用： 设置边框的颜色。
属性值： 颜色名或颜色值， 整体类似 padding 综合属性写法。
每个单一属性都必须与复合属性 border 一致， 设置三个属性值。
书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左
设置四个属性值， 分配方向上、 右、 下、 左。
设置三个值分配给上、 左右、 下。
设置两个值， 分配给上下、 左右 。
设置属性值只有一个， 四边的值相同。
给 body 标签设置整体文字样式， 让大部分后代标签全部去继承
设计图中盒子高度占位是固定的， 后面同级元素在高度下面加载。多余内容会溢出盒子。
设置了高度的盒子， 如果内部元素的加载高度超过父级， 会溢出。可以通过一个溢出的属性 overflow， 进行溢出部分内容的显示效果设置。
要求盒子高度必须自适应内部内容的高度。
或者设置height的属性值是自动的。
一个元素内部嵌套的子元素， 在父元素中居中。
针对类似 div 样式上必须独占一行的盒子， 如果子盒子宽度低于父盒子宽度， 可以设置子盒子的 margin 值， 水平方向的值都设置为 auto。
原因： auto 只在水平方向有作用， 水平方向的 margin 如果设置为 auto， 边距会自动无限增大， 直到撑满整个父元素除了子元素宽度之外剩余的区域， 如果两个水平方向都是 auto， 两边都要无限大， 只能达到一个平衡， 两边距离相同， 导致盒子居中。
一般情况下， 一个父元素内部可以放一个或多个子元素， 而且多个子元素要排成一行显示， 必须保证父元素的宽度一定要足够（不考虑溢出情况） ， 需要遵循一个设置尺寸的规律： 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件： 要么多余的子元素掉下来不能在一排， 要么溢出父元素
父子盒模型中， 只有一个子元素， 且子元素是类似 div 标签必须占一行的。不设置子元素的 width 属性， 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin， 不需要手动去进行内减， 子元素的 width 会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
在垂直方向如果有两个元素的外边距有相遇的， 浏览器中加载的真正的外边距不是两个间距的加和， 而是两个边距中值较大的， 边距值小的塌陷到了边距值大的值内部。
上面的元素有下边距， 下面的元素有上边距， 两个边距相遇， 真正的盒子间距离是较大的那个值
父子元素之间也会出现 margin 塌陷， 父元素和子元素都设置了同方向的margin-top 值， 两个属性之间没有其他的内容进行隔离， 导致两个属性相遇， 发生margin 塌陷。
本身父元素与上一个元素的距离是0， 子元素如果设置了垂直方向的上边距， 会带着父级一起掉下来。
水平方向的 margin 没有塌陷现象。
在标准流中， 大部分元素是区分等级的， 习惯将元素划分为几种常见的加载级别：块级元素、 行内元素、 行内块元素等。
大部分容器级标签包括p标签都是块级元素， 比如 div 、 h1 等。
大部分的文本级标签， 比如 span、 a、 b 等。
比如 img、 input 等。
可以通过 display 属性更改一个标签的显示模式。
属性值： 元素根据属性值不同， 可以加载对应元素等级的显示模式的特点。
display 属性更改的显示模式并没有改变标准流本质性质， 页面还是只能从上往下加载， 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括： 浮动、 绝对定位、 固定定位。
margin 塌陷现象出现在标准流中的， 浮动元素已经脱离标准流， 不再具有 margin塌陷现象。
与前面压盖效果结构类似， 同级元素中前面的元素浮动， 后面的元素不浮动， 不浮动的元素内部还有一些文字， 浮动的蓝盒子会压盖住粉盒子的一部分， 但是文字内容不会被盖住， 粉盒子中的文字会让开蓝盒子位置， 围绕它进行加载。这种效果称为字围现象。
可以利用字围现象制作一些特殊的图文混排布局效果
给标准流的父元素强制给一个合适的高度
作用： 清除标签元素自身受到的前面的浮动元素的影响。
给标准流父元素添加 clear 属性， 父元素不受前面浮动影响， 不会再占有浮动让出的位置。
给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性， 可以解决浮动的所有问题。
父元素有了高度后， 可以管理住内部所有的浮动元素， 不会延伸到后面标签中影响贴边。
a 标签可以根据用户行为不同， 划分为四种状态， 通过a 标签的伪类可以将四种状态选中设置为不同的样式效果， 用户触发对应行为， 就可以加载对应的样式。
一般会将访问前和访问后状态设置为一样的效果， 保证了页面的统一性， 可以选择性的设置鼠标移上和鼠标点击状态。
更加常用的一种设置方式如下：
a 标签任何普通的选择器， 可以同时选中四种状态， 可以将四种状态设置为相同的样式， 属性可以设置所有的 a 默认显示样式的属性， 包括盒模型、 文字等。
a:hover 伪类选择器： 设置鼠标移上时不一样的样式属性。
属性值都是使用代表方向的单词进行书写。
使用像素值作为背景定位的属性值。
百分比表示法使用百分比数字作为属性值。
100%代表的数值：
background 属性可以将五个单一属性的值进行合写。
属性值： 可以有 1-5 个属性值， 值之间用空格进行分隔， 背景定位的两个属性值算作一个属性值， 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。
在h1 标签是权重最高的标签， 一般会在内部书写最重要的内容， 比如 logo 图片、 最大的标题等。
另外 h1 内部的文字， 可以帮助提高 SEO 搜索排名。
在设置的是 logo 图片时， 如果使用插入图， 就不能书写搜索关键字。
如果想解决 SEO 问题， 可以将 HTML 结构中， 插入图换成搜索关键字， 然后使用 css 添加背景图给 a 标签或 h1 标签。
在一个盒子中有背景图部分， 而且有文字内容， 文字会让开背景图区域进行加载，
背景区域应该使用 padding 挤出位置。
四个方向的 padding 都可能用于添加背景图。
当用户访问一个网站时， 需要向服务器发送请求， 网页上的每张图像都要经过一次求才能展现给用户。
然而， 一个网页中往往会应用很多小的背景图像作为修饰， 当网页中的图像过多时，服务器就会频繁地接受和发送请求， 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数， 提高页面的加载速度， 出现了 CSS精灵技术（也称 CSS Sprites、 CSS 雪碧） 。
CSS 精灵是一种处理网页背景图像的方式。
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去， 然后将大图应用于网页， 这样， 当用户访问该页面时， 只需向服务发送一次请求， 网页中的背景图像即可全部展示出来。
通常情况下， 这个由很多小的背景图像合成的大图被称为精灵图。
CSS3 支持背景半透明的写法， 颜色值增加了一种 rgba 模式。
rgba 模式 ： 在 rgb 基础上增加了一个不透明度的设置， 不透明度 alpha 取值范围在0-1 之间， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。
书写方式： rgba(红色， 绿色， 蓝色， 不透明度)
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
通过 background-size 设置背景图片的尺寸， 就像我们设置 img 的尺寸一样， 在移动 Web 开发中做屏幕适配应用非常广泛。
CSS3 中规定， 一个盒子上， 可以添加多个背景图片。
background-image 的属性值书写时， 以逗号分隔多背景的 URL路径地址。
注意： 背景加载时， 先写的背景压盖后写的背景图片。
属性名： position。
作用： 设置定位的元素， 它需要根据某个参考元素发生位置的偏移。
定位的元素要想发生位置的移动， 必须搭配偏移量属性进行设置。
水平方向： left、 right。
垂直方向： top、 bottom。
属性值： 常用 px 为单位的数值， 或者百分比。
子绝父相、 子绝父绝、 子绝父固
属性值： absolute， 绝对的意思。
参考元素： 参考的是距离最近的有定位的祖先元素， 如果祖先都没有定位， 参考body。必须搭配偏移量属性才会发生位置移动。
性质： 绝对定位的元素脱离标准流， 会让出标准流位置， 可以设置宽高， 也可以随时定义位置， 绝对定位的元素不设置宽高只能被内容撑开。
注意1： 绝对定位的参考元素是不固定的， 不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同， 具体位移效果不同。
注意2： 在绝对定位中， 由于参考点不同， left 正值不再等价于 right 的负值。
以 body 为参考元素时， 参考点的确定与偏移量方向有关
第一， 如果有 top 参与的定位， 参考点就是 body 页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
第二， 如果有 bottom 参与的绝对定位， 参考点是 body 页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。
实际应用中， 如果以 body 为参考元素， 不同分辨率的浏览器中， 绝对定位的元素位置是不同的， 所以较少使用 body 作为参考元素。
祖先级为参考元素
如果祖先级中有定位的元素， 就不会去参考 body 。
参考元素： 参考的是祖先元素中有任意定位的， 在 HTML 结构中距离目标最近的祖先。
如果绝对定位的参考元素是某个祖先级， 参考点是盒子 border 以内的四个顶点， 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离， 会忽视参考元素的 padding 区域。
所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标， 不占标准流位置， 压盖效果更彻底， 实际工作中， 常见的是 绝对定位制作压盖。
定位的元素不区分定位类型， 都会去压盖标准流或浮动的元素。
如果都是定位的元素， 在 HTML 中 后写定位压盖先写的定位 。
更改定位的元素的压盖顺序， 设置一个 z-index 属性。
属性值： 数字。
原态：.C1{font-size:12px; color:#000}
//表示设置的C1样式为黑色12号字
鼠标移上状态：.C1 a:hover{font-size:14x; color:#900; text-decoration:none}
//a:hover表示鼠标移上后文本变为暗红色14号字，且无下划线
link表示正常
visited表示已访问
hover表示悬停
active表示正在访问
链接是从一个网页到另一个网页的连接，CSS可通过不同属性以各种不同方式来设置链接的样式。下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法，希望对大家有所帮助。
在讨论CSS属性之前，先了解链接的状态是非常重要的。链接可以存在于不同的状态，并且可以使用伪类进行样式设置。
下面给出了四种链接状态：
● a：link =这是一个正常的，未访问过的链接。
● a：visited =这是用户至少访问过一次的链接
● a：hover =当鼠标悬停在它上面时，这是一个链接
● a：active =这是一个刚刚点击的链接。
语法：
color_name可以采用任何格式，如颜色名称（green）、十六进制值（#5570f0）或RGB值-rgb(25, 255, 2)。还有另一个状态“a:focus”，用于在用户使用Tab键浏览链接时进行聚焦。
链接的默认值：
● 默认情况下，创建的链接带有下划线。
● 当鼠标悬停在链接上方时，它会变为手形图标。
● 正常/未访问的链接为蓝色。
● 访问过的链接有紫色。
● 活动链接为红色。
● 链接聚焦时，它周围有一个轮廓。
例：
效果图：
CSS如何设置链接的样式？
下面是链接的一些基本CSS属性：
● color属性
● font-family属性
● text-decoration属性
● background-color属性
1、color属性： 此CSS属性用于更改链接文本的颜色。
语法：
例：
效果图：
2、font-family属性 ：此属性用于使用font-family属性更改链接的字体类型。
语法：
3、text-decoration属性： 此属性主要用于向链接删除或添加下划线等修饰。
语法：
例：
效果图：
4、background-color属性 ：此属性用于设置链接的背景颜色。
语法：
例：使用以下css属性
效果图：
更多 web前端 知识，请查阅 HTML中文网 ！！
