CSS样式表怎么做 css怎么建立外部样式表？
css\u6837\u5f0f\u8868\u600e\u4e48\u7528\u554aCSS\u7684\u8c03\u7528\uff0c\u6309\u7167CSS\u51fa\u73b0\u5728\u9875\u9762\u7684\u4e0d\u540c\u4f4d\u7f6e\uff0c\u53ef\u4ee5\u5206\u4e3a3\u79cd\u65b9\u6cd5\uff1a
\u3000\u3000\u5143\u7d20\u4e2d\u76f4\u63a5\u4f7f\u7528\uff1b
\u3000\u3000\u4ece\u9875\u9762\u5934\u90e8\u8c03\u7528\uff1b
\u3000\u3000\u91c7\u7528\u94fe\u63a5\u7684\u5f62\u5f0f\u8c03\u7528\u3002
\u3000\u3000\u4e0d\u540c\u7684\u8c03\u7528\u65b9\u6cd5\u6709\u4e0d\u540c\u7684\u5199\u6cd5\u548c\u4f18\u5148\u7ea7\u3002\u4e0b\u9762\u5206\u522b\u505a\u4e00\u4e0b\u4ecb\u7ecd\u3002
\u3000\u3000\u4e00\u3001\u5143\u7d20\u4e2d\u76f4\u63a5\u4f7f\u7528
\u3000\u3000\u8fd9\u79cd\u8c03\u7528\u65b9\u5f0f\u7684\u5199\u6cd5\u5982\u4e0b\uff1a
\u3000\u3000\u5728\u6837\u5f0f\u4e2d\u76f4\u63a5\u4f7f\u7528CSS\uff0c\u8bed\u6cd5\u662f\u4f7f\u7528style\u6807\u7b7e\uff0c\u5728\u53cc\u5f15\u53f7\u4e2d\uff0c\u6837\u5f0f\u7684\u8bed\u6cd5\u7ed3\u6784\u548c\u72ec\u7acb\u6837\u5f0f\u8868\u4e2d\u5b8c\u5168\u76f8\u540c\u3002\u4f8b\u5982\uff1a
\u793a\u4f8b\uff1a\u5143\u7d20\u4e2d\u76f4\u63a5\u8c03\u7528\u3002
\u3000\u3000\u8be5\u6837\u5f0f\u4e2d\u5b9a\u4e49\u4e86\u5143\u7d20\u5bbd\u3001\u9ad8\u4e3a360\u300180\u50cf\u7d20\uff0c\u80cc\u666f\u8272\u4e3a\u7070\u8272\uff0c\u5b57\u4f53\u5927\u5c0f\u4e3a14\u50cf\u7d20\u3002\u5176\u5e94\u7528\u5230\u9875\u9762\u4e2d\u7684\u663e\u793a\u5982\u56fe1\u3002
\u3000\u3000\u4e8c\u3001\u4ece\u9875\u9762\u5934\u90e8\u8c03\u7528
\u3000\u3000\u4ece\u9875\u9762\u5934\u90e8\u8c03\u7528CSS\u662f\u5c06CSS\u5199\u5728\u9875\u9762\u7684head\u5143\u7d20\u4e2d\uff0c\u7136\u540e\u5728\u9875\u9762\u4e2d\u8c03\u7528\u3002\u5176\u8bed\u6cd5\u7ed3\u6784\u5982\u4e0b\uff1a
\u9009\u62e9\u7b26{\u5c5e\u6027:\u5c5e\u6027\u503c;}
\u3000\u3000\u9875\u9762\u4e0a\u7684\u6240\u6709\u6837\u5f0f\u90fd\u53ef\u4ee5\u5199\u5728\u548c\u4e2d\u3002\u4f7f\u7528\u8fd9\u79cd\u65b9\u5f0f\u8c03\u7528CSS\uff0c\u5728\u9875\u9762\u4e2d\u5fc5\u987b\u6709\u76f8\u5e94\u7684\u8c03\u7528\u4ee3\u7801\u3002
\u3000\u3000\u5176\u4e2d\uff0c\u7c7b\u9009\u62e9\u7b26\u7684\u8c03\u7528\u4ee3\u7801\u5982\u4e0b\uff1a
\u3000\u3000ID\u9009\u62e9\u7b26\u7684\u8c03\u7528\u4ee3\u7801\u5982\u4e0b\uff1a
\u3000\u3000\u4e0b\u9762\u6211\u4eec\u6765\u7528\u4e00\u4e2a\u793a\u4f8b\u6f14\u793a\u4e00\u4e0b\u3002
CSS\u8c03\u7528\u65b9\u6cd5
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
\u793a\u4f8b\uff1a\u4ece\u9875\u9762\u5934\u90e8\u8c03\u7528\u3002
\u3000\u3000\u8be5\u6837\u5f0f\u5e94\u7528\u5230\u9875\u9762\u7684\u6548\u679c\u5982\u56fe2\u6240\u793a\u3002
\u3000\u3000\u4e09\u3001\u91c7\u7528\u94fe\u63a5\u7684\u5f62\u5f0f\u8c03\u7528
\u3000\u3000\u91c7\u7528\u94fe\u63a5\u7684\u5f62\u5f0f\u8c03\u7528CSS\u901a\u5e38\u6709\u4e24\u79cd\u65b9\u6cd5\uff1a
\u3000\u3000\u4f7f\u7528link\u5143\u7d20
\u3000\u3000\u4f7f\u7528link\u5143\u7d20\u8c03\u7528CSS\u7684\u8bed\u6cd5\u5982\u4e0b\uff1a
\u3000\u3000\u5176\u4e2drel="stylesheet"\u6307\u8fd9\u4e2alink\u548c\u5176href\u4e4b\u95f4\u7684\u5173\u8054\u6837\u5f0f\u4e3a\u6837\u5f0f\u8868\u6587\u4ef6\u3002type="text/css"\u6307\u6587\u4ef6\u7c7b\u578b\u662f\u6837\u5f0f\u8868\u6587\u672c\u3002
\u3000\u3000\u4f7f\u7528@import
\u3000\u3000\u4f7f\u7528@import\u8c03\u7528\u548c\u4f7f\u7528link\u5143\u7d20\u8c03\u7528\u7684\u533a\u522b\u5728\u4e8e\uff0c\u4f7f\u7528@import\u7684\u8c03\u7528\u65b9\u6cd5\u53ea\u80fd\u4f7f\u7528\u5728\u6837\u5f0f\u6587\u4ef6\u4e2d\uff0c\u5373\u53ea\u80fd\u5728\u8c03\u7528\u7684\u6837\u5f0f\u6587\u4ef6\uff0c\u6216style\u5143\u7d20\u4e2d\u624d\u80fd\u6b63\u5e38\u4f7f\u7528
\u5efa\u7acb\u5916\u90e8\u6837\u5f0f\u8868\u5f88\u7b80\u5355\uff0c\u5c31\u5728html\u7684head\u91cc\u5199
\u81f3\u4e8e\u4f60\u4e0a\u8fb9\u8bf4\u7684\u4e00\u5927\u5806css\u91cc\u5177\u4f53\u5185\u5bb9\uff0c\u5efa\u8bae\u4f60\u53bbw3school\u4e0a\u5b66\u4e00\u4e0bcss\uff0ccss\u5f88\u7b80\u5355\u7684\uff0c\u8fd8\u662f\u522b\u6307\u671b\u522b\u4eba\u7ed9\u4f60\u5199\u597d\u4e86
1、创建使用css样式表有三种，分别是外部样式表，内部样式表和内联样式。下面通过一个小demo演示它们的用法，首先新建一个html文件，放入3个button按钮，给前两个按钮分别设置class属性为btn1和btn2：
2、接着准备一个css文件，命名为demo.css，在文件内写入按钮A的样式，保存css文件：
3、回到刚才的html文件，在style标签中用link标签引入上一步创建的css文件，这就是外联样式的用法，总结就是创建好的css文件内写好样式，然后在html文件中用link标签引入即可，这也是大部分网站使用的方法，因为其引入方便，管理起来也比较方便：
4、接着是内部样式表的使用，这里直接在head标签里创建style标签，在里面加入btn2的样式。对于内部样式表简单的html文件，内部样式是很方便的，但是结构复杂的html文件使用它就会让文件显得很混乱：
5、最后是内联样式的使用，直接在第三个标签内使用style属性加入样式就可以了：
6、最后保存html文件，打开浏览器可以看到三个按钮的样式都出现了。以上就是css样式表的制作方法：
在网页中使用CSS：
一、内部规则 - 直接写在网页文件内部的样式
1.将以下代码插入在<HEAD>与</HEAD>之间可设定此页的默认的样式
<style type="text/css">
<!--
body{color=red;font-size=9pt}
-->
</style>
2.在HTML行中加入样式规则
如：
<P STYLE="background: yellow; font-family: courier">Amaze your friends!</P>
二、外部规则 - 独立的样式表文件
1.链接样式表文件
方法：在<HEAD>内使用<LINK>标签：
如：<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
并建立一个文本文件，起名mystyles.css (和上面对应)。文件内容如：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
2.输入样式表文件(返回)
方法：在<HEAD>内插入列代码：
<STYLE TYPE="text/css">
<!--
@import url(company.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>
并建立一个文本文件，起名company.css (和上面对应)。文件内容如：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
可见该种方法的好处是可与网页的内部样式共存。
三、CSS举例
指定全文的文本格式：
body{background: yellow;color=red; font-size=9pt}
指定局部的默认的文本格式：
P{...}
H1{...}
TH{...}
TD{...}
...
指定超链接的样式：
A:link {text-decoration: none; color:#0000FF; font-family: 宋体}
A:visited {text-decoration: none; color: #800000; font-family: 宋体}
A:active {text-decoration: none; color: #FF0000; font-family: 宋体}
A:hover {text-decoration: underline; color:#FF0000}
推荐你可以上菜鸟教程官网学习
在网页中使用CSS：
一、内部规则 - 直接写在网页文件内部的样式
1.将以下代码插入在<HEAD>与</HEAD>之间可设定此页的默认的样式
<style type="text/css">
<!--
body{color=red;font-size=9pt}
-->
</style>
2.在HTML行中加入样式规则
如：
<P STYLE="background: yellow; font-family: courier">Amaze your friends!</P>
二、外部规则 - 独立的样式表文件
1.链接样式表文件
方法：在<HEAD>内使用<LINK>标签：
如：<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
并建立一个文本文件，起名mystyles.css (和上面对应)。文件内容如：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
2.输入样式表文件(返回)
方法：在<HEAD>内插入列代码：
<STYLE TYPE="text/css">
<!--
@import url(company.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>
并建立一个文本文件，起名company.css (和上面对应)。文件内容如：
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
可见该种方法的好处是可与网页的内部样式共存。
三、CSS举例
指定全文的文本格式：
body{background: yellow;color=red; font-size=9pt}
指定局部的默认的文本格式：
P{...}
H1{...}
TH{...}
TD{...}
...
指定超链接的样式：
A:link {text-decoration: none; color:#0000FF; font-family: 宋体}
A:visited {text-decoration: none; color: #800000; font-family: 宋体}
A:active {text-decoration: none; color: #FF0000; font-family: 宋体}
A:hover {text-decoration: underline; color:#FF0000}
指定行距：
用数字设行距，如：
B { font-size: 12pt; line-height: 2 }
浏览器将利用字号来确定行距：它将字号乘以设定的参数值。在本例中，行高将是24点。
用长度单位设定行距，如：
B { font-size: 12pt; line-height: 11pt }
用比例设定行距，如：
B { font-size: 10pt; line-height: 140% }
在本例中，行距是长度10points的140％，即14points。
在HTML中插入CSS的方法主要有三种，它们分别是内联样式、内部样式、链接式和外部样式。
1.内联样式
内联样式是在标记的style属性中设定CSS样式。如下面的例子将h1的内容标记为黑底白字。
2.内部样式表
内部样式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。如对本网页所有的h1标记都设置为黑底白字：
3.外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。CSS样式定义在.css文件中，可以通过一定的规则在HTML页面中进行引用。
在dr中建立一个.css样式文件，写入css样式，然后导入到网页中即可！
绛旓細鎻掑叆鏍峰紡琛鐨勬柟娉曟湁涓夌锛 澶栭儴鏍峰紡琛 褰撴牱寮忛渶瑕佸簲鐢ㄤ簬寰堝椤甸潰鏃讹紝澶栭儴鏍峰紡琛ㄥ皢鏄悊鎯崇殑閫夋嫨銆傚湪浣跨敤澶栭儴鏍峰紡琛ㄧ殑鎯呭喌涓嬶紝浣犲彲浠ラ氳繃鏀瑰彉涓涓枃浠舵潵鏀瑰彉鏁翠釜绔欑偣鐨勫瑙傘傛瘡涓〉闈娇鐢 鏍囩閾炬帴鍒版牱寮忚〃銆 鏍囩鍦(鏂囨。鐨)澶撮儴锛 娴忚鍣ㄤ細浠庢枃浠 mystyle.css 涓鍒版牱寮忓０鏄庯紝骞舵牴鎹畠鏉ユ牸寮忔枃妗ｃ 澶栭儴...
绛旓細鏈変笁绉嶆柟娉曞彲浠ュ湪绔欑偣缃戦〉涓婁娇鐢鏍峰紡琛锛氬鑱斿紡Linking锛堜篃鍙閮ㄦ牱寮忥級锛氬皢缃戦〉閾炬帴鍒板閮ㄦ牱寮忚〃銆傚祵鍏ュ紡Embedding锛堜篃鍙唴椤垫牱寮忥級锛氬湪缃戦〉涓婂垱寤哄祵鍏ョ殑鏍峰紡琛ㄣ傚唴鑱斿紡Inline锛堜篃鍙鍐呮牱寮忥級锛氬簲鐢ㄥ唴宓屾牱寮忓埌鍚勪釜缃戦〉鍏冪礌銆傚湪Dreamweaver 8涓紝鍙互鍦ㄥ紑濮嬪脊鍑烘涓偣鍑绘柊寤CSS鏂囦欢銆備篃鍙互鍦ㄦ渶涓婇潰鐨勮彍鍗曟爮...
绛旓細鍦℉TML涓彃鍏SS鐨勬柟娉曚富瑕佹湁涓夌锛屽畠浠垎鍒槸鍐呰仈鏍峰紡銆佸唴閮ㄦ牱寮忋侀摼鎺ュ紡鍜屽閮ㄦ牱寮忋1.鍐呰仈鏍峰紡 鍐呰仈鏍峰紡鏄湪鏍囪鐨剆tyle灞炴т腑璁惧畾CSS鏍峰紡銆傚涓嬮潰鐨勪緥瀛愬皢h1鐨勫唴瀹规爣璁颁负榛戝簳鐧藉瓧銆2.鍐呴儴鏍峰紡琛 鍐呴儴鏍峰紡鏄皢CSS鏍峰紡闆嗕腑鍐欏湪缃戦〉鐨勬爣绛惧鐨勬爣绛惧涓傚瀵规湰缃戦〉鎵鏈夌殑h1鏍囪閮借缃负榛戝簳鐧藉瓧锛3.澶...
绛旓細1銆佸垱寤轰娇鐢css鏍峰紡琛鏈変笁绉嶏紝鍒嗗埆鏄閮ㄦ牱寮忚〃锛屽唴閮ㄦ牱寮忚〃鍜屽唴鑱旀牱寮忋備笅闈㈤氳繃涓涓皬demo婕旂ず瀹冧滑鐨勭敤娉曘傞鍏堟柊寤轰竴涓猦tml鏂囦欢锛屾斁鍏3涓猙utton鎸夐挳锛岀粰鍓嶄袱涓寜閽垎鐧惧埆璁剧疆class灞炴т负btn1鍜宐tn2锛屽涓嬪浘銆2.鐒跺悗鍑嗗涓涓悕涓篸emo鐨凜SS鏂囦欢銆傚湪css鏂囦欢涓啓鍏uttonA鐨勬牱寮忥紝骞朵繚瀛榗ss鏂囦欢:3,HTML...
绛旓細3銆佹垜浠啓涓涓殑鏍囩锛屽皢缃戦〉鐨勯鐩啓鍏ヨ繘鍘伙紝璁╃綉椤电殑鏍囬鏄剧ず涓衡滃紩鍏ュ閮css鏂囦欢鍜屽閮╦s鏂囦欢鈥濄4銆佹垜浠敤鏍囩璁剧疆瀛楃鐨勭紪鐮佹牸寮忎负锛歎TF-8锛屼互浣挎祻瑙堝櫒鑳藉姝ｇ‘鐨勬樉绀烘垜浠殑缃戦〉銆5銆佹垜浠啓涓涓爣绛撅紝鐢ㄦ潵鍖呭惈缃戦〉鐨勪富浣撻儴鍒嗐6銆佹垜浠啓鍑犱釜鏍囩浠ヤ究鍦ㄥ閮╟ss鏂囦欢鏍峰紡琛涓紝涓哄叾璁剧疆鏍峰紡銆7銆佹垜浠...
绛旓細Dreamweaver浠ュ叾寮哄ぇ鐨勫姛鑳芥鍦ㄦ墿寮犲埌鏇村"缃戣櫕"鐨勭‖鐩橀噷锛岀劧鑰孌reamweaver骞堕潪姣忎釜鍔熻兘閮介偅涔堝嚭鑹层傝嚦灏戯紝鍦鏍峰紡琛(CSS)璁剧疆鏂归潰灏辨樉寰楀お涓撲笟锛岃杩欎簺鑻辨枃涓嶅ソ鐨"铏櫕"浠ぇ浼よ剳绛嬨傜粡杩嘚娆′笅杞姐佸畨瑁咃紝鍒板ご鏉ユ垜鎵嶅彂鐜板師鏉ユ渶濂界殑鏃╁凡鍦ㄨ嚜宸辩殑鎵嬩腑锛岄偅灏辨槸琚垜灏佸瓨寰堜箙鐨-- FrontPage...
绛旓細绀轰緥鍥剧墖 鍙互浣跨敤浠ヤ笂鏂瑰紡鍒涘缓骞朵功鍐 css 鏍峰紡鏂囦欢 褰撶劧, 涔熷彲浠ョ畝鍗曠偣: 鍙抽敭 => 鏂板缓绗旇鏈 ( 璁颁簨鏈 ) => 鍦ㄥ唴閮ㄤ功鍐 ".abc { bacground-color: red; }" => 鍏抽棴绗旇鏈 ( 璁颁簨鏈 ) => 閲嶅懡鍚 ( 灏 鏂板缓**鏈.txt => ys.css ) => 鍦ㄤ娇鐢 鍘昏繛鎺ユ牱寮忓嵆鍙 ...
绛旓細鏂板缓涓涓.css鐨鏍峰紡琛鏂囦欢 mycss.css 鐒跺悗鏍规嵁閫夋嫨鍣ㄥ啓鏍峰紡姣斿id閫夋嫨鍣 id{ font-size:40px;} class閫夋嫨鍣 .class{ font-size:40px;} 鏍囩閫夋嫨鍣 h1{ font-size:40px;} 鐒跺悗鎶婂閮ㄦ牱寮忓紩鍏ュ埌浣犺鐢ㄧ殑閭ｄ釜html鏂囦欢
绛旓細1.1 鍐呰仈鏍峰紡琛 鍦ㄦ爣绛句腑鐩存帴娣诲姞style 渚嬶細 1.2 鍐呭祵鏍峰紡琛 浣滀负涓涓嫭绔嬪尯鍩熷唴宓屽湪缃戦〉鍐咃紝蹇呴』鍗歌浇head鏍囩鍐 渚嬶細 1.3 澶栭儴鏍峰紡琛 鍗css鏍峰紡琛锛岄渶瑕佹柊寤轰竴涓猚ss鏂囦欢锛岀敤鏉ユ斁鏍峰紡琛ㄣ傚鏋滃湪html鏂囦欢涓皟鐢ㄦ牱寮忚〃锛岄渶鍦╤tml鏂囦欢涓偣鍑 鍙抽敭鈫扖SS鏍峰紡鈫掗檮鍔犳牱寮忚〃銆傦紙涓鑸敤link...
绛旓細1銆佺洿鎺ュ湪html鏍囩鍏冪礌鍐呭祵鍏css鏍峰紡锛屽鎴戞槸div css娴嬭瘯鍐呭-www.divcss5.com鏀寔 2銆佸湪html澶撮儴head閮ㄥ垎鍐卻tyle澹版槑鎻掑叆浠ｇ爜濡備笅锛 .ceshi {font-size:14px; color:#FF0000;}/*杩欓噷鏄缃瓹SS鐨勬牱寮忓唴瀹*/ 3銆佷娇鐢╨ink鏉ヨ皟鐢ㄥ閮ㄧ殑css鏂囦欢 鍦╤ead鏀剧疆鏉ヨ皟鐢ㄥ閮ㄧ殑wcss.css鏂囦欢鏉ュ疄鐜癶tml寮曠敤css...
