css样式表的创建

最新推荐文章于 2024-06-17 17:39:13 发布

hello_xujj

最新推荐文章于 2024-06-17 17:39:13 发布

阅读量1.7k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/xjj19999272/article/details/120389827

版权

CSS 专栏收录该内容

18 篇文章

订阅专栏

样式表创建

创建样式表的目的是为了修改标签的样式。

css（cascading style sheets）层叠样式表，主要是为了修改网页信息的显示样式。

css语法：

选择器名称{

	属性1：属性值1；

	属性2：属性值2

	.........

}

样式表的创建分为行内样式、内部样式和外部样式。

1、行内样式

行内样式表：在标签上添加style属性，只作用于当前标签，不常用，一般用在出错调试用。

语法：<标签名称 style=“属性:属性值;”></标签名称>

<body>
  <h1 style="color:red;">静夜思</h1>
  <p>床前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</body>

网页效果为：

在这里插入图片描述

2、内部样式

内部样式表在<head></head>之间，之作用于当前文件，一般用于专题或者活动页面。

语法：标签名称{属性：属性值；}

<head>
  <style>
    p{
      color:red;
      /*背景颜色*/
      background-color:pink;
    }
  </style>
</head>
<body>
  <h1>静夜思</h1>
  <p>床前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</body>

网页效果为：

在这里插入图片描述

3、外部样式

外部样式表需要新建一个css文件，利用link或者import引入css文件。

1.在<head>

	<link rel="stylesheet"href="路径" />

</head>

2.写在<style>

	@import url(路径);

</style>

注意：

在style里，标签千万不要加<属性值千万不要加双引号。

下面示例代码为css文件。

p{
  color:blue;
}

下面示例代码为html文件。

<head>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <h1>静夜思</h1>
  <p>床前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</body>

网页效果为：

在这里插入图片描述

4、link和import之间的区别？

差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。

差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.