×

css模板代码 模板

css模板代码(CSS模板代码谁有啊)

admin admin 发表于2022-09-03 23:24:20 浏览106 评论0

抢沙发发表评论

本文目录

CSS模板代码谁有啊


我挺喜欢这个风格的 我自己网站现在用这个
你可以复制以下代码到记事本 然后保存为CSS格式后 网页再对其进行调用即可
BODY {CURSOR: url(’mouse.ani’);
background-color: #C6CFD0;}
INPUT {BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 9pt; BORDER-LEFT-COLOR: #cccccc; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: #cccccc; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: #cccccc; PADDING-TOP: 1px; HEIGHT: 18px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc; font-family: “Verdana, Arial, 宋体“; font-size: 12px}
select {color: #082D71; background-color: #ffffff; border-color: #082D71 #082D71 #082D71 #082D72; font-size: 9pt}
textarea {color: #082d71; background-color: #ffffff}
td {FONT-FAMILY:Verdana, Arial, 宋体; font-size:9pt}
.l_title {COLOR: #000000; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
.m_title {COLOR: #ffffff; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
.r_title {COLOR: #000000; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
.noline {COLOR: #000000; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
A.noline:link {COLOR: #000000; text-decoration: none}
A.noline:visited {COLOR: #000000; text-decoration: none}
A.noline:active {COLOR: #666666; text-decoration: none}
A.noline:hover {COLOR: #666666; text-decoration: none}
.link {COLOR: #336699; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
A.link:link {COLOR: #336699; text-decoration: none}
A.link:visited {COLOR: #0066CC; text-decoration: none}
A.link:active {COLOR: #ff0000; text-decoration: none}
A.link:hover {COLOR: #ff0000; text-decoration: none}
.news {COLOR: #000000; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 14px;line-height:22px}
A.news:link {COLOR: #ff0000; text-decoration: none}
A.news:visited {COLOR: #000099; text-decoration: none}
A.news:active {COLOR: #ff0000; text-decoration: none}
A.news:hover {COLOR: #ff0000; text-decoration: none}
.class {COLOR: #000000; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt;line-height:12pt}
A.class:link {COLOR: #000000; text-decoration: none}
A.class:visited {COLOR: #000000; text-decoration: none}
A.class:active {COLOR: #0000ff}
A.class:hover {COLOR: #ff0000}
.lift {COLOR: #000099; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 12px}
A.lift:link {COLOR: #000099}
A.lift:visited {COLOR: #000099}
A.lift:active {COLOR: #cc0000}
A.lift:hover {COLOR: #ff0000}
.lift_top {COLOR: #000099; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 12px}
A.lift_top:link {COLOR: #000099}
A.lift_top:visited {COLOR: #0066CC}
A.lift_top:active {COLOR: #cc0000}
A.lift_top:hover {COLOR: #ff0000}
.middle {COLOR: #666666; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
A.middle:link {COLOR: #000000; TEXT-DECORATION: none}
A.middle:visited {COLOR: #000000; TEXT-DECORATION: none}
A.middle:active {COLOR: #0000ff; TEXT-DECORATION: none}
A.middle:hover {COLOR: #ff0000; TEXT-DECORATION: none}
.right {COLOR: #000099; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
A.right:link {COLOR: #ff0000}
A.right:visited {COLOR: #990000}
A.right:active {COLOR: #ff0000}
A.right:hover {COLOR: #ff0000; TEXT-DECORATION: none}
.eng {font-family:verdana,arial,helvetica; COLOR: #FFFFFF; FONT-SIZE: 9pt}
A.eng:link {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.eng:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.eng:active {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.eng:hover {COLOR: #ffff00; TEXT-DECORATION: none}
.bottom {COLOR: #ffffff; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
A.bottom:link {COLOR: #000000; TEXT-DECORATION: none}
A.bottom:visited {COLOR: #000000; TEXT-DECORATION: none}
A.bottom:active {COLOR: #FF0000; TEXT-DECORATION: none}
A.bottom:hover {COLOR: #FF0000; TEXT-DECORATION: none}
.top {COLOR: #ffffff; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
A.top:link { COLOR: #ffffff; TEXT-DECORATION: none}
A.top:visited { COLOR: #ffffff; TEXT-DECORATION: none}
A.top:active { COLOR: #ffffff; TEXT-DECORATION: none}
A.top:hover { COLOR: #ffffff; TEXT-DECORATION: none}
.black {COLOR: #000066; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
A.black:link { COLOR: #000066; TEXT-DECORATION: none}
A.black:visited { COLOR: #330000; TEXT-DECORATION: none}
A.black:active { COLOR: #FFFFFF; TEXT-DECORATION: none}
A.black:hover { COLOR: #ff0000; TEXT-DECORATION: none}
.top1 {COLOR: #ffffff; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
A.top1:link {COLOR: #ffffff; TEXT-DECORATION: none}
A.top1:visited {COLOR: #ffffff; TEXT-DECORATION: none}
A.top1:active {COLOR: #CCFF66; TEXT-DECORATION: none}
A.top1:hover {COLOR: #CCFF66; TEXT-DECORATION: none}
.my {COLOR: #000000; FONT-FAMILY:Verdana, Arial, 宋体; FONT-SIZE: 9pt}
A.my:link {COLOR: #000000; TEXT-DECORATION: none}
A.my:visited {COLOR: #000000; TEXT-DECORATION: none}
A.my:active {COLOR: #FF0000; TEXT-DECORATION: none}
A.my:hover {COLOR: #FF0000; TEXT-DECORATION: none}
.m_tittle{
font-size: 12px;
color: #ffffff;}
.daohang {
font-size: 12px;
font-weight: bold;
color: #000000;
background-repeat: repeat-x;
}
.daohang:link {
font-size: 12px;
font-weight: bold;
color: #336666;
text-decoration: none;
}
.daohang:visited {
font-size: 12px;
font-weight: bolder;
color: #336666;
text-decoration: none;
}
.daohang:hover {
font-size: 12px;
font-weight: bolder;
color: #336666;
text-decoration: underline;
}
.newstop {
background-position: center center;
}
A.MenuType:unknown link {
COLOR: #ffffff;FONT-SIZE: 12px; text-decoration: none
}
A.MenuType:link {
COLOR: #ffffff;FONT-SIZE: 12px; text-decoration: none
}
A.MenuType:active {
COLOR: #ffffff;FONT-SIZE: 12px; text-decoration: none
}
A.MenuType:visited {
COLOR: #ffffff;FONT-SIZE: 12px; text-decoration: none
; font-size: 12px
}
A.MenuType:hover {
COLOR: #CCFF66;FONT-SIZE: 12px; text-decoration: none
; font-size: 12px
}
.mtDropdownMenu {
LEFT: -1000px; OVERFLOW: hidden; POSITION: absolute; TOP: -1000px
}
.mtDropdownMenu .content {
POSITION: absolute
}
.mtDropdownMenu .items {
BORDER-BOTTOM: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; LEFT: 0px; POSITION: relative; TOP: 0px; Z-INDEX: 2
}
.mtDropdownMenu .item {
BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-RIGHT: medium none; BORDER-TOP: medium none; COLOR: #4a4b4b; CURSOR: hand; FONT-SIZE: 12px; TEXT-DECORATION: none
}
.mtDropdownMenu .background {
FILTER: alpha(opacity=85); LEFT: 0px; POSITION: absolute; TOP: 0px; Z-INDEX: 1; moz-opacity: .8
}
.mtDropdownMenu .shadowRight {
FILTER: alpha(opacity=40); POSITION: absolute; TOP: 3px; WIDTH: 2px; Z-INDEX: 3; moz-opacity: .4
}
.mtDropdownMenu .shadowBottom {
FILTER: alpha(opacity=40); HEIGHT: 2px; LEFT: 3px; POSITION: absolute; Z-INDEX: 1; moz-opacity: .4
}
.mtDropdownMenu .hover {
BACKGROUND: #ffffff; COLOR: #8d1c1c
}
.mtDropdownMenu .item IMG {
MARGIN-LEFT: 12px
}

CSS代码是什么


CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading
Stylesheet)。
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
它的作用可以达到:
(1)在几乎所有的浏览器上都可以使用。
(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
(4)你可以轻松地控制页面的布局

(5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。

css样式代码的基本格式


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”。
-css模板代码

如何设置CSS中的模板代码,让网页局中


这样:CSS里,外补丁margin如果值设置为:0
auto,那就可以居中,
你可以,把你整个网页外加一个(也就是《body》后和《/body前》各加上《div》和《/div》)《div》《/div》;
然后在代码写为:《div
style=“margin:0
auto“》
-模板

谁能提供一下空间CSS的模板代码顺便告诉我一下代码插在哪里


1)空间CSS的模板代码:下面这几个,总有一个适合你。

参考资料:http://hi.baidu.com/百度空间/blog/item/2e8ea0ec58bc7a3d2697912c.html

什么是CSS代码


什么是CSS?
中文翻译为样式表! 它的作用简单的说:就是可以使你在同一页面里使用不同的超链接样式。
更神奇的是,用CSS,仅仅改变一个文件就可以改变数百个网页的外观......个性化的表现而不损失访问者......所有这些都因为网页样式表的强大和灵活特性。
1. CSS的语法:
CSS的定义是由三个部分构成:
选择符(selector),属性(properties)和属性的取值(value)。
语法: selector {property: value} (选择符 {属性:值})
说明:
·选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:
例子:body {color: black},此例的效果是使页面中的文字为黑色。
·如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:
例子:p {font-family: “sans serif“} (定义段落字体为sans serif)
· 如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开:
例子:p {text-align: center; color: red} (段落居中排列;并且段落中的文字为红色)
2. 选择符组
你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
h1, h3, h3, h4, h5, h6 { color: green } (这个组里包括所有的标题元素,每个标题元素的文字都为绿色)
p, table{ font-size: 9pt } (段落和表格里的文字尺寸为9号字)
效果完全等效于:
p { font-size: 9pt }
table { font-size: 9pt }
3. 类选择符
用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:
p.right {text-align: right}
p.center {text-align: center}
然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:
这个段落向右对齐的
这个段落是居中排列的
类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:
.center {text-align: center} (定义.center的类选择符为文字居中排列)
这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:
《h1 class=“center“》这个标题是居中排列的《/h1》
《p class=“center“》这个段落也是居中排列的《/p》
注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。
4. ID选择符
在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:
这个段落向右对齐
定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id=“intro“的元素:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
} (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明)
下面这个例子,ID属性只匹配id=“intro“的段落元素:
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。
5. 包含选择符
可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如:
table a
{
font-size: 12px
}
在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。
6. 样式表的层叠性
层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非另外更改。例如在DIV标记中嵌套P标记:
div { color: red; font-size:9pt}
……
这个段落的文字为红色9号字
(P元素里的内容会继承DIV定义的属性)
注意:有些情况下内部选择符不继承周围选择符的值,但理论上这些都是特殊的。例如,上边界属性值是不会继承的,直觉上,一个段落不会同文档BODY一样的上边界值。
另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。如果上例中定义了P的颜色:
div { color: red; font-size:9pt}
p {color: blue}
……
这个段落的文字为蓝色9号字
我们可以看到段落里的文字大小为9号字是继承div属性的,而color属性则依照最后定义的。
不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级。ID选择符,类选择符和HTML标记选择符,因为ID选择符是最后加上元素上的,所以优先级最高,其次是类选择符。如果想超越这三者之间的关系,可以用!important提升样式表的优先权,例如:
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
我们同时对页面中的一个段落加上这三种样式,它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important,则依照优先权最高的ID选择符为黄色文字。
7. 注释:/* ... */
你可以在CSS中插入注释来说明你代码的意思,注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以“/*“ 开头,以“*/“ 结尾,如下:
/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */
}
建议你到这学习学习:
http://www.ahtvu.ah.cn/jxc1/wshdsh/webstyle/computer/cssd/index.htm
http://www.netvtm.com/w3/css/css-syntax.htm
参考资料:http://www.webjx.com/htmldata/2006-03-29/1143593476.html
-css模板代码

css样式里常用代码 包括哪些


font-size:12px;/*文字大小*/
color:#CCCCCC;/*文字颜色*/
font-family:Arial,
Helvetica,
sans-serif;/*设置字体*/
font-weight:bold;/*文字加粗*/
text-align:center;/*DIV标签内部水平方向居中或居左右*/
text-decoration:underline;/*下划线*/
line-height:150%;/*行高*/
margin:10px
0
5px
0;/*容器外部边距*/
margin-top:10px;
padding:10px
0
5px
0;/*容器内部边距*/
float:left;/*1.仅在做列的结构才用
2.用了float要用父DIV包起来*/
background-color:#999999;/*背景颜色*/
background-image:url(images/test.gif);/*背景图片*/
background-repeat:no-repeat;/*背景图片不平铺*/
background-position:5px
10px;/*背景图片的位置,第一个为横坐标,第二个为纵坐标*/
list-style-type:none;/*消除ul无序列表li前面的小黑点*/
display:block;/*以块形式显示,通常用于链接中实现鼠标划过的效果*/
display:inline;/*当用了float时做靠边的DIV外边距出现翻倍情况时才使用,针对的是IE6的一个bug*/
border:1px
solid
#ccc;/*表格、DIV、LI、A等容器的边框属性,虚线是dashed*/
overflow:hidden;/*溢出部分隐藏*/
overflow:auto;/*自动判断容器高度,从而选择自动出现/隐藏垂直滚动条*/
/*自动适应高度,并且兼容火狐的做法*/
clear:both;
overflow:hidden;
-模板

怎样写CSS样式代码


有两种方法:
一是编辑.css文件,样式代码写进这个.css文件中,
然后在HTML文档中引用这个css文件,即可
二是,写进HTML文档中,作为内联样式。
一般用《style》标签来写,或者写到具体元素的style属性中。
-css模板代码

什么是CSS模板


CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一
点,没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是
Netscape Navigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。不管你用什么工
具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,为什么同样内容的网页,有的人做出来有
几十KB,而高手做出来只有十几KB,CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信
提问的问题整理出来,供诸位参考。
1、CSS在网页制作中一般有三种方式的用法,那么具体在使用时该采用哪种用法?
当有多个网页要用到的CSS,采用外连CSS文件的方式,这样网页的代码大大减少,修改起来非常方便;只在单个网页
中使用的CSS,采用文档头部方式;只有在一个网页一、两个地方才用到的CSS,采用行内插入方式。
2、CSS的三种用法在一个网页中要以混用吗?
三种用法可以混用,且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因,浏览器在显示网页时是这样处
理的:先检查有没有行内插入式CSS,有就执行了,针对本句的其它CSS就不去管它了;其次检查头部方式的CSS,有就执行
了;在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出,三种CSS的执行优先级是:行内插入式、头部方
式、外连文件方式。
3、在Dreamweaver3中如何使外部文件式CSS?
在Dreamweaver3中使用外连文件式CSS并没有特殊要求,同样是用记事本创建一个*.css文件,在网页的《head》与
《/head》之间加上一句这样的代码:《link rel=“stylesheet“ href=“在这里填上你的CSS文件地址(相对路径+文件
名)“ type=“text/css“》 就行了。
4、如何用Dreamweaver3快速创建CSS外连式文件?
对于一个初接触CSS的网页设计人员来讲,要用记事之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于
Dreamweaver3对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:
1)先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver3的编辑窗中调出CSS面板,一个一个地定
义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;
2)全部定义好后,再用记事本创建一个空的CSS外连式文件,把在《head》与《/head》之间的那段定义好的CSS复制
到CSS文件中去,就大功告成了。整个过程就是点鼠标,方便吧?
5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗?
不用!先用CSS面板定义好要用的CSS,然后,在要插入CSS的标记插入:style=““,再把你刚才定义的CSS从《head》
后面拖到这个双引号中来,把花括号以外的部分删去就行了。
6、在方档头部方式和外连文件方式的CSS中都有“《!--”和“--》”,好象没什么用,不要可以吗?
这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS,它将忽略其中的内
容。虽然现在使用不支持CSS浏览器的人已很少了,由于互联网上几乎什么可能都会发生,所以还是留着为妙。
7、如何给一部分文字加背景色?
给文字加上不同颜色,在DW3中只要在属性面板上选取文字的颜色就行了,非常方便,但要给部分文字加不同的背景色
却没有相应的功能,我们可以先做一个定义背景色的CSS(如:bgstyle),在DW3中点几下鼠就完成了。如一个定义淡黄色
背景的CSS是这样的:
《style type=“text/css“》
《!--
.bgstyle { background: #FFFFCC}
--》
《/style》
在要用时选取那段文字,再在CSS面板上点一下“bgstyle”就行了。
8、如何给部分文字加背景图像?
与加背景色操作类似,中是在背景在选择加载图象就是了,一个定义好的加背景图象的CSS例子的代码是这样的:
《style type=“text/css“》
《!--
.imgbgstyle { background-image: url(/logo.gif)}
--》
《/style》
在要用时选取那段文字,再在CSS面板上点一下“imgbgstyle”就行了。
9、如何使页面的背景在文字“滚动”时背景图案静止不动?
要使背景图案不随文字“滚动”的CSS是这样的:
《style type=“text/css“》
《!--
BODY { background: purple url(/bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
--》
《/style》
10、如何定义字间距?
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就
是字间距,它指的是每一个字符之间的额外间距,经长度为单位,正负值均可,当取负值时产生字符挤在一起的效果。下
面代码是一个定义好的字间距CSS例子:
《style type=“text/css“》
《!--
.style1 { letter-spacing: 3px}
--》
《/style》
11、如何给文字加上划线、下划线、删除线和闪烁?
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些
内容,要注意的是闪烁属性有些版本的浏览器不支持,少用为好。下面是一个定义好上述效果的CSS例子:
《style type=“text/css“》
《!--
.style1 { text-decoration: underline overline line-through blink}
--》
《/style》
其中: “underline”是定义下划线;“overline ”是定义上划线;“ line-through”定义的是删除线;“blink”
定义的是文字闪烁。
12、如何使网页具有“首行缩进”功能?
由于DW3输入空格不方便,利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框(style Definition
for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”,所谓“首行”是指每段内容的第一行,也
就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉
字,设置好的CSS如下所示:
《style type=“text/css“》
《!--
.style1 { text-indent: 2em}
--》
《/style》
在DW3要注意:在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“text-indent”右
面的缩进单位选择框中“ems”指的就是“em”。
13、在用表格进行排版时,能使某一方向上的内容离开表格线一点吗?
可以!在DW3中CSS的属性定义对话框(style Definition for .style1)的“Box”上的“margin”定义的就是内容离
开边缘的距离,分别可定义四个方向:“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例
子代码:
《style type=“text/css“》
《!--
.style1 { margin: 0px 0px 0px 10px}
--》
《/style》
14、能给某部分内容加边框吗?
用CSS可以给某部分内容加边框,在DW3中CSS的属性定义对话框(style Definition for .style1)的“Border”定义
的就是边框线,“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色,这些定义好后不要忘记在下面的
“style”中定义线型,否则将看不边框线,因为默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框
为:绿色中粗线的CSS例子:
《style type=“text/css“》
《!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--》
-模板

CSS代码怎么用放哪


1、此段css代码,其他页面不需要。可以直接放在需要的HTML文件中。

在head标签下,写上style标签,把css代码放在style标签中。

2、可以新建一个css文件,比如index.css,把这段css代码放进这个index.css文件中。

然后在HTML文件中引入index.css文件。

《link rel=“stylesheet“ href=“index.css“》

href:写index.css文件的路径。

扩展资料:

插入样式表的方法:

1、外部样式表

每个页面使用 《link》 标签链接到样式表。 《link》 标签在(文档的)头部:

《head》《link rel=“stylesheet“ type=“text/css“ href=“mystyle.css“》《/head》

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

2、内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 《style》 标签在文档头部定义内部样式表:

《style》

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url(“images/back40.gif“);}

《/style》

3、内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

《p style=“color:sienna;margin-left:20px“》这是一个段落。《/p》

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下,优先级如下:
内联样式)Inline style 》 (内部样式)Internal style sheet 》(外部样式)External style sheet 》 浏览器默认样式