欢迎光临精准像素,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

CSS教程

CSS的引入加载方法

CSS教程 精准像素 2020-10-13 人阅读

本文将主要介绍引入CSS样式的方式,包括外部样式表、内部样式表和行间样式三种方式

[注意]CSS语法非常简单,但容易忽略的一点是不能省略分号(最后一个样式除外)

外部样式表

在link标记中rel和href属性是必须的,type属性和media属性可省略

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

完整dome

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sheet1.css">
<title>Document</title>
</head>
<body></body>    
</html>

多个样式表

一个文档可能关联多个样式表,如果是这样,文档最初显示时只会使用rel为stylesheet的link标记

<link rel="stylesheet" href="sheet1.css" />
<link rel="stylesheet" href="sheet2.css" />

完整dome

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sheet1.css">
<link rel="stylesheet" href="sheet2.css">
<title>Document</title>
</head>
<body>
</body>    
</html>

内部样式表

内部样式表需要使用<style>元素包含样式表,它在文档中单独出现。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: red;
}    
</style>
<title>Document</title>
</head>
<body>
</body>    
</html>

多个style标签

文档中可出现多个style标签,且样式规则与层叠样式规则一致

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: red;
}    
</style>
<style>
body{
background-color: blue;
height: 100px;
border: 10px solid black;
}    
</style>
<title>Document</title>
</head>
<body>
</body>    
</html>

使用@import指令

与link类似,@import指令用于指示Web浏览器加载一个外部样式表,并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。@import指令常用于样式表需要使用另一个样式表中的样式的情况。

<style>
@import url(sheet2.css);
body{
background-color: red;
}    
</style>

[注意]@import必须出现在style元素中,且要放在其他CSS规则之前,否则将根本不起作用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/*将@import放置在CSS规则之后将不起使用*/
body{
background-color: red;
}    
@import url(sheet2.css);
</style>
<title>Document</title>
</head>
<body>
</body>    
</html>

多个@import指令

可以使用@import指令导入多个CSS样式表,且可以使用media来限制应用场景。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url(sheet1.css) all;    
@import url(sheet2.css);
</style>
<title>Document</title>
</head>
<body>
</body>    
</html>

行间样式

如果只是想为单个元素指定一些样式,可以使用HTML的style属性来设置一个行间样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: red;">
</body>    
</html>

[注意]行间样式若存在多个style属性,只能识别第一个

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- 只能识别第一个style属性的值,所以页面显示为红色-->
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: blue;">
</body>    
</html>
标签 CSS教程
相关推荐
  • CSS教程
  • CSS视频教程全集

    CSS宣传图什么是cssCSS全称为层叠样式表,常用来开发系统前台展示效果的语言。我们又常常叫他为DIV+CSS,那是因为CSS常常伴随着DIV一起使用。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑...

    CSS教程 73 1年前
  • CSS文字超出省略号显示

    帝国CMS标题超出省略号显示可以用:<?=esub($bqr[title],32,'...')?> 但有的地方却不是标题,但也想实现文章超出省略号显示。这里给大家介绍的是利用CSS来达到效果。 HTM...

    CSS教程 259 7年前
  • 图片自适应大小和居中显示的CSS语法教程

    做网站之后,我们会在网站后台发布很多的文章内容。文章里会插入一些图片,由于图片尺寸不一样,会出现图片超过宽度的问题。特别是制作手机网站时,更容出现这种情况。如何通过CSS3来一次性控制网站所有图片自适应大小呢?下面介绍一下CSS3控制图片自适应屏幕...

    CSS教程 72 1年前
  • CSS字间距样式语法教程

    做网站后,为了外观美观,我们可以通过CSS控制字间距。就是使用CSS的letter-spacing属性来控制。CSS写法:letter-spacing:10px;(后面字数是二字之间的间距值)举例:<style>p{letter-spacing:10px;}</style><p>段落文字段落文字段落文字</p>...

    CSS教程 113 1年前
  • CSS清除苹果浏览器input的默认样式

    苹果浏览器有一套自己的默认UI样式,有时候我们做WAP手机版网站的时候,苹果默认的UI样式跟我们自己的不搭配,特别是按钮的样式。所以我们来试试如何把苹果浏览器默认的按钮样式替换掉。方法其实简单,只需要加上下面这段css就可以了:input[type=button], in...

    CSS教程 46 1年前