html与css学习笔记(2)

一、CSS****引入方式

具体有 3 种引入方式,语法如下表格所示:

引入方式 语法
内联样式 在HTML标签中使用style属性,例如:<div style="color: red;">这是一个红色的div</div>
内部样式表 在HTML文件的<head>标签内使用<style>标签,例如:<head><style type="text/css">div { color: red; }</style></head>
外部样式表 使用<link>标签在HTML文件的<head>标签内引入外部CSS文件,例如:<head><link rel="stylesheet" type="text/css" href="styles.css"></head>

对于上述 3 种引入方式,企业开发的使用情况如下:

  1. 内联样式会出现大量的代码冗余,不方便后期的维护,所以不常用。
  2. 内部样式,通过定义 css 选择器,让样式作用于当前页面的指定的标签上。
  3. 外部样式, html 和 css 实现了完全的分离,企业开发常用方式。

二、颜色表示

颜色的表示方式常见的有以下三种:

表示方式 说明 示例
颜色名称 直接使用预定义的颜色名称来表示颜色,如red(红色)、blue(蓝色)、green(绿色)等。这些名称不区分大小写。 <p style="color: red;">这是红色文本。</p>
十六进制值 以#开头,后面跟着6个十六进制数字,每两位表示一种颜色成分的强度,分别对应红、绿、蓝(RGB)。例如,#FF0000表示红色,其中FF表示红色成分的最大值。 <p style="color: #FF0000;">这是红色文本。</p>
RGB和RGBA值 RGB值使用rgb()函数表示,参数为红、绿、蓝三种成分的强度,范围为0到255。RGBA值在此基础上增加了一个表示不透明度的参数,范围为0到1。 <p style="color: rgb(255, 0, 0);">这是红色文本。</p> <p style="color: rgba(255, 0, 0, 0.5);">这是半透明红色文本。</p>

三、CSS****选择器

选择器类型 语法 作用 示例
元素(标签)选择器 标签名 选择所有指定标签元素 p { color: red; }
id选择器 # + id属性值 选择具有特定id的唯一元素 #myId { background-color: blue; }
类选择器 . + 类名 选择具有特定类名的所有元素 .myClass { font-size: 16px; }

优先级

id选择器#myId的优先级最高,类选择器.myClass的优先级次之,元素选择器p的优先级最低。

相关推荐
小狗爱吃黄桃罐头15 小时前
正点原子【第四期】Linux之驱动开发学习笔记-10.1 Linux 内核定时器实验
linux·驱动开发·学习
卡提西亚15 小时前
一本通网站1122题:计算鞍点
c++·笔记·编程题·一本通
im_AMBER15 小时前
Leetcode 47
数据结构·c++·笔记·学习·算法·leetcode
BreezeJuvenile15 小时前
外设模块学习(17)——5V继电器模块(STM32)
stm32·单片机·嵌入式硬件·学习·5v继电器模块
一个数据大开发16 小时前
【零基础一站式指南】Conda 学习环境准备与 Jupyter/PyCharm 完全配置
学习·jupyter·conda
希露菲叶特格雷拉特16 小时前
PyTorch深度学习笔记(二十)(模型验证测试)
人工智能·pytorch·笔记
lingggggaaaa18 小时前
小迪安全v2023学习笔记(一百四十五讲)—— Webshell篇&魔改冰蝎&打乱特征指纹&新增加密协议&过后门查杀&过流量识别
笔记·学习·安全·魔改冰蝎·免杀对抗·免杀技术
Digitally18 小时前
如何将iPhone上的笔记传输到电脑
笔记·电脑·iphone
落羽的落羽18 小时前
【C++】现代C++的新特性constexpr,及其在C++14、C++17、C++20中的进化
linux·c++·人工智能·学习·机器学习·c++20·c++40周年
小苏兮19 小时前
【把Linux“聊”明白】编译器gcc/g++与调试器gdb/cgdb:从编译原理到高效调试
java·linux·运维·学习·1024程序员节