程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 > CSS设置style属性

CSS设置style属性的3种方法

  发布时间：2024-03-15 15:36:09   作者：Danny_hi   我要评论
style属性可以用在HTML中大部分的标签上，本文主要介绍了CSS设置style属性的3种方法，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

可以将css样式编写到元素的style属性当中：

1.将样式直接写到style属性中，这种样式我们称为内联样式，内联样式只对当前的元素中的内容起作用，内联样式不方便复用，不推荐使用。

eg：

<p style="color:blue;font-size: 50px;">明月几时有，把酒问青天！</p>

2.也可以将CSS样式编写到head中的style标签里,叫做内部样式。将样式表编写到style标签中，然后通过CSS选择器选中指定元素

<head>
	<style type="text/css">
		p{
			color:green;
			font-size:40px;
		}
	</style>
</head>
<body>
	<p>明月几时有，把酒问青天！</p>
</body>

3.还可以将样式表编写到外部的CSS文件中，然后通过link标签将外部的CSS文件引入到当前的页面中，href设置外部css文件的相对路径，使结构和表现完全分离。

<link rel="stylesheet" href="css/style.css" />

其他：
在CSS中，祖先元素的样式，也会被他的后代元素所继承；利用继承关系，可以将一些基本样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式；
但是并不是所有的样式都会被子元素所继承。比如：背景相关的样式都不会被继承。

eg：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			font-size: 25px;
		}
	</style>
</head>
<body>
	<p>明月几时有？</p>
	<p class="p1">明月几时有？</p>
	<p>明月几时有？</p>
	<p>明月几时有？</p>
</body>
</html>

到此这篇关于CSS设置style属性的3种方法的文章就介绍到这了,更多相关CSS设置style属性内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！ 

相关文章

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com