CSS的使用

CSS基本用法

CSS分为四种样式
1.行内样式
行内样式就是把CSS样式直接放在代码行内的标签中,一般放入标签的style属性中

<p style="background-color:#999900">行内元素,控制段落-1</p>

2.内嵌式
内嵌式通过将CSS写在网站源文件的头部,即在<head>与<head>之间,通过使用HTML标签中的<style>标签将其包围

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>墨惜博客-CSS的使用</title>
<style type="text/css">
p {
  text-align:left;    /*文本左对齐*/
  font-size:18px;     /*字体大小18像素*/
  line-height:25px;   /*行高25像素*/
  text-indent:2em;    /*首行缩进2个文本大小空间*/
  width:500px;        /*段落宽度500像素*/
  margin:0 auto;      /*浏览器居中*/
  margin-bottom:20px  /*段落下边距20像素*/
}
</style>
</head>
<body>
<p>墨惜博客CSS测试</p>
<p>CSS效果测试</p>
</body>
</html>

3.链接式
链接式通过HTML的<link>标签,将外部样式链接到HTML文档中,这也是网络上网站应用最多的方式,同时也是最实用的方式。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>墨惜博客-CSS的使用</title>
<link href="lianjie.css" type="text/css" rel="stylesheet"/>
<link href="lianjie-2.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p>我是被楼上的lianjie-2.css文件控制的,楼下的你呢?</p>
<h3>楼上的,<span>lianjie.css<span>文件给我穿的花衣服。</h3>
</body>
</html>

4.导入样式
导入样式使用@import命令导入外部样式表。导入样式有6种书写方式:

@import daoru.css;
@import 'daoru.css';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");

示例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>墨惜博客-CSS的使用</title>
<style type="text/css">
@import url(lianjie.css);
@import url(daoru.css);
</style>
</head>
<body>
<p>我是被楼上的lianjie-2.css文件控制的,楼下的你呢?</p>
<h3>楼上的,<span>lianjie.css<span>文件给我穿的花衣服。</h3>
</body>
</html>



在style中有一个比较特殊的属性title,在后面加上title,可以为不同的样式设置一个标题,浏览器可以根据不同的标题进行切换样式 浏览器使用教程:查看-页面风格中切换
示例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>墨惜博客-CSS的使用</title>
<style type="text/css" title="字体14号">
p {
  text-align:left;    /*文本左对齐*/
  font-size:14px;     /*字体大小14像素*/
  line-height:25px;   /*行高25像素*/
  text-indent:2em;    /*首行缩进2个文本大小空间*/
  width:500px;        /*段落宽度500像素*/
  margin:0 auto;      /*浏览器居中*/
  margin-bottom:20px  /*段落下边距20像素*/
}
</style>
<style type="text/css" title="字体18号">
p {
  text-align:left;    /*文本左对齐*/
  font-size:18px;     /*字体大小14像素*/
  line-height:25px;   /*行高25像素*/
  text-indent:2em;    /*首行缩进2个文本大小空间*/
  width:500px;        /*段落宽度500像素*/
  margin:0 auto;      /*浏览器居中*/
  margin-bottom:20px  /*段落下边距20像素*/
}
</style>
</head>
<body>
<p>墨惜博客CSS测试</p>
<p>CSS效果测试</p>
</body>
</html>

CSS注释

在CSS中增加注释很简单,所有被放在”/*”和”*/”分隔符之间的文本信息都被称为注释

/* 下面这段代码的作用是建立网页布局 start */
.header{width:960px;}

墨惜

一个喜欢瞎捣鼓的少年,来自南方的一个小城市,个性不张扬,讨厌随波逐流

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>

相关推荐

正在获取,请稍候...
00:00/00:00