CSS5研究室

 找回密码
 注册
搜索
查看: 1173|回复: 7

26、html引入外部CSS文件

[复制链接]
发表于 2011-11-10 16:10:30 | 显示全部楼层 |阅读模式
html引入外部CSS文件

作业内容:
1、什么是CSS文件?
2、CSS文件怎么建立,什么扩展名?
3、HTML与CSS分离,各建立独立文件好处?
4、新建一个CSS文件,设置一个样式选择器,宽度100,高度100,黑色的实线边框2px。并在html引入成功。


引导阅读与掌握:
1、//www.css5.com.cn/css/95.shtml
2、//www.css5.com.cn/css/72.shtml
3、//www.css5.com.cn/css/20.shtml
4、//www.css5.com.cn/edu/thread-25-1-1.html
5、//www.css5.com.cn/edu/thread-75-1-1.html
6、//www.css5.com.cn/edu/thread-74-1-1.html
7、//www.css5.com.cn/edu/thread-73-1-1.html

目的:
1、认识常见html引入外部CSS文件方法
2、掌握link引入外部CSS文件
发表于 2011-11-23 16:26:59 | 显示全部楼层
1、css文件是css语句的集合
2、直接在dw里新建css文件,扩展名是.css
3、好处是浏览器 会同时从html 文件和css文件里下载,加快网页加载速度
4、<head><link rel="stylesheet" href="123.css" type="text/css" /></head>
回复 支持 反对

使用道具 举报

发表于 2011-11-25 09:24:19 | 显示全部楼层
1、什么是CSS文件?
能够做出各种样式的css文件
2、CSS文件怎么建立,什么扩展名?
css文件是指:把css代码放到独立的文件里,并以css为扩展名的文件
3、HTML与CSS分离,各建立独立文件好处?
能够实现html内容与样式的分离
4、新建一个CSS文件,设置一个样式选择器,宽度100,高度100,黑色的实线边框2px。并在html引入成功。
css文件:.yangshi{ width:100px; height:100px; border:2px solid #000;}
html引入:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="aa.css" type="text/css" />
</head>

<body>
<div class="yangshi"></div>
</body>
</html>
回复 支持 反对

使用道具 举报

发表于 2011-12-18 18:40:08 | 显示全部楼层
1、什么是CSS文件?
   css文件是指css代码放到一个单独的文件里

2、CSS文件怎么建立,什么扩展名?
   可以使用DW,记事本建立。扩展名为CSS

3、HTML与CSS分离,各建立独立文件好处?
   1、减少HTML文件的大小
   2、方便维护(网页样式外链CSS文件) :外部CSS文件一改全站样式即改
   3、html文件更加优化
   4、相同样式的定义重用节约CSS代码。
推荐大家使用外部CSS文件方式使用CSS样式,一来可以减少文件大小,二来可以方便维护(特别是网站项目中多页面引用同一CSS文件)网页布局与样式。

4、新建一个CSS文件,设置一个样式选择器,宽度100,高度100,黑色的实线边框2px。并在html引入成功。
   css文件  style.css:
   .yangshi{width:100px; height:100px; border:2px solid #000;}

   HTML文件
   <link rel="stylesheet" href="style.css" type="text/css" />

   <body>
     <div class="yangshi"></div>
   </body>
回复 支持 反对

使用道具 举报

发表于 2014-1-2 22:48:01 | 显示全部楼层
1、以css为后缀名的文件
2、可以用记事本,也可以在DW新建一个
3、加载速度会比较快,有助于开发
4、<link type="text/css" rel="stylesheet href="style.css""
回复 支持 反对

使用道具 举报

发表于 2014-4-3 12:51:18 | 显示全部楼层
1、什么是CSS文件?
后缀为css  就叫CSS文件
2、CSS文件怎么建立,什么扩展名?
打开记事本-文件-另存为-文件名的后缀改为css 保存

3、HTML与CSS分离,各建立独立文件好处?
节省空间,访问速速快,方便维护,管理 ,优化。

4、新建一个CSS文件,设置一个样式选择器,宽度100,高度100,黑色的实线边框2px。并

在html引入成功。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>DIV CSS中CLASS与ID实例 - - CSS网</title>

<link rel="stylesheet" href="css.css" type="text/css" />


<body>
<div class="yangshi">宽度100,高度100,黑色的实线边框2px</div>


</div>

</body>
</head>
</html>
回复 支持 反对

使用道具 举报

发表于 2014-4-27 23:31:51 | 显示全部楼层
1. 即集中定义CSS样式的文件
2. 可通过DW软件直接创建,也可在先创建一个可编辑的文本,将扩展名修改为”.CSS“即可,CSS文件的扩展名为”.CSS“
3. html与css分离,可以使系统的代码得到更加优化,减少代码的冗余,且利于系统维护,当需要修改样式时,只针对css文件修改,即可使系统中所有使用该样式的文件得到修改。
4. CSS文件中定义:.yangshi{width:100px; height:100px; border:1px solid #000}
html实现:<div class="yangshi">第26号作业 </div>
回复 支持 反对

使用道具 举报

发表于 2014-6-24 23:11:26 | 显示全部楼层
1、什么是CSS文件?
层叠样式表文件
2、CSS文件怎么建立,什么扩展名?
以.css为扩展名的文件
3、HTML与CSS分离,各建立独立文件好处?
重复使用,节约带宽,代码清晰
4、新建一个CSS文件,设置一个样式选择器,宽度100,高度100,黑色的实线边框2px。并在html引入成功。
my.css:
.yangshi{width:100px;height:100px;border:2px #000 solid;}
<link rel="sheetstyle" href="my.css" type="text/css"/>

<div class="yangshi"></div>
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|手机版|CSS5研究室

GMT+8, 2019-7-17 22:19 , Processed in 0.057233 second(s), 24 queries .

Powered by Discuz! X3.1 css技术学习

© 2001-2019 css5.com.cn

快速回复 返回顶部 返回列表