当前位置： 首页 > news >正文

聊聊CSS

news 2025/8/30 23:33:51

css 的介绍

学习目标

  • 能够知道css的作用

1. css 的定义

css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

没有使用css的效果图

使用css的效果图

2. css 的作用

  1. 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。

  2. 控制页面布局, 比如: 设置浮动、定位等样式。

3. css 的基本语法

选择器{

样式规则

}

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

...

选择器:是用来选择标签的，选出来以后给标签加样式。

代码示例:

div{ width:100px; height:100px; background:gold; 
}

说明

css 是由两个主要的部分构成：选择器和一条或多条样式规则，注意:样式规则需要放到大括号里面。

4. 小结

  • css 是层叠样式表，它是用来美化网页和控制页面布局的。

  • 定义 css 的语法格式是: 选择器{样式规则}

css 的引入方式

学习目标

  • 能够知道 css 的引入三种方式

css的三种引入方式

  1. 行内式

  2. 内嵌式（内部样式）

  3. 外链式

1. 行内式

直接在标签的 style 属性中添加 css 样式

示例代码:

<div style="width:100px; height:100px; background:red ">hello</div>

优点：方便、直观。 缺点：缺乏可重用性。

2. 内嵌式（内部样式）

在<head>标签内加入<style>标签，在<style>标签中编写css代码。

示例代码:

<head><style type="text/css">h3{color:red;}</style>
</head>

优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不够高。

3. 外链式

将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中。

示例代码:

<link rel="stylesheet" type="text/css" href="css/main.css">

优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。 缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。

4. css引入方式选择

  1. 行内式几乎不用

  2. 内嵌式在学习css样式的阶段使用

  3. 外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。

5. 小结

  • css 的引入有三种方式, 分别是行内式、内嵌式、外链式。

  • 外链式是在公司开发的时候会使用，最能体现 div+css 的标签内容与显示样式分离的思想， 也最易改版维护，代码看起来也是最美观的一种。

css 选择器

学习目标

  • 能够说出 css 选择器的种类

1. css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签加样式。

2. css 选择器的种类

  1. 标签选择器

  2. 类选择器

  3. 层级选择器(后代选择器)

  4. id选择器

  5. 组选择器

  6. 伪类选择器

3. 标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码

<style type="text/css">p{color: red;}
</style>
​
<div>hello</div>
<p>hello</p>

4. 类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码

<style type="text/css">.blue{color:blue}.big{font-size:20px}.box{width:100px;height:100px;background:gold} 
</style>
​
<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>

5. 层级选择器(后代选择器)

根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。

示例代码

<style type="text/css">div p{color: red;}.con{width:300px;height:80px;background:green}.con span{color:red}.con .pink{color:pink}.con .gold{color:gold}    
</style>
​
<div><p>hello</p>
</div>
​
<div class="con"><span>哈哈</span><a href="#" class="pink">百度</a><a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

6. id选择器

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

示例代码

<style type="text/css">#box{color:red} 
</style>
​
<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

示例代码

<style type="text/css">/* 定义公共属性 */.box1,.box2,.box3{width:100px;height:100px}/* 定义个性 */.box1{background:red}.box2{background:pink}.box2{background:gold}
</style>
​
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

8. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

<style type="text/css">.box1{width:100px;height:100px;background:gold;}.box1:hover{width:300px;}
</style>
​
<div class="box1">这是第一个div</div>

9. 小结

  • css 选择器就是用来选择标签设置样式的

  • 常用的 css 选择器有六种，分别是:

    1. 标签选择器

    2. 类选择器

    3. 层级选择器(后代选择器)

    4. id选择器

    5. 组选择器

    6. 伪类选择器

css 属性

学习目标

  • 能够知道常用的样式属性

我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。

1. 布局常用样式属性

  • width 设置元素(标签)的宽度，如：width:100px;

  • height 设置元素(标签)的高度，如：height:200px;

  • background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。

  • border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

  • 以上也可以拆分成四个边的写法，分别设置四个边的：

  • border-top 设置顶边边框，如：border-top:10px solid red;

  • border-left 设置左边边框，如：border-left:10px solid blue;

  • border-right 设置右边边框，如：border-right:10px solid green;

  • border-bottom 设置底边边框，如：border-bottom:10px solid pink;

2. 文本常用样式属性

  • color 设置文字的颜色，如： color:red;

  • font-size 设置文字的大小，如：font-size:12px;

  • font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';

  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px

  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中（left/center/right)

  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

3. 布局常用样式属性示例代码

<style>
​.box1{width: 200px; height: 200px; background:yellow; border: 1px solid black;}
​.box2{/* 这里是注释内容 *//* 设置宽度 */width: 100px;/* 设置高度 */height: 100px;/* 设置背景色 */background: red;/* 设置四边边框 *//* border: 10px solid black; */border-top: 10px solid black;border-left: 10px solid black;border-right: 10px solid black;border-bottom: 10px solid black;/* 设置内边距， 内容到边框的距离，如果设置四边是上右下左 *//* padding: 10px;   */padding-left: 10px;padding-top: 10px;/* 设置外边距，设置元素边框到外界元素边框的距离 */margin: 10px;/* margin-top: 10px;margin-left: 10px; */float: left;}
​.box3{width: 48px; height: 48px; background:pink; border: 1px solid black;float: left;}
​
</style>
​
<div class="box1"><div class="box2">padding 设置元素包含的内容和元素边框的距离</div><div class="box3"></div>
</div>

4. 文本常用样式属性示例

<style>p{/* 设置字体大小  浏览器默认是 16px */font-size:20px;/* 设置字体 */font-family: "Microsoft YaHei"; /* 设置字体加粗 */font-weight: bold;/* 设置字体颜色 */color: red;/* 增加掉下划线 */text-decoration: underline;/* 设置行高  */line-height: 100px;/* 设置背景色 */background: green;/* 设置文字居中 *//* text-align: center; */text-indent: 40px;}
​a{/* 去掉下划线 */text-decoration: none;}
</style>
​
<a href="#">连接标签</a>
<p>你好，世界!
</p>

5. 小结

  • 设置不同的样式属性会呈现不同网页的显示效果

  • 样式属性的表现形式是: 属性名:属性值;

相关文章：

聊聊CSS

css 的介绍 学习目标 能够知道css的作用 1. css 的定义 css(Cascading Style Sheet)层叠样式表&#xff0c;它是用来美化页面的一种语言。 没有使用css的效果图 使用css的效果图 2. css 的作用 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。 控制页面布局, 比如…...

编程日记 2024/3/27 19:30:26

C语言 青蛙跳台阶问题

目录 ​编辑 1.问题描述 2.问题分析 3.全部代码 4.结语 1.问题描述 一只青蛙可以一次跳一级台阶&#xff0c;也可以一次跳两级台阶&#xff0c;如果青蛙要跳上n级台阶有多少种跳法&#xff1f; 2.问题分析 当台阶只有一级时&#xff0c;只能跳一级&#xff0c;所以只有一…...

编程日记 2024/3/27 19:29:24

【Django开发】前后端分离美多商城项目第3篇：用户部分,1. 后端接口设计：【附代码文档】

美多商城项目4.0文档完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;美多商城&#xff0c;项目准备1.B2B–企业对企业,2.C2C–个人对个人,3.B2C–企业对个人,4.C2B–个人对企业。项目准备&#xff0c;配置1. 修改settings/dev.py 文件中的路径信息,2. INS…...

编程日记 2024/3/27 19:28:23

DHCP snooping、DHCP安全及威胁防范

DHCP snooping、DHCP安全及威胁防范 [SW1]display dhcp snooping user-bind all&#xff0c;查看DHCP snooping表项。 DHCP snooping&#xff1a; 表项是通过服务器发送给客户端的ACK报文生成的。 只能在交换机上开启&#xff0c;路由器不支持&#xff0c;并且建议在接入交…...

编程日记 2024/3/27 19:27:22

用eclipse创建Web项目，通过Servlet实现Web访问的功能。

要使用Eclipse和Tomcat 10创建一个简单的Web项目&#xff0c;并通过Servlet实现Web访问功能&#xff0c;你需要遵循以下详细步骤&#xff1a; 1. 安装和配置Eclipse和Tomcat 10 确保你已经安装了Eclipse IDE for Java EE Developers和Tomcat 10。如果还没有安装&#xff0c;请…...

编程日记 2024/3/27 19:26:20

tools.jar下载 Unable to create schema compiler

网上查找了一堆下载tools.jar的都是忽悠人的&#xff0c;在这我就直接告诉大家&#xff0c;直接在电脑的JDK安装路径下的lib文件下复制就可以了。如果没有的话可以diss我我发给你...

编程日记 2024/3/27 19:25:19

【0278】checkpointer 共享内存（CheckpointerShmem）初始化（3）

0. 关于checkpointer 检查指针是Postgres 9.2的新特性。它处理所有检查点。自上次检查点以来，检查点在经过一定时间后自动分发，并且还可以发出信号来执行请求的检查点。(GUC参数要求每隔这么多WAL段就有一个检查点，这是通过后端在填充WAL段时发出信号来实现的; checkpointer…...

编程日记 2024/3/27 19:21:15

算法打卡day29|贪心算法篇03|Leetcode 1005.K次取反后最大化的数组和、134. 加油站、135. 分发糖果

算法题 Leetcode 1005.K次取反后最大化的数组和 题目链接:1005.K次取反后最大化的数组和 大佬视频讲解&#xff1a;K次取反后最大化的数组和视频讲解 个人思路 思路清晰&#xff0c;因为是取反当然是取越小的负数越好&#xff0c;那么先按绝对值排序。如果是负数就取反&#…...

编程日记 2024/3/27 19:17:11

【hexo博客6】自定义域名 购买、配置、更新部署

【hexo博客6】自定义域名 购买、配置、更新部署 写在最前面自定义域名购买域名DNS配置Github 配置 更新部署博客 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光&#xff0c;感谢你的陪伴与支持 ~ &#x1f680; 欢迎一起踏上探险之旅&#…...

编程日记 2024/3/27 19:13:07

Django使用pyJwt进行token校验

1.登录成功后返回token&#xff0c;这里使用authenticate进行校验是否存在该用户 def login(request):try:data json.loads(request.body)username data.get(username)password data.get(password)if not all([username, password]):return to_response(status400, msg参数…...

编程日记 2024/3/27 19:10:03

❤️算法笔记❤️-(每日一刷-26、删除有序数组的重复项)

文章目录 题目思路解法 题目 给你一个 非严格递增排列 的数组 nums &#xff0c;请你** 原地** 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯…...

编程日记 2024/3/27 19:03:57

银河麒麟系统安装设备类型选择lvm简单模式之后，数据写入导致失败导致系统重启无法正常加载

银河麒麟系统安装设备类型选择lvm简单模式之后&#xff0c;数据写入导致失败导致系统重启无法正常加载 一 系统环境1.1 系统版本信息1.2 通过镜像安装的过程中选择设备类型选择的是lvm简单模式 二 问题描述三 问题修复过程3.1 挂载ISO镜像&#xff0c;引导到字符终端界面3.2 修…...

编程日记 2024/3/27 19:01:55

Mybatis-核心配置文件 / Mybatis增删改查

1. 核心配置文件 1.1. 概述 核心配置文件是MyBatis框架中用于集中定义全局配置信息的XML文件&#xff0c;其内部包含了一系列预设标签&#xff0c;用于设置数据库连接、对象映射、类型处理等关键参数。这些标签遵循特定的排列顺序&#xff0c;尽管并非所有标签都是强制性的&a…...

编程日记 2024/3/27 19:00:53

Nginx(面试)

NGINX 速记问答 Q 什么是Nginx&#xff1f;它的主要特点是什么&#xff1f; A Nginx是一个高性能的开源Web服务器和反向代理服务器。它以高并发、低内存消耗和高稳定性著称。 Q Nginx与Apache Web服务器有什么区别&#xff1f; A Nginx与Apache相比&#xff0c;更适用于处…...

编程日记 2024/3/27 18:55:48

net::ERR_SSL_PROTOCOL_ERROR

小程序 发起网络请求 解决&#xff1a; 如果还没有申请SSL证书&#xff0c;那就直接把https请求改为http 测试可以用 上线不推荐...

编程日记 2024/3/27 18:52:45

BaseDao封装增删改查（超详解）

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍对数据库中表中的数据进行增改删查询&#xff0c;封装一个工具类&#xff08;BaseDao&#xff09;的详细使用以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &…...

编程日记 2024/3/27 18:51:43

【Python操作基础】——元组

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…...

编程日记 2024/3/27 18:49:41

光伏投融资该如何计算？

光伏投融资是光伏产业发展过程中的重要环节&#xff0c;其计算涉及到多个方面&#xff0c;包括项目规模、预期收益、成本分析、风险评估等。合理的投融资计算能够为光伏项目的实施提供资金保障&#xff0c;同时也能够降低投资风险&#xff0c;提高项目的经济效益。 首先&#x…...

编程日记 2024/3/27 18:46:38

【更新中】Leetcode中遇到的最短路径算法

dijsktra算法模板&#xff1a; def dijkstra(x):#x表示出发点dis[inf]*n #dis记录从x出发到各个点的最短距离&#xff0c;初始化为infdis[x]0 #源点到自己的距离为0vis[False]*n #检查各个点是否访问过for _ in range(n-1): #检查除了源点的其他n-1个点&#xff0c;更新dis…...

编程日记 2024/3/27 18:44:37

Git学习笔记之基础

本笔记是阅读《git pro》所写&#xff0c;仅供参考。 《git pro》网址https://git-scm.com/book/en/v2 git官网 https://git-scm.com/ 一、git起步 1.1、检查配置信息 git config --list查看所有的配置以及它们所在的文件 git config --list --show-origin可能有重复的变量名…...

编程日记 2024/3/27 18:40:33

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/8/22 4:16:21

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/7/5 23:14:36

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/7/8 11:33:47

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/8/5 8:28:48

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

编程新知 2025/7/7 21:16:56

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

编程新知 2025/8/21 14:31:48

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

编程新知 2025/8/23 19:00:24

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

编程新知 2025/8/28 17:37:33

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

编程新知 2025/8/9 10:00:42

Linux基础开发工具——vim工具

文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...

编程新知 2025/8/22 3:35:13