前端css样式(就是让页面更美)

本文详细介绍了CSS样式的多种应用方式,包括标签选择器、派生选择器、ID选择器、类选择器以及如何引入外部样式文件。同时,深入探讨了CSS样式的优先级规则,帮助读者理解不同情况下样式冲突的解决原则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

css样式一定要写在

<style type="text/css">     样式就是写在这里的       </style>

标签选择器

<h1 style="color: red,font=14px">我是H1标题</h1>                    "color: red,font=14px"只针对h1标题生效
<h2>我是H2标题</h2>													color: green;font: 26;只针对h1和h2标签生效
<h3>我是H3标题</h3>
<h3>我是第二个H3标题</h3>
<style type="text/css">
h2,h3{                                            
    color: green;
    font: 26;
}
</style>

派生选择器:父子关系的选择器
只针对“加粗的字体”这几个字,因为li是strong的父级标签,“未加粗的字体”这几个字不改变

<li>未加粗的字体</li>
<li><strong>加粗的字体</strong></li>
<style type="text/css">
li strong{
    color:red;
}
</style>

ID选择器
只针对id为spanID的标签内容生效

<span id="spanID">span标签的id选择器</span>
<style type="text/css">
#spanID{
    color: blue;
}
</style>

类选择器
类选择器设置style的时候添加点

<span class="myClass">类选择器</span>
<style type="text/css">
.myClass{
    color: orchid;
}
</style>

引入外部的选择器

1 在资源文件resource——lib下创建myCSS文件夹——创建myCSS.css文件
在该css文件中写,如果是类选择器别忘了点

.myClass{
color: orange;
font-size: 30px;

}

2 在ftl文件中引入上面的css文件 stylesheet样式表、type类型、href引入文件的地址

<link rel="stylesheet" type="text/css" href="/lib/myCSS/myCSS.css">

3 创建一个类选择器并在ftl文件中给类选择器设置样式

<span class="myClass">类选择器</span>
<style type="text/css">
.myClass{
    color: hotpink;
}
</style>

以上执行的结果是“类选择器”这4个字是本ftl文件的颜色,引入的myCSS文件的字体大小
因为优先级的原因,以上要注意:要用哪个样式要与引入的css文件里的选择器名称一致
css中的优先级

在这里插入图片描述

元素上的style>文件头上的style>外部样式文件

元素上的style>id选择器的样式>类选择器的样式>标签选择器样式(派生选择器属于标签选择器)

对于同类型的选择器,越靠后的优先级越高,后面的会覆盖前面的
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值