CSS学习之实例

坚持 成长 每日一篇

背景实例

设置背景色

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray}
p.no3{background-color: rgb(100%,100%,100%)}

设置背景图片

background-repeat属性的值
no-repeat只显示一张图片
repeat-x沿水平方向铺满
repeat-y沿垂直方向铺满
repeat 铺满全屏

body {background-image:url(/i/eg_bg_04.gif);}
<!--只显示一次图片，如果图片太小不会铺满-->
body {
background-image:url(http://pic.baike.soso.com/p/20140404/20140404162443-1075855132.jpg);
background-repeat: no-repeat
}

放置图片的位置

background-position属性：表示图片的开始位置

body
{ 
  background-image:url('/i/eg_bg_03.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}

注意：background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

设置文本颜色

body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}

使用像素来定位背景图像位置

为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 “fixed”。

body
{ 
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
}

使用％来定位背景图像

body
{ 
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%; 
}

所有的背景属性(background) 在一个声明中设置

{ 
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
}

文本实例

设置字符间距

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

使用百分比设置行间距

p.small {line-height: 90%}
p.big {line-height: 200%}

使用像素点设置行间距

p.small
  {
  line-height: 10px
  }
p.big
  {
  line-height: 30px
  }

使用数值设置行间距

p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}

文本对齐

h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}

修饰文本

h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}

缩进文本

p {text-indent: 1cm}

控制文本中的字母

 h1 {text-transform: uppercase}
  p.uppercase {text-transform: uppercase}
  p.lowercase {text-transform: lowercase}
  p.capitalize {text-transform: capitalize}

在元素中禁止文本折行（换行）

white-space: nowrap

增加单词间距

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

字体实例font

设置文本字体

p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}

设置字体尺寸

h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}

设置字体风格

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

设置字体异体

p.normal {font-variant: normal}
p.small {font-variant: small-caps}

设置字体的粗细

p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}

所有字体属性在一个声明内

p.ex1
{
font:italic arial,sans-serif;
}

边框(border)实例

所有边框属性在一个声明之中

p 
{
border: medium double rgb(250,0,255)
}

设置4边框样式

border-style:dotted solid double dashed; 

从左到右依次如下：（单个值默认四边框相同，两个值默认上下，左右）
上边框是点状
右边框是实线
下边框是双线
左边框是虚线

p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}

设置每一边的不同边框

p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}

设置四个边框的颜色

p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-colo

所有下边框属性在一个声明中

border-style:solid;
border-bottom:thick dotted #ff0000;

设置下边框的颜色

border-style:solid;
border-bottom-color:#ff0000;

设置下边框的样式

p {border-style:solid}
p.none {border-bottom-style:none}
p.dotted {border-bottom-style:dotted}
p.dashed {border-bottom-style:dashed}
p.solid {border-bottom-style:solid}
p.double {border-bottom-style:double}
p.groove {border-bottom-style:groove}
p.ridge {border-bottom-style:ridge}
p.inset {border-bottom-style:inset}
p.outset {border-bottom-style:outset}

设置下边框宽度

p.one 
{
border-style: solid;
border-bottom-width: 15px
}
p.two 
{
border-style: solid;
border-bottom-width: thin
}

其他边框设置也是类似的

CSS 外边距 (margin) 实例

设置文本的左外边距

p.leftmargin {margin-left: 2cm}

设置文本的右外边距

p.rightmargin {margin-right: 8cm}

设置文本的上外边距

p.topmargin {margin-top: 5cm}

下外边距

p.bottommargin {margin-bottom: 2cm}

一个声明四个方向

p.margin {margin: 2cm 4cm 3cm 4cm}