css样式表

最新推荐文章于 2024-07-19 15:50:46 发布

V。on

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量215

点赞数

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

本文链接：https://blog.csdn.net/qq_40864647/article/details/119857033

版权

css 专栏收录该内容

31 篇文章 6 订阅

订阅专栏

css样式表

一、css语法

css语法：选择器{ 属性: 属性值; 属性: 属性值; }
在这里插入图片描述

组成：选择器（选择符）和声明组成。选择器（选择符）其实是一种方法，重在选择两个字，作用：选取标签给其设置样式。声明分为属性和属性值，声明是放在花括号里面的。属性和属性值是用冒号连接的，用分号结束的。

div {
	width: 200px;
	height: 200px;
	background-color: red;
}

二、样式表

什么是样式表？就是放置css代码一个环境。因为html和css是两种不同的语言，进行“沟通”，需要“桥梁”，样式表就是起了桥梁的作用。

样式表分为三大类：

内部样式表：使用style标签

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <!--
    内部样式表建议写在head里面，因为代码执行顺序是自上而下的
    type属性可以省略不写，但是写上的话必须写正确
    内部样式表适用于代码量较少的时候
  -->
  <style type="text/css">
    div {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
	<div>我是div</div>
</body>
</html>

外部样式表：使用link

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <!--
    外部样式表 
    rel属性 关联样式表  不能省略
    type属性 定义文档类型 可以省略
    href属性 路径
    外部样式表适用于代码量较多的时候
  -->
  <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div>我是div</div>
</body>
</html>

css目录下的css文件就如同style里面写的一样，只不过单独拎出去写在了一个文件里面。

div {
	width: 200px;
	height: 200px;
	background-color: red;
}

内联(行内)样式表：直接写在代码行内

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>无标题文档</title>
</head>
<body>
  <!--
    内联样式表 
	写在标签行内
    style双引号里面放置的是css代码
    内联样式表(行内)适用于发送冲突的时候，因为它的优先级高
  -->
	<div style="width: 200px;height: 200px;border: 1px solid red;">我是div</div>
</body>
</html>

注意点：无论是style还是link都是标签，只不过它具有放置css代码的功能而已。

三、样式表的优先级

内联样式表的优先级是最高的。外部样式表和内部样式表的优先级和书写顺序有关，后面的会把前面给覆盖掉

注意点：优先级覆盖的是相同的属性，其他属性不变

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
    div {
      color: red;
      font-size: 30px;
    }
  </style>
  
	<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
	<div style="color:blue;">我是div</div>
</body>
</html>

以下是style.css的代码：

div {
	color: green;
	font-size: 40px;
}

最终结果：内联样式表的级别最高，故而最后的color是blue的。此时因为外部样式表写在内部样式表的后面，因此外部样式表的级别更高，故而最后的font-size是40px。
在这里插入图片描述

四、外部样式表@import

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	<style>
		<!-- @import url(路径) -->
		@import url(style.css);
	</style>
</head>
<body>
<div>我是div</div>
</body>
</html>

@import和link的区别：

本质上：link属于XHTML标签，@import属于css提供的一种方法
加载顺序：当一个页面加载的时候，link引用的css会同时被加载，而@import会等页面全部加载完再加载
兼容：老的浏览器不支持@import，IE5以上才行，link则不存在兼容问题
使用dom控制样式的差别：当使用js控制dom去改变样式的时候，只能用link标签，@import不是dom可以控制的

V。on

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式表

css样式表一、css语法组成：选择器（选择符）和声明组成。选择器（选择符）其实是一种方法，重在选择两个字，作用：选取标签给其设置样式。声明分为属性和属性值，声明是放在花括号里面的。属性和属性值是用冒号连接的，用分号结束的。div { width: 200px; height: 200px; background-color: red;}二、样式表什么是样式表？就是放置css代码一个环境。因为html和css是两种不同的语言，进行“沟通”，需要“桥梁”，样式表就是起了桥梁的作用。
复制链接

扫一扫

专栏目录