零基础入门JAVAweb——前端开发css篇

小罗のdiary

已于 2022-04-28 10:21:06 修改

阅读量664

点赞数 1

分类专栏： javaweb 文章标签：前端 java

于 2022-04-28 10:16:06 首次发布

本文链接：https://blog.csdn.net/m0_57209839/article/details/124465525

版权

javaweb 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

🧑作者简介

📮首页：小罗のdiary的博客_CSDN博客-单片机原理,java基本常识领域博主

🕴职业：👨‍🎓在校大学生

😍爱好：📝写博客，🎧听歌，🔌学习单片机，💻java，🏃跑步

🏆擅长：单片机的基本原理，java基本原理

🎉🎉欢迎来首页阅读我的博客🎉🎉

📖主要内容

💦💦💦💦💦💦💦💦💦💦💦

💦💦理清CSS与html直接的关系，了解💦💦

💦💦并使用CSS样式表的规则，掌握C💦💦

💦💦💦SS的选择器还有基本样式表💦💦💦

💦💦💦💦💦💦💦💦💦💦💦

📋目录

❤️一、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>

✨2.类别选择器

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

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

✨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>

✨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>

✨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️⃣文件目录展示

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"/>

相信大家到这里应该已经读完了吧！😁😁

觉得写得好的话点个赞再走呗！😊😊

小罗のdiary

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
零基础入门JAVAweb——前端开发css篇

🧑作者简介📮首页：小罗のdiary的博客_CSDN博客-单片机原理,java基本常识领域博主🕴职业：👨‍🎓在校大学生😍爱好：📝写博客，🎧听歌，🔌学习单片机，💻java，🏃跑步🏆擅长：单片机的基本原理，java基本原理🎉🎉欢迎来首页阅读我的博客🎉🎉主要内容理清CSS与html直接的关系，了解并使用CSS样式表的规则，掌握CSS的选择器还有基本样式表CSS的定义CSS是W3C协会为了弥补html在显示属性设定的不足写创造出来的一套扩展样式标准
复制链接

扫一扫