前端秘法基础式(CSS)(第二卷)

目录

一.字体

1.字体的设置

2.字体的颜色

2.1预定义的颜色值

2.2十六进制

2.3rgb表示法

3.字体粗细及样式

4.文本

4.1text-align

4.2text-indent

4.3text-decoration

二.背景属性

三.圆角矩形

四.元素显示模式

五.盒模型

六.弹性布局

七.Chrome调试工具


一.字体

1.字体的设置

通过font-family设置字体样式,通过font-size设置字体大小

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="csspassage/html02.css">
</head>
<body><!--  --><div>龙年大吉!</div>
</body>body div{font-family: 'Microsoft YaHei';font-size: 30px;
}

2.字体的颜色

有三种展示方式

2.1预定义的颜色值

直接用对应的单词

body div{font-family: 'Microsoft YaHei';font-size: 30px;color: red;
}

2.2十六进制

#ff0000表示红色,ff转成十进制就是255,一共有六位,每两位对应三原色中的一个,顺序是红绿蓝,每个颜色最多取到255,可以简写成#f00

2.3rgb表示法

 color: rgb(255, 0, 0);

3.字体粗细及样式

字体粗细有四种预定样式

normal默认值,粗细为400

bold粗700

bolder更粗   lighter更细

那么字体样式也有四种

normal默认样式

italic斜体

oblique倾斜

inherit继承父元素的字体样式

4.文本

4.1text-align

控制文本靠左靠右居中

4.2text-indent

控制首行缩进,以em为单位代表缩进N个字符

4.3text-decoration

文本装饰

underline加下划线

line-through加中线

overline加上划线

none去下划线

line-height行高,控制行间距

h1{

    font-family: 'Microsoft YaHei';

    font-size: 25px;

    text-align: left;

}

h2{

    font-family: 'Microsoft YaHei';

    font-size: 25px;

    text-align: center;

}

h3{

    font-family: 'Microsoft YaHei';

    font-size: 25px;

    text-align: right;

}

div p{

    font-size: 25px;

    text-indent: 2em;

    text-decoration: underline;

    line-height: 50px;

}

二.背景属性

background-color指定背景颜色

background-image:url()添加背景图片

background-repeat指定背景的排列方式

background-position指定背景的位置

background-size指定背景的尺寸

body{

    background-color:rgb(71, 209, 209);

    background-image: url(https://img2.baidu.com/it/u=1737199380,1768433982&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800);

    background-size: cover;

}

p{

    font-size: 50px;

    font-family: "Microsoft YaHei";

    color: aliceblue;

    text-align: center;

}

三.圆角矩形

div{

    width: 400px;

    height: 300px;

    border: 2px red solid;

    border-radius: 20%;

}

div{

    width: 400px;

    height: 400px;

    border: 2px red solid;

    border-radius: 50%;

}

四.元素显示模式

元素显示分为块级元素和行内元素

块级元素有div,h1-h6,p等等

行内元素有a,span,strong等等

在实际开发应用中,我们通常将行内元素转换

例如

定义两个行内元素,假设定义两个a标签

<!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="csspassage/html02.css">

    <style>

        a{

            display: block;

        }

    </style>

</head>

<body>

    <!--  -->

    <a href="">链接1</a>

    <a href="">链接2</a>

</body>

</html>

五.盒模型

border边框

padding内边距

margin内边距

content内容

<!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="csspassage/html02.css">

    <style>

        div{

            width: 400px;

            height: 300px;

            border: 2px red solid;

            padding: auto;

            margin: auto;

            font-size: 25px;

            font-family: "Microsoft YaHei";

            text-align: center;

        }

    </style>

</head>

<body>

    <!--  -->

    <div>happy new year</div>

    <div></div>

    <div></div>

</body>

</html>

六.弹性布局

display: flex进入弹性布局模式

<!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="csspassage/html02.css">

    <style>

        div{

            width: 400px;

            height: 300px;

            display: flex;

            background-color: aquamarine;

            justify-content: start;

        }

        div span{

            background-color: brown;

        }

    </style>

</head>

<body>

    <!--  -->

    <div>

        <span>1</span>

        <span>2</span>

        <span>3</span>

    </div>

</body>

</html>

这是浏览器的默认模式,主轴为start

以上两种分别为center/end

这是space-between模式,每个弹性盒之间都有空隙

<style>

        div{

            width: 400px;

            height: 300px;

            display: flex;

            background-color: aquamarine;

            justify-content: space-around;

            align-items: center;

        }

        div span{

            height :100px;

            width :100px;

            background-color: brown;

        }

    </style>

这是对于副轴做出的调整

七.Chrome调试工具

打开一个网页

按F12键打开开发者工具

选中elements这是HTML文件

选中console这是控制台,用于后续调试JavaScript代码

选中network,这是前后端交互的接口

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

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

相关文章

普通人steam搬砖到底能不能做,一定谨记这4点

steam/csgo搬砖项目拥有小投资收益稳定的特点&#xff0c;多搬多赚&#xff0c;这个项目已存在很多年&#xff0c;是非常老牌的阳光项目&#xff0c;很多人比较关心普通人steam搬砖到底能不能做&#xff0c;这里想提醒你谨记这4点。 1&#xff1a;steam/csgo搬砖项目不需要玩游…

java.sql.SQLException: No operations allowed after statement closed.

背景 某天下午&#xff0c;客服反馈线上服务出现问题&#xff0c;不能分配了。于是我登录到系统上&#xff0c;进行同样的操作发现也不行。当然同时我已经登录到服务器打开了日志&#xff0c;发现报错了&#xff0c;下面就是日志的错误信息&#xff1a; java.sql.SQLExceptio…

AI嵌入式K210项目(29)-模型加载

文章目录 前言一、下载部署包二、C部署三、搭建文件传输环境四、文件传输五、调试六、MicroPython部署总结 前言 上一章节介绍了如何进行在线模型训练&#xff0c;生成部署包后&#xff0c;本章介绍加载模型&#xff1b; 一、下载部署包 训练结束后&#xff0c;在训练任务条…

5 虚拟存储器

常规存储器管理方式和局部性原理 特征&#xff1a;一次性 驻留性局部性原理&#xff1a;较短的时间内程序的执行仅局限于某个部分 时间局限性&#xff1a;最近访问过的又被访问&#xff08;循环操作&#xff09;空间局限性&#xff1a;程序顺序执行 虚拟存储器&#xff1a;进程…

基于ESP32+Platformio的物联网RTOS_SDK-CC_Device

本项目基于ESP32以及Platformio平台开发&#xff0c;请自行查阅如何配置这个环境 开源gitee地址&#xff1a;cc_smart_device 如果愿意贡献项目or提出疑问和修改的&#xff0c;请在gitee上提issue 项目里的mqtt服务器是公共的 请大家最好换成私有的 否则容易收到其他用户的错误…

mybatis 基础入门使用

1、mybatis 简介 1.1、mybatis 特性 MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架&#xff1b; MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集&#xff1b; MyBatis可以使用简单的XML或注解用于配置和原始映射&#xff0c;将接口和…

【Java面试】MongoDB

目录 1、mongodb是什么&#xff1f;2、mongodb特点什么是NoSQL数据库&#xff1f;NoSQL和RDBMS有什么区别&#xff1f;在哪些情况下使用和不使用NoSQL数据库&#xff1f;NoSQL数据库有哪些类型?启用备份故障恢复需要多久什么是master或primary什么是secondary或slave系列文章版…

【shell】2、Makefile

文章目录 一、变量1.1 定义简单变量1.2 定义数组1.3 引用变量1.4 规则中定义变量 一、变量 1.1 定义简单变量 用变量名 值的语法来定义变量。这些变量可以用于存储命令、文件名、目录路径等信息&#xff0c;以便在Makefile规则中重复使用 # 定义一个变量 VAR_NAME value# …

Vue练习5:图片的引入

后续会补充 1.require引入 src -> asstes <template><img :src"url"> </template><script> export default {name: App,data(){return{url: require("./assets/logo.png"),}} } </script> 2.import引入 src…

Vue2:Vuex中使用mapState和mapGetters

一、情景说明 前面的Vuex案例中 我们在使用state中的变量或者getter中的变量时 使用插值语法&#xff0c;写法如下&#xff1a; <h1>当前求和为&#xff1a;{{$store.state.sum}}</h1><h1>当前求和放大10倍为&#xff1a;{{$store.getters.bigSum}}</h1&…

【医学大模型】MEDDM LLM-Executable CGT 结构化医学知识: 将临床指导树结构化,便于LLM理解和应用

MEDDM LLM-Executable CGT 结构化医学知识: 将临床指导树结构化&#xff0c;便于LLM理解和应用 提出背景对比传统医学大模型流程步骤临床指导树流程图识别临床决策支持系统 总结解决方案设计数据收集与处理系统实施临床决策支持 提出背景 论文&#xff1a;https://arxiv.org/p…

什么是DoS和DDoS攻击?

DoS和DDoS攻击是两种常见的网络攻击方式&#xff0c;它们通过向目标服务器发送大量的无效或高流量的网络请求&#xff0c;从而耗尽服务器的资源&#xff0c;使其无法正常处理有效的请求。 DoS攻击是一种单点攻击方式&#xff0c;通常是通过向目标服务器发送大量的请求&#x…

【c/c++】C++静态工具类和单例模式对比学习

文章目录 序言1. static静态成员2. C(伪)静态工具类3. 单例模式3.1 单例模式的特点3.2 单例模式的实现方式3.3 单例模式的缺点3.4 Meyer Singleton单例模式 4. (伪)静态工具类 vs 单例模式4.1 区别4.2 如何选择4.3 一些释疑 序言 比较C static&#xff08;伪&#xff09;静态&a…

在k8s中,使用DirectPV CSI作为分布式存储的优缺点

DirectPV 提供了一种直接将物理卷(Physical Volumes)与 Kubernetes 集群中的 Pod 绑定的机制。 利用 DirectPV,你可以将相应的 PV 直接与节点上的物理存储设备(如磁盘)进行绑定,而无需通过网络存储服务(如 NFS 或 Ceph)来提供存储。这种直接访问物理卷的方式,有助于提…

C语言---指针进阶

1.字符指针 int main() {char str1[] "hello world";char str2[] "hello world";const char* str3 "hello world.";const char* str4 "hello world.";if (str3 str4){//常量字符串在内存里面是无法修改的&#xff0c;所以没必要…

springboot/ssm校园菜鸟驿站管理系统Java校园快递取件管理系统

springboot/ssm校园菜鸟驿站管理系统Java校园快递取件管理系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.…

这是 30 年来创办公司的最佳时机(下篇)

有些很聪明的人没什么成就,主要的原因是不愿意做基础性重复性的工作。 他们有个毛病,一旦达到某个状态,了解了事情的本质,就不愿意再重复去做了。所以,最后她们只能当参谋一样的角色。 真正能做成事情的人,都是能到一线去执行的。要是你聪明、又能干,那成为大才的概率很…

WordPress管理员修改自己用户名的插件Username

有一些站长在刚开搭建WordPress网站时&#xff0c;对于管理员的用户名是随意输入&#xff0c;后来想要修改时发现不懂得如何下手。其实&#xff0c;修改WordPress管理员用户名最快速的方法就是进入数据库直接修改&#xff0c;详见『通过phpMyAdmin直接修改WordPress用户名的图文…

linux 环境下使用gsettings更改alt+tab切屏模式

Linux 操作系统配置 dconf是GNOME3的注册表&#xff0c;可以通过改变dconf中value的值来改变配置&#xff0c;有两种配置方法。第一种是通过可视化GUI dconf-editor进行配置&#xff0c;第二种是通过gsettings command line的方式改变dconf注册表中的value来设置。 dconf-edit…

裸辞5个月,面试了37家公司,终于找到理想工作了

上半年裁员&#xff0c;下半年裸辞&#xff0c;有不少人高呼裸辞后躺平真的好快乐&#xff01;但也有很多人&#xff0c;裸辞后的生活五味杂陈。 面试37次终于找到心仪工作 因为工作压力大、领导PUA等各种原因&#xff0c;今年2月下旬我从一家互联网小厂裸辞&#xff0c;没想…