css 样式的导入的三种方式

html-css015

css 样式的导入的三种方式,第1张

1.行内样式 行内样式只能影响它所在的标签，而且总会覆盖嵌入样式和链接样式。

<p style="font-size: 12pxfont-weight:boldfont-style:italiccolor:red">By adding inline CSS styling to the></p>

2.嵌入样式 嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖。

<head>

<style type="text/css">

h1 {font-size:16px}

p {color:blue}

</style>

</head>

3.链接样式

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

样式的写法

例子如下

1 ) p {color:redfont-size:12pxfont-weight:bold}

2 ) h1 {color:bluefont-weight:bold}

h2 {color:bluefont-weight:bold}

h3 {color:bluefont-weight:bold}

3）假设，你在写完前面那条规则后，又想只把h3变成斜体，那可以再为h3写一条规则：

h1, h2, h3 {color:bluefont-weight:bold}

h3 {font-style:italic}

你这个问题很多种情况

你说的导入是指什么？嵌入？引入？

1、 嵌入：如果是嵌入的，那么你的css文件会不小，查了一下，“微软简隶书”这个字体有2.63M，何况你还有“华文行楷”这个字体，css文件得将近10M了，为了实现几个效果得不偿失。

2、 引入：如果只是引入了font-family样式，不是嵌入了字体，那么问题又出现了，如果访问者电脑内，没有css引入的字体，那么这个字体效果不会显示，“微软简隶书”与“华文行楷”这两个都不是电脑预装字体，也就是说，大部分电脑看不到字体效果，只会看到宋体或者微软雅黑（电脑的默认字体）。

3、如果使用这个字体的地方不多，推荐使用图片。安全可靠。

css引用字体问题

在CSS中通过@font-face属性来实现网页中嵌入特殊字体。

首先获取要使用字体的三种文件格式.EOT、.TTF或.OTF、.SVG，确保能在主流浏览器中都能正常显示该字体。

.EOT，适用于Internet Explorer 4.0+

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera

.SVG，适用于Chrome、IPhone

最常见的是.TTF文件，需要通过这种文件格式转换为其余两种文件格式。

在css中进行如下声明：

@font-face {

font-family: 'fontNameRegular'

src: url('fontName.eot')

src: local('fontName Regular'),

local('fontName'),

url('fontName.woff') format('woff'),

url('fontName.ttf') format('truetype'),

url('fontName.svg#fontName') format('svg')

}

/*其中fontName替换为你的字体名称*/

在css中使用这个字体

h1{font-family: fontNameRegular}