【Javaweb02】初探CSS：网页样式设计的入门指南
文章目录
- 🌍一.CSS
- ❄️ 官方文档
- ❄️为什么需要 CSS
- ❄️CSS 语法
- 🌍二.常用样式
- ❄️字体颜色
- ❄️宽度 width/高度 height/边框 border
- ❄️背景颜色
- ❄️字体样式
- ❄️DIV 居中
- ❄️文本居中
- ❄️超链接去下划线
- ❄️表格去细线
- ❄️列表去修饰
- 🌍三.CSS的三种使用方式
- ❄️ 内联样式（Inline Styles）
- ❄️ 内部样式表（Internal Style Sheet）
- ❄️外部样式表（External Style Sheet）
- 🌍四.CSS选择器
- ❄️1.基本选择器
- ❄️2.层次选择器
- ❄️3.属性选择器
- ❄️4.伪类选择器
- ❄️5.伪元素选择器
- 🌍五.选择器优先级规则
- ❄️基本规则
- ❄️特殊规则
- ❄️计算选择器优先级
🙋♂️ 作者：@whisperrr.🙋♂️
👀 专栏：Javaweb学习👀
💥 标题：【Javaweb02】初探CSS：网页样式设计的入门指南💥
❣️ 寄语：比较是偷走幸福的小偷❣️
🌍一.CSS
❄️ 官方文档
CSS 指的是层叠样式表* (Cascading Style Sheets)
地址: https://www.w3school.com.cn/css/index.asp
❄️为什么需要 CSS
- 在没有 CSS 之前，我们想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，费心费力。所以 CSS 就出现了。
- 使用 CSS 将 HTML 页面的 内容与样式分离提高 web 开发的工作效率(针对前端开发)
- CSS 可以让 html 元素(内容) + 样式(CSS)分离，更好的控制页面
❄️CSS 语法
- CSS 语法可以分为两部分： (1)选择器 (2)声明
- 声明由属性和值组成，多个声明之间用分号分隔
-
最后一条声明可以不加分号(建议加上)
-
一般每行只描述一个属性
-
CSS 注释：
/*注释内容*/, 类似 java -
在 head 标签内，出现了
<style type="text/css"></style>表示要写 css 内容 -
div{} 表示对 div 元素进行样式的指定, div 就是一个选择器(元素/标签选择
器) -
width: 300px(属性); 表示对 div 样式的具体指定, 可以有多个 -
如果有多个，使用; 分开即可, 最后属性可以没有; 但是建议写上
-
当运行页面时，
div就会被div{}渲染，修饰 -
小经验：在调试 css 时，可以通过修改颜色，或者大小来看
-
css 的注释是
/* */,快捷键 ctrl+/ -->
🌍二.常用样式
❄️字体颜色
颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200,200,200)和十六进制表示值 比如 #708090
应用实例:改变在浏览器输出的字体颜色为黄色.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色</title>
<style type="text/css">
div {
/*有三种方式，指定颜色
1. 英文
2. 16 进制 #ff7d44 [使用最多]
3. 三原色 rgb(1,1,1)
*/
color: #ff7d44;
}
</style>
</head>
<body>
<div>csdn写博客</div>
</body>
</html>
❄️宽度 width/高度 height/边框 border
width: 300px;宽度/高度像素值：100px； 也可以是百分比值：50%；
height: 100px;
border: 1px dashed blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style type="text/css">
div {
width: 300px;
height: 100px;
border: 1px dashed blue;
}
</style>
</head>
<body>
<div>csdn写博客</div>
</body>
</html>
❄️背景颜色
width: 定义宽;
height: 定义高;
background-color: 指定颜色;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div {
width: 200px;
height: 100px;
background-color: #ff7d44;
}
</style>
</head>
<body>
<div>csdn学博客</div>
</body>
❄️字体样式
1.font-size:指定大小，可以按照像素大小
2. font-weight : 指定是否粗体
3.` font-family : 指定类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
/*
说明:
1. font-size: 指定大小，可以按照像素大小
2. font-weight : 指定是否是粗体
3. font-family : 指定字体类型
*/
div {
border: 1px solid black;
width: 300px;
font-size: 40px;
font-weight: bold;
font-family: 华文新魏;
}
</style>
</head>
<body>
<div>csdn写博客</div>
</body>
</html>
❄️DIV 居中
margin-left: auto;
margin-right: auto;
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div 居中</title>
<style type="text/css">
div {
border: 1px blue solid; /*顺序不要求*/
width: 300px;
background: aliceblue;
font-size: 40px;
font-weight: bold;
font-family: 新宋体;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>csdn写博客</div>
</body>
</html>
❄️文本居中
text-align: center;
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本 居中</title>
<style type="text/css">
div {
border: 1px blue solid; /*顺序不要求*/
width: 300px;
background: aliceblue;
font-size: 40px;
font-weight: bold;
font-family: 新宋体;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<div>csdn写博客</div>
</body>
</html>
❄️超链接去下划线
text-decoration: none;
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
韩顺平 Java 工程师
<title>超链接去掉下划线</title>
<!-- 1. decoration 修饰
-->
<style type="text/css">
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击到百度</a>
</body>
</html>
❄️表格去细线
设置边框 : border: 1px solid black
将边框合并: border-collapse: collapse;
指定宽度： width
设置边框： 给 td, th 指定即可 border: 1px solid black;
<style type="text/css">
table, tr, td {
width: 300px;
border: 1px solid black;
border-collapse: collapse;
}
</style>
- table, tr, td 表示组合选择器
- 就是 table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性
❄️列表去修饰
list-style: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表去修饰</title>
<style type="text/css">
ul {
/*说明:list-style:none 表示去掉默认的修饰*/
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>三国演义</li>
<li>红楼梦</li>
<li>西游记</li>
<li>水浒传</li>
</ul>
</body>
</html>
🌍三.CSS的三种使用方式
CSS（层叠样式表）有三种主要的使用方式，它们分别是内联样式、内部样式表和外部样式表。以下是这三种使用方式的详细介绍：
❄️ 内联样式（Inline Styles）
内联样式是将CSS样式直接写在HTML元素的style属性中。这种方式简单直接，但并不推荐大量使用，因为它不符合内容与样式分离的原则。
缺点:
- 标签多了,样式多了，代码量庞大
- 可读性差
- CSS 代码没有复用性
示例代码：
<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>
在上面的例子中，<p>元素的样式被直接定义在style属性中，这将使该段落的文本颜色变为蓝色，字体大小为16像素。
❄️ 内部样式表（Internal Style Sheet）
内部样式表是将CSS代码写在HTML文档的<head>部分，通常位于<style>标签内。这种方式适用于单个页面的样式定义，但同样不适用于大型项目，因为它不能跨页面复用。只能在同一页面内复用代码维护不方便，实际项目中会有很多页面，需要到对应页面去修改。工作量大
示例代码：
<head>
<style>
body {
background-color: #f8f8f8;
}
h1 {
color: green;
}
p {
font-family: Arial, sans-serif;
}
</style>
</head>
在这个例子中，整个页面的背景颜色、标题颜色和段落字体都被定义在<style>标签内。
❄️外部样式表（External Style Sheet）
外部样式表是将CSS代码保存在一个独立的.css文件中，然后在HTML文档的<head>部分通过<link>标签引入。这种方式是大型网站和项目中最常用的方法，因为它可以实现样式的集中管理和跨页面复用。<link rel="stylesheet" href="test.css"/>开发过程使用第三种方式
示例代码：
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
在styles.css文件中，你可以这样写：
body {
background-color: #f8f8f8;
}
h1 {
color: green;
}
p {
font-family: Arial, sans-serif;
}
通过这种方式，你可以将样式与HTML内容完全分离，使得网站更加易于维护和更新。
总结：
- 内联样式：直接在HTML元素上定义，适用于简单的样式调整。
- 内部样式表：在HTML文档的
<head>部分定义，适用于单个页面的样式。 - 外部样式表：在独立的CSS文件中定义，通过
<link>标签引入，适用于大型项目和网站的样式管理。
🌍四.CSS选择器
❄️1.基本选择器
- 元素选择器（Type Selector）
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。 CSS 元素/标签选择器通常是某个 HTML 元素， 比如 p、h1、a div 等 。
p {
color: blue;
}
- 类选择器（Class Selector）
选择具有特定类名的元素。.highlight { background-color: yellow; } - ID选择器（ID Selector）
选择具有特定ID的元素。每个ID在页面中应该是唯一的。#main-content { font-size: 16px; }
❄️2.层次选择器
- 后代选择器（Descendant Selector）
选择指定元素内的所有后代元素。div p { margin: 10px; } - 子选择器（Child Selector）
选择指定元素的直接子元素。div > p { text-indent: 2em; } - 相邻兄弟选择器（Adjacent Sibling Selector）
选择紧接在另一个元素后的元素。h2 + p { font-weight: bold; } - 通用兄弟选择器（General Sibling Selector）
选择指定元素之后的所有兄弟元素。h2 ~ p { color: green; }
❄️3.属性选择器
选择具有特定属性或属性值的元素。
- 属性存在选择器
input[type] { padding: 5px; } - 属性值选择器
input[type="text"] { border: 1px solid #ccc; } - 属性值包含选择器
a[href*="example"] { font-style: italic; } - 属性值开头选择器
a[href^="http"] { background-image: url('link-icon.png'); } - 属性值结尾选择器
a[href$=".pdf"] { color: red; } - 属性值单词选择器
div[class~="error"] { color: red; }
❄️4.伪类选择器
- 动态伪类
:link- 未访问的链接:visited- 已访问的链接:hover- 鼠标悬停的元素:active- 正在被激活的元素:focus- 获得焦点的元素
- 目标伪类
:target { background-color: #eee; } - 语言伪类
:lang(en) { font-family: Arial, sans-serif; } - 结构伪类
:nth-child(n)- 选择第n个子元素:nth-last-child(n)- 选择倒数第n个子元素:first-child- 选择第一个子元素:last-child- 选择最后一个子元素:only-child- 选择唯一子元素:nth-of-type(n)- 选择第n个指定类型的元素:nth-last-of-type(n)- 选择倒数第n个指定类型的元素:first-of-type- 选择第一个指定类型的元素:last-of-type- 选择最后一个指定类型的元素:only-of-type- 选择唯一指定类型的元素
❄️5.伪元素选择器
伪元素用于选择和操作文档中的特定部分。
- ::before
在选定元素之前插入内容。p::before { content: "Note: "; } - ::after
在选定元素之后插入内容。p::after { content: " End of note."; } - ::first-letter
选择块级元素的第一封信首字母。p::first-letter { font-size: 200%; } - ::first-line
选择块级元素的第一行。p::first-line { font-weight: bold; }
🌍五.选择器优先级规则
在CSS中，当多个规则应用于同一个元素时，浏览器需要决定哪些样式应该应用于该元素。这就是所谓的“层叠”效应，它是CSS中“Cascading”一词的由来。选择器的优先级决定了哪些样式规则会被应用。
❄️基本规则
- 内联样式（Inline styles）
直接在HTML元素上使用的style属性中的样式具有最高的优先级。 - ID选择器
使用#符号定义的选择器具有第二高的优先级。 - 类选择器、属性选择器和伪类选择器
使用.、[]和:定义的选择器具有第三高的优先级。 - 元素选择器和伪元素选择器
使用元素名称或伪元素（如::before）定义的选择器具有第四高的优先级。 - 通配符选择器
使用*定义的选择器具有最低的优先级。 - 继承的样式
如果没有为元素指定任何样式，它将继承其父元素的样式。继承的样式优先级最低，甚至低于通配符选择器。
❄️特殊规则
- 重要性声明（
!important）
使用!important声明的样式会覆盖以上所有规则，具有最高的优先级。然而，过度使用!important会导致样式管理混乱，因此应尽量避免使用。 - 相同优先级的选择器
如果两个选择器具有相同的优先级，则后面的选择器会覆盖前面的选择器。
❄️计算选择器优先级
选择器的优先级可以通过特定的计算方法来确定。以下是如何计算选择器优先级的基本步骤：
- 计算ID选择器的数量
- 计算类选择器、属性选择器和伪类选择器的数量
- 计算元素选择器和伪元素选择器的数量
- 忽略通配符选择器和复合选择器中的通用选择器
每个选择器的数量决定了它的优先级，数量越多，优先级越高。以下是几个例子：
#id的优先级是 100.class的优先级是 10element的优先级是 1#id .class element的优先级是 111.class.class的优先级是 20（两个类选择器）
代码演示
/* 优先级: 1 (元素选择器) */
p {
color: blue;
}
/* 优先级: 10 (类选择器) */
.red-text {
color: red;
}
/* 优先级: 100 (ID选择器) */
#special {
color: green;
}
/* 优先级: 101 (ID选择器 + 元素选择器) */
#special p {
color: purple;
}
/* 优先级: 11 (类选择器 + 类选择器) */
.red-text.bold-text {
font-weight: bold;
}
在上述示例中，#special p 的优先级最高，因为它包含一个ID选择器和一个元素选择器，总和为101。因此，即使其他规则也适用于<p>元素，#special p中的样式也会被应用。