CSS-概述

📚详见 W3scholl，本篇只做快速思维索引。

概述

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

有三种插入样式表的方法：

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

📅 外部 CSS
外部样式表存储在.css文件中。HTML 页面必须在 head 部分的<link>元素内包含对外部样式表文件的引用。通过使用外部样式表文件，您只需更改一个文件即可更改整个网站的外观！
HTML:

<!DOCTYPE html>
<html><head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>

mystyle.css:

body {background-color: lightblue;
}h1 {color: navy;margin-left: 20px;
}

📅 内部 CSS
内部样式是在 head 部分的<style>元素中进行定义。
HTML:

<!DOCTYPE html>
<html><head>
<style>
body {background-color: linen;
}h1 {color: maroon;margin-left: 40px;
} 
</style>
</head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>

📅 行内 CSS
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

<!DOCTYPE html>
<html><body>
<h1 style="color:blue; text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body></html>

⚠️注：如果在不同样式表中为同一选择器（元素）定义了一些属性，优先级为：行内样式 > 外部和内部样式表（取决于在 head 中声明的位置）

CSS 语法

CSS 规则集（rule-set）由选择器和声明块组成：
在这里插入图片描述

  • 选择器：指向您需要设置样式的 HTML 元素。
  • 声明块：每条声明都包含一个 CSS 属性名称和一个值，以冒号 : 分隔。多条 CSS 声明用分号 ; 分隔，声明块用花括号 {} 括起来。
p {color: red;text-align: center;
}
  • p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。
  • color 是属性名，red 是属性值。
  • text-align 是属性名，center 是属性值。

CSS 选择器

CSS 选择器分为五类：

  • 简单选择器（根据名称、id、类来选取元素）
  • 组合器选择器（根据它们之间的特定关系来选取元素）
  • 伪类选择器（根据特定状态选取元素）
  • 伪元素选择器（选取元素的一部分并设置其样式）
  • 属性选择器（根据属性或属性值来选取元素）

实例内容详见 📖 CSS 选择器

简单选择器

分为元素选择器、id 选择器、类选择器、通用选择器、分组选择器

CSS 元素选择器

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

页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色。

CSS id 选择器

元素的 id 在页面中是唯一的，因此 id 选择器用于选择唯一的元素。

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {text-align: center;color: red;
}
</style>
</head><body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body></html>

页面上的 id="para1" 的 <p> 元素将居中对齐，并带有红色文本颜色。

CSS 类选择器

📌 类选择器选择有特定 class 属性的 HTML 元素。. 后面跟类名。

<!DOCTYPE html>
<html>
<head>
<style>
.center {text-align: center;color: red;
}
</style>
</head><body>
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 
</body></html>

所有带有 class="center" 的 HTML 元素将为红色且居中对齐

📌 还可以指定只有特定的 HTML 元素会受类的影响。

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

只有具有 class="center" 的 <p> 元素会居中对齐

📌 HTML 元素也可以引用多个类。

<p class="center large">这个段落引用两个类。</p>

<p> 元素将根据 class="center" 和 class="large" 进行样式设置

CSS 通用选择器

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

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

上面的 CSS 规则会影响页面上的每个 HTML 元素

CSS 分组选择器

对选择器进行分组，以最大程度地缩减代码。如需对选择器进行分组，请用逗号来分隔每个选择器。

h1, h2, p {text-align: center;color: red;
}

组合选择器

组合器是解释选择器之间关系的某种机制。分为：

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

后代选择器

后代选择器匹配属于指定元素后代的所有元素。

div p {background-color: yellow;
}

选择 <div> 元素内的所有 <p> 元素

子选择器

子选择器匹配属于指定元素子元素的所有元素。

div > p {background-color: yellow;
}

选择属于 <div> 元素子元素的所有 <p> 元素

⚠️注：子选择器和后代选择器区别在于，子选择器匹配指定元素的子元素，而后代选择器匹配指定元素的所有元素（包括子、孙、重孙…）

<div><p>div 中的段落 1。</p><p>div 中的段落 2。</p><section><p>div 中的段落 3。</p></section>
</div>

如果是后代选择器，div 中的段落 3。会黄底，但子选择器不会黄底。

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，而且只作用其后一个元素。

div + p {background-color: yellow;
}

通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

div ~ p {background-color: yellow;
}

伪类选择器

伪类用于定义元素的特殊状态。用于设置鼠标悬停在元素上时的样式、设置元素获得焦点时的样式

/* 未访问的链接 */
a:link {color: #FF0000;
}/* 已访问的链接 */
:visited {color: #00FF00;
}/* 鼠标悬停链接 */
a:hover {color: #FF00FF;
}/* 已选择的链接 */
a:active {color: #0000FF;
}

设置链接 <a> 不同状态下的样式

div:hover {background-color: blue;
}

在 <div> 元素上使用 :hover 伪类的实例

伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

p::first-letter {color: #ff0000;font-size: xx-large;
}

::first-letter 伪元素用于向文本的首字母添加特殊样式。例子设置所有 <p> 元素中文本的首字母格式。

属性选择器

用于设置带有 特定属性 或 属性值 的 HTML 元素的样式。

a[target] {background-color: yellow;
}

选择所有带有 target 属性的 <a> 元素

a[target="_blank"] { background-color: yellow;
}

选取所有带有 target="_blank" 属性的 <a> 元素

input[type="text"] {width: 150px;display: block;margin-bottom: 10px;background-color: yellow;
}input[type="button"] {width: 120px;margin-left: 35px;display: block;
}

设置表单不同 type 元素的样式

CSS 背景

用于定义元素的背景效果。

  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-attachment

📅 background-color
background-color 属性指定元素的背景色。

h1 {background-color: lightblue;
}

📅 background-image
background-image 属性指定元素背景的图像。

p,h1 {background-image: url("paper.gif");
}

📅 background-position
background-position 属性用于指定背景图像的位置（top right bottom left）。

body {background-image: url("tree.png");background-position: right top;
}

把背景图片放在右上角

📅 background-repeat
默认情况下，background-image 属性在水平和垂直方向上都重复图像。但有些时候，看起来很怪，通过 background-repeat: repeat-x; 指定图像仅在水平方向重复。

  • repeat-x: 仅在水平方向重复
  • repeat-y: 仅在垂直重复图像
  • no-repeat: 只显示一次背景图像
body {background-image: url("gradient_bg.png");background-repeat: repeat-x;
}

📅 background-attachment
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

  • fixed: 固定
  • scroll: 滚动
body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;background-attachment: fixed;
}

📌 简写属性

body {background: #ffffff url("tree.png") no-repeat right top;
}

⚠️注： 在使用简写属性时，属性值的顺序为：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

background-color
background-image
background-position: top right bottom left
background: color image positionborder-style 四个边可以单独设置属性 top right bottom left
border-width 四个边可以单独设置宽度 top right bottom left
border-color 四个边可以单独设置宽度 top right bottom left
border-image
border-radius
简写：
border: width style color
border-leftmargin-[top right bottom letf]
marginpadding-[top right bottom letf]
paddingheight 不包括内边距、边框、外边距
width
max-width 最大宽度 改善浏览器对小窗口处理 不会出现水平滚动条
box-sizing: border-boxoutline-style
outline-width
outline-color
outline-offset
简写：
border: width style colorcolor
text-align
direction 显示方向
text-decoration 设置下划线
text-transform 转换大小写
text-indent 缩进 letter-spacing word-spacing white-space
line-height 行高
text-shadow 阴影font-family
font-style
font-weight
font-size<i> <span><a/> color font backgroundul li  list-style-typr
ol li

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

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

相关文章

基于JavaWeb实现的漫画网站前后台系统

基于JavaWeb实现的漫画网站前后台系统

一、项目简介 本项目是一套基于JavaWeb实现的漫画网站前后台系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#x…
阅读更多...
云服务器ECS租用价格表报价——阿里云

云服务器ECS租用价格表报价——阿里云

阿里云服务器租用价格表2024年最新&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核…
阅读更多...
SRS 实时视频服务器搭建及使用

SRS 实时视频服务器搭建及使用

一、SRS 介绍 SRS是一个开源的&#xff08;MIT协议&#xff09;简单高效的实时视频服务器&#xff0c;支持RTMP、WebRTC、HLS、HTTP-FLV、SRT、MPEG-DASH和GB28181等协议。 SRS媒体服务器和FFmpeg、OBS、VLC、 WebRTC等客户端配合使用&#xff0c;提供流的接收和分发的能力&am…
阅读更多...
DNS和HTTP

DNS和HTTP

DNS应用层协议 域名解析系统 使用IP地址&#xff0c;来描述设备在网络上的位置 IP地址并不适合来进行传播网站&#xff0c;就采用了域名的方式来解决网站传播的问题。如www.baidu.com这样类似的就很容易让人记住。其域名就直接代表了这个网站。而且有一套自动的系统会将域名解…
阅读更多...
YOLO火灾烟雾检测数据集：20000多张，yolo标注完整

YOLO火灾烟雾检测数据集：20000多张，yolo标注完整

YOLO火灾烟雾检测数据集&#xff1a;一共20859张图像&#xff0c;yolo标注完整&#xff0c;部分图像应用增强 适用于CV项目&#xff0c;毕设&#xff0c;科研&#xff0c;实验等 需要此数据集或其他任何数据集请私信
阅读更多...
C++11多线程库重点接口

C++11多线程库重点接口

目录 一.thread构造函数 二.移动构造&#xff0c;移动赋值 小结 三.获取线程id的方法 四.thread与lambda表达式联用 五.Mutexs的总览 六.互斥锁 七.Locks的总览 八. 条件变量总览 九.条件变量的wait和notify 十.典型例题 十一.原子类 十二.智能指针和单例模式的线…
阅读更多...
详解 Redis 在 Ubuntu 系统上的安装

详解 Redis 在 Ubuntu 系统上的安装

在 Ubuntu 20.04 安装 Redis 1. 先切换到 root 用户 在 Ubuntu 20.04 中&#xff0c;可以通过以下步骤切换到 root 用户&#xff1a; 输入以下命令&#xff0c;以 root 用户身份登录&#xff1a; sudo su -按回车键&#xff0c;并输入当前用户的密码&#xff08;即具有 sudo…
阅读更多...
【论文精读】Detecting Out-of-Distribution Examples with Gram Matrices 使用Gram矩阵检测分布外实例

【论文精读】Detecting Out-of-Distribution Examples with Gram Matrices 使用Gram矩阵检测分布外实例

文章目录 一、文章概览&#xff08;一&#xff09;Gram矩阵1、Gram&#xff08;格朗姆&#xff09;矩阵的定义2、Gram矩阵计算特征表示3、风格迁移中的Gram矩阵 &#xff08;二&#xff09;ood检测&#xff08;三&#xff09;核心思路&#xff1a;扩展 Gram 矩阵以进行分布外检…
阅读更多...
2024最新在线工具箱/ 站长IT工具箱/网站系统源码下载

2024最新在线工具箱/ 站长IT工具箱/网站系统源码下载

2024最新在线工具箱/ 站长IT工具箱/网站系统源码下载- 更多详情及下载地址请访问https://a5.org.cn/a5_ziyuan/39525.html 转载请注明出处!
阅读更多...
SketchUp Pro 2024 for mac 草图大师 专业的3D建模软件

SketchUp Pro 2024 for mac 草图大师 专业的3D建模软件

SketchUp Pro 2024 for Mac是一款功能强大的三维建模软件&#xff0c;适用于Mac电脑。其简洁易用的界面和强大的工具集使得用户可以轻松创建复杂的3D模型。 软件下载&#xff1a;SketchUp Pro 2024 for mac v24.0.483 激活版下载 SketchUp Pro 2024 for Mac支持导入和导出多种文…
阅读更多...
软件杯 深度学习乳腺癌分类

软件杯 深度学习乳腺癌分类

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…
阅读更多...
性能测试，python 内存分析工具

性能测试，python 内存分析工具

Memray是一个由彭博社开发的、开源内存剖析器&#xff1b;开源一个多月&#xff0c;已经收获了超8.4k的star&#xff0c;是名副其实的明星项目。今天我们就给大家来推荐这款python内存分析神器。 Memray可以跟踪python代码、本机扩展模块和python解释器本身中内存分配&#xf…
阅读更多...
Revit模型进入虚幻引擎UE5教程

Revit模型进入虚幻引擎UE5教程

一、背景 小伙伴们是否有Revit进入虚幻引擎交互的需求呢&#xff1f; 二、实现功能 1.Revit进入虚幻UE5,包含模型属性&#xff0c;材质等 2.实现BIM构件点选&#xff0c;高亮&#xff0c;属性展示 3.实现BIM模型分层显示&#xff0c;爆炸等效果 三、教程地址 教程&#x…
阅读更多...
51单片机入门_江协科技_21~22_OB记录的笔记

51单片机入门_江协科技_21~22_OB记录的笔记

21. LED点阵屏 21.1. LED点阵屏介绍 •LED点阵屏由若干个独立的LED组成&#xff0c;LED以矩阵的形式排列&#xff0c;以灯珠亮灭来显示文字、图片、视频等。LED点阵屏广泛应用于各种公共场合&#xff0c;如汽车报站器、广告屏以及公告牌等 •LED点阵屏分类 按颜色&#xff1a;单…
阅读更多...
Leetcode 64. 最小路径和

Leetcode 64. 最小路径和

心路历程&#xff1a; 第一反应像是一个回溯问题&#xff0c;但是看到题目中要求最值&#xff0c;大概率是一道DP问题。并且这里面的递推关系也很明显。 这里面边界条件可以有多种处理方法。 解法&#xff1a;动态规划 class Solution:def minPathSum(self, grid: List[List…
阅读更多...
六、企业级架构缓存篇之memcached

六、企业级架构缓存篇之memcached

一、memcached概述 1、网站架构优化流程&#xff1a; LNMP架构中网站应用访问流程&#xff1a; 浏览器 (app) → web 服务器 → 后端服务 (php) → 数据库 (mysql) 访问流程越多&#xff0c;访问速度越慢&#xff0c;出现问题的几率也越大。 网站访问流程优化思路&#xff1…
阅读更多...
【机器学习】如何通过群体智慧解决机器学习的挑战“

【机器学习】如何通过群体智慧解决机器学习的挑战“

机器学习的发展日新月异&#xff0c;但其成功实施的关键之一仍然是获取高质量的、标注良好的数据集。在这篇文章中&#xff0c;我们将探讨如何通过群体智慧来构建和改善机器学习的数据集&#xff0c;尤其是通过reCAPTCHA和带有目的的游戏&#xff08;Games with a Purpose, GWA…
阅读更多...
比nestjs更优雅的ts控制反转策略-依赖查找

比nestjs更优雅的ts控制反转策略-依赖查找

一、Cabloy5.0内测预告 Cabloy5.0采用TS对整个全栈框架进行了脱胎换骨般的大重构&#xff0c;并且提供了更加优雅的ts控制反转策略&#xff0c;让我们的业务开发更加快捷顺畅 1. 新旧技术栈对比&#xff1a; 后端前端旧版js、egg2.0、mysqljs、vue2、framework7新版ts、egg3…
阅读更多...
Web大并发集群部署之集群介绍

Web大并发集群部署之集群介绍

一、传统web访问模型 传统web访问模型完成一次请求的步骤 1&#xff09;用户发起请求 2&#xff09;服务器接受请求 3&#xff09;服务器处理请求&#xff08;压力最大&#xff09; 4&#xff09;服务器响应请求 传统模型缺点 单点故障&#xff1b; 单台服务器资源有限&…
阅读更多...
Prometheus+grafana环境搭建MongoDB(docker+二进制两种方式安装)(五)

Prometheus+grafana环境搭建MongoDB(docker+二进制两种方式安装)(五)

由于所有组件写一篇幅过长&#xff0c;所以每个组件分一篇方便查看&#xff0c;前四篇mongodb的exporter坑也挺多总结一下各种安装方式&#xff0c;方便后续考古。 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana环境搭建rabb…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023