HTML中CSS外部样式表

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML中CSS外部样式表相关的知识，希望对你有一定的参考价值。

想写一个CSS外部样式。

字体颜色为黑色。字号为12。黑体
表格边框为0。

就这些可以引入html内的。

求大神！

1、首先我们我们新建一个记事本，并将记事本的名字改为“引入外部css文件和外部js文件.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。

2、我们编写一个html5的声明标签— <!DOCTYPE html>, 以使浏览器能认识到我们的文档是一个html5的文件，这样就可以快速的正确解读，以提高浏览的体验。

3、我们写一个<title>的标签，将网页的题目写入进去，让网页的标题显示为“引入外部css文件和外部js文件”。

4、我们用<meta>标签设置字符的编码格式为：UTF-8，以使浏览器能够正确的显示我们的网页。

5、我们写一个<body>标签，用来包含网页的主体部分。

6、我们写几个标签以便在外部css文件样式表中，为其设置样式。

7、我们新建一个css文件，把txt的文件后缀名改为css即可，之后打开就可以写入css代码了。

8、我们用标签选择器为<p>标签、<div>标签和<span>标签的内容设置样式。

9、我们使用,<link>标签将我们编写的css文件样式表文件其引入到我们当前的html文件中来。

10、我们鼠标右击在弹出的下拉菜单中，我们选择“在浏览器中打开”这一项。

11、我们看到我们编写的样式被应用到了标签中文字上，说明我们的css外部样式表文件引入成功。

 参考技术A 如果有可能的话，请下载Aptana Studio 3，并调试好。
在里面新建一个HTML文件，叫做“引入外部样式表.html”。
在同级目录下新建一个叫做css的文件夹，里面新建一个css文件，叫做“style.css”。
在“引入外部样式表.html”文件里打入这些代码（提示很多，上下键选择你需要的标记，回车键确定）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>引入外部样式表</title>
<!--使用link标签引入外部样式表-->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<span>你好！</span>
</body>
</html>
备注：注释的写法是：在<!--和-->之间填写你要的文字。<span>标记里的文字可以随机替换。
在“style.css"文件里打入这些代码（提示也很多）。
span
color:black;
font-size:12px;
font-family:"黑体";
border:0px solid black;

如果条件不允许，不能下载Aptana Studio 3的话，也可以像用户“滟丽00”一样新建记事本，后缀改为.html和.css就可以啦！
听懂了吗？求精选！ 参考技术B 内嵌样式(Inline Style)
Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。
这个Style定义里面的文字是20pt字体，字体颜色是红色。

内部样式表(Internal Style Sheet)
内部样式表是写在HTML的里面的。内部样式表只对所在的网页有效。

这个标题使用了Style。
这个标题没有使用Style。

内部样式表(Internal Sytle Sheet)要用到Style这个Tag，写法如下：

外部样式表(External Style Sheet)
将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
比如可以用文本编辑器(NotePad)建立一个叫home的文件，文件后缀不要用.txt，改成.css。文件内容如下：
H1.mylayout border-width: 1; border: solid; text-align: center;color:red
然后你建立一个网页，代码如下：

这个标题使用了Style。
这个标题没有使用Style。

使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：

样式代码可以复用。一个外部CSS文件，可以被很多网页共用。
便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。
提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。 参考技术C <link rel="stylesheet" href="css/main.css" type="text/css"/>

href为css位置链接 参考技术D 新建一个 文本吧后缀改为.css
然后直接在xxx.css里写CSS样式
*
font-family:"黑体";
font-size:12px;
color:#000000;
border:none;

比如我xxx.css在D:/myStyle/下
那么我页面就这么引用
<link href="D:/myStyle/xxx.css" rel="stylesheet" type="text/css" />
如果你.css放在站点下
你就找到他的位置替换 link 下的href 的path就OK了追问

直接把*
font-family:"黑体";
font-size:12px;
color:#000000;
border:none;

放入head可以么。

追答

嗯，完全可以的！记得要打中间~

本回答被提问者采纳

css

css概述

 

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

一.样式

1.行内样式

<p   style="color:red">你好</p>

-----定义在body某行内

2.内部样式

<style type="text/css">

p{  color:bule  }

</style>

-----定义在head中

3.外部样式

p{  color:bule  }-----写在css文件中

<link  rel="styleSheet"  href="css/xx.css">-----写在head中

------在建立css文件时文件名要与相关的html名一致，方便区分

 

二.选择器

1.元素选择器

如：  p{ color:red }

2.id选择器

#id值{}  如： #t1{color:red}

3.类选择器

.class值{}  如： .city{color:red} ----如果有多个，用‘,‘隔开，群组选择

4.通配选择器

*{}    如：*{color:red}------所有字体都为红色

5.包含选择器

#d1 h1{color:red}----定义在css/head内

<div id="d1">

　　<h1 >你好</h1>-----body 内

</div>

#d1> h1{color:red}------子元素选择

#d1+ h1{color:red}-------兄弟（弟弟）元素选择

6.伪类及伪类选择器

a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/

a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/

a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
7.选择器优先级
!important > id > class > element(元素) > 伪类

三.属性
作用：用于指明格式
1.长度单位
　a.绝对长度：cm、mm、in
　b.相对长度：px、em
　　em:用户的浏览器默认渲染的文字大小是“16px”，弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.365em”
1em=16px

2.颜色单位

　　a.用百分比值表示：  color:rgb(50%,0,50%)

　　b.用简化十六进制数定义：  #80

　　c.为颜色取名： red 、green

3.字体属性

　　a.   font-fimally-----字体

　　b.   font-size-----字体大小  如： font-size=“30px”

　　c.   font-style-----设置字体风格。

　　d.   font-weight-----设置字体的粗细。

4.文本属性

　　a.  color----设置文本颜色

　　b.  line-heigh----设置行高

　　c.  indent----缩进元素中文本的首行。

　　d.  transfrom----控制元素中的字母。

 

　　　　　 h1 {text-transform:uppercase}----全大写
　　　 h2 {text-transform:capitalize}----首字母大写
　　　 p {text-transform:lowercase}----全小写
　 e. decoration-----向文本添加修饰。
　　overline 上划线
　　underline 下划线
　　line-through 中划线 
 

 

以上是关于HTML中CSS外部样式表的主要内容，如果未能解决你的问题，请参考以下文章

css 菜鸟

CSS样式表代码布局基础教程

为啥在html中调用外部css样式表没有效果

CSS---基础外部样式表

怎么建立css外部样式文件

如何链接外部CSS样式表