re:从0开始的CSS学习之路 1. CSS语法规则

0. 写在前面

现在大模型卷的飞起,感觉做页面的活可能以后就不需要人来做了,不知道现在还有没有学前端的必要。。。
在这里插入图片描述

1. HTML和CSS结合的三种方式

在HTML中,我们强调HTML并不关心显示样式,样式是CSS的工作,现在就轮到CSS的学习了。

1. 行内样式表

将样式直接写到HTML标签的style属性中
缺点:不易于维护、不可复用,可移植性极差

<p style="color: red; font-size: 30px;">今天天气不错</p>
<p style="color: red; font-size: 30px;">挺风和日丽的</p>

可以发现如果想对每个标签都添加相同的样式,是一件非常麻烦的事情

2. 内部样式表

  1. 在HTML中的head标签中创建style标签

  2. 在style标签中利用选择器,为选中的标签添加样式

    语法格式:选择器 {属性1: 属性值1;属性2: 属性值2;……
    }
    
    <style>/*CSS注释注意:在style标签中属于CSS,而CSS和HTML的注释不同。在这里面是CSS范畴,在外面是HTML范畴,在标签中要遵守CSS的规范*/p {color: orange;font-size: 30px;}h1 {color: blue;font-size: 80px;}
    </style>
    

选择器:用于选择需要添加样式的标签
{}:称为声明块,需要为元素添加的样式,都写在声明块
样式:以键值对的形式呈现,样式名对应样式值。名和值之间以英文的 : 连接
以英文的 ; 结尾。键值对可以有多个,建议每行写一对。

缺点:仅对于当前文档使用,可移植性差

3. 外部样式表(推荐使用)

  1. 在外部创建一个.css结尾的文件,在该文件中编写css样式表
    语法格式:选择器 {属性1: 属性值1;属性2: 属性值2;……
    }
    
  2. 在需要引入样式的页面的head标签中,利用link标签引入外部样式表
    优点:
    1. 易于维护
    2. 可移植性强
    3. 提高复用性
    4. 可以利用浏览器缓存机制,加快网页加载速度,提高用户体验

外部样式表做到了 “高内聚、低耦合” ,这是很重要的编程思想

<link rel="stylesheet" href="./CSS/hello.css">

可以在hello.css中编写想要的样式,并通过link标签将其引入到当前HTML文档中

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

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

相关文章

6、基于机器学习的预测

应用机器学习的任何预测任务与这四个策略。 文章目录 1、简介1.1定义预测任务1.2准备预测数据1.3多步预测策略1.3.1多输出模型1.3.2直接策略1.3.3递归策略1.3.4DirRec 策略2、流感趋势示例2.1多输出模型2.2直接策略1、简介 在第二课和第三课中,我们将预测视为一个简单的回归问…

EMNLP 2023精选:Text-to-SQL任务的前沿进展(上篇)——正会论文解读

导语 本文记录了今年的自然语言处理国际顶级会议EMNLP 2023中接收的所有与Text-to-SQL相关&#xff08;通过搜索标题关键词查找得到&#xff0c;可能不全&#xff09;的论文&#xff0c;共计12篇&#xff0c;包含5篇正会论文和7篇Findings论文&#xff0c;以下是对这些论文的略…

Redis(三)主从架构、Redis哨兵架构、Redis集群方案对比、Redis高可用集群搭建、Redis高可用集群之水平扩展

转自 极客时间 Redis主从架构 redis主从架构搭建&#xff0c;配置从节点步骤&#xff1a; 1、复制一份redis.conf文件2、将相关配置修改为如下值&#xff1a; port 6380 pidfile /var/run/redis_6380.pid # 把pid进程号写入pidfile配置的文件 logfile "6380.log" …

FPGA解码MIPI视频:Xilinx Artix7-35T低端FPGA,基于MIPI CSI-2 RX Subsystem架构实现,提供工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 MIPI 编解码方案本方案在Xilinx Artix7-100T上解码MIPI视频的应用本方案在Xilinx Kintex7上解码MIPI视频的应用本方案在Xilinx Zynq7000上解码MIPI视频的应用本方案在Xilinx Zynq UltraScale上解码MIPI视频的应用纯VHDL代码解…

验证码倒计时:用户界面的小细节,大智慧

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 验证码倒计时&#xff1a;用户界面的小细节&#xff0c;大智慧 前言为什么需要验证码倒计时防止滥用&#xff1a;用户心理&#xff1a; 设计考量可见性&#xff1a;友好性&#xff1a;适应性&#xff…

打开/关闭请求回显功能的echo命令

echo命令可用来显示或隐藏DOS状态屏幕显示的内容。在*.bat文件第一行加上echo off&#xff0c;以后的屏幕输出命令&#xff08;包括其他命令产生的提示&#xff09;都会消失&#xff0c;比如在echo off的下一行使用dir&#xff0c;结果是光标原地闪烁&#xff0c;屏幕无显示。使…

安装PyInstaller的保姆级教程

一、安装PyInstaller之前首先要安装Python&#xff0c;小编这里安装的是Python3.9&#xff0c;目前&#xff08;2024/2/6&#xff09;匹配到的最高版本的PyInstaller的版本为6.3.0。需要安装Python的小伙伴可以去这里安装python详细步骤&#xff08;超详细&#xff0c;保姆级&a…

JavaScript运行机制

在web前端开发中&#xff0c;JavaScript无疑是一种非常重要的编程语言。它能够为网页添加动态交互功能&#xff0c;提升用户体验。然而&#xff0c;要充分发挥JavaScript的威力&#xff0c;我们需要对它的运行机制有一定的了解。 JavaScript是一种解释执行的脚本语言&#xff…

SpringCloud-搭建Nacos服务中心

Nacos 是一个开源的动态服务发现、配置管理和服务管理平台。它支持多种服务发现协议&#xff0c;包括基于 DNS 和 HTTP 的服务发现。Nacos 提供了强大的配置管理和服务发现功能&#xff0c;使得在微服务架构中轻松实现服务注册、发现和配置管理成为可能。在本篇博客中&#xff…

【Web】小白也能看懂的BeginCTF个人wp(全)

纯萌新&#xff0c;贴出自己的wp&#xff0c;一起交流学习QWQ 目录 zupload zupload-pro zupload-pro-plus zupload-pro-plus-max zupload-pro-plus-max-ultra zupload-pro-plus-max-ultra-premium zupload-pro-revenge zupload-pro-plus-enhanced POPgadget sql教…

09_树莓派_树莓派外设板_GPIO_按键的中断与消抖

目录 1.树莓派外设集成板总体介绍 2.第一部分 按键矩阵 GPIO_按键与中断 3.实现效果 1.树莓派外设集成板总体介绍 1&#xff09;前言&#xff1a;这是一块为了验证树莓派【兼容树莓派多个型号】的40pins的外设接口的外接板&#xff0c;告别复杂的面包板外设搭建。【欢迎各位…

R语言绘图教程 | 双侧条形图绘制教程

写在前面 双侧条形图在我们的文章中也是比较常见的,那么这样的图形是如何绘制的呢? 以及它使用的数据类型是什么呢? 这些都是我们在绘制图形前需要掌握的,至少我们知道绘图的数据集如何准备,这样才踏出第一步。 今天的教程,我们会从数据的准备,以及数据如何整理,以及…

OpenCV+ moviepy + tkinter 视频车道线智能识别项目源码

项目完整源代码&#xff0c;使用 OpenCV 的Hough 直线检测算法&#xff0c;提取出道路车道线并绘制出来。通过tkinter 提供GUI界面展示效果。 1、导入相关模块 import matplotlib.pyplot as plt import numpy as np import cv2 import os import matplotlib.image as mpimg …

Halcon 缺陷检测

文章目录 开闭运算&#xff0c;腐蚀膨胀的亮点问题灰度图像的开闭运算&#xff0c;腐蚀膨胀的亮点问题算子二值化算子 Halcon blob特征处理的方法检测缺陷Halcon Blob特征差分的方法检测缺陷Halcon 极坐标变换&#xff08;环形先转换坐标&#xff09;blob特征Halcon Blob局部二…

系统分析师-22年-下午答案

系统分析师-22年-下午答案 更多软考知识请访问 https://ruankao.blog.csdn.net/ 试题一必答&#xff0c;二、三、四、五题中任选其中两题作答 试题一 (25分) 说明 某软件公司拟开发一套博客系统&#xff0c;要求能够向用户提供一个便捷发布自已心得&#xff0c;及时有效的…

公有云服务器:功能与性能的完美融合

在数字化浪潮下&#xff0c;云服务器已经成为企业及个人用户存储数据、运行应用的重要基础设施。其中&#xff0c;公有云服务器凭借其诸多优势&#xff0c;更是受到了市场的广泛欢迎。上海悠远将为您详细介绍公有云服务器的功能特点&#xff0c;以及如何进行性能测试。 一、公有…

npm install express -g报错或一直卡着,亲测可解决

问题描述&#xff1a; 最近学习vue3前端框架&#xff0c;安装Node.js之后&#xff0c;在测试是否可行时&#xff0c;cmd窗口执行了&#xff1a;npm install express -g&#xff0c;发现如下图所示一直卡着不动&#xff0c;最后还报错了&#xff0c;网上找了好久&#xff0c;各…

爬虫实战--人民网

文章目录 前言发现宝藏 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#xff0c;方便日后回顾。当然&#xff0c;如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚&#xff0c;文章中如果有记录错误&#xff0c;欢迎读者朋友们…

【Redis】深入理解 Redis 常用数据类型源码及底层实现(3.详解String数据结构)

【Redis】深入理解 Redis 常用数据类型源码及底层实现&#xff08;1.结构与源码概述&#xff09;-CSDN博客 【Redis】深入理解 Redis 常用数据类型源码及底层实现(2.版本区别dictEntry & redisObject详解)-CSDN博客 紧接着前两篇的总体介绍&#xff0c;从这篇开始&#x…

LLM是一个向量程序库,提示是查询语言

2013 年&#xff0c;Mikolov 等人在 Google。 注意到一些值得注意的事情。 他们正在构建一个模型&#xff0c;将单词嵌入到向量空间中——这个问题从 20 世纪 80 年代开始就已经有很长的学术历史了。 他们的模型使用了一个优化目标&#xff0c;旨在将单词之间的相关关系转化为…