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.hqwc.cn/news/455493.html

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

相关文章

编码世界探秘:原反补码与实数表示,含定点、浮点及BCD编码

数值的编码表示 整数编码表示 在计算机中&#xff0c;因为只有0和1这两种形式&#xff0c;但为了表示数的正&#xff08;&#xff09;&#xff0c;负&#xff08;-&#xff09;号&#xff0c;就要将数的符号以0和1编码。 通常把一个数的最高位定义为符号位&#xff0c;用0表…

Zephyr NRF7002 实现AppleJuice

BLE的基础知识 ble的信道和BR/EDR的信道是完全不一样的。但是范围是相同的&#xff0c;差不多也都是2.4Ghz的频道。可以简单理解为空中有40个信道0~39信道。两个设备在相同的信道里面可以进行相互通信。 而这些信道SIG又重新编号&#xff1a; 这个编号就是把37 38 39。 3个信道…

Python中的while循环,知其然知其所以然

文章目录 while循环结构1.用循环打印1 ~ 100步骤解析2. 1 ~ 100的累加和3.死循环1. 用死循环的方法实现 1 ~ 100累加和 4. 单向循环(1)打印 一行十个小星星*(2)通过打印一个变量的形式,展现一行十个小星星(3)一行十个换色的星星 ★☆★☆★☆★☆★☆(4)用一个循环,打印十行十列…

5、从 CSV 到 ChatGPT 的完整分析报告,只需 5 个简单步骤

从 CSV 到 ChatGPT 的完整分析报告,只需 5 个简单步骤 数据分析是一项耗时的活动。使用 ChatGPT,我们可以在短时间内进行数据汇总、数据预处理、数据可视化等。 无论您从事什么行业,在数据驱动时代,知道如何分析数据比以往任何时候都更加重要。数据分析将使企业能够保持竞…

【C语言 - 哈希表 - 力扣 - 相交链表】

相交链表题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0…

【VTKExamples::PolyData】第二十期 ImplicitModeller

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 前言 本文分享VTK样例ImplicitModeller技术,并解析接口vtkImplicitModeller,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 1. I…

JVM 性能调优 - JVM 参数基础(2)

查看 JDK 版本 $ java -version java version "1.8.0_151" Java(TM) SE Runtime Environment (build 1.8.0_151-b12) Java HotSpot(TM) 64-Bit Server VM (build 25.151-b12, mixed mode) 查看 Java 帮助文档 $ java -help 用法: java [-options] class [args...] …

Java基础(二十四):网络编程

Java基础系列文章 Java基础(一)&#xff1a;语言概述 Java基础(二)&#xff1a;原码、反码、补码及进制之间的运算 Java基础(三)&#xff1a;数据类型与进制 Java基础(四)&#xff1a;逻辑运算符和位运算符 Java基础(五)&#xff1a;流程控制语句 Java基础(六)&#xff1…

电脑服务器离线安装.net framework 3.5解决方案(错误:0x8024402c )(如何确定当前系统是否安装NET Framework 3.5)

问题环境&#xff1a; 日常服务的搭建或多或少都会有需要到NET Framework 3.5的微软程序运行框架&#xff0c;本次介绍几种不同的安装方式主要解决运行在Windows 2012 以上的操作系统的服务。 NET Framework 3.5 是什么&#xff1f; .NET Framework是微软公司推出的程序运行框架…

Web html和css

目录 1 前言2 HTML2.1 元素(Element)2.1.1 块级元素和内联(行级)元素2.1.2 空元素 2.2 html页面的文档结构2.3 常见标签使用2.3.1 注释2.3.2 标题2.3.3 段落2.3.4 列表2.3.5 超链接2.3.6 图片2.3.7 内联(行级)标签2.3.8 换行 2.4 属性2.4.1 布尔属性 2.5 实体引用2.6 空格2.7 D…

Android Studio导入项目 下载gradle很慢或连接超时

AS最常见的问题之一就是下载gradle非常慢&#xff0c;还经常出现下载失败的情况&#xff0c;没有gradle就无法build项目&#xff0c;所以一定要先解决gradle的下载问题&#xff0c;下面教大家两种常用方法 手动下载压缩包并替换 1、关闭Android Studio&#xff0c;复制下面的网…

TS项目实战二:网页计算器

使用ts实现网页计算器工具&#xff0c;实现计算器相关功能&#xff0c;使用tsify进行项目编译&#xff0c;引入Browserify实现web界面中直接使用模块加载服务。   源码下载&#xff1a;点击下载 讲解视频 TS实战项目四&#xff1a;计算器项目创建 TS实战项目五&#xff1a;B…