html之css
迪丽瓦拉
2025-05-30 23:06:20
0

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

CSS 规则集(rule-set)由选择器和声明块组成.






我的第一个 CSS 实例

这是一个段落。

CSS 选择器分为五类:

  • 简单选择器(根据名称、id、类来选取元素)

  • 组合器选择器(根据它们之间的特定关系来选取元素)

  • 伪类选择器(根据特定状态选取元素)

  • 伪元素选择器(选取元素的一部分并设置其样式)

  • 属性选择器(根据属性或属性值来选取元素)

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!

要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。

#para1 {text-align: center;color: red;
}

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名

.center {text-align: center;color: red;
}

您还可以指定只有特定的 HTML 元素会受类的影响.只有具有 class="center" 的

元素会居中对齐

p.center {text-align: center;color: red;
}

CSS 通用选择器

通用选择器(*)选择页面上的所有的 HTML 元素。

* {text-align: center;color: blue;
}

CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。






Hello World!

更小的标题

这是一个段落。

三种插入样式表的方法:

  • 外部 CSS

每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。

外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。外部 .css 文件不应包含任何 HTML 标签






This is a heading

This is a paragraph.

href为外部样式表的路径,mystyle.css文件和.html在同一目录下

body {background-color: lightblue;
}h1 {color: navy;margin-left: 20px;
}
  • 内部 CSS

如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表。

内部样式是在 head 部分的

这是一个标题

这是一个段落。

  • 行内 CSS

行内样式(也称内联样式)可用于为单个元素应用唯一的样式。

如需使用行内样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性



这是标题

这是一个段落。

css注释

浏览器会忽略注释。

位于

CSS 链接

这是一个链接

注释:在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后才能生效。

注释:在 CSS 定义中,a:active 必须位于 a:hover 之后才能生效。

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
A.机器学习入门算法(三):基... 机器学习算法(三):K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库,支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...
IHome主页 - 让你的浏览... 随着互联网的发展,人们越来越离不开浏览器了。每天上班、学习、娱乐,浏览器...
TCP 协议 一、TCP 协议概念 TCP即传输控制协议(Transmission Control ...
营业执照的经营范围有哪些 营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目,是进行公司注册...
C++ 可变体(variant... 一、可变体(variant) 基础用法 Union的问题: 无法知道当前使用的类型是什...
血压计语音芯片,电子医疗设备声... 语音电子血压计是带有语音提示功能的电子血压计,测量前至测量结果全程语音播报࿰...
MySQL OCP888题解0... 文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
【2023-Pytorch-检... (肆十二想说的一些话)Yolo这个系列我们已经更新了大概一年的时间,现在基本的流程也走走通了,包含数...
实战项目:保险行业用户分类 这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
记录--我在前端干工地(thr... 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前段时间接触了Th...
43 openEuler搭建A... 文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...