CSS代码怎么用?放哪?

html-css026

CSS代码怎么用?放哪?,第1张

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><linkrel="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属性。本例展示如何改变段落的颜色和左外边距:

<pstyle="color:siennamargin-left:20px">这是一个段落。</p>

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

一般情况下,优先级如下:

内联样式)Inlinestyle>(内部样式)Internalstylesheet>(外部样式)Externalstylesheet>浏览器默认样式

偶也是初学者,多多指教啊。

CSS是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化。实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的:

选择符{属性:属性值}

看,是不是很简单,只有三部分。

1. CSS的要点是在你的页面中使用简洁的HTML代码,然后编写CSS"控制规则"来样式化页面中的对象.页面保持清晰有条不紊看上去非常棒.这样你的Html页面可以在移动设备和标准浏览器中运行.这就是CSS的要点.

不过CSS的艺术在于能够利用CSS控制规则快速有效地操纵页面对象.把CSS规则与HTML标记匹配起来的操做就好像是一种对话:两者需要条理清楚且保持同步,否则的话他们将答非所问,搞得你头大.

2.常规操作还是灵活匹配:假设你要样式化页面中一个<h1header,可选择操作有:

*用CSS规则h1{...定义所有的<h1标记

当然你也可通过不同的方式混合使用上面的规则:

3. 获取目标:匹配规则出错会浪费很多的时间,这里有个小窍门:在打算实施你的规则之前,不妨先使用color:red这个属性,它既书写简便又利于观察. 一旦你看到HTML页面中的文本变为红色,说明规则匹配正确.这时你会知道你的规则可以在文档中正确的部分生效,然后,删除color:red替换成原来你想实施的规则语句.

4. 掌握专利技术JM3 Gasbag Model:一个CSS布局设计就好比一个装满对象的大袋子.每一个对象均能够对外施加压力(联想一下煤气泄露,如同你的布局设计)大多数情况下,压力表现出来(margins, padding,以及float都是跟"推"密切相关的属性)通过修改CSS规则,你判断压力,在浏览器中观察你的页面好比是摇晃一下袋子,会显现出压力集中在什么区域产生影响,这就是CSS-管理压力对象保持平衡的秘密.对付压力,一次性应用过多的属性,冲突就会导致你的对象到处拥挤,对象相互之间以及袋子会被扎出许多洞来.页面漏洞百出,实在是没劲.

Gasbag 例子1:要产生居中的效果,设置margin-left:auto ,margin-right:auto这样做是有效的,因为你平衡了分布在左右两侧的压力,于是元素就像放置在两块磁铁中间的铁球一样被完美保持在了中间位置.

5. GasbagCorollary 1:JM3 Gasbag Model 只适用于使用默认的CSS"telative"定位模式.当然也可能适用于"absolute"的定位模式(通过给定精确的坐标定位每个模块的布局方式),但是千万不要轻易这样做,一旦文本或者图象的数量有所变动它会花费你很长时间来重新布局并且使你的页面看上去很糟糕.只有那些怪异的出版设计师愿意那样做.

6. 规则A-Divs和Spans:CSS中的混合语言是两个名为<div和<span的标记,两者均没有默认的外观,所谓的 <div以及<span不过是一些容器和在文本中的线。他们只是普通的用以应用样式的标记

7. 规则B:Div是容器,<span是文本,<div是有高度,宽度,队列可以与之打交道。还有:一个<div 的高度是指它其中内容的高度(文本、图像或者其他<div).<sapn标记用于文本中的分割,正因他们只在成一条直线的文本中有意义,所以被称为"inline"元素,其他的标记如:bold(b),italic(i),underline(u)等,他们被称为是<span/元素。

不要使用<div来标记文本,也不要将<span直接用于“袋子”,这样你的布局工作才会变得容易

8. 应用CSS的三个级别:应用于较多数量的页面(通过使用扩展名为.css的文件)适用于单一页面(通过定义一个样式代码块),还有就是应用于页面内部明确的标记(通过在标记内部添加style"..."属性),当你完成一个页面布局设计,把所有的CSS代码转换为一个独立的css文件是一个不错的主意-你可以到处使用它。当你测试代码时,仅仅将此CSS文件内容复制到HTML页面内部的样式代码块中(这对你来说很容易做到)然后你就不必在两个文件之间来回切换.当样式代码定下来的时候再修改原CSS文件(我认为这段话作者的意思是:不断备份一个稳定的测试代码).

9. 保持代码简洁:书写简洁的HTML虽然很简单,但即便是那些自认为很了解CSS的人也没有把它写的简洁高效。高效的代码不能使你的页面载入更快,但是它能够让你的编码工作更容易。

three tips:

*精简你的规则语句:将(font-family, font-size) (margin-left, margin-right)转换为单行规则margin:0px 10px 10px 10px;

*当你看到一个人的层叠样式表有许多像下面这样的行:

.redtext {font-family: Arial, Helvetica, sans-serifcolor: red}

.bluetext {font-family: Arial, Helvetica, sans-serifcolor: blue}

这就表示他们可能不知道这个技巧。

1、使用Dreamweaver等工具来新建

2、新建一个空白的记事本,后缀名修改为.css

3、引入,使用<link/>标签来应用你的CSS,具体用法如下

<link rel="stylesheet" type="text/css" href="你的CSS文件路径"/>