前端——CSS1

一,概述

CSS(Cascading Style Sheets)(级联样式表)

css是一种样式表语言,为html标签修饰定义外观,分工不同

涉及:对网页的文字、背景、宽、高、布局进行修饰

分为内嵌样式表(平常练习时使用)和外部样式表(制定网页时使用,将css与html网页分离)

CSS与HTML的关系:

HTML是网页内容

CSS定义页面的样式

二,基本语法——行内样式表

1.样式表:

(1)行内样式表

行内样式表:是通过标签的 style 属性来设置元素的样式,其基本语法格式如下:
< 标签名 style=" 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名 >

(2)内嵌样式表

内嵌式样式表是将 CSS 代码集中写在 HTML 文档的 head 头部标签中,并且用 style 标签定义
<html>
<head>
<title> 样式规则 </title>
将内嵌样式表放在此处
<style></style>
</head>
<body>
</body>
</html>

(3)外部样式表

外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中,通
过 link 标签将外部样式表文件链接到 HTML 文档中
使用link(链接)标签 :
<head>
<link href="引入样式的文件" rel="stylesheet " type=" text /css">
<style type=" text /css">
</style>

2.选择器:

(1)标签选择器:

通过标签选择器可以选择页面中的所有指定标签
语法:标签名 {}

(2)类选择器:

通过标签的 class 属性值选中一组标签
语法: .class 属性值 {}

(3)id 选择器:

通过标签的 id 属性值选中唯一的一个标签
语法: #id 属性值 {}

(4)通配选择器 :

可以用来选中页面中的所有的标签
语法: *{}

3.文本修饰:

color :字体颜色
font-size :字体大小
font-family :字体
text-align :文本对齐
text-decoration:line-through :定义穿过文本下的一条线
text-decoration:underline :定义文本下的一条线
text-decoration:none :定义标准的文本
font-style: italic; 斜体文本
font-weight: 字体粗细
line-height: 设置行高

4.背景修饰:

background-color:背景颜色
background-image 背景图片
background-repeat 背景重复
background-size 背景尺寸
background- position 背景位置

5.CSS的列表属性

CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。
list-style-image :将图象设置为列表项标志。
list-style-position : 设置列表中列表项标志的位置。
list-style-type : 设置列表项标志的类型。
list-style:  简写属性。

6.CSS伪类

CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状
态的标签设置样式时,就可以使用伪类 。

(1)伪类的语法 :

:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。

(2)透明度

定义透明效果的属性是 opacity 。
opacity 属性设置标签的不透明级别 值为 1 。
规定不透明度:从 0.0 (完全透明)到 1.0 (完全不透明)。

7.块级,行级,行级块标签

(1)块级标签

无论内容多少 都会独自占据一行的,可以进行修饰。
例如<p>、<h1>、<ul>、<ol>、<hr/>等。

(2)行级标签

只占自身大小的标签,不会占一行,但是不能进行修饰。
例如<font>、<b>、<i>、<a>等。

(3)行块级标签

不会独自占一行,但是可以进行修饰。
例如 <input/> <img>等

8.Display

通过 display 样式可以修改标签的类型。
block :设置标签为块标签
inline :设置标签为行级标签
inline-block :设置标签为行级块标签

9.div和span

(1)div 标签

div 是块级标签,可以放置任何标签。
div 没有任何附加功能,给了什么属性就能变成什么样。
div 主要的作用是被用来布局网页。

(2)span 标签

span 是行级标签
span 没有任何附加功能,给了什么属性就能变成什么样。
span 标签被用来选中文档中的文字。

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

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

相关文章

赋能航天教育:高校卫星仿真教学实验平台解决方案

​​​​​​ 随着全球航天事业的飞速发展&#xff0c;对高素质航天人才的需求日益增长。如何在高校阶段提前锻炼学生的航天工程实践能力&#xff0c;成为教育界的重要命题。作为领先的通信与网络技术供应商&#xff0c;IPLOOK基于自身在5G核心网、卫星通信及仿真平台领域的深…

Python爬虫(10)Python数据存储实战:基于pymongo的MongoDB开发深度指南

目录 一、为什么需要文档型数据库&#xff1f;1.1 数据存储的范式变革1.2 pymongo的核心优势 二、pymongo核心操作全解析2.1 环境准备2.2 数据库连接与CRUD操作2.3 聚合管道实战2.4 分批次插入百万级数据&#xff08;进阶&#xff09;2.5 分批次插入百万级数据&#xff08;进阶…

Springboot 手搓 后端 滑块验证码生成

目录 一、效果演示 二、后端滑块验证码生成思路 三、原理解析 四、核心代码拿走 滑块验证码react前端实现&#xff0c;见我的这篇博客&#xff1a;前端 React 弹窗式 滑动验证码实现_react中使用阿里云滑块验证码2.0前端接入及相关视觉-CSDN博客 一、效果演示 生成的案例…

关于flink两阶段提交高并发下程序卡住问题

先抛出代码 package com.dpf.flink;import com.dpf.flink.sink.MysqlSink; import org.apache.flink.api.common.serialization.SimpleStringSchema; import org.apache.flink.api.common.typeinfo.Types; import org.apache.flink.api.java.tuple.Tuple2; import org.apache.…

html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码

美甲店 目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&a…

LeetCode[347]前K个高频元素

思路&#xff1a; 使用小顶堆&#xff0c;最小的元素都出去了&#xff0c;省的就是大&#xff0c;高频的元素了&#xff0c;所以要维护一个小顶堆&#xff0c;使用map存元素高频变化&#xff0c;map存堆里&#xff0c;然后输出堆的东西就行了 代码&#xff1a; class Solution…

2024年网站开发语言选择指南:PHP/Java/Node.js/Python如何选型?

2024年网站开发语言选择指南&#xff1a;PHP/Java/Node.js/Python如何选型&#xff1f; 一、8大主流Web开发语言技术对比 1. PHP开发&#xff1a;中小型网站的首选方案 最新版本&#xff1a;PHP 8.3&#xff08;2023年11月发布&#xff09;核心优势&#xff1a; 全球78%的网站…

从数据结构说起(一)

1 揭开数据结构神奇的面纱 1.1 初识数据结构 在C的标准库模板&#xff08;Standard Template Library,STL&#xff09;课程上&#xff0c;我初次结识了《数据结构》。C语言提供的标准库模板是面向对象程序设计与泛型程序设计思想相结合的典范。所谓的泛型编程就是编写不依赖于具…

JAVA--- 关键字static

之前我们学习了JAVA 面向对象的一些基本知识&#xff0c;今天来进阶一下&#xff01;&#xff01;&#xff01; static关键字 static表示静态&#xff0c;是JAVA中的一个修饰符&#xff0c;可以修饰成员方法&#xff0c;成员变量&#xff0c;可用于修饰类的成员&#xff08;变…

4.27比赛总结

文章目录 T1T2法一&#xff1a;倍增求 LCA法二&#xff1a;Dijkstra 求最短路法三&#xff1a;dfs 求深度 T3T4总结 T1 一道非常简单的题&#xff0c;结果我因为一句话没写挂了 80pts…… 题目中没写 a a a 数组要按照 b b b 数组的顺序&#xff0c;所以对于最大方案&#x…

数据一致性巡检总结:基于分桶采样的设计与实现

数据一致性巡检总结&#xff1a;基于分桶采样的设计与实现 背景 在分布式系统中&#xff0c;缓存&#xff08;如 Redis&#xff09;与数据库&#xff08;如 MySQL&#xff09;之间的数据一致性问题是一个常见的挑战。由于缓存的引入&#xff0c;数据在缓存和数据库之间可能存…

SpringBoot与Druid整合,实现主从数据库同步

通过引入主从数据库同步系统&#xff0c;可以显著提升平台的性能和稳定性&#xff0c;同时保证数据的一致性和安全性。Druid连接池也提供了强大的监控和安全防护功能&#xff0c;使得整个系统更加健壮和可靠。 我们为什么选择Druid&#xff1f; 高效的连接管理&#xff1a;Dru…

在Linux系统中安装MySQL,二进制包版

1、检查是否已安装数据库&#xff08;rpm软件包管理器&#xff09; rpm -qa | grep mysql rpm -qa | grep mariadb #centOS7自带mariadb与mysql数据库冲突2、删除已有数据库 rpm -e –nodeps 软件名称 3、官网下载MySQL包 4、上传 # 使用FinalShell或Xshell工具上传&#…

【含文档+PPT+源码】基于SpringBoot电脑DIY装机教程网站的设计与实现

项目介绍 本课程演示的是一款 基于SpringBoot电脑DIY装机教程网站的设计与实现&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套…

Spring Boot 缓存机制:从原理到实践

文章目录 一、引言二、Spring Boot 缓存机制原理2.1 缓存抽象层2.2 缓存注解2.3 缓存管理器 三、入门使用3.1 引入依赖3.2 配置缓存3.3 启用缓存3.4 使用缓存注解3.5 实体类 四、踩坑记录4.1 缓存键生成问题4.2 缓存过期与更新问题4.3 事务与缓存的一致性问题 五、心得体会5.1 …

Spark读取Apollo配置

--conf spark.driver.extraJavaOptions-Dapp.idapollo的app.id -Denvfat -Dapollo.clusterfat -Dfat_metaapollo的meta地址 --conf spark.executor.extraJavaOptions-Dapp.idapollo的app.id -Denvfat -Dapollo.clusterfat -Dfat_metaapollo的meta地址 在spark的提交命令中&…

[逆向工程]如何理解小端序?逆向工程中的字节序陷阱与实战解析

[逆向工程]如何理解小端序&#xff1f;逆向工程中的字节序陷阱与实战解析 关键词&#xff1a;逆向工程、小端序、字节序、二进制分析、数据解析 引言&#xff1a;为什么字节序是逆向工程师的必修课&#xff1f; 在逆向工程中&#xff0c;分析二进制数据是最基础的任务之一。…

项目三 - 任务2:创建笔记本电脑类(一爹多叔)

在本次实战中&#xff0c;我们通过Java的单根继承和多接口实现特性&#xff0c;设计了一个笔记本电脑类。首先创建了Computer抽象类&#xff0c;提供计算的抽象方法&#xff0c;模拟电脑的基本功能。接着定义了NetCard和USB两个接口&#xff0c;分别包含连接网络和USB设备的抽象…

ElasticSearch深入解析(六):集群核心配置

1.开发模式和生产模式 Elasticsearch默认运行在开发模式下&#xff0c;此模式允许节点在配置存在错误时照常启动&#xff0c;仅将警告信息写入日志文件。而生产模式则更为严格&#xff0c;一旦检测到配置错误&#xff0c;节点将无法启动&#xff0c;这是一种保障系统稳定性的安…

【Prometheus-MySQL Exporter安装配置指南,开机自启】

目录 1. 创建 MySQL 监控用户2. 配置 MySQL 认证文件3. 安装 mysqld_exporter4. 配置 Systemd 服务5. 启动并验证服务6. 修改Prometheus配置常见错误排查错误现象排查步骤 6. 验证监控数据关键注意事项 7. Grafana看板 1. 创建 MySQL 监控用户 mysql -uroot -p123456 # 登录M…