前端css样式（就是让页面更美）

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选择器的样式>类选择器的样式>标签选择器样式（派生选择器属于标签选择器）

对于同类型的选择器，越靠后的优先级越高，后面的会覆盖前面的

前端css样式（就是让页面更美）

猜你喜欢