本帖最后由 java 于 2017-8-10 20:02 编辑
css教程
http://www.vxzsk.com/89/cate.html
媒体类型
不同的媒体类型可以用不同的 CSS 样式表。举例来说，在屏幕sreen上的文件可能适用某一个 CSS 样式表，而同一份文件在被打印时，可以用一个不同的 CSS 样式表。也就是说如可能显示在屏幕sreen上，也可能显示在纸质print上。那么当页面在不同的媒体类型中显示时，需要的样式可能是不一样的。比如，一般在screen上显示时，页面字体要大一些，在纸质媒体显示时，页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢？这就要靠声明media type来实现了。
标出一个 CSS 样式表媒体类别的语法如下：
外部连接套用
<link rel="stylesheet" href="style.css" type="text/css" media="【媒体类别】">
嵌入套用
<style type="text/css" media="【媒体类别】">
汇入套用
@import url("style.css") 【媒体类别】;
Div
Div 这个标签目的是将内容分为不同的区域，而每一个区域可以根据 CSS 中的渲染而有自己的样式。Div 是一个区块级容器 (block-level container)，这代表在 </div> 标签后会换行。
Span
Span 跟 Div 类似的地方是，这两个标签的目的都是将内容分为不同的区域。不同的是，Span 可以涵盖更细层的元素。所以，我们甚至可以用 <span> 来调整单一文字的样式。另外，在 </span> 之后并不会换行。
css 长度单位
在 CSS ，长度单位可以分为两大类：绝对 (absolute) 单位以及相对 (relative) 单位。
相对单位包括：
px: pixels
em: em
ex: x 字母的高度
绝对单位包括：
in: 吋
cm: 公分
mm: 公厘
pt: points, 1 pt = 1/72 吋
pc: picas, 1 pc = 12 pt
如果没有注明单位，那默认的单位是 px。
在大部分的情况下，用相对长度单位会比较适合。这是因为，这样子您能让使用者依自己的喜好来加大或减小字体。如果您用绝对长度单位的话，使用者就无法改变字体的大小了。
在盒子模式中，内容 (content) 是最内层的部分，接下来依序为留白 (padding)、边框 (border)、以及边界 (margin)。边界是用来设定各个元素之间的距离。 更为详细的如图所示：
说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding-bottom、padding-left）、边框（border-top、border-right、border-bottom、border-left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
外边距 (margin) 是在边框之外，并且是用来设定各个元素之间的距离。一个盒子有四个边，所以我们可以对这四个边逐一设定： 1 margin-top (上边界) 2 margin-right (右边界) 3 margin-bottom (下边界) 4 margin-left (左边界) 第五个属性，margin，是用来作为同时设定四个边的捷径属性。 有三种方式可以设定边界，分别为长度、百分比、以及 'auto'。我们来看以下的例子：
- #container {
- margin-top:5px;
- margin-left:10%;
- margin-right:auto;
- margin-bottom:20px;
- border: 1px solid 000000;
- }
边界捷径 所有四个边的边界可以同时由 margin 属性设定。它的语法如下：
margin: [上面边界值] [右边边界值] [下面边界值] [左边边界值]
在这里，顺序非常重要。第一个值一定是上边界的值，第二个值一定是右边界的值，第三个值一定是下边界的值，而第四个值一定是左边界的值。
示例
设置 p 元素的 4 个外边距： - p
- { margin:2cm 4cm 3cm 4cm;
- }
在 CSS 中常见的边框 (border) 属性有以下几种： border-style border-width border-color border-top-, border-left-, border-bottom-, border-right- border
border-style border-style 属性指定边框的样式。以下的表格列出这个属性可能有的值，以及每一个值显现出来的结果。
css样式
| 效果 | | p {border-style:solid;} | 实线 | | p {border-style:dashed;} | 虚线  | | p {border-style:double;} | 双实线 | | p {border-style:dotted;} | 点线  | | p {border-style:groove;} | 凹线 | | p {border-style:ridge;} | 凸线 | | p {border-style:inset;} | 嵌入线
| p {border-style utset;} | 浮出线
|
|
|
border-width border-width 属性是用来设定边框的宽度。可用的值为 thin (薄)、medium (中等)、thick (厚)，或是一个数字。 示例
| p {border-width:9px; border-style:solid;}
|
意思为边框宽度为9px
| p {border-width:medium; border-style:dashed;}
|
边框宽度为中等
border-color border-color 属性是用来设定边宽的颜色。
举例如下：
| p {border-color:#0000FF; border-style:solid;}
|
效果
| p {border-color:red; border-style:dotted;}
|
效果
border-top-, border-left-, border-bottom-, border-right- 我们可以将方向 (top - 上、bottom - 下、left - 左、right - 右) 和样式、宽度、及颜色合起来而成为一个属性。举例来说， border-top-style 属性就是用来设定上边框的样式。 以下举几个例子：
| css样式 | 效果 | | p {border-top-style:solid; border-bottom-style:dotted;} |  上边框为实线，下边框为点线 | | p {border-top-style:solid; border-top-width:medium;} | 上边框为实线，且宽度中等 | p {border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;} | 左边框为实线，下边框为虚线，且颜色为绿色 |
border 若四边的边框属性都一样，那我们可以用一个 border 属性来描述，而不必四个边都描述一次。另外，我们可以在同一行一次宣告边框样式、边框宽度、以及边框颜色。
举例来说，若我们有以下的 CSS 码，
| p {
border:#0000FF 5px solid;
}
|
那以下的 HTML， 效果
用一行来设置所有边框的属性 http://www.vxzsk.com/761.html
留白 (padding) 是在内容外，边框内的部分。一个盒子有四个边，所以我们可以对这四个边的留白逐一设定： 1 padding-top (上) 2 padding-right (右) 3 padding-bottom (下) 4 padding-left (左) 第五个属性，padding，是用来作为同时设定四个边留白的捷径属性。 例如 设置 p 元素的 4 个内边距： - p
- { padding:2cm 4cm 3cm 4cm;
- }
- #container {
- padding-top:15px;
- padding-left:10px;
- padding-right:30px;
- padding-bottom:40px;
- border: 1px solid 000000;
- }
留白捷径 所有四个边的留白可以同时由 padding 属性设定。它的语法如下：
padding: [上面留白值] [右边留白值] [下面留白值] [左边留白值]
在这里，顺序非常重要。第一个值一定是上面留白的值，第二个值一定是右边留白的值，第三个值一定是下面留白的值，而第四个值一定是左边留白的值。
在 CSS 中常见的背景 (background) 属性有以下几种：
background-color
background-image
background-repeat
background-attachment
background-position
每一个属性在以下会有详细地介绍：
background-color
background-color 属性是用来指定背景的颜色。
css样式 效果
p {background-color: 00FF00;} 绿色背景
p {background-color: red;} 红色背景
background-image
background-image 属性是用来指定用什么图案来当做背景。
css样式 效果
p {background-image:url(yp.jpg);} 有背景图案，yp.jpg为图片全路径
background-repeat
background-repeat 属性是用来指定背景图案重不重複。预设值是 "repeat"，代表此背景图案将在 x- 及 y-方向都会重覆。其他的值为 x-repeat (x-方向重复)、y-repeat (y-方向重复)、以及 no-repeat (不重复)。
举例如下：
css样式 效果
p {
background-image:url(yp.jpg);
background-repeat: no-repeat;
}
背景图案不重复
p {
background-image:url(yp.jpg);
background-repeat: repeat-x;
}
背景图案在 x-方向重复
p {
background-image:url(yp.jpg);
background-repeat: repeat-y;
}
背景图案在 y-方向重複。
-
p {
background-image:url(yp.jpg);
background-repeat: repeat;
}
背景图案在 x- 及 y-方向重複。
--------------------------------
background-attachment
background-attachment 属性是用来指定背景图案是否在萤幕上固定。这个属性可能的值为 "fixed" (当网页卷动时，背景图案固定不动) 以及 "scroll" (当网页卷动时，背景图案会跟著移动)。
以下是两个例子：
背景图案不动
body {background-attachment: fixed;
background-image: url("yp.jpg");
background-repeat: no-repeat;
}
背景图案移动
body {background-attachment: scroll;
background-image: url("yp.jpg");
background-repeat: no-repeat;
}
background-position
background-position 属性是用来指定背景图案的位置。它的值可以是：
两个字：第一个字为 [top,center,bottom] 中三选一，而第二个字由 [left,center,right] 中三选一。
两个百分比：第一个百分比为 x-轴的百分比，第二个为 y-轴的百分比。
两个数目：第一个数目为 x-轴的位置，第二个数目为 y-轴的位置。
举例如下：
背景图案在中间
body { background-image: url("yp.jpg");
background-repeat: no-repeat;
background-position: center center;
}
图案的位置离上面 20% 与离左边 20% 的地方
body { background-image: url("yp.jpg");
background-repeat: no-repeat;
background-position: 20% 20%;
}
///////////////////////////////color (颜色) 属性能让我们在 CSS 中设定一个元素的颜色。
这个属性可以有以下三类的设定值：
十六进位值
RGB 码
颜色名称
color 属性的语法如下：
十六进位值:
{color:#XXXXXX;}
X 为十六进位码 (从 0 到 9，以及 A 到 F)。
RGB:
{color:rgb(X,Y,Z); } X、Y、和 Z 都是介于 0 和 255 之间的数字。
或是
{color:rgb(X%,Y%,Z%); } X、Y、和 Z 都是介于 0 和 100 之间的数字。
颜色名称:
{color:[颜色名称];}
十六进位值是一个以六码 (如果前两码、中间两码、以及最后两码都一样的话，那也可以以三码的形式表现。举例来说，#FFF 及 #FFFFFF 都是代表白色) 来设定颜色。这一个 十六进位码颜色表 可以让我们知道什麽码会对应到什麽颜色。
在这里，我们就以上三种方式各举一个例子：
css样式 效果
p {color:#FF0000;} FF0000 代表紅色。
p {color:rgb (255,0,255);} rgb(255,0,255) 是粉红色。
p {color:green;} 这是绿色。
在 CSS 中常见的字体 (font) 属性有以下几种：
font-family
font-size
font-weight
font-style
font-variant
每一个属性在以下会有详细地介绍：
font-family
font-family 属性是用来设定字体的类别。
css样式代码 效果
p {font-family: verdana;} Font Family Verdana.
p {font-family: arial;} Font Family Arial.
p {font-family: impact;} Font Family Impact.
font-size
font-size 属性是用来设定字体的大小。大小可以是以数字显现 (绝对的或是相较的均可)，或是以下其中之一的值："xx-large"、 "x-large"、 "large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。
css样式 效果
p {font-size:9px;} 字体大小为9px
p {font-size:150%;} 字体大小为 150%。
p {font-size:0.8cm;} 字体大小为 0.8 cm。
p {font-size:small;} 字体大小为 small。
p {font-size:large;} 字体大小为 large。
font-weight
font-weight 属性是用来设定字体的厚度。厚度的设定值可以从 100 到 900 (900 是最厚的)。另外，我们也可以将厚度设定为 bold (厚)、bolder (更厚)、及 normal (正常)。
以下举几个例子：
css样式 效果
p {font-weight: 100;} 这是厚度 100。
p {font-weight: 900;} 这是厚度 900
p {font-weight: bold;} 这是 bold 厚度。
font-style
font-style 属性是用来设定字体是否为斜体字 (italic 或 oblique)。
css样式 效果
p {font-style: italic;} 这是斜字
font-variant
font-variant 属性是用来设定文字是不是要以小型大写 (small caps) 字体显现。在小型大写字体中，所有的字母都是大写，可是字体是比一般大写来得小。可能的值为 "small-caps" 和 "normal"。来看下面的例子：
CSS 代码
span {
font-variant:small-caps;
}
以下的 HTML 码，
<span>initial in small caps</span> AND LATER IN LARGE CAPS.
效果
initial in small caps AND LATER IN LARGE CAPS.
连接的预设样式是蓝色，且有下划线。可是，有的时候，我们会想要改变一下这个预设的样式。这可以透过以下几个选择器来达成：
a:link: 设定当连接过去的网页尚未被看过时，该连接的样式。
a:visited: 设定当连接过去的网页已经看过时，该连接的样式。
a:hover: 设定当滑鼠盖在连接上面时，该连接的样式。
a:active: 设定当连接被点击时，该连接的样式。
让我们来看看以下的样式：
a:link {color:#FF0000; text-decoration:none;}
a:visited {color:#0000FF; text-decoration:none;}
a:hover {font-size:20; color:#00FF00; text-decoration:underline;}
a:active {color:#FF00FF; text-decoration:underline;}
以上样式的意思为：
1) 一开始时，连接文字的颜色是红色。
2) 一但被连接的页面有被看过，连接文字颜色就变为蓝色。
3) 当滑鼠盖在连接上面时，文字大小变为 20，文字颜色变为绿色，而且下划线会出现。
4) 当连接被点击时，文字颜色变为粉红色，而且下划线不会消失。
在 CSS 中常见的列表 (list) 属性有以下几种：
list-style-type
list-style-position
list-style-image
list-style
每一个属性在以下会有详细地介绍：
list-style-type
list-style-type 属性是用来设定在清单中，每一条之前的记号要用什麽。最常见的 list-style-type 设定值为：
none (没有)
disc (全黑圆圈)
circle (空心圆圈)
square (正方形)
也可以使用有序字符集。常见的是：
upper-latin (大写拉丁文)
lower-latin (小写拉丁文)
upper-roman (大写罗马文)
lower-roman (小写罗马文)
upper-alpha (大写希腊文 )
lower-alpha (小写希腊文 )
以下列举几个例子：
例 1：
<ul style='list-style-type:upper-roman;'>
<li>项目 1</li>
<li>项目 2</li>
</ul>
結果：
項目 1
項目 2
例 2：
<ul style='list-style-type:square;'>
<li>正方形项目 1</li>
<li>正方形项目 2</li>
</ul>
結果：
正方形項目 1
正方形項目 2
list-style-position
list-style-position 属性让我们可以决定记号是否应该被视为是文字的一部份，并且由此而决定记号的位置。这个属性可能的设定值为 "inside" 及 "outside"。预定值为 "outside"。
以下是两个例子，由其中我们可以看出来 inside 及 outside 的不同：
例 3:
<ul style='list-style-position:inside;'>
<li>第一个项目<br>第一项目的第二行
<li>第二个项目
</ul>
結果：
第一個項目
第一項目的第二行
第二個項目
例 4：
<ul style='list-style-positionutside;'>
<li>第一个项目<br>第一项目的第二行
<li>第二个项目
</ul>
結果：
第一個項目
第一項目的第二行
第二個項目
list-style-image
list-style-image 属性是用来将某个图案设定为记号。这个属性的用法为，
list-style-image:url([image_url]);
举例来说，若 CSS 样式为：
ul {
list-style-image:url("circle.gif");
}
那以下的 HTML 码，
<ul>
<li>第一项利用自我设定的记号。
<li>第二项利用自我设定的记号。
</ul>
就会显现为，
第一项利用自我设定的记号。
第一项利用自我设定的记号。
list-style
以上提到的这三个 (list-style-style、list-style-position、及 list-style-image) 属性可以被简化为一个 list-style 属性。这种做法称为捷径 (shortcut)。在这裡，属性的顺序并不重要。
举例来说，以下的 CSS 样式，
ul {
list-style: url("circle.gif") none inside;
}
套用在以下的 HTML 码中，
<ul>
<li>第一项以捷径方式列出的清单。
<li>第二项以捷径方式列出的清单。
</ul>
就会显现出
第一项以捷径方式列出的清单。
第二项以捷径方式列出的清单。
| 
|Archiver|手机版|小黑屋|firemail
( 粤ICP备15085507号-1 )
发表于 2017-7-11 17:54:51
收藏
楼主
