csshref样式,CSS样式属性

CSS样式分为哪三种？

CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式。

对CSS三种样式定义及其实例：

内联式css样式。

内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

p style="color:red"这里文字是红色。/p

css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开（英文状态下;）。

嵌入式css样式。

嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：

style type="text/css"span{color:red;}/style

嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。

外部式css样式。

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。

link href="style.css" rel="stylesheet" type="text/css" /

注意事项： 

1、css样式文件名称以有意义的英文字母命名，如 main.css。 

2、rel=”stylesheet” type=”text/css” 是固定写法不可修改。 

3、标签位置一般写在标签之内。

掌握好三种CSS三种样式使用方法在Web开发中将节省很多时间。

相关问答

Q1: css样式的定义有哪些方法

定义CSS样式 (三种方式)

一、在head标签中加载一个CSS文件示例head link rel="stylesheet" type="text/css" href="style.css" //head

此例使用了link标签。

abbr { font-size:12px;}.text10pxwhite { font-size:10px; color: #FFFFFF;}

style.css的内容

二、直接把CSS内容写在HTML文件的head标签中示例head style type="text/css" abbr { font-size: 12px; } .text10pxwhite { font-size: 10px; color: #FFFFFF; } /style/head

此例使用了style标签。

两种方法是殊途同归的(但是推荐使用第一种方法).

三、使用style属性对标签加载样式示例p style="font-size: 12px;color: #000;"使用css/p

此例使用了标签的style属性。

　

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

head

link rel="stylesheet" type="text/css" href="mystyle.css"

/head

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 style 标签定义内部样式表。

head

style type="text/css"

body {background-color: red}

p {margin-left: 20px}

/style

/head

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

p style="color: red; margin-left: 20px"

This is a paragraph

/p

Q2: css 可以设置a标签href的值吗？

css不能设置a标签的href。

CSS只是设置样式，如颜色大小等等。

要设置a标签的href值，可以用js，或者直接在标签里写上地址。

css中a标签的超链接绑定数据库的方法也有的。

1.html 中的a 无法直接和数据库交互，因为html是客户端语言。

2.如果需要交互，那么 href中可以是一个服务端请求，比如/query/userlist.action 这样可以请求服务端查询用户列表。

3.原则上html是没有服务端交互的，需要交互必须用服务端语言如php,jsp等。

Q3: 在网页中使用CSS 样式表的三种方式是什么?

CSS样式表定义的基本语法：

Select { property1 : value, property2: value2 }

CSS样式表一共分3种，分别是：

1、内联样式表:

内联样式表是写在标记内的，只对所在标记有效。

2、内部及联样式表:

利用style标记将样式表嵌在HTML文件的头部。

3、外部级联样式表:

使用link标记可以将样式表链接到网页上。

CSS样式表的优先级：（由低到高）

浏览器默认（优先级最低）

外部级联样式表

内部及联样式表

内联样式表（优先级最高）

Q4: html中使用css定义样式的方式有哪些？哪种方式优先级最高？

在HTML中常用以下3种方式定义CSS：Embedding（嵌入式）、Linking（引用式）、Inline（内联式）

一、嵌入式：使用HTML的style元素，在文档中定义CSS样式

head

style type="text/css"

h1{color:red}

p{color:blue}

/style

head

二、内联式 ：每一个HTML元素都包含一个style属性，可以直接定义样式。该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。

p style="color:#FFF;font-weight:bold;"内联样式/p

三、外部引用式：外部引用指HTML文档本身不含有CSS样式，而是动态引用外部的CSS文件定义文档的表现形式。

1、使用样式表的处理指令语句-在HTML文档的开头部分写一个关于样式表的指令处理语句

?xml-stylesheet type="text/css" href="mystyle.css" ?

html

指令语句

/html

不过只有使用xml语法格式编写的html文档才支持使用该指令，大多数浏览器仅当被保存为xhtml或xml格式才有效，且JS不能处理这种CSS，所以不建议使用。

2、使用@import命令 -在style元素之间使用@import命令导入外部的css文件

head

style type="text/css"

!--下面两行代码效果一样

@import "mystyle.css";

@import url("mystyle.css");

--

/style

/head

任何@import规则必须出现在所有规则之前。参数是一个css文件的URL地址。在一个css文件中也可以用@import指令将另一个css文件导入。

3、使用link元素

head

link rel="stylesheet" href="css的url" type="text/css"

/head

这也是最常用的方式。

4、使用HTTP消息报头链接到样式表 -可以使用HTTP消息报头的link字段链接一个外部样式表。 link:mystyle.css;rel=stylesheet;

//等同于link rel="stylesheet" href="css的url" type="text/css"

HTTP报头中可以使用多个link，从而链接多个样式表，且HTTP报头中的link比HTML文档中的link（head元素中）具有优先级。

Q5: 如何链接外部CSS样式表

链接外部样式文件

外部引入CSS样式文件是通过link标签实现的，它只能位于HTML文档的head标签内，且必须有href属性，该属性用于指定需要引入的CSS文件的路径。

写法：link rel="stylesheet" href="CSS样式文件的绝对地址"

link元素中type用于规定链接文档的MIME类型，rel属性用于规定被链接文档与当前文档之间的关系，如alternate用于定义交替出现的链接，appendix定义文档的附加信息等，此外还有一些可选属性，用于做一些除加载CSS文件的其他事情。link元素是XHMTL中的标签，当HTML页面被渲染时，link引用的CSS文件会被同时加载，我们也可以通过JavaScript控制DOM去改变link元素的CSS内容。

导入外部样式

导入外部样式单的功能与链接外部样式的功能差不多，都能实现一样的功能，但是它们之间还是存在一定的差别的，导入外部样式主要通过@import方式导入CSS文件。

写法：

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别@import url(style.css) //Windows NS4, Macintosh NS4不识别@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别@import url("style.css") //Windows NS4, Macintosh NS4不识别

由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

本段摘自：

添加css的方式：link与@import区别 - Wayne-Zhu - 博客园

@import是css2里面提出来的，低版本的浏览器不支持，注意它是css中属性，如果要使用它，可以在style标签中书写。但在CSS文件中再导入CSS文件，会给服务器造成太大的文件请求压力，最好不要这样做。

style

@import url(css/style.css);

/style

@import是由CSS提供的一种导入样式的方式，当页面被加载时，@import会等到页面全部被加载完成时再加载CSS样式，所以在页面还未加载完成期间，页面还没有CSS样式效果，会导致“屏闪”，通过@import导入的CSS样式是无法用DOM去控制的。