css样式文件的类型不包括？不属于css文本属性的是
大家好，今天给各位分享css样式文件的类型不包括的一些知识，其中也会对不属于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" rel="external nofollow" 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基础问题
先解释一下网页添加css样式的方法，一共有四种，分别是：
一、内嵌样式——直接在页面的标签里加<div style="border:1px red solid;">测试信息</div>
二、内部样式表——在head部分加入<style type="text/css">div{margin: 0;padding: 0;border:1px red solid;}</style>
三、链入外部样式表——在head部分加入<link rel="stylesheet" type="text/css" rel="external nofollow" href="my.css" media="all"/>，引入外部的CSS文件
四、导入外部样式表——在head部分加入<style type="text/css">@import url(my.css);</style>
样式表的优先级顺序从高到低依次为：内嵌样式>内部样式表>导入外部样式表（其实是属于内部样式表）
链入外部样式表与内部样式表之间的优先级取决于所处位置的先后，最后定义的优先级最高。
本文主要是做@import导入样式表与link链入样式表的区别探讨，所以其他的不做详谈。
1.链入外部样式表
链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：
<head>
……
<link rel="external nofollow" href="mystyle.css" rel="stylesheet" type="text/css" media="all">
……
</head>
上
面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。
type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型，这些媒
体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。
2.导入外部样式表
导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import，看下面这个实例：
<head>
……
<style type=”text/css”>
<!--
@import“mystyle.css”
其他样式表的声明
-->
</style>
……
</head>
例中@import“mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，实质上它相当于存在内部样式表中的。
注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。
综合度娘的多篇文章和个人理解，两者的区别总结如下：
1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性，等，@import就只能加载CSS了。
2：
加载时间及顺序不同。使用link链接的css是客户端浏览你的网页时先将外部的CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来
的网页跟我们预期的效果一样，即使一个页面link多个css文件，网速再慢也是一样的效果；而使用@import导入的CSS就不同了，客户端在浏览网
页时是先将html的结构呈现出来，再把外部的CSS文件加载到网页当中，当然最终的效果也是跟前者是一样的，只是当网速较慢时会出现先显示没有CSS统
一布局时的html网页，这样就会给阅读者很不好的感觉。这也是现在大部分网站的CSS都采用链接方式的最主要原因。
3：兼容性不同。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4：使用dom控制样式时出现问题。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
5：
导入样式可以避免过多页面指向一个css文件。当网站中使用同一个CSS文件的页面不是非常多时，这两种方式在效果方面几乎是没有不同的，但网站的页面数
达到一定程度时（比如新浪等门户），如果采用链接的方式可能就会使得由于多个页面调用同一个CSS文件而造成速度下降，但是一般页面能达到这种程度的网站
也会有资本用最好的硬盘，所以这方面的因素也不用怎么担心。
综上所述，一般普通的站点在调用外部样式表的时候，还是尽量选择link链入外部样式表比较好。关于区别中第二点的加载顺序的差别中，找到一个国外的参考文章作为补充资料：
这段CSS样式文件代码的意思
a{//定义所有链接(a)的样式
color:#000;//定义文本颜色：黑色
text-decoration: none;//定义下划线样式为：不显示
}
body{//定义body样式，所有body内元素都继承body的样式
background:#CCC url(img/bg.gif) repeat-y fixed bottom center;
//定义背景：灰色背景图片url地址横向平铺背景固定背景图片位于最下居中
color:#333; margin: 20px 0;
//定义颜色//定义外边距：上下边距20px左右边距0
text-align: center; font: normal 0.6em sans-serif,Arial;
//定义文本格式：居中//定义字体样式：正常（对应加粗、斜体等）标准字体的0.6倍大小字库为sans-serif,Arial
//标准字体单位 em的大小根字库有关
}
.gfx a{//定义样式为gfx内的链接(a)：形如<div class='gfx'>..<a></a>..</div>这样的结构，对内部的a有效
background:#F5F5F5 url(img/bright_pixel.gif) no-repeat;
//定义背景
display: block; height: 240px;
//定义显示类型：块级//定义高度为240像素
}
.header{//定义class=header的元素的样式
background:#FFF;//定义背景
border-bottom: 1px solid#E5E5E5;//定义下边框样式：一像素宽，实线，颜色为#E5E5E5
font: bold 2.6em Arial;//定义字体：加粗，2.6倍大小，字库Arial
line-height: 3em;//定义行高：3倍正常字体高度
}
.main{//定义class=main的元素的样式
background:#FFF;//背景
border: 3px double#EEE;//定义边框：3像素宽，双线，灰色
border-color:#E4E4E4#CFCFCF#CCC#CFCFCF;//定义边框颜色，顺序依次为上、右、下、左
margin: 20px auto 4px auto;//定义外边距，顺序同上
text-align: left;//定义文本格式：靠左
width: 620px;//定义宽度
}
.menu a{//定义class=menu的元素中的链接Link元素（a）
background:#EEE;//背景
border-right: 1px solid#CECECE;//右边框
border-top: 1px solid#E5E5E5;//上边框
color:#888;//颜色
float: left;//设置漂浮：靠左漂浮
padding-top: 4px;//上内边距4像素
width: 149px; height: 36px;//定义宽和高
}
.menu a span{//定义class=menu元素内的a元素内的span元素
padding-left: 6px;//定义左内边距为6像素
}
.menu a:hover{//定义class=menu元素内的链接元素当鼠标移动上去的样式
//继承.menu a的定义，:hover为伪类，用于标示鼠标移动上去的样式
background:#EEE url(img/bgmenu.gif) repeat-x;//定义背景
color:#555;//颜色
}
.menu a#last{//定义class=menu元素内的id=last的a元素（链接）
width: 150px;//宽度
border-right: none;//右边框为0
}
.container{//定义class=container元素
margin: 10px;//设置外边距
}
.content{//定义class=content的元素
background:#F5F5F5;//背景
border-top: 1px solid#E5E5E5;//上边框
clear: both;//设置浮动清除：清除两边的浮动对象
}
.content h1{//定义class=content元素内的h1元素（标题）
margin: 0;//外边距
font: bold 1.1em sans-serif,Arial;//字体
color:#666;//颜色
}
.content p{//定义class=content元素内的p元素（段落）
margin: 3px 0 6px;//外边距
color:#666;//颜色
}
.item{//定义class=item的元素
background:#FCFCFC url(img/bgitem.gif) repeat-x;//背景
padding: 10px;//设置内边距
}
.footer{//设置class=footer的元素
padding: 5px;//内边距
background:#F5F5F5;//背景
color:#666;//颜色
}
＝＝还有不懂的，hi我＝＝
好了，文章到此结束，希望可以帮助到大家。