提示:这里可以添加本文要记录的大概内容:
前端CSS是用于控制网页样式和布局的一种技术
提示:以下是本篇文章正文内容,下面案例可供参考
如何在HTML中添加CSS样式?
在HTML中使用标签来编写CSS代码,或者使用标签引用外部CSS文件
示例代码1:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
/* 选择器body */
body {
/* 大括号内是一项项具体的样式声明---属性名冒号空格具体值; */
background-color: lightblue;
}
style>
head>
<body>
<p>你好世界!p>
body>
<link rel="stylesheet" href="styles.css">
html>
输出效果:

如果把 body选择器改成 p选择器:

p选择器和body选择器的区别:
body选择器:body选择器用于选择HTML文档中的元素。它是文档的根元素,只能出现一次。body选择器通常用来设置全局样式
p选择器:p选择器用于选择HTML文档中的元素,即段落元素
如何选择元素并应用样式?
使用CSS选择器来选择要应用样式的元素。常见的选择器有标签选择器、类选择器、ID选择器等。
标记选择器的名字就是某一个标记的名字,可以选择多个相同类项的标记
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
/* 标签选择器 */
p {
color: red;
}
style>
head>
<body>
<p>你好世界!p>
body>
html>
输出效果:

类选择器名字前加. 名字自定义,可以选择多个不同类型的标记 ,使用最多
必须给标记设置class属性
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
/* 类选择器 */
.my-class {
font-weight: bold;/* 字体加粗 */
color: green;
}
style>
head>
<body>
<p class="my-class">爱上对方过后...p>
<h1 class="my-class">手机大减价h1>
body>
html>
输出效果:

ID选择器前加#
选择器名字必须是某个标记的ID属性值,只能选择一个标记 (唯一),精准控制
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
/* ID选择器 */
#my-id {
color:cornflowerblue;
}
style>
head>
<body>
<a href="https://rej177.blog.csdn.net/article/details/131234394" id="my-id">二哈喇子!a>
body>
html>
输出效果:

如何设置元素的尺寸和布局?
使用CSS属性来设置元素的尺寸和布局,如width、height、margin、padding等
示例代码:
/* 设置宽度和高度 */
.my-element {
width: 200px;
height: 100px;
}
/* 设置外边距和内边距 */
.my-element {
margin: 10px;
padding: 20px;
}
如果是移动端,用单位:vw
100vw(移动端)相当于100% 百分比的意思
该选择器使用了空格符号 将父元素和子元素进行连接,表示只选择父元素中与子元素符合条件的元素
后代选择器,用于选择某个元素的后代元素,选择器中间加空格
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
div p {
color: blue;
}
style>
head>
<body>
<h3>标题1h3>
<div>
<h2>标题2h2>
<p>段落1p>
div>
body>
html>
输出结果:

解释:上述代码中的 【案例】另一个例子: 这段HTML代码使用后代选择器: 上面的代码中.food-type li是一个后代选择器,它的作用是选择所有类名为" 在本例中, 子选择器中间加 【示例代码】: 输出结果: 如何创建响应式布局? 使用CSS媒体查询来创建响应式布局,根据不同的屏幕尺寸应用不同的样式。示例代码: 使用群组选择器,多个选择器之间逗号分割 群组选择器:多个选择器所选择的标记,公用这一段 输出效果: 伪类选择器不能单独使用,跟在其他选择器后面 使用伪类选择器时,需要在要选择的元素名称后面添加冒号和伪类选择器 CSS伪类选择器是一种用于选择元素状态的选择器 用于选择一个父元素中特定类型的第一个元素 【示例代码】: 输出结果: 这将第一个项目的文字颜色更改为红色(前三个 用于选择一个父元素中特定类型的最后一个元素 【示例代码】: 输出结果: ①、 如果是 【示例代码】: 输出结果: 【示例代码】: 输出结果: ③、 输出结果: 行内样式的CSS代码直接编写在某个标记的style属性中 局限性:只在这一个标记有效,不建议使用,但在一些情况下,它可能是必要的,特别是当需要快速测试某个样式是否有效时 在HTML文件的 局限性:只在当前界面中有效 【示例代码】: 输出效果: 将CSS代码编写在单独的 外部样式优点: 案例: 【例1】 新建一个HTML文件,在HTML文件中: 【示例代码】: 在 输出结果: 另外新建一个HTML文件(便于观察:一个外部的CSS文件可以被多个HTML文件共同使用,便于系统界面的样式统一) 【示例代码】: 相同类型的选择器,代码靠后的优先级高,而 【示例代码】: 输出结果: 层叠性:多段样式代码在同一个标记上叠加生效 【示例代码】: 输出结果: CSS继承特性是指某些样式属性可以自动从父元素继承到子元素上,从而使得子元素的样式表现与父元素的样式表现类似。 CSS中有许多样式属性都具有继承特性,例如字体、颜色、行高、文本对齐、字间距等。如果某个元素没有指定这些属性,那么该元素将从其父元素中继承这些属性。 下面演示了CSS继承特性在HTML中的应用: 【示例代码】: 输出效果: 在上面的代码中,首先定义了一个样式规则,它应用到 接下来定义了一个样式规则,应用到 然后定义了一个样式规则,应用到 最后定义了一个类 div p 后代选择器选择了 元素,并将它的文本颜色设置为蓝色
<ul class="food-type">
<li>
<img src="./img/dcfl01.png" alt="">
<p>美食</a></p>
</li>
<ul>
.food-type li{
width: 18vw;
height: 20vw;
/* 弹性布局 */
display: flex;
justify-content: center;
align-items: center;
}
food-type"的父元素中的所有子元素,也就是选择所有列表项。.food-type是父元素的类名,而li是子元素的标签名,因此.food-type li选择器表示匹配所有.food-type中的li元素。CSS子选择器 div>p
>号 ,选择第一代DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
div>span{
color: #79a3e0;
}
style>
head>
<body>
<div>
<span>范围一span>
<p><span>范围二span>p>
div>
body>
html>

@media (max-width: 600px) {
/* 在窄屏幕上应用的样式 */
.my-element {
font-size: 14px;
}
}
@media (min-width: 601px) {
/* 在宽屏幕上应用的样式 */
.my-element {
font-size: 18px;
}
}
CSS群组选择器 p,p1
{}内样式,共享DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
p,.lei{
font-size: 24px;
color: green;
}
style>
head>
<body>
<p>段落p>
<h1 class="lei">一级标题h1>
body>
html>

CSS伪类选择器
:first-of-type 父类第一个
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
li:first-of-type {
color: red;
}
style>
head>
<body>
<ul>
<li>第一个项目li>
<li>第二个项目li>
<li>第三个项目li>
<div>第一个divdiv>
<div>第二个divdiv>
ul>
body>
html>

元素中的第一个)
请注意:这个选择器只作用于元素,而不作用于:first-of-type
div:first-of-type {
background-color: blue;
}
/* 这将选择第一个:last-of-type 父类最后一个
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
li:last-of-type {
color: red;
}
style>
head>
<body>
<ul>
<li>第一个项目li>
<li>第二个项目li>
<li>第三个项目li>
<div>第一个divdiv>
<div>第二个divdiv>
ul>
body>
html>

:nth-of-type(n) 父类第n个
:nth-of-type(n)用于选择父元素中特定类型的第n个元素:nth-of-type(3n),代表3的倍数个标记,4n:4的倍数个标记DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
li:nth-of-type(2) {
color: red;
}
style>
head>
<body>
<ul>
<li>第一个项目li>
<li>第二个项目li>
<li>第三个项目li>
<div>第一个divdiv>
<div>第二个divdiv>
ul>
body>
html>

②、:nth-of-type(odd)选择所有奇数元素DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
li:nth-of-type(odd) {
color: green;
}
style>
head>
<body>
<ul>
<li>第一个项目li>
<li>第二个项目li>
<li>第三个项目li>
<div>第一个divdiv>
<div>第二个divdiv>
ul>
body>
html>

:nth-of-type(even)选择所有偶数元素DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
li:nth-of-type(even) {
color: gold;
}
style>
head>
<body>
<ul>
<li>第一个项目li>
<li>第二个项目li>
<li>第三个项目li>
<div>第一个divdiv>
<div>第二个divdiv>
ul>
body>
html>

CSS使用方式
行内样式
<body>
<h1 style="color: navy; font-size: 36px;">Hello, World!h1>
body>

内嵌样式
标签中使用标签来定义CSS样式,【简单说就是】:内嵌样式的CSS代码编写在style标签中DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 36px;
}
style>
head>
<body>
<h1>Hello, World!h1>
body>
html>

外部样式
.css文件中,某一个HTML需要使用外部样式文件,必须使用标签【link:css】引入
以下例子代码写在了同一个文件夹中DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<link rel="stylesheet" href="./common.css">
head>
<body>
<h1>你好,外部样式h1>
<p class="h">外部样式,你好p>
body>
html>
common.css文件中:body {
background-color: lightblue;
}
.h {
color: navy;
font-size: 58px;
}

【例2】DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" href="./common.css">
head>
<body>
<p class="h">HELLO WORLD!p>
body>
html>

如果要改样式只需要更改css文件中的样式,运行两个HTML文件后,样式均会被改变CSS优先级
!important声明具有最高优先级
不同类型的选择器,id>类>标签DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
p{
color: red;
/* 在red后面加上!important声明,则会显示红色 */
}
p{
color: blue;
}
/* 选择器一样,以后面的为准 */
.lei{
color: yellow;
}
#id{
color: darkgreen;
}
style>
head>
<body>
<p class="lei" id="id">我是啥色p>
body>
html>

CSS层叠特性
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
p{
color: green;
}
.abc{
font-size: 50px;
}
.xyz{
background-color: skyblue;
}
style>
head>
<body>
<p class="abc xyz">层叠特性p>
body>
html>

CSS继承特性
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<title>CSS继承特性title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: red;
font-size: 30px;
font-weight: bold;
}
p {
color: green;
line-height: 1.5;
}
.note {
font-style: italic;
}
style>
head>
<body>
<h1>CSS继承特性h1>
<p>在 CSS 中,许多属性可以被子元素继承。通过继承,可以使得网页设计变得更加简洁明了p>
<p class="note">注意:并不是所有的属性都可以被继承,比如背景色(background)和边框(border)等都不能被继承p>
body>
html>

body 元素上,设置了字体和字体大小。因为没有明确指定其他元素的字体,所以所有子元素都会继承这个样式。h1 元素上,设置了颜色、字体大小和粗细。这个样式规则会覆盖之前定义的字体样式,但是字体大小和粗细会被继承到 h1 的子元素中。p 元素上,设置了颜色和行高。这个样式规则同样会继承前面的字体样式,但是颜色和行高属性会覆盖前面的样式规则。.note,应用于一个 p 元素上,设置了字体样式为斜体。这个样式规则同样会继承前面的字体样式和颜色属性,但是字体样式会覆盖前面的样式规则。
【Python】OpenCV-图片差异检测与标注
黑马JVM总结(三)
应用统计专业学习指南
Vue路由 replace属性 控制浏览记录不能前进或后退
MySQL开发技巧——索引
如何和程序员谈恋爱
新零售行业如何玩转线上服务
AUTOSAR汽车电子嵌入式编程精讲300篇-汽车 CAN FD 总线应用研究(下)
python绘制蕨菜叶分形