HTML--初识CSS

最新推荐文章于 2024-11-01 15:23:25 发布
最新推荐文章于 2024-11-01 15:23:25 发布
阅读量590 收藏 10
点赞数 10
分类专栏： Web前端 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/one__piece__/article/details/140449731
版权

目录

一.CSS概念

CSS优势：

CSS语法：

CSS样式： 

二.CSS选择器

标签选择器

类选择器

 语法：

 ID选择器

 语法：

三.CSS高级选择器  

层次选择器

 后代选择器

 案例：

 子选择器

  语法：

相邻兄弟选择器 

 案例：

 通用兄弟选择器

 语法：

案例：

结构伪类选择器 

 E:first-child /last-child

语法 1：

案例： 

语法 2： 

 案例： 

 E F:nth-cild(?)

 语法 1：

案例： 

语法 2： 

 E F:nth-of-type(n)

语法： 

案例： 

属性选择器  

​编辑 语法： 

一.CSS概念

      CSS是层叠样式表（Cascading Style Sheets）的缩写。它是一种用于描述HTML文档外观样式的标记语言。通过CSS，开发者可以在不改变HTML标记结构的情况下，改变网页的样式和布局。

CSS优势：

  1. 分离样式和内容：CSS将网页的样式和内容分离，使得网页的维护更加方便。通过修改CSS文件，可以对整个网站的样式进行统一的调整，而不需要逐个修改每个网页的样式。

  2. 可维护性高：由于样式集中在CSS文件中，可以通过修改一个样式来改变整个网页的样式，便于网站的维护和更新。

  3. 可重用性高：CSS样式可以在多个页面之间共享和重用，可以减少代码冗余，提高开发效率。

  4. 提高网站性能：CSS样式可以通过合并和压缩来减少文件大小，从而提高网站的加载速度。

  5. 设计灵活性强：CSS提供了丰富的样式选择器和属性，可以灵活地设计各种样式效果，实现丰富多样的网页布局和交互效果。

  6. 跨平台兼容性好：CSS在各个浏览器和设备上都有广泛的支持，可以兼容不同的浏览器和操作系统，确保网站在不同平台上显示CSS中的选择器用于选择HTML文档中的元素，并为这些元素应用样式。选择器可以根据元素的类型、类名、ID等属性来选择元素。 一致。

CSS语法：

CSS中的选择器用于选择HTML文档中的元素，并为这些元素应用样式。选择器可以根据元素的类型、类名、ID等属性来选择元素。 

CSS样式： 

  • 行内样式：

 它通过在HTML标签的style属性中指定CSS代码来实现样式的应用。

<body>
	<h1 style="color: red;">我是中国人</h1>
</body>
  • 内部样式表 

 CSS内部样式表是一种将样式信息直接嵌入到HTML文档中的方法，可以使用<style>标签通过选择器来选择要应用样式的元素，并通过CSS属性来定义样式。

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				color: red;
			}
        </style>
	</head>
	<body>
		<h1>我是中国人</h1>
</body>
  •  外部样式表

 CSS外部样式表是一种用来定义网页外观和排版的文件。它是一种独立于HTML文档的样式表，可以通过在HTML文件中引用外部样式表来控制整个网站的样式。

首先创建一个CSS

h1{
	color: red;
}

  在html文件中引用创建的CSS文件。

二.CSS选择器

  • 选择器优先级： ID > 类 >标签

标签选择器

在CSS中，通过使用标签选择器，可以选择所有具有相同标签名称的元素并对其应用样式。

 

p {
  /* 样式规则 */
}

 上述代码表示将样式规则应用于所有的<p>标签。

类选择器

类选择器用于选择具有相同类名的元素，以便对它们应用相同的样式

 语法：

.cla1{规则}

 上述代码意味着会将当前.cla1中的规则应用于所有包含class="cla1"的标签。

<style>
.my-class {
  color: red;
}
</style>
</head>
<body>
<h1 class="my-class">这是一个标题</h1>
<p class="my-class">这是一个段落。</p>
</body>

 ID选择器

在HTML中，ID选择器用于选择具有特定ID属性的元素。

 语法：

 

#myElement {
  /* CSS样式 */
}
<div id="myElement">This is a div element with id "myElement"</div>

 上述代码会将ID选择器中定义的CSS样式应用于id="myElement"的标签

三.CSS高级选择器  

层次选择器

 在HTML中，层次选择器用于选择特定元素的子元素、后代元素或兄弟元素。

 

  •  后代选择器

后代选择器中的所有属于E元素的F元素将执行CSS样式 

 语法：

E F{#css样式;}
 案例：
    <style type="text/css">
			body p{background-color: aqua;}
	</style>
</head>
<body>
	<p>1</p>
	<p>2</p>
	<ul>
		<li><p>3</p></li>
		<li><p>4</p></li>
	</ul>

  •  子选择器

 所有属于E元素的子元素F将会执行CSS样式

  语法：

E > F{CSS样式}
    <style type="text/css">
			body>p{background-color: aqua;}
	</style>
</head>
<body>
	<p>1</p>
	<p>2</p>
	<ul>
		<li><p>3</p></li>
		<li><p>4</p></li>
	</ul>

  • 相邻兄弟选择器 

 HTML中的相邻兄弟选择器用于选择某个元素（E）下一个直接相邻兄弟元素(F)。

#E+F{CSS样式}
 案例：
    <title></title>
	<style>
		#p01+p{background-color: aqua;}
	</style>
</head>
<body>
	<P id="p01">1</P>
	<p>2</p>
	<ul><li>3</li></ul>
	<ul><li>4</li></ul>

  •  通用兄弟选择器

在HTML中用于选择某个元素后面所有的兄弟元素。它使用 ~ 符号来表示。

 语法：
#E~F{#CSS样式}
案例：
    <title></title>
	<style>
		#p01~p{background-color: aqua;}
	</style>
</head>
<body>
	<P>1</P>
	<p id="p01">2</p>
	<p>3</p>
    <p>4</p>
	<ul><li>3</li></ul>
	<ul><li>4</li></ul>

结构伪类选择器 

  •  E:first-child /last-child

语法 1：
E F:first-child{#CSS样式}

 父元素（E）的第一个子元素（F）将应用CSS样。 

案例： 
     <style type="text/css">
		ul li:first-child{background-color: aqua;}
    </style>
</head>
<body>
	<P>1</P>
	<p id="p01">2</p>
	<p>3</p>
	<p>4</p>
	<ul>
		<li>3</li>
		<li>4</li>
	</ul>
</body>

语法 2： 
F:first-child{#CSS样式}

若代码中未写入父元素E，则匹配所有包含F元素的标签中的第一个F元素

 案例： 
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		ul li:first-child{background-color: aqua;}
	</style>
</head>
<body>
	<P>1</P>
	<p id="p01">2</p>
	<p>3</p>
	<p>4</p>
	<ul>
		<li>3</li>
		<li>4</li>
	</ul>
	<ul>
		<li>5</li>
		<li>6</li>
	</ul>
</body>

  •  E F:nth-cild(?)

 语法 1：
E F:nth-child(n)

 选择父元素E的第n个子元素F

案例： 
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		ul li:nth-child(2){background-color: aqua;}
	</style>
</head>
<body>
	<P>1</P>
	<p id="p01">2</p>
	<p>3</p>
	<p>4</p>
	<ul>
		<li>3</li>
		<li>4</li>
	</ul>
	<ul>
		<li>5</li>
		<li>6</li>
	</ul>
</body>

语法 2： 
若父元素E中的第n个元素不是子元素F则不匹配CSS样式

 

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		ul p:nth-child(2){background-color: aqua;}
	</style>
</head>
<body>
	<P>1</P>
	<p id="p01">2</p>
	<p>3</p>
	<p>4</p>
	<ul>
		<li>3</li>
		<li>4</li>
	</ul>
	<ul>
		<li>5</li>
		<li>6</li>
	</ul>
</body>

  •  E F:nth-of-type(n)

语法： 
 E F:nth-of-type(n){#CSS样式}

选择父元素E的第n个p元素，该选择器会优先匹配元素再匹配n不会出现 E F:nth-cild(?) 选择器中不匹配的情况

案例： 
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		ul li:nth-of-type(2){background-color: aqua;}
	</style>
</head>
<body>
	<P>1</P>
	<p id="p01">2</p>
	<p>3</p>
	<p>4</p>
	<ul>
		<li>3</li>
		<li>4</li>
	</ul>
	<ul>
		<li>5</li>
		<li>6</li>
	</ul>
</body>

属性选择器  

在HTML中，属性选择器用于选择具有指定属性的元素。以下是HTML中常用的属性选择器

 语法： 
a[指定属性]{#CSS样式}
例如：[type]选择所有具有type属性的元素
 
例如：[type=text]选择所有type属性的值为"text"的元素
 
例如：[class~=btn]选择所有class属性值中包含"btn"的元素
 
例如：[href^=https]选择所有href属性值以"https"开头的元素
 
例如：[src$=.jpg]选择所有src属性值以".jpg"结尾的元素
 
例如：[title*=home]选择所有title属性值中包含"home"的元素
liu zhi cheng
关注
专栏目录
HTML---初识CSS
zhoutong2323的博客
12-14 327
CSS是层叠样式表（Cascading Style Sheets）的缩写。它是一种用于描述HTML文档外观样式的标记语言。通过CSS，开发者可以在不改变HTML标记结构的情况下，改变网页的样式和布局。分离样式和内容：CSS将网页的样式和内容分离，使得网页的维护更加方便。通过修改CSS文件，可以对整个网站的样式进行统一的调整，而不需要逐个修改每个网页的样式。可维护性高：由于样式集中在CSS文件中，可以通过修改一个样式来改变整个网页的样式，便于网站的维护和更新。可重用性高：CSS样式可以在多个页面之间共享和重用
web前端---css初识
weixin_41968103的博客
12-24 378
简单介绍了css的书写方法，基础选择器和css文本文字样式 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt impo
html-css初识者的基础认知
你来啦????
07-17 676
一秒让你学会HTML
CSS-1-初识CSS
baidu_38126306的博客
12-05 202
CSS -> 1 初始CSS 1.CSS是什么？ 2.CSS怎么用？ 3.CSS选择器（重点+难点） 4.美化网页（文字、超链接、列表、渐变…） 5.盒子模型 6.浮动 7.定位 8.网页动画（特效） 1.1 什么是CSS Cascading Style Sheet 层叠级联样式表 CSS：表现（美化网页） 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动 1.2 发展史 CSS1.0 CSS2.0 DIV（块） + CSS，提出HTML与CSS结构分离的思想，网页
HTML&CSS-01初识html
m0_58865442的博客
10-18 91
它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
CSS入门---初识弹性布局
qq_44433209的博客
03-11 517
CSS入门—弹性布局 此节内容包括： 1. 改变弹性元素方向 2. 控制弹性元素溢出的换行处理 一、首先声明一个弹性盒模型 <!DOCTYPE html> <html lang="en"> <head>`在这里插入代码片` <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
01-CSS初识
qq_41963519的博客
12-15 486
本资源由 itjc8.com 收集 typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义， 比如表明这是一个大标题，用 表明这是一个段落，用 表明这儿有一个图片， 用 表示此处有链接。 很早的时候，世界上的网站虽然很多，但是他
HTML-CSS
weixin_72952570的博客
10-10 1987
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置，如：padding-top、padding-left、padding-right …盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
CSS-初识
qq_52040402的博客
10-12 103
【代码】CSS-初识。
HTML-css初识.md
01-06
HTML-css初识.md
第2章---初识HTML5ppt课件(全).ppt
03-26
同时，HTML5废弃了一些以前的标签，如、等，这些标签的功能被CSS样式所取代。不再支持frame框架，但保留了iframe。还有一些标签因有更好的替代方案而被废弃。 HTML5还增加了新的属性，如contenteditable允许用户...
Web前端----初识Html-前端最基础入门教学
软件测试的坑，让我来踩吧
08-05 734
随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下Html的语法，用来对Html进行学习。一、Html是什么？HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。...
HTML 基础标签——元数据标签 ＜meta＞
Allen-
11-01 260
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
flex布局的练习题 ---都抖音解决方案(web)
m0_75035023的博客
10-31 348
flex布局的练习题 ---都抖音解决方案(web),html,
HTML && CSS
KKTT01的博客
10-31 1099
HTML:HyperText Markup Language，超文本标记语言。超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言HTML标签都是预定义好的。例如：使用 标签展示标题，使用展示超链接，使用展示图片，展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
Html编写发射粒子爱心
m0_58419490的博客
10-31 1093
【代码】Html编写发射粒子爱心。
HTML 基础标签——文本内容标签 ＜ul＞、＜ol＞、＜blockquote＞ 、＜code＞ 等标签的用法详解
最新发布
Allen-
11-01 456
在 HTML 文档中，文本内容标签用于定义和格式化文本信息。这些标签不仅使文本内容易于阅读和理解，还可以通过不同的格式和结构增强网页的可读性。本文将详细介绍常用的文本内容标签，包括标题标签、段落标签、文本格式化标签、列表标签、引用标签，以及代码和预格式文本标签。
HTML入门教程22：HTML文件路径
软考鸭
10-30 596
相对路径是相对于当前HTML文件所在位置的路径。它不会包含协议、域名或完整的文件路径，而是根据当前文件与目标文件之间的相对位置来确定路径。
jeecgbootvue2菜单路由配置静态文件夹(public)下的html
m0_65360496的博客
10-29 485
jeecgbootvue2菜单路由配置静态文件夹(public)下的html报错解决方法
初识CSS：HTML中不可或缺的样式表基础
CSS，即层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML（包括各种XML方言，如SVG或XHTML）文档样式的计算机语言。CSS描述了在屏幕、纸张、语音或其他媒体上元素的呈现方式。CSS是现代网页设计中不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值