创建CSS样式表的三种方式?

创建CSS样式表的三种方式?,第1张

主要探讨HTML5中CSS(层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化。

使用CSS

CSS样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。

<p style="color:redfont-size:50px">这是一段文本</p>

解释:style是行内样式属性。color是颜色属性,red是颜色属性值;font-size是字体大小属性,50px是字体大小属性值。

三种方式

创建CSS样式表有三种方式:1.元素内嵌样式;2.文档内嵌样式;3.外部引入样式。

1.元素内嵌样式

<p style="color:redfont-size:50px">这是一段文本</p>

解释:即在当前元素使用style属性的声明方式。

2.文档内嵌样式

<styletype="text/css">

p{

color:blue

font-size:40px

}

</style>

<p>这是一段文本</p>

解释:在<head>元素之间创建<style>元素,通过选择器的方式调用指定的元素并设置相关CSS。

3.外部引用样式

<linkrel="stylesheet"type="text/css"href="style.css">

//style.css

@charset"utf-8"

p{

color:green

font-size:30px

}

解释:很多时候,大量的HTML页面使用了同一个组CSS。那么就可以将这些CSS样式保存在一个单独的.css文件中,然后通过<link>元素去引入它即可。@charset"utf-8"表明设置CSS的字符编码,如果不写默认就是utf-8。昌平镇电脑培训认为如果有多个.css文件,可以使用@import导入方式引入.css文件。只不过,性能不如多个<link>链接。

首先这里我们是需要你新建一个HTML文档的,这里我们直接打开工具,之后选择新建HTML即可

建立完毕之后这里我们使用快捷键,Shift+F11随后我们就可以看到CSS面板中所示,在面板中用鼠标右击之后选择里面的“新建”之后会d出新建CSS规则表格

将选择类型设置~为类,名称设置为~测试,定义在~仅对该文档,点击“确定”

随后d出图下中所示的测试CSS规则定义

在css定义框中我们是可以看到。类型背景区块方框边框列表定位扩展。在类型框中将字体大小,样式、行高等进行设置

随后是个背景的设置,这里我们是可以设置背景颜色和背景图像的这里还可以设置区块模式定位,列表等都是可以通过自己的设置而变得美化的,这里我就不一一介绍了

设置完毕,输入内容我们就可以看到我们设置的结果

当然了,这里我们是可以点击代码模块的,这里我们是可以看到我们代码部位的设置的,如果你觉得输入代码太过于繁琐的话,这个方式是可以值得一试的。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/11193470.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存