CSS学习笔记之梦之都：www.dreamdu.com/css/

2008年12月1日15:37:17
一 CSS基础
1.什么是CSS？CSS是用于布局与美化网页的.
CSS是Cascading Style Sheets的英文缩写,即层叠样式表.
CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
CSS是大小写不敏感的,CSS与css是一样的. CSS是由W3C的CSS工作组产生和维护的.

猴子提示: 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.

2.<title>定义文字的颜色</title>
  <style type="text/css" media="all"> //CSS样式标记<style>
   p //这样的话，下面Body里所有带<P>标记内的文字都将显示为蓝色。
   {
    color:blue;
   }
  </style>

3.<title>定义网页的背景颜色</title>
  <style type="text/css" media="all">
   body //Body就代表整个页面。
   {
    background-color:orange;
   }
  </style>
</head>
<body>
  <p>background-color就代表网页的背景颜色,我们使用桔黄色 Orange 为网页背景.</p>

4.<title>定义网页的背景图片</title>
  <style type="text/css" media="all">
   body
   {
    background:transparent url('http://www.cnblogs.com/Images/adminlogo.gif') repeat scroll center center;
   }
  </style>
</head>
<body>
  <p>background也可以定义网页的背景图片,我们以google的图片问网友背景图片.</p>

5.<title>定义文字的对齐方式</title>
  <style type="text/css" media="all">
    p#left //表示页面中在<P>以内的且<P>的ID为Left的元素都左对齐，以下意义同。
    {
     text-align: left;
    }
    p#right
    {
     text-align: right;
    }
    p#center
    {
     text-align: center;
    }
  </style>
</head>
<body>
  <p id="left">left左对齐</p>
  <p id="right">right右对齐</p>
  <p id="center">center居中,学习<a href="http://www.dreamdu.com/css/property_text_align/">文字对齐，text-align表示文字对齐方式。</a></p>
</body>
6.  <title>自定义列表样式</title>
  <style type="text/css" media="all">
   ul
   {
    list-style-image:url("/images/list-orange.png"); //list-style-image表示UL列表的类型的图片。
   }
  </style>
</head>
<body>
  <ul>
   <li>使用图片显示列表样式</li>
   <li>本例中使用了 list-orange.png 图片</li>
   <li>我们还可以使用 list-green.png top.png 或 up.png 图片</li>
   <li>学习<a href="http://www.dreamdu.com/css/property_list_style_image/">列表样式</a></li>
  </ul>
</body>

7.  <title>定于你的鼠标样式</title>
  <style type="text/css" media="all">
   body
   {
    cursor: progress; // 定义鼠标样式为过程型。
   }
   P#First
   {
    cursor: move;
   }
   P#Second
   {
    cursor: wait;
   }
  </style>
</head>
<body>
  <p id=First>可以随意定义鼠标的样式,这里我们定义鼠标移动样式.</p>
  <p>常用鼠标样式:
auto: 正常鼠标
crosshair: 十字鼠标
default: 默认鼠标
pointer: 点状鼠标
move: 移动鼠标
text: 文字鼠标
wait: 等待鼠标
help: 求助鼠标
progress: 过程鼠标
inherit: 继承
e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改变大小鼠标

</p>
<p id=Second>学习<a href="http://www.dreamdu.com/css/property_cursor/">鼠标样式</a>.</p>
</body>

2008年12月2日9:34:06
8.  <title>定义一个带有颜色的边框</title>
  <style type="text/css" media="all">
   p
   {
    border:medium 2px solid; //边框宽度：medium表示默认，thin表示细，thick 表示粗。也可以指定宽度，如2PX。Solid表示实心线，dotted和dashed表示虚线。
    border-color:red yellow green orange;//边框颜色，顺序分别为：上，右，下，左，即顺时针方向。
   }
    #test
     {border:thin dashed;
       border-color:green brown red brown;}
  </style>
</head>
<body>
  <p>定义一个框框的颜色,学习<a href="http://www.dreamdu.com/css/property_border_color/">定义框的颜色</a>.</p>
<div id=test>
定义一个带有颜色的边框
</div>
</body>

9.
/*链接样式*/
a:link //连接平常的状态
{
color:blue;
}
a:visited //连接被访问过之后
{
color:purple;
}
a:hover //鼠标放到连接上的时候
{
color: orange;
/*background: #3080CB;*/
}
a:active //连接被按下的时候
{
color:gray;
/*background: #3080CB ;*/
}

二CSS语法
1，外部引用CSS
外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).
外部引用CSS示例：
<head>
<link rel="stylesheet" type="text/css" href="http://www.dreamdu.com/style.css" />
</head> //Href的值可以是网络路径，也可以是本地路径。

内部引用CSS是可以使用style标签直接把CSS文件中的内容加载到HTML文档内部.
内部引用CSS示例：
<title> 内部引用CSS </title>
<style type="text/css">
.nsgreen
{
color:green;
font-size:16px;
}
.nsred
{
color:red;
font-size:26px;
}
</style>
</head>
<body>
<div class="nsgreen">欢迎来到梦之都</div>
<p class="nsred">这是我的第一个网页,在这里</p>
</body>
内联引用(直接在HTML标签中使用)虽然是一种快捷的方式(除了层叠的情况,高级教程中我会介绍层叠),但是不利于以后的统一修改和表现的一致性,所以不提倡使用.
内联引用CSS示例：
<p style="font-size: 20px; color: blue;">
使用CSS内联引用表现段落.
</p>

2，CSS选择符
CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用此CSS样式.
常用的三种选择符(我感觉这是初级教程中最难的地方:)
1.xhtml标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如 p{font-size:12px;}
2.id选择符,唯一性选择符,比如 #dreamdured{color:red;},就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了).
3.class选择符,多重选择符,比如.dreamdublue{color:blue;},就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法).

示例：<p>梦之都xhtml标签选择符</p>
<p id="dreamdured">梦之都id选择符</p>
<p class="dreamdublue">梦之都class选择符</p>（class选择符可以多次出现,他们之间用空格分开）

3，CSS声明

CSS声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的.
示例：
div
{
color:black;
font-size:12px;
}
h1, p, div
{
border:1px solid black;
}通过上面的示例大家可以看出选择符组合的好处,border: 1px solid black;这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量.（当然这里也可以是ID选择符和Class选择符）

4，CSS注释
CSS注释的开始使用/*,结束使用*/ 示例： /* 梦之都黑色16象素文字 */ .dreamdublack16px { color:black; font-size:16px; } 三CSS前景色 1，可以使用color属性表示前景色,前景色通常使用在文字上示例： body { color:brown; } #p1 { color:red; opacity:0.4;//不透明性为40％ } <p>梦之都教程示例</p> <p id="p1">color:red; 红色文字</p>

四CSS颜色 CSS的三种颜色表示方式： 1，CSS预定义颜色表示法(就是使用颜色的英文): 如：color:red; color:green; color:blue; 2，CSS RGB颜色表示法: 如：color:rgb(255,0,0); color:rgb(0,255,0); color:rgb(0,0,255); 3，CSS 16进制颜色表示法: 如：color:#ff0000; color:#00ff00; color:#1199ff;

五CSS背景色（米黄色的背景或浅灰色背景会更好，因为会减少刺眼的光）通常使用： background-color定义背景颜色, background-image定义背景图片, background-repeat定义背景图片的重复方式, background-position定义背景图片的位置, background-attachment定义背景图片随滚动轴的移动方式. background-color示例： <style type="text/css" media="all"> body { color:orange; //前景色 background-color:green ;//背景色 } p { color:blue; background-color:white; } </style>background-image属性示例： <style type="text/css" media="all"> body { background-image:url('http://www.exam8.com/images/images_djks2006/logo.gif'); } p { background-image:none; //无背景图片 } div { width:200px; height:200px; background-image:url('http://www.cnblogs.com/Images/adminlogo.gif'); } </style> background-repeat示例： <style type="text/css" media="all"> body { background-image:url('http://www.exam8.com/images/images_djks2006/logo.gif'); background-repeat:repeat;//平铺整个页面,左右与上下 background-repeat:no-repeat;//图片不重复,可设置background-position:center;使图片居中。 background-repeat:repeat-x;//在x轴上平铺,左右,横向重复 background-repeat:repeat-y;//在y轴上平铺,上下,纵向重复 } p { background-image:url('http://www.cnblogs.com/Images/adminlogo.gif'); background-repeat:repeat; background-repeat:no-repeat; background-position:center; //图片居中。 top:200px;left:200px; width:300px;height:300px; border:1px solid black;// 虚线框 } </style> </head> <body> <div>梦之都 <a href="http://www.dreamdu.com/css/%22%3ECSS教程</a>,<strong><a href="http://www.dreamdu.com/css/property_background_repeat/%22%3Ebackground-repeat%3C/a%3E%3C/strong>示例,no-repeat不重复的背景(页面左上角),我是通过橙色点定义了html元素的背景图片的.</div> <p>梦之都 CSS 教程,repeat-y竖着重复的背景(div的右侧).</p> </body>


background-position说明：

水平方向：Left,Center,Right 垂直方向：Top,Center,Bottom 垂直与水平的组合：X% Y% 

background-position示例

  <style type="text/css" media="all">

   body 

   { 

    background-image:url('http://www.cnblogs.com/Images/adminlogo.gif');

    background-repeat:no-repeat;//不重复，默认在Body页面左上角显示。

   }

   p 

   { 

    background-image:url('http://www.cnblogs.com/Images/adminlogo.gif');

    background-repeat:no-repeat;//不重复

    background-position:right bottom ; //在P段落的右下角显示

    border:1px solid brown;//P段落带绿色边框

    width:300px;height:300px;//P段落的大小

   }

   div 

   { 

    background-image:url('http://www.cnblogs.com/Images/adminlogo.gif');

    background-repeat:no-repeat;//不重复

    background-position:50% 50% ;//在Div区域的正中央显示

    border:1px solid green;//Div区在绿色边框

    width:300px;height:300px;//Div区域的大小

   }

  </style>

 </head>

 <body>

  <span>梦之都 <a href="http://www.dreamdu.com/css/%22%3ECSS教程</a>,<strong><a href="http://www.dreamdu.com/css/property_background_position/%22%3Ebackground-position%3C/a%3E%3C/strong>示例,由于默认值是0% 0%所以左上角显示橙色的点(页面左上角),我是通过橙色点定义了html元素的背景图片的.</span>

  <p>p段落中右下角显示橙色的点.</p>

  <div>在div的x轴50%,y轴50%的位置显示橙色的点.</div>

 </body>
background-attachment示例

说明：scroll: 随着页面的滚动轴背景图片将移动  fixed: 随着页面的滚动轴背景图片不会移动

  <style type="text/css" media="all">

   body 

   {

    background-image:url('http://www.cnblogs.com/Images/adminlogo.gif');

    background-attachment:scroll;//表示随着页面的滚动轴背景图片将移动

    background-repeat:repeat-x; //在X轴重复

    background-position:center center;  //在Body页面上左右上下均居中。

    position:absolute;//位置是绝对，可参见下面的Position说明。

    height:1000px;//Body高度为1000PX.                   

   }

  </style>

 </head>

 <body>

  <span>梦之都 <a href="http://www.dreamdu.com/css/%22%3ECSS教程</a>,<strong><a href="http://www.dreamdu.com/css/property_background_attachment/%22%3Ebackground-attachment%3C/a%3E%3C/strong>示例,拖动滚动条,并且注意中间有一条橙色线并不会随滚动条的下移而上移.</span>

 </body>
position属性的几个取值定义：

position: static、absolute、relative



static : 默认值。假如没有指定position属性，支持position属性的html对象都是默认为static，可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照你所编写的html标签的顺序依次呈现。

如下图所示，这是一个常见的指定了float:left;的横向导航：

 
relative: 相对定位。这个属性值保持对象所在文档流中的位置，也就是说它具有和static相同的呈现方式，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖；与static属性值不同的是，设置了relative的对象，可以通过top, left, right, bottom属性设定自己的新显示位置，这4个属性的取值是相对于文档流的前一个对象的，你可以自由设置这4个属性偏移到新的位置而不对文档流中的其他对象产生任何影响，原来的页面呈现仍然会我行我素：

 
absolute: 绝对定位。和relative不同的是，这个属性值会将当前对象拖出文档流，后面的对象会占有原来的位置，也就是说，当前对象的呈现是独立显示的，但是它的位置在指定top, left, right, bottom任一属性之前仍是有继续性的，这时的4个属性的取值是相对于浏览器的，和文档流无关了。假如把示例中的B区域设定为absolute而不指定 4个位置属性，通过设定margin来改变它的相对位置，用这个方法可以解决前面提到的问题2。



  
六CSS文本

CSS文本属性用于定义文字,空格,单词,段落的表现等. 

letter-spacing -- 定义文本中字母的间距(中文为文字的间距)

  <style type="text/css" media="all">

   .spnormal

   {

    letter-spacing: normal;

   }

   .spBig

   {

    letter-spacing: 3px;//正值为增大距离,

   }
   .spSmall

   {

    letter-spacing: -3px;//负值为缩小距离.

   }

  </style> 

<p class="spBig">梦之都 http://www.dreamdu.com/css/%22%3ECSS 教程>
word-spacing -- 定义以空格间隔文字的间距(就是空格本身的宽度) 

  <style type="text/css" media="all">

   .ws30

   { 

    word-spacing: 50px;

   }

  

   .wsn30

   { 

    word-spacing: -10px;

   }  

  </style>

<p class="ws30">仔细看是空格本身的  宽度,不是字母之间的距离</p>

 比较与说明:

letter-spacing定义了字与字之间的距离. 

word-spacing是控制字与字之间空格的宽度. 

word-spacing属性是为英文准备的,由于英文都是以空格分开的单词,所以它就代表词与词之间的距离.在中文的句子中只能使用空格隔开每个字才能表现出word-spacing属性. 
text-decoration -- 定义文本是否有划线以及划线的方式 

说明：
none: 定义正常显示的文本
[underline || overline || line-through || blink]: 四个值中的一个或多个

    underline: 定义有下划线的文本
    overline: 定义有上划线的文本
    line-through: 定义直线穿过文本
    blink: 定义闪烁的文本（在非IE下才可以）

    <style type="text/css" media="all">

       p#underline

       {

        text-decoration: underline; 

       }

       p#overline

       {

        text-decoration: overline; 

       }

       p#line-through

       {

        text-decoration: line-through; 

       } 

       p#blink

       {

        text-decoration: blink; 

       }  

       p#underoverthroughblink

       {

        text-decoration: underline overline line-through blink; 

       }

      </style> 

text-transform -- 定义文本的大小写状态,此属性对中文无意义 

capitalize: 首字母大写
uppercase: 全部大写
lowercase: 全部小写
none: 正常无变化

<style type="text/css" media="all"> p#capitalize { text-transform: capitalize; } p#uppercase { text-transform: uppercase; } p#lowercase { text-transform: lowercase; } </style> </head> <body> <p>梦之都教程示例</p> <p id="capitalize">www.dreamdu.com</p> <p id="uppercase">www.dreamdu.com</p> <p id="lowercase">www.dreamdu.com</p> </body>

text-align -- 定义文本的对齐方式

取值: left | right | center | justify | inherit
- left: 左对齐
- right: 右对齐
- center: 居中
- justify: 对齐每行的文字，近似于两端对齐。

text-indent -- 定义文本首行的缩进(在首行文字之前插入指定的长度)
p#indent
   {
    text-indent:2em;
    top:10px;
   }

2008年12月3日09:28:22

七CSS字体
CSS字体属性用于定义文字的字体,大小,粗细的表现等.
通常使用font-family定义使用什么字体,font-size定义字体大小,font-style定义斜体字,font-variant定义小型的大写字体,
font-weight定义字体的粗细。

family-name -- 表示系列性字体名称
  <style type="text/css" media="all">
   p#Heiti
   {
    font-family:"黑体";
   }
   p#Arial
   {
    font-family:Arial;
   }
   p#all
   {
    font-family:"黑体",Arial;//可以同时定义多个字体，以第一个系统有的字体为准。
   }
  </style>
</head>
<body>
  <p id="Heiti">梦之都示例,使用黑体.</p>
  <p id="Arial">使用arial字体.</p>
  <p id="all">由于系统中不一定有我们定义的字体,所以我们可以使用font-family属性的取值方式定义多个字体,如果第一个字体没有,可以显示下一个,以此类推.</p>
</body>

font-size -- 定义字体的大小
p
{
font-size: 16px;//中文常用的字体大小是12px,像标题什么的应该使用h1,h2等HTML标签
}
font-style -- 定义字体显示的方式
  <style type="text/css" media="all">
   p#normal
   {
    font-style:normal;
   }
   p#italic
   {
    font-style:italic;
   }
    </style>
</head>
<body>
  <p>梦之都 <a href="http://www.dreamdu.com/css/%22%3ECSS教程示例,使用宋体.</p>
  <p id="normal">正常字体.</p>
  <p id="italic">斜体.</p>
</body>

font-weight -- 定义字体的粗细
<style type="text/css" media="all">
   p#normal
   {
    font-weight: normal;
   }
   p#bold
   {
    font-weight: bold;
   }
   p#800
   {
    font-weight:800;
   }
</style>
</head>
<body>
  <p id="normal">font-weight: normal</p>
  <p id="bold">font-weight: bold</p>
  <p id="800">font-weight: 800</p>
</body>

八CSS列表
CSS列表属性可以改变HTML列表的显示方式.

通常使用list-style-type属性定义列表的样式,list-style-image属性定义列表样式的图片,
list-style-position属性定义列表样式的位置
list-style-type -- 定义列表样式
取值：

disc:点
circle: 圆圈
square: 正方形
decimal: 数字
decimal-leading-zero: 以一个0开头的数字e.g., 01, 02, 03, ..., 98, 99
lower-roman: 小写罗马文字i, ii, iii, iv, v, etc.
upper-roman: 大写罗马文字I, II, III, IV, V, etc.
lower-greek: 小写阿拉伯文字α, β, γ, ...
lower-latin: 小写拉丁文a, b, c, ... z
upper-latin: 大写拉丁文A, B, C, ... Z
armenian: 亚美尼亚数字
georgian: 乔治亚数字an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小写拉丁文a, b, c, ... z
upper-alpha: 大写拉丁文A, B, C, ... Z
none: 无(取消所有的list样式)
inherit:继承

list-style-image -- 定义列表样式图片
  <style type="text/css" media="all">
   ul
   {          list-style-type: disc;//下面定义了列表图片，这里的Disc样式就无效效了。
    list-style-image: url("http://images.5d6d.com/dz60/Picnicker/forum.gif");
   }
  </style>
</head>
<body>
  <ul>
   <li>使用图片显示列表样式</li>
   <li>本例中使用了 list-orange.png 图片</li>
   <li>我们还可以使用 list-green.png top.png 或 up.png 图片</li>
   <li>大家可以尝试修改下面的代码</li>
  </ul>
</body>

list-style-position -- 定义列表样式的位置
  <style type="text/css" media="all">
   ul#inside
   {
    list-style-position: inside;
    list-style-image: url("http://images.5d6d.com/dz60/Picnicker/forum_new.gif");
   }
   ul#outside
   {
    list-style-position: outside;
    list-style-image: url("http://images.5d6d.com/dz60/Picnicker/forum_new.gif");
   }
li
{border:1px solid green;}
  </style>
</head>
<body>
  <p>内部模式</p>
  <ul id="inside">
   <li>内部模式 inside</li>
   <li>梦之都 XHTML 教程.</li>
   <li>梦之都 CSS 教程.</li>
   <li>梦之都 JAVASCRIPT 教程.</li>
  </ul>
  <p>外部模式</p>
  <ul id="outside">
   <li>外部模式 outside</li>
   <li>梦之都 XHTML 教程.</li>
   <li>梦之都 CSS 教程.</li>
   <li>梦之都 JAVASCRIPT 教程.</li>
  </ul>
</body>

九CSS边框
border-width -- 定义四个边框的宽度
取值 thin: 细 medium: 中 thick: 粗 <length>: 长度表示法

   div
   {
    border-color:brown; //边框色为Brown
    margin:10px 20px 30px 40px;//边框距四周的间距，分别对应：上，右，下，左，即顺时针方向。
   }
  </style>
</head>
<body>
  <div id="topbottom">只定义顶部和底边框 border-top-width: thin;</div>
***********
  <div id="fourborders">定义全部四个边框 border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;</div>
***********
</body>

border-color -- 定义四个边框的颜色

border-style -- 定义边框的样式
border-style的取值：

none: 无样式
hidden: 除了同表格的边框发生冲突的时候,其它同none
dotted: 点划线
dashed: 虚线
solid: 实线
double: 双线,两条线加上中间的空白等于border-width的取值
groove: 槽状
ridge: 脊状,和groove相反
inset: 凹陷
outset:凸出,和inset相反

十margin -- 定义CSS边外补白
边框的外面可以有一层边外补白(margin),边外补白可以把块级元素分开.边外补白定义了围绕某种元素(elements)的空白.
边外补白分为上边外补白(top),下边外补白(bottom),左边外补白(left),右边外补白(right). 边外补白只有宽度width一种属性.
margin-width的取值：
<length>: 长度表示法 <percentage>: 百分比表示法,margin百分比的计算是基于生成的框的包含块的宽度.
p#onemargins
{
margin:12px;//所有边外补白全部为12px

}

p#onemargins

{

margin-top-width:12px;//分别指定各边外宽度，也可以只指定其中两项，如下下外边宽度。

margin-right-width:12px;

margin-bottom-width:12px;

margin-left-width:12px;

}

十一padding定义CSS边内补白

边框的里面面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距离. 

边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right). 

p#onepaddings
{
	padding:12px;//所有边内补白全部为12px
}

p#onepaddings { padding-top-width:12px;//分别指定四个边内补白宽度，也可以指定其中两个，如上下两个。 padding-right-width:14px; padding-bottom-width:16px; padding-left-width:18x; } 2008年12月3日14:58:01 梦之都CSS初级教程已拜读完，期待梦之都CSS高级教程出炉，关注www.dreamdu.com/css/

posted on 2008-12-01 15:39 念时阅读(441) 评论(0) 收藏举报