【前端】CSS基础（1）

文章目录

  • 前言
  • 一、CSS基础
    • 1、 CSS是什么
    • 2、 CSS基本语法规范
    • 3、 代码风格
      • 3.1 样式格式
      • 3.2 样式大小写
      • 3.3 空格规范
    • 4、 CSS引入方式
      • 4.1 内部样式表
      • 4.2 行内样式表
      • 4.3 外部样式

前言

  • 这篇博客仅仅是对CSS的基本结构进行了一些说明，关于CSS的更多讲解以及HTML、Javascript部分的讲解可以关注一下下面的专栏，会持续更新的。
    链接： Web前端学习专栏

  • 下面我对这个专栏的内容进行几点说明：

    1. 适合每一个前端0基础的小伙伴学习。
    2. 对常用标签以及常用属性进行了详细讲解。
    3. 最后有综合案例实现，手把手带大家实现每一个综合案例。
    4. 可以把专栏当作查询资料，前端的知识忘记了的话可以根据博客的目录找到相对应的内容进行复习。

  • 首先，提示一下大家，如果是在手机端看这篇博客的小伙伴，请移步电脑端学习哈！在电脑上会更好看一些！如果能够跟着在电脑上进行代码的实现就会更好了！
    在这里插入图片描述

  • 其次，欢迎大家来到前端的学习，因为我们可以很直观的看见代码的效果，所以我觉得前端的学习其实是很有意思的。这篇博客，将帮助您从零开始学习前端。

  • 在这个学习过程中，将遇到挑战和困难，但请相信，每一次的努力和坚持都将化为成长的动力。让我们携手共进，一起探索Web前端的无限可能！

一、CSS基础

1、 CSS是什么

层叠样式表：

  • CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。
  • 简单来说CSS就是控制页面的展示效果。而我们前面学的html是决定页面结构的。

2、 CSS基本语法规范

选择器+{1条/n条声明}

  1. 选择器决定针对谁修改（找谁）
  2. 声明修改的对象（干啥）
  3. 声明的属性是键值对。使用“ ；”区分键值对，使用“ ：”区分键和值。

简单代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:red;font-size: 40px;}</style>
</head><body><p>hello world</p>
</body>
</html>

代码说明：

  1. CSS的代码样式非常多，我们先介绍一种style，通常情况下，我们会将style放在head里。
    在这里插入图片描述
  2. 当我们想要控制页面上某一个元素的展示效果，我们就需要通过选择器这个中间商来向浏览器转达我们想要控制的元素是什么，浏览器才能实现对其进行控制。
    在这里插入图片描述
  3. 我们将想要对p标签里的内容控制的效果写在{}里，这里，我们控制了字体的颜色，并将其设置成了红色color:red;；控制了文字的大小，并将其设置为40px的大小font-size: 40px;。

浏览器显示如下：

在这里插入图片描述

  • 如果不使用CSS来对其进行设置的话，我们来看一下原生的效果，对比一下。

原生代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p>hello world</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述
我们可以对比看到，无论是字体的颜色还是大小都是不一样的。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:red;font-size: 40px;}</style>
</head><body><p>hello world</p><p>hello 张三</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

说明：

  1. 我们可以发现我们新添加的p标签中的内容的展示效果也是和我们上一个p标签中的内容的展示效果是一样的。
    在这里插入图片描述
  2. 这是因为我们的选择器选中的是p标签，所以所有的p标签中的内容它都会设置成我们在大括号（{}）设定的效果。
    在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:red;font-size: 40px;}</style>
</head><body><p>hello world</p><p>hello 张三</p><h1>你好啊！！！</h1>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

说明：
这里我们新添加了一个h1标签，h1标签中的内容的展示效果就和p标签中内容的展示效果不同了。
在这里插入图片描述

3、 代码风格

3.1 样式格式

  1. 紧凑风格
p { color: red; font-size: 30px;}
  1. 展开风格（推荐使用）
p {color: red;font-size: 30px;
}

3.2 样式大小写

虽然css不区分大小写，但是我们开发时统一使用小写字母。

3.3 空格规范

冒号（：）后面带空格。
选择器和 { 之间也有一个空格

4、 CSS引入方式

4.1 内部样式表

什么是内部样式表呢？

  • 将CSS通过style标签嵌套到HTML页面中。上面的代码展示就是通过的这种方式（在实际开发中不太常用）。
    在这里插入图片描述

内部样式表的优缺点：

优点：
能够将样式和页面结构分离。
缺点：
分离的不够彻底，尤其是在CSS内容多的时候。

4.2 行内样式表

行内样式表： 通过style属性来指定某个标签的样式。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><p style="color: blueviolet;">hello world</p><p>hello 张三</p><h1>你好啊！！！</h1>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

  • 这里的hello world的内容的展示效果就是通过行内样式表来控制的。
    在这里插入图片描述
  • 我们在p标签中通过style属性来控制了字体的颜色。

缺点： 不能写太复杂的样式。（这种写法优先级较高，会覆盖其他样式）

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:red;font-size: 40px;}</style>
</head><body><p style="color: blueviolet;">hello world</p><p>hello 张三</p><h1>你好啊！！！</h1>
</body>
</html>
  • 这个代码中我们我们对hello world的内容设置了两次展示效果，并且设置的展示效果不同，那么它会显示哪一种效果呢？
    在这里插入图片描述

浏览器显示如下：
在这里插入图片描述

所以，行内样式表的优先级比内部样式表的优先级高。

4.3 外部样式

这种写法是在实际开发中最常用的方式。

使用方法：

  1. 创建一个CSS文件（注意后缀是.css）。
    在这里插入图片描述
  2. 使用link标签引入css文件。
    <link rel="stylesheet" href="css文件路径">

css文件代码：

p {color: blueviolet;font-size: 40px;
}

html文件代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../csspage/demo01.css">
</head>
<body><p>hello css</p>
</body>
</html>

浏览器显示如下：
在这里插入图片描述

优点: 样式和结构彻底分离了.

  • 我们在css文件里只写对元素展示样式的效果控制，在html文件中只写页面的结构，这样就实现了完全分离。
    在这里插入图片描述

缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效.

关于缓存:

  • 这是计算机中一种常见的提升性能的技术手段.
  • 网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的. 如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了). 从而提高访问效率.
  • 可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件.

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

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

相关文章

iOS MRC那句话

iOS MRC那句话

混编时使用MRC文件需要使用这句话 -fno-objc-arc在下图中显示的位置添加
阅读更多...
reduce较常用的三种方法

reduce较常用的三种方法

1.reduce实现合并相同种类&#xff0c;数相加 let arrdataArr.reduce((acc,cur)>{ let found acc.find((item)>item.MCcur.MC){ if(found){ found.NUMScur.NUMS }else{ acc.push(cur) } return acc; } },[]) let arrdataArr.reduce((acc,cur)>{let found acc.find…
阅读更多...
Pytorch常用的函数(九)torch.gather()用法

Pytorch常用的函数(九)torch.gather()用法

Pytorch常用的函数(九)torch.gather()用法 torch.gather() 就是在指定维度上收集value。 torch.gather() 的必填也是最常用的参数有三个&#xff0c;下面引用官方解释&#xff1a; input (Tensor) – the source tensordim (int) – the axis along which to indexindex (Lo…
阅读更多...
JumpServer发布web应用

JumpServer发布web应用

项目背景&#xff1a; 由于防火墙密码安全没有达到审计要求&#xff0c;需要加固防火墙用户安全&#xff0c;通过JumpServer发布防火墙登录页面&#xff0c;提供远程访问 认证要求&#xff1a; 1、密码记忆多次 2、密码大小写 3、密码字符 4、密码数字 加固前密码策略&…
阅读更多...
详解BOM编程

详解BOM编程

华子目录 BOM编程window对象常见的window对象的属性常见的window对象的方法注意 history对象history对象的属性history对象的方法 screen 对象navigator 对象属性方法 location对象属性方法示例 BOM编程 JavaScript本质是在浏览器中运行&#xff0c;所以JavaScript提供了BOM&a…
阅读更多...
初学java

初学java

注意点 1.使用关键字long的时候&#xff0c;在其赋值的时候要在后面加上大写或者小写的l&#xff0c;个人推荐大写&#xff0c;小写与数‘1’难区分。 2.函数的名字要与文件夹的名字相同&#xff0c;并且文件夹后面一定要有.java。例如这个的名字是Main,函数就得用这个&#x…
阅读更多...
GPIO基础知识学习

GPIO基础知识学习

前言&#xff1a; 本文记录了我自己学习最基本的单片机电路知识的学习笔记。本文参考了引用链接中的大量内容&#xff0c;并加上了自己的很少的一点思考&#xff08;因为我本人的电路知识基本没有&#xff09;。 引用&#xff1a; 上拉电阻与下拉电阻总结 与 GPIO框图分析_上…
阅读更多...
docker学习笔记（四）制作镜像

docker学习笔记（四）制作镜像

目录 第1步&#xff1a;编辑Dockerfile 第2步&#xff1a;编辑requirements.txt文件 第3步&#xff1a;编辑app.py文件&#xff0c;我们的程序文件 第4步&#xff1a;生成镜像文件 第5步&#xff1a;使用镜像&#xff0c;启动容器 第6步&#xff1a; 启动redis容器、将容器…
阅读更多...
短信群发平台：全功能SDK短信接口解决方案

短信群发平台：全功能SDK短信接口解决方案

SDK短信接口介绍&#xff1a; 为了满足不同企业的需求&#xff0c;我们提供了一站式SDK短信接口解决方案。这些接口不仅功能强大&#xff0c;而且易于集成到现有的企业系统中&#xff0c;以提供更加安全、高效和便捷的服务。 1.短信验证码接口&#xff1a;用于用户注册、密码修…
阅读更多...
动态代理，案例理解

动态代理，案例理解

动态代理&#xff1a;代理就是被代理者没有能力或者不愿意去完成某件事情&#xff0c;需要找个人代替自己去完成这件事&#xff0c;动态代理就是用来对业务功能&#xff08;方法&#xff09;进行代理的。 步骤&#xff1a; 1.必须有接口&#xff0c;实现类要实现接口&#xf…
阅读更多...
Windows下，基于Gradle用Docker发布自己的程序

Windows下，基于Gradle用Docker发布自己的程序

方案1&#xff1a; windows下打包程序&#xff0c;然后&#xff0c;上传到linux下&#xff0c;生成docker镜像&#xff0c;然后执行。 首先&#xff1a; 由于是采用Gradle管理的项目&#xff0c;打包的时候需要执行build任务。执行完成后&#xff0c;再build\libs目录下应该…
阅读更多...
Python——Fastapi管理平台（打包+优化）

Python——Fastapi管理平台（打包+优化）

目录 一、配置多个表 1、后端项目改造 2、导包报错——需要修改&#xff08;2个地方&#xff09; 3、启动后端&#xff08;查看是否有问题&#xff09; 4、配置前端 二、打包——成exe文件&#xff08;不包含static文件&#xff09;简单 1、后端修改 2、前端修改 3、运行打包命…
阅读更多...
解决Rust Cargo报错

解决Rust Cargo报错

1.查看操作系统信息 [root@localhost ~]# cat /etc/.kyinfo [dist] name=Kylin milestone=Server-V10-GFB-Release-ZF9_01-2204-Build03 arch=arm64 beta=False time=2023-01-09 11:04:36 dist_id=Kylin-Server-V10-GFB-Release-ZF9_01-2204-Build03-arm64-2023-01-09 11:04:…
阅读更多...
Hive SQL-DML-Load加载数据

Hive SQL-DML-Load加载数据

Hive SQL-DML-Load加载数据 在 Hive 中&#xff0c;可以使用 SQL DML&#xff08;Data Manipulation Language&#xff09;语句中的 LOAD 命令来加载数据到表中。LOAD 命令用于将本地文件系统或 HDFS&#xff08;Hadoop 分布式文件系统&#xff09;中的数据加载到 Hive 表中。 …
阅读更多...
互联网摸鱼日报(2024-05-09)

互联网摸鱼日报(2024-05-09)

互联网摸鱼日报(2024-05-09) 36氪新闻 编剧和观众吵翻了天&#xff0c;到底谁不懂女性 OpenAI的搜索引擎真要来了&#xff1a;开启灰度测试&#xff0c;微软Bing加持 沾过光、踩过坑的小米生态链企业&#xff0c;给品牌指了什么出路&#xff1f; 中国县城里的热辣滚烫 前销…
阅读更多...
java识别word段落和Java识别pdf端口整理

java识别word段落和Java识别pdf端口整理

首先理解word与xml的关系 word文档与xml关系_docx xml-CSDN博客 Word和XML之间有密切的关系&#xff0c;因为Word文档实际上是XML文件的一种。从Word 2003开始&#xff0c;Microsoft Word文档的默认格式是XML&#xff0c;即.docx。XML是一种可扩展的标记语言&#xff0c;它允…
阅读更多...
edge 的使用心得与深度搜索

edge 的使用心得与深度搜索

关于 **Edge 浏览器** 的使用心得&#xff0c;用户普遍提到了以下几个方面&#xff1a; 1. **性能和效率**&#xff1a;Edge 浏览器在微软重新构建它基于 Chromium 内核后&#xff0c;性能得到了显著的提升。用户通常会注意到它在启动速度、页面加载速度和资源管理方面相对更优…
阅读更多...
【ITK配准】第九期 基匹配Metric的配准样例

【ITK配准】第九期 基匹配Metric的配准样例

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ：870202403 公众号：VTK忠粉 前言 本文分享ITK配准中的基匹配Metric的配准样例，希望对各位小伙伴有所帮助！ 感谢各位小伙伴的点赞+关注，小易会继续努力分享，一起进步！ 你的点赞就是我的动力(＾Ｕ＾)ノ~ＹＯ 基匹配Me…
阅读更多...
idea已配置的git仓库地址 更换新的Git仓库地址 教程

idea已配置的git仓库地址 更换新的Git仓库地址 教程

文章目录 目录 文章目录 更改流程 小结 概要更改流程技术细节小结 概要 先在idea控制台走一下流程 先将本地的git仓库删除 1. 查看当前远程仓库地址&#xff1a; 在终端或命令行中&#xff0c;导航到你的项目目录&#xff0c;并运行以下命令查看当前的远程仓库地址&#xff…
阅读更多...
JMeter断言介绍

JMeter断言介绍

JMeter是一个功能强大的性能测试工具&#xff0c;它不仅可以模拟用户的行为&#xff0c;还可以对web应用程序的响应进行检测。其中断言就是JMeter中非常实用的功能之一。 断言是用于验证服务器响应是否正确的测试元素。它会检查服务器响应中的部分或全部内容&#xff0c;并在响…
阅读更多...
最新文章

Copyright @ 2022~2023