css简介以及在html中导入css

来源：互联网发布：梅西进球数据编辑：程序博客网时间：2024/06/06 07:01

一.css简介

1.css是什么

css指层叠样式表（Cascading Style Sheets）

样式定义如何显示html元素
样式通常存储在样式表中
把样式添加到html中，是为了解决内容与表现分离的问题
外部样式表可以极大提升工作效率
外部样式表通常存储在css文件中
多个样式定义可以可层叠

2.css的作用

样式表解决了html的内容与表现分离的围
使用样式表可以提升工作效率

3.css的书写规则

基本语法：

css语法主要由两部分组成。1选择器2一条或多条声明

选择器主要作用是为了确定需要改变样式的html的元素

每一条声明由一个属性和一个值组成，使用花括号包围声明，属性与值之间使用冒号隔开。例如

h1{ color:red;font-size:14px;}

二.css的导入

内联样式表
要使用内联样式表，需要在相关的标签内使用样式(style)属性，style属性可以包括任何css属性
例如：
<div style="border:1px solid black">这是一个DIV</div>
注意：慎用这种方式，它将内容与显示混合在一起，损失了样式表的优势，一般情况下，这种方式只有在一个标签上只应用一次样式时才会使用。
内部样式表
可以使用<style>标签在html文档的<head>中来定义样式表

例如:

<html><head>      <style type="text/css">  hr{color:red;}      </style></style></head><body>      <hr>      <div style="border:1px solid black">这是一个DIV</div></body></html>

外部样式表
如果想在多个页面使用同一个样式表，可以使用外部样式表来导入。

可以在html页面上使用<link>标签来导入外部样式表。

例如：

<html><head>      <link type="text/css" rel="stylesheet" href="mystyle.css"></style></head><body><hr><div style="border:1px solid black">这是一个DIV</div></body></html>

浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。

外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑。

@import导入

<html><head>      <style type="text/css"><span style="white-space:pre"></span>@import "mystyle.css"      </style></style></head><body><hr><div style="border:1px solid black">这是一个DIV</div></body></html>

@import与引用样式表的区别：

1.@import这种方式只有Firefox支持，而IE不支持

2.@import这种方式导入的css会在整个页面加载后，才会架子啊样式，如果在网络不好的情况下，会先看到无样式修饰的页面，之后才会看到样式修饰的页面；而使用外部样式表，会先装载样式表，这样看到的就是有样式修饰的页面。

3.@import不支持通过javasrcipt修改样式，而link支持。

优先级问题

内联样式表>内部样式表>外部样式表

0 0

css简介以及在html中导入css

一.css简介

1.css是什么

2.css的作用

3.css的书写规则

二.css的导入

例如:
<html><head> <style type="text/css"> hr{color:red;} </style></style></head><body> <hr> <div style="border:1px solid black">这是一个DIV</div></body></html>

外部样式表
如果想在多个页面使用同一个样式表，可以使用外部样式表来导入。

可以在html页面上使用<link>标签来导入外部样式表。

例如：

<html><head> <link type="text/css" rel="stylesheet" href="mystyle.css"></style></head><body><hr><div style="border:1px solid black">这是一个DIV</div></body></html>
浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。

1.@import这种方式只有Firefox支持，而IE不支持

3.@import不支持通过javasrcipt修改样式，而link支持。

优先级问题

内联样式表>内部样式表>外部样式表

css简介以及在html中导入css

一.css简介

1.css是什么

2.css的作用

3.css的书写规则

二.css的导入

例如:<html><head> <style type="text/css"> hr{color:red;} </style></style></head><body> <hr> <div style="border:1px solid black">这是一个DIV</div></body></html>

外部样式表如果想在多个页面使用同一个样式表，可以使用外部样式表来导入。

可以在html页面上使用<link>标签来导入外部样式表。

例如：

<html><head> <link type="text/css" rel="stylesheet" href="mystyle.css"></style></head><body><hr><div style="border:1px solid black">这是一个DIV</div></body></html>浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。

1.@import这种方式只有Firefox支持，而IE不支持

3.@import不支持通过javasrcipt修改样式，而link支持。

优先级问题

内联样式表>内部样式表>外部样式表

例如:
<html><head> <style type="text/css"> hr{color:red;} </style></style></head><body> <hr> <div style="border:1px solid black">这是一个DIV</div></body></html>

外部样式表
如果想在多个页面使用同一个样式表，可以使用外部样式表来导入。

<html><head> <link type="text/css" rel="stylesheet" href="mystyle.css"></style></head><body><hr><div style="border:1px solid black">这是一个DIV</div></body></html>
浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。