CSS样式应用全解析-优快云博客

本文链接：https://blog.youkuaiyun.com/sepgit/article/details/107773133

写法

CSS 样式，有三种写法。

内嵌在标签上的写法；
在HTML 页面内，使用style 标签的内部样式；
在HTML 页面内，使用 link 标签，href 外联外部文件。

1.内嵌

在 HTML 中，写一个div 标签。在标签上添加一个style的属性名。之后就可以在style里面填充自己需要的css 样式。

<div class="box1" style="width: 100px;height: 100px;background-color: #f00"></div>

这样就成功的在页面上添加了一个，宽、高为100px，背景颜色为红色的 div。

2.内部样式

这里需要注意，style标签必须写在，head 标签内、title 标签的下面。对页面的渲染比较友好，也方便后期维护。~~当然写在其他位置也可以达到效果（不推荐）~~

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>样式</title>
	<style type="text/css">
		.box2{
			width: 200px;height: 200px;background-color:  #0f0;
		}
	</style>	
</head>
<body>
 	<div class="box2"></div> 
</body>
</html>

这样就在页面上添加了一个绿色的方块。

3.外联样式

第三种方式，是最常用的方式。当项目中页面较多时，页面内相同的样式也会随之增加。这种方式可以很好的节省代码量，并且是公用样式的内容达到统一。
我们需要在HTML 文件所在的位置，新建一个后缀为 .css 的文件
之后我们在页面HTML内引入。同样的，我们 link 标签的位置也遵循第二点中的，在 head 内、title 后面。
html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>样式</title>	
	<link rel="stylesheet" type="text/css" href="./css.css">
</head>

<body>
	<div class="box3">
	</div>
</body>
</html>

css.css

.box3{
	width: 100px;
	height: 100px;
	background-color: #000
}

这样，就在页面上添加了一黑色方框。

小结

在实际的开发中，并没有说只使用某一种CSS 的写法就可以完成所有的样式布局，都是三种用法混合着来，当然最多的还是外联。

那么就有个问题了，当一个标签的类在三个文件中都定义的时候，会加载哪个？

样式显示是 1>2>3。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>样式</title>
	<style type="text/css">
		.theBox{
			width: 100px;height: 100px;background-color:  #0f0;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="./css.css">
</head>

<body>
	
	<div class="theBox" style="width: 100px;height:100px;background-color: #f00;"></div>

</body>
</html>

上面这串代码将三种方式都是用到了。我们给 theBox 这个类，设置宽高都为100px。不同的是，内嵌标签中背景颜色为红色，内联样式中颜色为绿色，外联样式中颜色为黑色。最后在页面中展示的是红色的方块。
还可以通过浏览器的检查功能查看：
在这里插入图片描述

在页面右边styles 中就可以看到。三种方式书写的代码都对theBox 这个div 产生了影响。但是因为优先级的关系，优先级低的都被覆盖了，最后生效的是标签中内嵌的样式。这个并不是全部否定，如果在外联中定义了宽高，在内联和内嵌中都没有定义宽高，页面上渲染的还是外联的宽高。样式优先级针对的是，同一个属性。

在一开始书写代码的时候，样式效果没出来或者是不对的时候，一定要使用浏览器的检查功能。这样可以方便我们快速的定位问题，从而解决问题。