CSS:样式

1. 引入方式

<!--

        方式一:行内式

            通过元素的style属性引入样式

            语法:style="样式1:值; 样式2:值; ... "

            缺点:1.代码复用率低,不利于维护。比如:定义多个相同的按钮要重复书写

                  2.css和html的代码交织一起,不利于阅读,影响文件大小,影响性能

    -->

<input type="button" value="按钮" style="width: 200px;height: 100px;background-color: aqua;font-size: 50px;font-family: 宋体;border: 2px solid greenyellow;" />

 <!--

        方式二:内嵌式

            通过在head标签中的style标签定义本页面的共用元素的样式

            通过选择器选择作用的元素(即在哪些元素有效)

    -->

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--在head标签中定义--><style>/*元素选择器,通过标签名确定在哪些元素上生效*/input{width: 100px;height: 100px;font-size: 500;font-family: 微软雅黑;border: 5px solid red;background-color: rgb(0, 255, 179);border-radius: 5px;}</style>
</head><body><input type="button" value="小按钮" /><input type="button" value="小按钮" /><input type="button" value="小按钮" /><input type="button" value="小按钮" />
</body>

<!--

        方式三:外部引入

            将css代码放到一个文件中,哪个html文件需要用到就在头标签中使用link引用

                href:从哪个资源文件中引入

                rel: 相关参数(如:stylesheet)

    -->

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--在当前页面引入其他文件的css代码,href哪个资源 rel=引入style的代码需要stylesheet--><link href="css/引入方式.css" rel="stylesheet"> 
</head>

 2. 选择器

<!--

            选择器一:标签名定义选择器

                语法:标签名{}

                缺点:某个按钮不想要里面的某个功能却不能修改,只能重新定义,代码冗余

    -->

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input{/*字体、颜色、大小*/font-size: 30px;font-family: '宋体';color: rgb(18, 222, 100);background-color: aqua;border: 2px solid red;width: 100px;height: 100px;}</style>
</head>
<body><input type="button" value="按钮" /><input type="button" value="按钮" />
</body>

<!--

        选择器二:根据标签的id名定义选择器

            语法:#id名

            缺点:id一般唯一,根据id定义只能有一个元素符合

    -->

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#niubi{/*字体、颜色、大小*/font-size: 30px;font-family: '宋体';color: blueviolet;background-color: blanchedalmond;border: 3px solid red;width: 100px;height: 100px;}</style>
</head>
<body><input type="button" id="niubi" value="方式二" />
</body>

<!--

        选择器三:根据元素的属性值确定class的样式

                一个元素可以有多个class值, 一个class样式可以被多个元素使用

            语法:.class{}

    -->

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.fontClass{font-size: 50px;font-family: '楷书';}.colorClass{color: black;background-color: blue;}.sizeClass{width: 300px;height: 200px;}</style></head>
<body><input type="button" id="but1" class="fontClass colorClass sizeClass" value="方式三" /></body>

3. 浮动、定位

 <!--

        浮动:float(浮动直接移动到框边界最左、右、上、下侧,无法精确定位)

        定位:

        position

            static   默认

            absolute 绝对:相对于浏览器界面进行位置定位

            relative 相对:相对于元素原本的位置进行定位

            fixed    相对:相对于浏览器窗口进行位置定位

                (如:position: fixed;

                     top:30px; left:30px;

                此时滑动浏览器界面但是该区域块仍保持在当前界面离顶部30,左边30像素的位置)

        left

        right

        top

        bottom

    -->

<head><style>.but1{border: 3px solid rebeccapurple;background-color: aqua;//定位方式为:fixedposition: fixed;//距离浏览器窗口顶部的边界30个像素top: 30px;//距离浏览器窗口最左侧的边界30个像素left: 30px;}</style>
</head>

 4. 盒子模型

<!--设置一个界面,里面包含三个小界面-->

    <!--

        设置外边距:margin

        设置内边距:padding

        边距的设置不会影响盒子的空间大小。如:设置一个盒子的外边距为10px,则盒子界限外的10个像素的空间

        内外边距的距离会以盒子的边界为线向内或者向外扩张

    -->

<!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> .outDiv {width: 500px;height: 500px;background-color: antiquewhite;}.inDiv {float: left;}.font {font-size: 30px;font-family: '宋体';}.size {width: 100px;height: 100px;}.d1 {border: 2px solid;background-color: aqua;/*设置外边距的距离*/margin-right: 10px;margin-left: 20px;margin-top: 30px;padding-left: 10px;padding-top: 40px;}.d2 {border: 2px solid green;background-color: rgb(205, 123, 23);/*设置外边距的距离*/margin-left: 10px;}.d3 {border: 2px solid blue;background-color: blueviolet;/*若不指定方向则默认上下左右边距为10个像素*/margin: 10px;}</style>
</head>
<body><div class="outDiv"><div class="inDiv font size d1">div1</div><div class="inDiv font size d2">div2</div><div class="inDiv font size d3">div3</div></div>
</body>

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

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

相关文章

Intellij IDEA / Android studio 可持续开发笔记

Intellij 的Java/安卓工具链有着一种不可持续性&#xff0c;这种不可持续性体现在多个方面。 首先是不可持续运行。IDEA 使用时间越长&#xff0c;内存占用越大&#xff0c;从不主动释放。运行时间越长&#xff0c;日志越多&#xff0c;从不主动清理。 然后是不完整的开源&am…

用html实现一个手风琴相册设计

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>手风琴相册设计</title><link rel"stylesheet" href"./style.css"> </head> <body> <h1>Accordio…

Linux 著名的sudo、su是什么?怎么用?

一、su 什么是su&#xff1f; su命令&#xff08;简称是&#xff1a;substitute 或者 switch user &#xff09;用于切换到另一个用户&#xff0c;没有指定用户名&#xff0c;则默认情况下将以root用户登录。 为了向后兼容&#xff0c;su默认不改变当前目录&#xff0c;只设…

【蓝桥杯第十三届省赛】(部分详解)

九进制转十进制 #include <iostream> #include<math.h> using namespace std; int main() {cout << 2*pow(9,3)0*pow(9,2)2*pow(9,1)2*pow(9,0) << endl;return 0; }顺子日期 #include <iostream> using namespace std; int main() {// 请在此…

分布式理论:CAP理论 BASE理论

文章目录 1. CAP定理1.1 一致性1.3 分区容错1.4 矛盾 2. BASE理论3. 解决分布式事务的思路4. 扩展 解决分布式事务问题&#xff0c;需要一些分布式系统的基础知识作为理论指导。 1. CAP定理 Consistency(一致性): 用户访问分布式系统中的任意节点&#xff0c;得到的数据必须一…

python超详细知识点汇总整理

1、注释以及编码格式的声明 单行注释&#xff1a;# &#xff08;后面放上被注释的内容&#xff09;多行注释&#xff1a;字符段落的上下加上三引号 举个例子: ‘’’ …‘’’编码格式的声明&#xff1a;#coding:utf-8 或者是 #codingutf-8 2、代码编写格式和一些琐碎说明 同…

大数据设计为何要分层,行业常规设计会有几层数据

大数据设计通常采用分层结构的原因是为了提高数据管理的效率、降低系统复杂度、增强数据质量和可维护性。这种分层结构能够将数据按照不同的处理和应用需求进行分类和管理&#xff0c;从而更好地满足不同层次的数据处理和分析需求。行业常规设计中&#xff0c;数据通常按照以下…

深入了解Vue中slot的应用

作为一个流行的JavaScript框架&#xff0c;Vue提供了许多灵活而强大的功能&#xff0c;其中之一就是slot&#xff08;插槽&#xff09;。以下详细介绍Vue中slot的用法。 一、什么是slot&#xff1f; 在Vue中&#xff0c;slot是一种用于在组件中承载内容的特殊元素。通常情况下…

暴力破解pdf文档密码

首先安装pdfcrack工具包 apt install pdfcrack 默认密码字典存储在/usr/share/wordlists里&#xff0c;是gz文件&#xff0c;将它解压并copy到pdf目录 然后使用pdfcrack破解 密码在最后一行user-password的单引号里

Python面对对象 - 类的反射机制

Python面对对象类的反射机制是面向对象编程语言中比较重要的功能&#xff0c;可以动态获取对象信息以及动态调用对象。通过字符串形式的类名或属性来访问对应类或属性。 一、对象的反射 1. getattr 获取指定字符串名称的对象属性、方法&#xff1a; 当访问的属性不存在时&#…

【四】【单片机】蜂鸣器,蜂鸣器模块化编程 1000HZ 鸣响 ms 毫秒,利用定时器让蜂鸣器以特定频率响 ms 毫秒

蜂鸣器模块化编程 1000HZ 鸣响 ms 毫秒 //Buzzer.h #ifndef __BUZZER_H__ #define __BUZZER_H__void Buzzer_Time(unsigned int ms);#endifBuzzer.h文件中只含有一个Buzzer_Time函数&#xff0c;这个函数用来让蜂鸣器以1000HZ固定频率发声ms毫秒。 //Buzzer.c #include <REG…

数据仓库的作用和价值

支持管理决策分析 支持管理决策分析 数据仓库集成了企业各类运营和外部数据,为管理者提供了全面透明的数据视图,帮助他们洞察业务动态,发现问题和机遇。 通过多维度的数据分析、预测建模等,能够为企业未来战略制定、投资规划等重大决策提供依据。 案例:沃尔玛的数据仓库囊括了…

Python学习(二)

数据容器 数据容器根据特点的不同&#xff0c;如&#xff1a; 是否支持重复元素是否可以修改是否有序&#xff0c;等 分为5类&#xff0c;分别是&#xff1a; 列表&#xff08;list&#xff09;、元组&#xff08;tuple&#xff09;、字符串&#xff08;str&#xff09;、集…

09_Web组件

文章目录 Web组件Listener监听器ServletContextListener执行过程 Filter过滤器Filter与Servlet的执行 案例&#xff08;登录案例&#xff09; 小结Web组件 Web组件 JavaEE的Web组件&#xff08;三大Web组件&#xff09;&#xff1a; Servlet → 处理请求对应的业务Listener →…

Linux利用Jenkins部署SpringBoot项目保姆级教程

在当今快速发展的软件开发领域&#xff0c;持续集成和持续部署&#xff08;CI/CD&#xff09;已经成为提升开发效率、缩短产品上市时间的关键实践。Linux系统以其稳定性和开源友好性&#xff0c;成为众多开发者和企业的首选平台。而Spring Boot&#xff0c;作为一个轻量级的Jav…

飞天使-k8s知识点28-kubernetes散装知识点5-helm安装ingress

文章目录 安装helm添加仓库下载包配置创建命名空间安装 安装helm https://get.helm.sh/helm-v3.2.3-linux-amd64.tar.gztar -xf helm-v3.2.3-linux-amd64.tar.gzcd linux-amd64mv helm /usr/local/bin修改/etc/profile 文件&#xff0c;修改里面内容,然后重新启用export PATH$P…

【3月比赛合集】5场可报名的「创新应用」、「数据分析」和「程序设计」大奖赛,任君挑选!

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 创新应用赛&#xff08;2场比赛&#xff09;数据分析赛&#…

深入理解 Hadoop 上的 Hive 查询执行流程

在 Hadoop 生态系统中&#xff0c;Hive 是一个重要的分支&#xff0c;它构建在 Hadoop 之上&#xff0c;提供了一个开源的数据仓库系统。它的主要功能是查询和分析存储在 Hadoop 文件中的大型数据集&#xff0c;包括结构化和半结构化数据。Hive 在数据查询、分析和汇总方面发挥…

微服务篇-C 深入理解第一代微服务(SpringCloud)_VII 深入理解Swagger接口文档可视化管理工具

原创作者&#xff1a;田超凡&#xff08;程序员田宝宝&#xff09; 版权所有&#xff0c;引用请注明原作者&#xff0c;严禁复制转载 Part 1 理论部分 1 传统API接口文档存在的问题&#xff1f; 1 对API接口文档进行更新的时候&#xff0c;需要及时将变化通知前端开发人员&…

如何使用 Python 本地客户端操作读写云服务器 Redis 缓存数据库详细教程(更新中)

Redis 基本概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的使用 ANSI C 语言编写的、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库&#xff0c;并提供多种语言的 API。它通常被称为数据结构服务器&#xff0c;因为值&#xff08;value…