📋目录

❤️一、CSS的定义

❤️二、CSS与html之间的关系

❤️三、CSS的选择器

✨1.标记选择器

✨2.类别选择器

✨3.ID选择器

✨4.选择器对比 

❤️四、 CSS样式表

✨1.行内样式表

✨2.链接式样式表

🎏CSS文件导入JSP文件教程

❤️一、CSS的定义

💨CSS是W3C协会为了弥补html在显示属性设定的不足写创造出来的一套扩展样式标准

❤️二、CSS与html之间的关系

💨CSS标准重新定义html文件原来文字中的样式，也就是说CSS是html文件其中的组成部分之一

❤️三、CSS的选择器

✨1.标记选择器

💨用于对各标记进行设置样式


<html>
    <head>
        <title>标记选择器</title>
        <style>						
	        b{
		        color:blue; 
		        font-size:29px;
	        }						
        </style>
    </head>
    <body>
        <b>标记选择器的使用结果显示</b>    <!--b标记的样式为：字体颜色蓝色，字体大小29-->
    </body>
</html>



java 创建SSL上下文_前端


✨2.类别选择器

💨自己定义选择器名称，.开头，应用该选择器则用class属性声明


<html>
    <head>
        <title>类别选择器</title>
        <style>												
	        .one{
		        color:purple;
		        font-size:20px;
	        }						
        </style>
    </head>
    <body>
        <p class="one">类别选择器的使用结果显示</p>	<!--one类的样式为：字体颜色紫色，字体大小20-->
    </body>
</html>


java 创建SSL上下文_CSS_02



✨3.ID选择器

💨与类别选择器基本相同，#开头，应用该选择器则用id属性声明


<html>
    <head>
        <title>ID选择器</title>
        <style>									
	        #two{
		        color:pink;
		        font-size:11px;
	        }
        </style>
    </head>
    <body>
        <p id="two">ID选择器的使用结果显示</p>		<!--twoID的样式为：字体颜色粉色，字体大小11-->
    </body>
</html>


java 创建SSL上下文_CSS_03



✨4.选择器对比 

选择器

便捷性

选择器的命名

引用属性

标记选择器

不便捷

必须是HTML标记

无

类别选择器

便捷

必须.开头

class

ID选择器

便捷

必须#开头

id

❤️四、 CSS样式表

✨1.行内样式表

💨直接定义在HTML标记里面


<html>
    <head>
        <title>行内样式表</title>
        <style>									
	        #two{
		        color:pink;
		        font-size:11px;
	        }
        </style>
    </head>
    <body>
        <h1 style="color:pink;font-size:20px">行内式样式表</h1><!--行内式样式表的样式为：字体颜色粉色，字体大小20-->
    </body>
</html>



java 创建SSL上下文_CSS_04



✨2.链接式样式表

💨最常用，将CSS样式定义在单独的文件中，用link标记将CSS文件导入

link语法：

<link rel="stylesheet"href="path"type="text/css"/>


💛rel:定义外部文档和调用文档之间的关系

💛href:CSS文档的绝对或相对路径

💛type:外部文档（CSS文件）的MIME类型

参数rel和type参数的值是固定的.

其中rel和href这2个参数必须要写，不然无法导入CSS文件.

🎏CSS文件导入JSP文件教程

1️⃣文件目录展示 


java 创建SSL上下文_java_05



 2️⃣index.css文件

@charset "UTF-8";
a{
	color:red; 
	font-size:30px;
}

3️⃣index.jsp文件 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接式样式表</title>
<link href="<%=request.getContextPath()%>/css/index.css"rel="stylesheet"/>
</head>
<body>
<a>链接式样式表</a>
</body>
</html>

💥注意：

<link href="<%=request.getContextPath()%>/css/index.css"rel="stylesheet"/>

❗jsp文件中的href中除了加上路径以外，还要额外加上

<%=request.getContextPath()%>

❗而html不需要加上面的代码

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