十六进制色值什么时候能缩写为3位

制作网页时,我们经常会把色标值简写为:#FFF,或#CCC等,但有时会写成#FFFFFF,#CCCCCC,这两种书写形式有什么不同呢,或者说它们之间有什么联系呢?下面就简要的说说。

我们知道:#FFF,#CCC,#FFFFFF,#CCCCCC,这种格式是十六进制的色值写法,当书写的为3位时,那3位字母分别对应代表的是三原色R(red)、G(green)、B(blue)的取值数;若书写为6位时,那第1、2位代表的是R取值,第3、4位代表的是G的取值,第5、6位代表的是B的取值。

明白了这两种书写格式分别代表的函义,那就比较好理解它们之前的区别和联系了。

其实,#FFF是#FFFFFF的缩写,#CCC是#CCCCCC的缩写,但并不是所有的色标值都可以缩写的,必须符合一定格式的色标值才能缩写。比如:
#000000 –> #000;
#AABBCC –> #ABC;
#999999 –> #999;
#112233 –> #123

从上面的例子可总结出,6位可以缩写为3位的,都是以每2位为缩写单位,且数值必须相同的,即R、G、B对应的两位取值数完全一致时才可以缩写为3位。

记那些大牌网站的css reset(初始化)样式

何谓css reset ,css reset 的定义

在当今网页设计/开发实践中,使用 CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都 存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的 世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。
当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS 定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性 问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。
正因为上述冲突和问题依然存在于这个”不完美的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,什么是CSS Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不 同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器 都按照同样的规则解释CSS,这样就能避免发生这种问题。

这里我收录了几个国内比较知名的网站的css reset样式,搜狐与土豆网的比较简单,淘宝商城的就相对复杂了一些。具体这个重置样式该怎么用,只能说适合自己的就是最好的!

tmall,淘宝商城

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,
form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

tudou,土豆网

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
body{color:#000;background:#fff;font-size:12px;line-height:1.25;font-family:tahoma,arial,\5b8b\4f53,sans-serif}
th,td{text-align:left;vertical-align:top}
h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal}
p{margin:0 0 1em 0}
blockquote{margin:0 0 1em 0}
a{color:#14647d;text-decoration:none;font-family:tahoma,arial,\5b8b\4f53,sans-serif;_font-family:arial,sans-serif}
a:hover{text-decoration:underline}
img{display:block;border:0}
li{list-style:none}
ol{padding:0 0 0 2em}
input,label,select,option,textarea,button,fieldset,legend{font-size:1em;font-family:tahoma,arial,\5b8b\4f53,sans-serif;_font-family:Arial,sans-serif}
input[type=text],textarea{-webkit-appearance:none;-webkit-border-radius:0;outline:none}
input.text{color:#444;border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-width:1px;padding:3px 2px;height:14px}
input.radio,input.checkbox{margin-right:2px;vertical-align:-2px}
input.radio,input.checkbox{margin-left:-2px}
label.radio,label.checkbox{margin-right:5px}
textarea{border-color:#9f9f9f #dcdcdc #dcdcdc #9f9f9f;border-style:solid;border-width:1px;padding:1px;resize:none}

sohu,搜狐网

/* 全局CSS定义 */
body{font-family:’宋体’;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input{font-size:12px;padding:0}
/* 默认链接颜色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}
/*清除链接虚框*/
/*a,area {blr:expression(this.onFocus=this.blur()) } for IE
:focus {-moz-outline-style: none; } for Firefox
*/

这里记录本人经常用的一种css reset 的样式

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baselinebaseline; background: transparent; }
ol, ul {list-style: none; }
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ”; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

目前比较全的CSS重设(reset)方法总结

在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美 世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失 窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。

当今流行的浏览器(如:Firefox、Opera、 Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS 定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性 问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。

正因为上述冲突和问题依然存在于这个”不完美的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,什么是CSS Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。

今天总结收集了15套CSS重设实例,您可以在前端开发工作中进行参考和使用,有些是很简化的CSS Reset,有些则是非常复杂非常全面的CSS Reset,至于使用哪套,全看您的爱好或需要。

 

一.最简化的CSS Reset(重设) :

* {
padding: 0;
margin: 0;
}

这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

* {
padding: 0;
margin: 0;
border: 0;
}

这是在上一个重设的基础上添加了对border属性的重设,初始值为0的确能避免一些问题。

* {
outline: 0;
padding: 0;
margin: 0;
border: 0;
}

在前两个的基础上添加了outline属性的重设,防止一些冲突。

二.浓缩实用型CSS Reset(重设):

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}

该CSS重设方法出自Perishable Press,这是他常用的方法。

三.Poor Man 的CSS Reset:

html, body {
padding: 0;
margin: 0;
}
html {
font-size:1em;
}
body {
font-size:100%;
}
a img, :link img, :visited img {
border:0px;
}

这个重设方法将html和body下元素的padding和margin都设为0,并分别为html标签和body标签下的所有元素设置了初始的字体大小,最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

* {
vertical-align: baseline;
font-family: inherit;
fo

nt-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

五.Shaun Inman’s Global Reset

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: ”;
}
a, ins {
text-decoration: none;
}

六.Yahoo(YUI) CSS Reset:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym {
border: 0;
}

七.Eric Meyer’s CSS Reset

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

八.Condensed Meyer Reset:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: ”;
}
abbr, acronym {
border: 0;
}

九.Ateneu Popular CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
a, a:link, a:visited, a:hover, a:active{
text-decoration:none
}
table {
border-collapse: separate;
border-spacing: 0;
}
th, td {
text-align: left;
font-weight: normal;
}
img, iframe {
border: none;
text-decoration:none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

十.Chris Poteet’s Reset CSS

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

十一.Tantek Celik Reset CSS

:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

十二.Christian Montoya Reset CSS

html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}

十三.Rudeworks Reset CSS

* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type=’text’], textarea {
font-size: 100%;
font-family: monaco, “Lucida Console”, courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}

十四. Anieto2K Reset CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

十五.CSSLab CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

好了,CSS重 设目前先总结到这里,这15套重设方法其实都是有共同点的,也许有的实现方法不同,但大部分都是同一个目的,就是为了让更多的浏览器能显示同样的效果。有 了这些CSS重设作为资料和参考,也许会对你的工作有所帮助甚至提高效率,但是,毕竟这些重设都是别人写的,你完全也可以为自己量身定制一套CSS重设。

常用CSS样式属性

一 CSS文字属性:
color : #999999;
font-family : 宋体,sans-serif;
font-size : 9pt;
font-style:itelic;
font-variant:small-caps;
letter-spacing : 1pt;
line-height : 200%;
font-weight:bold;
vertical-align:sub;
vertical-align:super;
text-decoration:line-through;
text-decoration:overline;
text-decoration:underline;
text-decoration:none;
text-transform : capitalize;
text-transform : uppercase;
text-transform : lowercase;
text-align:right;
text-align:left;
text-align:center;
text-align:justify;
vertical-align属性
vertical-align:top;
vertical-align:bottom;
vertical-align:middle;
vertical-align:text-top;
vertical-align:text-bottom;

二、CSS边框空白
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
list-style-type:decimal;
list-style-type:lower-roman;
list-style-type:upper-roman;
list-style-type:lower-alpha;
list-style-type:upper-alpha;
list-style-type:disc;
list-style-type:circle;
list-style-type:square;
list-style-image:url(/dot.gif);
list-style-position:outside;
list-style-position:inside;

四、CSS背景样式:
background-color:#F5E2EC;
background:transparent;
background-image : url(/image/bg.gif);
background-attachment : fixed;
background-repeat : repeat;
background-repeat : no-repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;

指定背景位置
background-position : 90% 90%;
background-position : top;
background-position : buttom;
background-position : left;
background-position : right;
background-position : center;

五、CSS连接属性:
a
a:link
a:active
a:hover
a:visited

鼠标光标样式:
链接手指 CURSOR: hand
十字体cursor:crosshair
箭头朝下cursor:s-resize
十字箭头cursor:move
箭头朝右cursor:move
加一问号cursor:help
箭头朝左cursor:w-resize
箭头朝上cursor:n-resize
箭头朝右上cursor:ne-resize
箭头朝左上cursor:nw-resize
文字I型 cursor:text
箭头斜右下cursor:se-resize
箭头斜左下cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6)p {cursor:url(“光标文件名.cur”),text;}

六、CSS框线一览表:
border-top : 1px solid #6699cc;
border-bottom : 1px solid #6699cc;
border-left : 1px solid #6699cc;
border-right : 1px solid #6699cc;
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369
border-top-width :1px
border-top-style : solid
其他框线样式
solid
dotted
double
groove
ridge
inset
outset

七、CSS表单运用:
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2

八、CSS边界样式:
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

CSS 属性: 字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式{font:font-style font-variant font-weight font-size font-family}
2 字体类型{font-family:”字体1″,”字体2″,”字体3″,…}
3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字体风格{font-style:inherit|italic|normal|oblique}
5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色{color:数值;}
7 阴影颜色{text-shadow:16位色值}
8 字体行高{line-height:数值|inherit|normal;}
9 字 间 距{letter-spacing:数值|inherit|normal}
10 单词间距{word-spacing:数值|inherit|normal}
11 字体变形{font-variant:inherit|normal|small-cps }
12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}
14字体
{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本样式(Text Style)
序号 中文说明 标记语法
1 行 间 距 {line-height:数值|inherit|normal;}
2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格{text-indent:数值|inherit}
4 水平对齐{text-align:left|right|center|justify}
5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 书写方式{writing-mode:lr-tb|tb-rl}

背景样式
序号 中文说明 标记语法
1 背景颜色{background-color:数值}
2 背景图片{background-image: url(URL)|none}
3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定{background-attachment:fixed|scroll}
5 背景定位{background-position:数值|top|bottom|left|right|center}
6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}

框架样式(Box Style)
序号 中文说明 标记语法
1    边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2    补  白 {padding:padding-top padding-right padding-bottom padding-left}
3  边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值:thin|medium|thick|数值
4    边框颜色 {border-color:数值 数值 数值 数值}  数值:分别代表top、right、bottom、left颜色值
5    边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6    边  框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
7   宽  度 {width:长度|百分比| auto}
8   高  度 {height:数值|auto}
9   漂  浮 {float:left|right|none}
10  清  除 {clear:none|left|right|both}

序号 中文说明 标记语法
1    控制显示 {display:none|block|inline|list-item}
2    控制空白 {white-space:normal|pre|nowarp}
3    符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4   图形列表 {list-style-image:URL}
5   位置列表 {list-style-position:inside|outside}
6   目录列表 {list-style:目录样式类型|目录样式位置|url}
7   鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

CSS定位与兼容性

CSS浮动和清除

Float:元素浮动,取值:left或right

(1)浮动元素可以向左或向右浮动,浮动到包围元素的边框或上一个浮动元素的边上为止;

(2)元素浮动起来后,所占的空间就消失了,浮动元素的层级要高于普通元素;

(3)任何元素都可以浮动,浮动元素将变成“块元素”,不管原来是什么元素;

块元素,具有width和height属性,而行内元素默认width和height不起作用。

提示:元素浮动,可以使用行内元素转成“块元素”;

一个行内元素,要想宽和高能用,可我不想进行浮动,能否实现?

Display的属性:可以取值:none(无)、block(块元素)、inline(行内元素)

 

CSS继承和优先级

CSS继承性

内部元素将继承外部元素的样式,多个外部元素的样式,最终将叠加到内部元素上;

<body>是一个网页中最大的标记(容器),它里面定义的样式,会被所有的子元素进行继承;

哪些CSS属性能被继承呢?

主要是CSS文本相关或CSS字体相关的属性,都会被继承。

Font-size、font-family、font-style、font-weight

Color、line-height、text-align、text-indent、letter-spacing、word-spacing、text-decoration等

提示:在继承过程中,是通过层层覆盖来实现相同属性值的替换。也就是说,距离“目标元素”越近,样式的优先级越高。

CSS优先级

(1)单个选择器的优先级

       !important(IE6不支持) > 行内样式(style属性) > ID选择器 > Class选择器 > HTML标签选择器

(2)多个选择器的优先级计算

假设,用1代表标签选择器,10代表类选择器,100代表ID选择器,1000代表行内样式

H2{color:#FF0000}          优先级 1

.news h2{color:#0000FF}      优先级 11

div.news h2{color:#00FF00}  优先级 12

div#news h2{color:#FFFF00}  优先级 102

 

PHP通过include()require()将外部的某个文件引入到当前网页中。

Header.php

Footer.php

 

CSS定位属性

Position:元素定位,取值:static(静态定位)、fixed(固定定位)、relative(相对定位)、absolute(绝对定位)

Left:设置元素距离左边多远;

Right:设置元素距离右边多远;

Top:设置元素距离上边多远;

Bottom:设置元素距离下边多远;

 

Static(静态定位)

任何元素,默认情况下都是静态定位。

Fixed(固定定位)

固定定位,是相对于浏览器窗口(大小是一定的),来进行的定位。

固定定位元素,将脱离普通文档流,并且不再占用空间,层级要高于普通文档中的元素。

固定定位元素,在没有指定定位坐标的前提下,将保持原来的形状和位置。

固定定位元素,是一个“块元素”,不管它原来是什么元素。

Relative(相对定位)

相对定位,是相对于“它原来的自己”来进行的定位(偏移)。

相对定位,所占的空间依然保留,层级高于普通元素。

相对定位,在没有设置定位坐标前,将保持原来的形状和位置。

绝对定位(absolute)

绝对定位,是相对于它的祖先定位元素(上级元素是绝对定位元素或相对定位元素),来进行的定位。如果一直往上层找定位元素,如果没有找到,相对于网页来进行定位

绝对定位元素,不再占用空间,层级高于普通元素。

 

CSS兼容性

不兼容性:因为不同的浏览器厂商,对CSS的解析不一样,造成了同一个网页,在不同的浏览器下浏览的结果相差太多,这种现象叫“不兼容”。解决“不兼容”的办法,就是兼容性的调整。

 

解决不兼容性,大致三种方法:

  • 常用的全局CSS属性设置
  • 常用的兼容性设置
  • CSS HACK

 

第一种:常用的全局CSS属性设置

(1)清除所有的标记的内外边距

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0}

(2)项目符号

ul,ol,li{list-style:none;}

(3)全局字体颜色设置

body{font-size:12px;color:#444;}

(4)常用标题的设置

h1,h2,h3,h4,h5,h6{font-size:100%}

h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}

h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }

h3{font-size:12px}

h4{font-size:12px;font-weight:normal}

 

(5)全局链接

a{text-decoration:none;cursor:pointer}

a:link, a:visited {color:#004276}

a:hover{text-decoration:underline;color:#ba2636}

(6)图片

img{border:none;}

 

(7)浮动和清除

.float1{float:left;}

.float2{float:right}

.clear{clear:both;}

.blank10{height:10px;clear:both;}

 

(8)颜色

.red{color:#FF0000;}

.blue{color:#0000FF;}

.green{color:#00ff00;}

 

第二种:常用的兼容性设置

IETEST软件:可以测试IE6、IE7

(1)网页居中

IE5下的居中,应该是:text-align:center

Firefox下的居中,应该是:margin:0px auto;

 

body{font-size:12px;color:#444;background:url(../images/bg-body.gif) repeat-x #f1f1f1;text-align:center;}

.box{width:973px;margin:0px auto;text-align:left;}

(2)单行内容垂直中齐

Div{height:80px;line-height:80px;}

(3)IE中元素浮动时,margin左右加倍的问题

解决办法:Display:inline;

 

(4)实现1px高度的<div>

在IE6下解决办法:overflow:hidden; //超出1px外的部分全部隐藏掉

 

第三种:CSS HACK简介

CSS HACK,针对不同浏览器,编辑不同的CSS代码的过程,就叫CSS HACK。

(1)CSS属性的HACK

div{

background-color:#FF0000; //所有浏览器都支持

*background-color:#00FF00;   //ie6和IE7支持

_background-color:#0000FF;   //IE6认识

}

(2)CSS选择器的HACK(了解一下)

       IE7浏览器能识别

*+html div{

Background-color:#FF0000;

}

*html div{

Background-color:#FF0000;

}

 

注意:CSS HACK虽然可能解决一些浏览器兼容的问题,但必竟不是W3C的规范,因此尽量少用,如果实在调试不过去,偶尔用一下可以。

 

CSS浮动和清除

浮动元素向左或向右浮动(飘动),浮动包围元素(父元素)的边上或者上一个浮动元素的边上;

浮动元素应该是一个“块元素”,行内元素加了“浮动”特性后,将变成“块元素”;

行内元素,经过什么操作,可以变成“块元素”?

浮动、display:block、固定定位、绝对定位

浮动元素不占空间,层级应高于普通元素;

 

CSS定位:让元素相对于某个元素来进行相应的偏离。层级应该高于普通元素。

Position:定位属性,取值:static(默认、普通文档流、没有定位)、fixed(固定定位)、relative(相对)、absolute(绝对)

定位属性要配合四个定位坐标(left right   top bottom)值,来实现元素的定位;

固定定位(fixed):相对于浏览器窗口,来进行的定位。不占空间。将生成一个“块元素”,不管原来是什么元素。

相对定位(relative):相对于“它原来自己”进行定位。占空间。

绝对定位(absolute):相对于祖先定位元素(相对定位、绝对定位),进行定位。不占空间。生成“块元素”。

 

CSS HACK:针对不同浏览器(FF、IE7、IE6),书写CSS代码的过程。

div{

background-color:#FF0000;   //所有浏览器都支持

*background-color:#00FF00;   //IE6和IE7

_background-color:#0000FF;   //IE6

}

注意:一般来说,使用公共的CSS属性写法,可能满足我们的大部分兼容性,偶尔会有几个特殊的CSS属性存在不兼容性,就可以使用CSS HACK试一下。

CSS盒子模型

CSS选择器:伪类选择器

伪类选择器,就是超级链接增加样式。

链接有四种状态::link(正常)、:hover(放上)、:active(激活)、:visited(访问过)

项目中应用时:

a:link,a:visited{color:#FF0000;}

a:hover{color:#0000FF;}

 

CSS字体文本属性:

CSS列表属性:list-style:none; 列表样式中,只有一个属性用得着,其它的都用不着;

CSS背景属性

Background-image:背景图片,background-image:url(../images/bg.gif);

Background-repeat:背景平铺,取值:no-repeat、repeat、repeat-x、repeat-y

Background-position:背景定位,background-position:水平方向 垂直方向

Background-attachment:背景固定还是滚动,取值:fixed、scroll

Background:url(images/bg.gif) no-repeat 10px 0px

 

 

CSS清除和浮动

Float:使HTML元素向左或向右浮动,取值:left、right

浮动的元素,可以向左或向右浮动,直到碰到包围框的边上或者上一个浮动框的边上为止;

浮动的元素将脱离普通文档流,并且不再占用空间,浮动元素的层级要高于普通文档流中的元素。

浮动元素将生成块元素,不管它原来是什么元素(块元素、行元素)。换句话说,行内元素浮动后,将变成块元素,就可以设置width和height。

注意:行内元素<span>设置width和height是没有用的,行内元素主要是靠内容决定width和height

 

Clear:清除上面的浮动特性,取值:left(左浮动)、right(右浮动)、both(两者)

(1)如何让包围元素从“视觉上”包住浮动元素呢?就需要在包围元素的最下边(浮动元素)加上一个清除浮动。

(2)清除浮动的后面的其它元素,都将恢复默认排版。

 

 

CSS盒子模型

每一个HTML元素,都可以看成一个“盒子”。

一个“盒子”具有:内容的宽或高、边框线、内边距、外边距。

一个“盒子”具有:width和height、border、padding、margin

一个“盒子”宽度或高度的计算:内容宽为70px,左右内边距分别为5px、左右外边距分别为10px,求“盒子”的宽度?

总宽度=内容宽70px + 左右内填充 5px*2 + 左右外边距 10px*2 = 100px

举例2:盒子总宽度为100px,内容宽度80px,内填充5px,求左右的外边距?

       一个外边距=(100px – 80px – 10px)/2 = 5px

 

CSS边框属性

Border-left:设置元素的左边线,border-left:粗细 线型 颜色;

例如:border-left:2px solid #FF0000;

Border-right:设置元素的右边线

Border-top:设置元素的顶边框线

Border-bottom:设置元素的下边框线

Border:简写形式,同时设置四个边框线;

border:1px solid #FF0000; //同时设置四个边框线

线型的取值:

None:无边线;

Solid:实线;

Dashed:虚线;

Dotted:点状态线

Double:双线

CSS内填充(内边距)

Padding-top:上内填充距离

Padding-right:右内填充距离

Padding-bottom:底内填充距离

Padding-left:左内填充距离

Padding:简写形式

Padding:5px;   //上右下左内填充分别为5px

Padding:5px 10px; //上下分别为5px,左右分别为10px

Padding:5px 10px 15px; //上填充5px,左右分别为10px,下填充为15px

Padding:5px 10px 15px 20px; //顺序必须为:上右下左,上填充5px,右填充10px,下填充15px,左填充20px;

 

CSS外边距

Margin-top:上外边距

Margin-right:右外边距

Margin-bottom:下外边距

Margin-left:左外边距

Margin:简写形式

Margin:5px;   //上右下左,外边距分别为5px

Margin:5px 10px; //上下分别为5px,左右外边距分别为10px

Margin:5px 10px 15px; //上外边距5px,左右外边距分别10px,下外边距15px

Margin:5px 10px 15px 20px; //分别设置四个外边距,顺序是:上右下左

 

外边距合并的问题(怪异现象)

两个垂直块元素的上下外边距,会发生合并的问题,取其中较大的一个值。

行内元素、浮动元素、定位元素,外边距不会发生合并;

解决的方法:

(1)只能其中一个元素增加下外边距,另一元素的上外边距设置为0px;

(2)也就是在上下两个元素的中间,加一个100px高的空<div>

 

综合案例:传智PHP学院首页

 

 

HTML引入CSS的方法

1、内嵌式

通过<style></style>标记来引入CSS代码,<style>一般放在<head>标记中;

<stype type=“text/css”>

Body{

Margin:0px;

Padding:0px;

}

</style>

2、外链式:链接外部的CSS文件(.css)

通过<link>标记,来引入外部的CSS文件,<link>标记一般放在<head>标记中。

格式:<link href=“CSS文件路径” rel=“stylesheet” type=“text/css” />

Href:指定外部CSS文件的路径和名称;

Rel:当前文件与链入的文件的关系,取值:stylesheet;

例如:<link href=“css/public.css” rel=“stylesheet” type=“text/css” />

 

3、行内式

每一个HTML元素都有一个公共属性style,通过该属性可以直接给该元素添加样式,并且它的优先级最高

<p style=“width:400px;height:300px;border:1px solid #444;padding:20px;”>这里是一个段落</p>

 

选择器优先级:行内样式 > ID选择器 > 类选择器 > 标签选择器

CSS组合选择器

二、组合选择器

(1)多元素选择器:E,F,G,H{color:#FF0000;}

说明:同时给E元素、F元素、G元素、H元素增加样式,多个元素间用逗号隔开

body,div,ul,li,ol,dt,dd,p,form,a{ margin:0px; padding:0px; }

div.box,div#header,form{ color:#FF0000; }

div.box含义:class=“box”的<div>元素;

div#header含义:id=“header”的<div>元素;

(2)后代元素选择器

格式:E F{color:#FF0000;}

说明:E元素的所有后代的F元素,增加样式,中间用空格隔开

.news li{width:400px;border:1px solid #006600;}

 

(3)子元素选择器

格式:E > F{color:#FF0000}

说明:匹配E元素的子元素F,增加样式

举例:.news > .title{background-color:#FFCC66;}

 

  • 伪类选择器:一般是给超级链接<a>增加CSS样式

一个链接有四种状态:正常状态(:link)、放上状态(:hover)、激活状态(:active)、访问过的状态(:visited)

(1)全局链接样式的设置

a:link,a:visited{color:#0000FF;text-decoration:none;}

a:hover{color:#990000;text-decoration:underline;}

(2)局部链接样式的设置:给一类链接加样式

<a class=”a1″ href=”#”>福州:女子闹市候车时被划伤脸 凶手很快消失(图)</a>

a.a1:link,a.a1:visited{color:#009900;font-weight:bold;font-size:18px;}

a.a1:hover{ color:#FF00FF;border:1px solid #996600;}

 

 

 

CSS尺寸属性

Width:指定元素的宽度,单位是 px或%

Height:指定元素的高度,单位是px或%

注意:任何HTML元素,都可以看成一个“盒子”,都具有width、height、padding(内边距)、margin(外边距)、border、backgroun(背景)比如:<b><i><font><span><div><table>

 

CSS字体属性

font-family:设置字体

font-weight:粗细,取值:bold,相当于<b>

font-style:斜体,取值:italic,相当于<i>

font-size:文字大小

font:简写的形式,各个属性值间用空格隔开

body{ font-size:24px; font-family:黑体; font-weight:bold; font-style:italic; }

body{ font:bold italic 24px 黑体; }

 

CSS文本属性

Color:文本颜色,取值:英文单词、10进制、16进制;

text-align:文本的水平对齐,取值:left center right

text-decoration:文本修饰线,取值:none、underline、overline、line-through

text-indent:首行缩进,text-indent:36px;

letter-spacing:字间距

line-height:行高,line-height:150%;   line-height:24px;

 

CSS列表属性

list-style-type:列表的类型,取值:none、disc、circle、square

list-style-image:列表的图片,list-style-image:url(images/li01.gif);

list-style-position:符号的位置,取值:outside(外)、inside(内)

list-style:简写形式

.li01{ list-style-type:none;list-style-image:url(images/li01.gif);list-style-position:outside; }

.li01{ list-style:url(images/li01.gif) disc outside;}

实现:单行文本在一个“容器”中垂直居中,使用的原理是,height和line-height值一样,就可以实现。

 

 

CSS背景属性

Background-color:背景颜色

Background-image:背景图片,格式:background-image:url(images/bg.gif)

Background-repeat:背景平铺,取值:no-repeat(不平铺)、repeat(平铺)、repeat-x(水平方向)、repeat-y(垂直方向)

Background-position:水平方向 垂直方向,

Background-position:left|center|right top|center|bottom;   //水平垂直都居中

Background-position:50% 50%;

Background-position:100px 200px; //背景图距离左边100px,距离顶边200px

Background-attachment:当移动滚动条时,背景是固定(fixed)还跟着滚动(scroll)

Background:简写形式

.box{ background-image:url(images/bg.gif); background-repeat:no-repeat;background-position:center center;}

.box{background:url(images/bg.gif) no-repeat center center;}

CSS简介

CSS简介

CSS(Cascading Style Sheets,层叠样式表、样式表),我们可以根据需要来修改某一个HTML元素的样式。

XHTML是结构标记:哪些地方是段落,哪些地方是项目符号,哪些地方是图片等

CSS是表现、格式:这个段落文本颜色、大小、对齐方式、边框、背景颜色等。

 

以前是用以下方式来作网站:

<p><font color=“#ff0000” size=“7” face=“黑体”>北京传智播客教育培训中心</font></p>

现在我们要将结构和表现分离:

<style type=“text/css”>

p{

Color:#FF0000;

Font-size:24px;

Font-family: 黑体;

Background-color:#f0f0f0;

Border:1px dashed #000000;

Letter-spacing:10px;

}

</style>

<p>北京传智播客教育培训中心</p>

 

 

CSS语法格式

一个样式表<style></style>由多个样式规则构成;

一个样式规则由“选择器”和“格式声明语句”构成,如:h1就是选择器,{}中的语句就是格式定义;

选择器就是要定义样式的HTML元素(标记);

格式声明语句放在{}中,{}中由多个格式声明语句构成;比如:color:red;

格式语句由“属性名称”和“属性值”构成,属性名称和属性值间用冒号隔开,每个格式语句必须以分号结束

 

CSS选择器:给哪一个HTML标记加样式

  • 基本选择器

(1)通用选择器(*)

格式:*{font-size:24px;}

说明:通用选择器(*),将匹配所有的HTML标记。

注意:通用选择器(*),IE6不支持,建议尽量少用。

(2)标签选择器,对应于所学的HTML标记

格式:h1{color:#FF0000;}

举例:    h2{color:#FF0000;}

p{font-size:14px;line-height:150%;color:#9900CC;}

li{color:#0000ff;text-decoration:underline;cursor:pointer;}

(3)类样式:就是给一类HTML元素添加样式,类样式以“.”开头。(使用最多的样式)

可以同时给多个HTML元素增加class属性,class属性的值可以一样。

<div class=“news”>Welcome to Guangzhou</div>

<p class=“news”>这是一个段落</p>

<style type=“text/css”>

.news{ color:#FF0000; font-size:24px; }

</style>

(4)id选择器:给标记特定id属性的HTML元素添加样式,id选择器必须以“#”开头。(使用最少的样式

HTML元素的id属性的值,必须唯一。

Id属性就相当于身份证号一样,不能重复;

HTML元素的id属性,一般是给JS使用;

<div id=“box”></div>

<style type=“text/css”>

#box{color:#FF0000;}

</style>