CSS 入门指南（一）CSS 概述

CSS 概述

CSS 介绍

CSS（Cascading Style Sheets）通常称为 CSS 样式或层叠样式表，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）以及版面的布局等外观显示样式的计算机语言，CSS 文件扩展名为 .css。

  • 样式：给 HTML 标签添加需要显示的效果。
  • 层叠：使用不同的添加方式，给同一个 HTML 标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。

CSS 可以使 HTML 页面更好看，CSS 色系的搭配可以让用户更舒服，CSS + DIV 布局更佳灵活，更容易绘制出用户需要的结构。


CSS 样式规则

  • CSS 样式规则需要写在一个 **style（样式）**标签中

  • CSS 样式规则由两个主要的部分构成：选择器，以及一条或多条声明

    • 选择器通常是需要改变样式的 HTML 元素

      选择要添加 CSS 样式的 html 标签的方式：根据标签的名称，标签的 id 属性值，标签的 class 属性值等方式

    • 每条声明由一个属性和一个值组成

      属性（property）是希望给标签设置的样式属性（style attribute），例如大小，颜色等。

      每个属性有一个值。属性和值被冒号分开。

  • 格式：

    <style type="text/css">选择器{属性名:属性值;...属性名:属性值;}
</style>

    CSS 声明总是以分号 ; 结束，声明总以大括号 {} 括起来

  • CSS 注释

    注释是用来解释代码，并且可以随意编辑它，浏览器会忽略它。

    CSS注释以 /* 开始, 以 */ 结束，实例如下：

    /*这是个注释*/

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS样式规则</title><style type="text/css">/*使用标签选择器:根据标签名称选择到对应的标签*/h1{/*给h1标签添加一个字体颜色*/color: red;}h2,div{/*字体颜色*/color: blue;/*字体大小*/font-size: 50px;}</style>
</head>
<body><h1>我是一个h1标题标签</h1><h1>我是一个h1标题标签</h1><h1>我是一个h1标题标签</h1><h2>我是一个h2标题标签</h2><div>我是div标签</div>
</body>
</html>

引入 css 样式的方式

  • 方式1：行内样式：在标签上直接写 style 属性，属性值就是要设置的样式

    格式：

    <标签 style="属性名:属性值;属性名:属性值;属性名:属性值;..属性名:属性值;"></标签>

    作用域：只针对当前的标签有效

  • 方式2：内部（内嵌）样式：在页面中创建一个 style 标签，在标签中写 css 的样式规则

    格式：

    <style type="text/css">选择器{属性名:属性值;...属性名:属性值;}
</style>

    作用域：在当前页面中，针对选择器选择到的所有标签都有效

  • 方式3：外部（外联）样式：把 css 的样式规则，写在一个以 .css 结尾的文件中

    需要在 html 中使用 link 标签引入外部的 css 文件使用

    格式：

    <link href="外部css文件的路径" type="text/css" rel="stylesheet" />
    • href=“外部css文件的路径” ：css 文件一般都放在当前项目的 css 文件夹中，所以一般使用相对路径
    • type=“text/css” ：说明引入的文件是文本类型的 css 文件（固定写法），可省略
    • rel=“stylesheet” ：stylesheet：样式表，说明引入的 css 文件，是 html 文件的一个样式表（固定写法）

    作用域：css 文件可以被多个页面同时引用，哪个页面引用的，对哪个页面中的标签有效

  • 样式的优先级：行内样式 > 内部样式|外部样式（内部和外部写在后边的样式会覆盖前边的样式）

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引入css样式的方式</title>
</head>
<!--内部(内嵌)样式-->
<style>/*选择所有的h1标签*/h1{color: pink;}
</style>
<!--外部(外联)样式-->
<link href="css/1.css"  rel="stylesheet"/>
<body><!--1.行内样式--><div style="color: red;font-size: 20px">我是一个div</div><div style="color: green">我是一个div</div><div style="color:yellow;">我是一个div</div><!--2.内部(内嵌)样式--><h1 style="color: gold">我是h1标题标签</h1><h1>我是h1标题标签</h1>
</body>
</html>

    1.css文件

    h1{color: blue;font-size: 50px;
}

CSS 的选择器

使用何种方式选择要添加样式的 html 标签

基本选择器（元素、id、class 选择器）

  • 元素（标签，标记）选择器：根据元素（标签，标记）的名称，选择对应的元素

    格式：元素（标签，标记）的名称{属性名:属性值;...}

    示例：

    <h1></h1>   	选择器: h1{属性名:属性值;...}
<div></div>   	选择器: div{属性名:属性值;...}

  • id 选择器

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

    需要给元素添加一个 id 属性，通过 id 的属性值选择到元素

    格式：#元素id的属性值{属性名:属性值;...}

    示例：

    <h1 id="d001"></h1>
<div id="d002"></div>选择器：#d001{属性名:属性值;...}

    注：

    • html 标签的 id 属性不要以数字开头，数字开头的 id 在 Mozilla/Firefox 浏览器中不起作用

    • 不可以给多个 html 元素添加相同的 id 属性值，id 在页面中具有唯一性

      如果多个元素的 id 属性值是相同的，JavaScript 可能会出错

  • class（类）选择器

    class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用

    需要给元素添加一个 class 属性，通过 class 的属性值选择到元素

    格式：.元素的class属性值{属性名:属性值;...}

    示例：

    <h1 class="c001"></h1>
<div class="c001"></div>选择器: .c001{属性名:属性值;...}

    注：

    • **类名的第一个字符不能使用数字！**它无法在 Mozilla 或 Firefox 中起作用。

    • 多个 class 选择器可以使用空格分开

    • 可以指定特定的 HTML 元素使用 class

      例如：所有的 p 元素使用 class=“center” 让该元素的文本居中

      p.center {text-align:center;}

  • 案例

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title>
</head><style>/*1.元素(标签,标记)选择器*/h1{color: red;}a{color: green;}/*2.id选择器*/#d001{color: #880088;}/*2.class(类)选择器*/.c001{color: chocolate;}</style>
<body><!--元素(标签,标记)选择器--><h1>标题标签</h1><h1>标题标签</h1><a href="#">我是一个超链接标签</a><a href="#">我是一个超链接标签</a><!--id选择器--><div id="d001">我是一个div</div><h2 id="d002">我是一个h2标题标签</h2><!--class(类)选择器--><div class="c001">我是一个div</div><h2 class="c001">我是一个h2标题标签</h2>
</body>
</html>

扩展选择器（属性、包含、伪类选择器）

  • 属性选择器：在一个标签选择器后面使用中括号标记，是对一组标签进一步过滤

    语法格式：标签选择器[标签属性=’标签属性值’]{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  • 包含选择器：两个标签之间使用空格，给指定父标签的后代标签设置样式，是对一个标签内部所有后代标签进一步过滤

    格式：父标签选择器 后代标签选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  • 案例：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的扩展选择器</title><style>/*input{!*背景色*!background-color: green;}*//*给type="text"标签添加样式*/input[type='text']{background-color: green;}/*给type="password"标签添加样式*/input[type='password']{background-color: pink;}/*2.包含选择器(子父类选择器)*//*给div中的div添加样式*/div div{color: yellow;}#d001 h3{color: aqua;}</style>
</head>
<body><!--1.属性选择器--><input type="text" name="username"/><input type="password" name="password"/><!--2.包含选择器(子父类选择器)--><div>我是div</div><div id="d001"><div>我是div中的div</div><h3>我是div中的h3</h3></div>
</body>
</html>

伪类选择器

  • 伪类选择器：描述一个元素的特殊状态

    由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

  • 常用的伪类选择器：

    • 动态伪类选择器

      • :link ：元素被定义了超链接但并未被访问过
      • :visited ：元素被定义了超链接并已被访问过
      • :active ：元素被激活
      • :hover ：鼠标悬停
      • :focus ：元素获取焦点

      注：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后；a:active 必须被置于 a:hover 之后。所以，a 标签的这四种伪类选择器的顺序为：a:link ，a:visited，a:hover ，a:active。必须严格按照此规则来设置属性，否则无效。

    • UI 元素状态伪类选择器

      • :checked ：选中的复选按钮或者单选按钮表单元素
      • :enabled ：所有启用的表单元素
      • :disabled ：所有禁用的表单元素

      注：UI 元素状态伪类选择器主要是针对 Form 表单元素进行操作，最常见的使用方式如设置 "type=“text” 有 enable 和 disabled 两种状态，enable 为可写状态，disabled 为不可状态。

    • 结构伪类选择器

      • :fisrt-child ：父元素的第一个子元素
      • :last-child ：父元素的最后一个子元素的元素
      • :root ：元素所在文档的根元素。在 HTML 文档中，根元素始终是 html，此时该选择器与 html 类型选择器匹配的内容相同
      • :nth-child(n) ：父元素的第 n 个子元素。其中 n 可以是整数（1，2，3）、关键字（even，odd）、也可以是公式（2n+1）,而且 n 值起始值为 1，而不是 0。
      • :nth-last-child(n) ：父元素的倒数第 n 个子元素。此选择器与 :nth-child(n) 选择器计算顺序刚好相反，但使用方法都是一样的，其中 :nth-last-child(1) 始终匹配最后一个元素，与 last-child 等同。
      • :nth-of-type(n) ：父元素内具有指定类型的第 n 个元素
      • :nth-last-of-type(n) ：父元素内具有指定类型的倒数第 n 个元素
      • :first-of-type ：父元素内具有指定类型的第一个元素，与 nth-of-type(1) 等同
      • :last-of-tye ：父元素内具有指定类型的最后一个元素，与 :nth-last-of-type(1) 等同
      • :only-child ：父元素只包含一个子元素，且该子元素匹配元素
      • :only-of-type ：选择父元素只包含一个同类型子元素，且该子元素匹配选择元素
      • :empty ：选择没有子元素的元素，而且该元素也不包含任何文本节点

      注：使用结构伪类选择器的好处是可以根据元素在文档中所处的位置，来动态地选择元素，从而减少 HTML 文档对 id 或类的依赖，有助于保持代码干净整洁。另外需要注意的是，在结构伪类选择器中，子元素的序号是从 1 开始的。

    • 否定伪类选择器

      • E:not(F) ：选择所有除元素 F 外的 E 元素

    • 案例：

      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的扩展选择器</title><style>/*伪类选择器*/  a:link {color: #FF0000}	/* 未访问的链接 */a:visited {color: #00FF00}	/* 已访问的链接 */a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */a:active {color: #0000FF}	/* 选定的链接 */</style>
</head>
<body><a href="http://www.itcast.cn" target="_blank">点击我到传智</a>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/718574.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

《MySQL数据库》day1

《MySQL数据库》day1

文章目录 1.名词解释2.如何启动mysql数据库3.mysql常用命令4.数据库当中最基本的单元是表&#xff1a;table5.关于SQL语句的分类6.简单查询7.条件查询8.排序9.数据处理函数单行处理函数常见的有哪些&#xff1f; 10.分组函数&#xff08;多行处理函数&#xff09; 1.名词解释 …
阅读更多...
VUE2与VUE3之间的主要区别

VUE2与VUE3之间的主要区别

当谈到 Vue.js 的版本时&#xff0c;Vue 2 和 Vue 3 是最常被提及的两个版本。下面是 Vue 2 和 Vue 3 之间的一些主要区别&#xff1a; 1. 性能提升&#xff1a; Vue 3 在底层核心重写了响应式系统&#xff0c;采用了 Proxy 对象&#xff0c;大幅提高了性能。Vue 3 还引入了静…
阅读更多...
彻底解决华为手机安装谷歌框架后出现未认证的弹窗问题

彻底解决华为手机安装谷歌框架后出现未认证的弹窗问题

引言 本人使用华为手机通过B站等平台学习如何安装谷歌框架与商店后&#xff0c;发现安装谷歌框架后出现未认证的弹窗问题少有解决办法&#xff0c;而且容易复发&#xff0c;在借鉴相关视频后找到解决办法&#xff0c;但视频中的华谷框架需要付费才能使用&#xff0c;本文将提出…
阅读更多...
spring注解驱动系列--自动装配

spring注解驱动系列--自动装配

Spring利用依赖注入&#xff08;DI&#xff09;&#xff0c;完成对IOC容器中中各个组件的依赖关系赋值&#xff1b;依赖注入是spring ioc的具体体现&#xff0c;主要是通过各种注解进行属性的自动注入。 一、Autowired&#xff1a;自动注入 一、注解介绍 1、默认优先按照类型去…
阅读更多...
高中数学：函数奇偶性

高中数学：函数奇偶性

一、定义 偶函数&#xff1a;定义域关于原点对称&#xff0c;图像关于Y轴对称 f(x)f(-x) 奇函数&#xff1a;定义域关于原点对称&#xff0c;图像关于原点中心对称 f(x)f(-x)0 等价于 f(-x)-f(x) 二、函数奇偶性的四种情况 注意&#xff1a; 即奇又偶的函数&#xff0c;只有…
阅读更多...
Linux入门到入土

Linux入门到入土

Linxu Linux 简介 Linux 内核最初只是由芬兰人林纳斯托瓦兹&#xff08;Linus Torvalds&#xff09;在赫尔辛基大学上学时出于个人爱好而编写的。 Linux 是一套免费使用和自由传播的类 Unix 操作系统&#xff0c;是一个基于 POSIX&#xff08;可移植操作系统接口&#xff09…
阅读更多...
【复现】宏景HCM 任意文件读取漏洞_63

【复现】宏景HCM 任意文件读取漏洞_63

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 宏景HCM 将人才标签技术应用于员工招聘、人才选拔等环节&#xff0c;通过多维度的标签体系&#xff0c;形成不同专业序列的人才画…
阅读更多...
CV | 医学影像上的图像分割模型调研【更新于20240304】

CV | 医学影像上的图像分割模型调研【更新于20240304】

mamba相关的图像分割&#xff1a;VM-Unet,Manba-Unet,BRAU-Net,MDD-Unet,EGE-Unet,U-Mamba 2024.01.01_BRAU-Net Paper:BRAU-Net: U-Shaped Hybrid CNN-Transformer Network for Medical Image Segmentation https://arxiv.org/pdf/2401.00722.pdf 2024.01.09_U-Mamba Paper:U…
阅读更多...
猴子吃桃问题（python版）

猴子吃桃问题（python版）

文章预览&#xff1a; 题目python解法一&#xff1a;运行结果 python解法二&#xff1a;运行结果 python解法三&#xff1a;运行结果 题目 猴子吃桃问题&#xff1a;猴子第一天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不过瘾&#xff0c;又多吃了一个。 第二天早…
阅读更多...
python 脚本设置输出颜色

python 脚本设置输出颜色

在Python脚本中设置输出颜色&#xff0c;通常可以使用colorama库&#xff0c;它可以在Windows、Linux和macOS等平台上工作。colorama库扩展了Python的标准库&#xff0c;使得在控制台输出彩色文本更加简单。 首先&#xff0c;你需要安装colorama库。如果你还没有安装&#xff…
阅读更多...
数据仓库 vs. 数据湖：解析两者的区别与优劣

数据仓库 vs. 数据湖：解析两者的区别与优劣

在当今数字化时代&#xff0c;数据成为了企业最宝贵的资产之一。为了更好地管理和利用数据&#xff0c;企业需要建立合适的数据存储和管理系统。在这个过程中&#xff0c;数据仓库和数据湖成为了两种常见的选择。虽然它们都旨在帮助企业管理数据&#xff0c;但在实际应用中&…
阅读更多...
flurl升级之后没有FlurlNewtonsoftJsonSerializer

flurl升级之后没有FlurlNewtonsoftJsonSerializer

新建NewtonsoftJsonSerializer.cs /// <summary> /// ISerializer implementation based on Newtonsoft.Json. /// Default serializer used in calls to GetJsonAsync, PostJsonAsync, etc. /// </summary> public class NewtonsoftJsonSerializer : IJsonSerial…
阅读更多...
Qt 简约美观的加载动画 第九季

Qt 简约美观的加载动画 第九季

这次和大家分享6个非常清爽的加载动画. &#x1f60a; 效果如下 &#x1f60a; 一共三个文件 , 可以直接编译运行的呢 //main.cpp #include "LoadingAnimWidget.h" #include <QApplication> #include <QGridLayout> int main(int argc, char *argv[]) …
阅读更多...
原理篇-- 定时任务xxl-job-服务端(admin)项目启动过程--JobTriggerPoolHelper 初始化 (3)

原理篇-- 定时任务xxl-job-服务端(admin)项目启动过程--JobTriggerPoolHelper 初始化 (3)

文章目录 前言一、JobTriggerPoolHelper 作用&#xff1a;二、JobTriggerPoolHelper 源码介绍&#xff1a;2.1. start() 方法&#xff1a;2.2 任务触发&#xff1a;2.3 XxlJobTrigger.trigger 任务执行&#xff1a;2.4 processTrigger 任务的执行&#xff1a;2.5 runExecutor 任…
阅读更多...
【JAVA重要知识 | 第三篇】深入理解并暴打AQS原理、ReentrantLock锁

【JAVA重要知识 | 第三篇】深入理解并暴打AQS原理、ReentrantLock锁

文章目录 3.深入理解AQS、ReentrantLock3.1AQS3.1.1AQS简介3.1.2核心结构&#xff08;1&#xff09;设计模型&#xff08;2&#xff09;组成部分&#xff08;3&#xff09;State关键字 3.1.3实现的两类队列&#xff08;1&#xff09;同步队列①CLH②Node③主要行为 img条件队列…
阅读更多...
中霖教育：注册安全工程师考是科目有哪些?

中霖教育：注册安全工程师考是科目有哪些?

注册安全工程师的类型是职业资格证书&#xff0c;需要满足报名条件才能参加考试&#xff0c;考试通过就能发放证书。报名时间一般在八月份&#xff0c;考试时间在十月底左右。 考试科目&#xff1a; 《安全生产法律法规》 《安全生产管理》 《安全生产技术基础》 《安全生…
阅读更多...
golang实现openssl自签名双向认证

golang实现openssl自签名双向认证

第一步&#xff1a;生成CA、服务端、客户端证书 1. 生成CA根证书 生成CA证书私钥 openssl genrsa -out ca.key 4096创建ca.conf 文件 [ req ] default_bits 4096 distinguished_name req_distinguished_name[ req_distinguished_name ] countryName …
阅读更多...
Node.js基础---Express路由

Node.js基础---Express路由

1. 路由的概念 1. 什么是路由 广义上来讲&#xff0c;路由就是映射关系 2. Express 中的路由 在 Express 中&#xff0c;路由指的是客户端的请求与服务器处理函数之间的映射关系 Express 中的路由分三部分&#xff1a;请求的类型、请求的URL地址&#xff0c;处理函数。如下&am…
阅读更多...
怎么使用curl2py自动构造爬虫代码并进行网络爬虫

怎么使用curl2py自动构造爬虫代码并进行网络爬虫

目录 一、了解curl2py 二、安装curl2py 三、使用curl2py生成爬虫代码 四、实际案例&#xff1a;爬取网页数据 五、总结与建议 在当今数据驱动的时代&#xff0c;网络爬虫成为了获取数据的重要工具。对于初学者来说&#xff0c;手动编写爬虫代码可能是一项挑战。幸运的是&a…
阅读更多...
PyTorch-神经网络

PyTorch-神经网络

神经网络&#xff0c;这也是深度学习的基石&#xff0c;所谓的深度学习&#xff0c;也可以理解为很深层的神经网络。说起这里&#xff0c;有一个小段子&#xff0c;神经网络曾经被打入了冷宫&#xff0c;因为SVM派的崛起&#xff0c;SVM不了解的同学可以去google一下&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023