css

最新推荐文章于 2025-03-06 12:11:45 发布

星辰之瑜

最新推荐文章于 2025-03-06 12:11:45 发布

阅读量464

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qushuaisheng/article/details/8878516

版权

css 专栏收录该内容

1 篇文章

订阅专栏

qsszyx css

一、 CSS按其位置可以分成四种：

· 内联样式(Inline Style)

· 内部样式表(Internal Style Sheet)

· 外部样式表(External Style Sheet)

· 输入样式表（@import url（style/xxx.css））

1.1内联样式

1、内联样式是写在标签里面的，它只针对自己所在的标签起作用。

<p style="font-size:14px;color:red;">这个style定义段落中的字体是14像素的红色字</p>

1.2内部样式表

2、内部样式表（也称嵌入样式表）是写在<head></head>里面的，它只针对所在的Html页面有效。

<html>
    <head>  
    	<title>无标题文档</title>
    	<styletype="text/css">
    		<!--
    		h1.bigone{font-size:16px;color:red;text-align:center;} 
    		//-->
    	</style>
    </head>
    <body>
    	<h1 class="bigone">标题文字是16像素红色居中字体。</h1>
   	<h1>这个标题无样式。</h1>
    </body>
 </html>

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：

1.3外部样式表

必须放在<head>区内

3、比如我们制作了一个首页，把它的样式表文件命名为index.css。方法是将下面的CSS代码复制到记事本中保存，然后将文本文档的扩展名.txt修改为.css即可。

 .h1.bigone{font-size:16px;color:red;text-align:center;} 
    在新建的网页中这样写：
<html>
  <head> 
  <title>无标题文档</title>
  	<link href="index.css rel="stylesheet"type="text/css">  
  </head>
  <body>
  	<h1 class="bigone">标题文字是16像素红色居中字体。</h1>
  	<h1>这个标题无样式。</h1>
  </body>
  </html>

说明：

上面这个例子表示浏览器从index.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。

一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

1.4输入样式表

4、输入样式表是用来导入已存在的外部样式表，可以使用css的@import声明将一个外部样式表文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css文件的一部分，也可以使用@import声明将一个css文件输入到网页文件的<style></style>标签对中，被输入的css文件中的样式规则定义语句就成了<style></style>标签对中的语句。
<style>
@import url(http://……)
</stypel>