CSS极速入门

CSS介绍

什么是CSS?

CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式.

CSS能够对网页中元素位置的排版进行像素级的精确控制,实现美化页面的效果.能够做到页面的样式和结构分离.

CSS可以理解为"东方四大邪术"的化妆术.

对页面展示进行化妆.

基本语法规范

选择器 + {一条/N条声明}

选择器决定针对谁修改(找谁)

声明决定修改啥.(干啥)

声明的属性是键值对.使用 ; 区分键值对,使用 : 来区分键和值.

<style>p {/*设置字体颜色*/color: red;/*设置字体大小*/font-size: 32px;}
</style><p>hello</p>

注意:

CSS要写到style标签中(后面会介绍其它方法)

style标签可以放到页面的任意位置,一般放在head标签内.

CSS使用/**/进行注释.(使用ctrl + /进行快速转换)

引入方式

引入方式语法描述示例
行内样式在标签内使用style属性<div style="color:green">绿色</div>
内部样式定义<style>标签,在标签内部定义CSS样式<style> h1{...}</style>
外部样式定义<link>标签,通过href属性引入外部CSS文件<link rel="stylesheet" href="[CSS文件路径]">

3种引入方式对比:

1.内部样式会出现大量的代码冗余,不方便后期的维护,所以不常用.

2.行内样式,只适合于写简单样式.只针对某个标签生效.缺点是不能写太复杂的样式

3.外部样式,html和css实现了完全的分离,企业常用的方式. 

规范

样式大小写:虽然CSS不区分大小写,开发的时候统一使用小写字母.

空格规范:冒号后面带空格.  选择器和 { 之间也有空格.

CSS选择器

CSS选择器的主要功能就是选中页面指定的标签元素.选中了元素,才可以限制元素的属性.

CSS选择器主要分以下几种:

1.标签选择器

2.class选择器

3.id选择器

4.复合选择器

5.通配符选择器 

1.标签选择器

/* 选择所有的a标签,设置颜色为红色 */
a {color: red;
}/* 选择所有的div标签,设置颜色为绿色 */
div {color: green;
}

2.类选择器

/* 选择class为font32的元素,设置字体大小为32px */
.font32 {font-size: 32px;
}

一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割,这种做法可以让代码更好地被复用).

3.ID选择器

/* 选择id为submit的元素, 设置元素为红色 */
#submit {color: red;
}

id是唯一的,不能被多个标签使用(是和类选择器的最大区别)

4.通配符选择器

/* 设置页面中所有的元素,颜色为红色 */
* {color: red;
}

 5.复合选择器

/* 只设置ul下的 li标签下的 a标签,颜色是红色 */
ul li a {color: blue;
}

1.以上三个标签选择器ul li a中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合.

2.不一定是相邻的标签,也可以是"孙子"标签

3.如果需要选择多种标签,可以使用 , 分割, 如 p, div { } 表示同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.

4.选择器的使用遵循就近原则.

常用CSS

接下来学习一些常见的CSS样式.

准备如下html

<div class="text1">我是文本1</div>

color

color:设置字体颜色.

.text1 {color: red;
}

 颜色有如下几种表达方式:

英文单词:如red, blue.

rgb代码的颜色, 如rgb(255, 0, 0)

十六进制的颜色, 如#ffffff

 font-size

font-size:设置字体大小

.text1 {font-size: 32px;
}

border

border:边框

边框是一个复合属性,可以同时设置多个样式,不分先后顺序,浏览器会根据设置的值自动判断.

.text1 {border: 1px solider purple;
}

以上border属性对应设置的维度分别为边框粗细,边框样式,边框颜色.

也可以拆开来设置

样式说明取值
border-width设置边框粗细数值
border-style设置边框样式

dotted:点状

solid:实线

double:双线

dashed:虚线

border-color设置边框颜色同color

 border: 1px solid purple; 就等同于以下代码:

.text1 {border-width: 1px;border-style: solid;border-color: purple;
}

width/height

width:设置宽度

height:设置高度

只有块级元素可以设置宽高

块级元素是html标签的一种显示模式,对应的还有行内元素.

常见的块级元素:h1-h6,p,div等

常见的行内元素: a span

块级元素独占一行,可以设置宽高.

行内元素不能独占一行,不能设置宽高.

改变显示模式

使用display属性可以修改元素的显示模式.

display:block 改成块级元素(常用)

display:inline 改成行内元素(很少用)

.text1 {width:200px;height:100px;
}

padding(内边距)

padding:内边距,设置内容和边框之间的距离.

内容默认是顶着边框来设置的,用padding来控制这个距离.

.text {padding: 20px;
}

padding也是一个复合样式,可以对四个方向分开设置.

padding-top

padding-bottom

padding-left

padding-right 

 margin(外边距)

margin:外边距,设置元素和元素之间的距离.

margin也是一个复合样式,可以给四个方向都加上外边距.

margin-top

margin-bottom

margin-left

margin-right

margin和padding之间的区别:margin是指框与框之间的距离,而padding是指框内元素与框之间的距离

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

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

相关文章

[BUG]vscode插件live server无法自动打开浏览器

问题描述&#xff1a; 点了open with live server但是浏览器没有自动跳出来 http://127.0.0.1:5500/里面是有东西的 解决方法&#xff1a; 配置环境变量&#xff0c;在path中添加program files

Android车载应用与手机版Android应用有何不同?

Android车载应用与手机版Android应用有何不同&#xff1f;车载应用需要考虑到车辆环境的特殊性&#xff0c;比如屏幕尺寸、用户交互方式&#xff08;可能更依赖语音控制和物理按钮&#xff09;、以及对驾驶安全的考虑。车载应用通常需要与车辆的硬件和系统进行更紧密的集成&…

Linux 学习笔记(14)

十四、 网络管理 网卡在 Linux 操作系统中用 ethX,是由 0 开始的正整数&#xff0c;比如 eth0、eth1...... ethX。而普通猫和 ADSL 的接口是 pppX&#xff0c;比如 ppp0 等 7.1 、 ifconfig 1、 关于网络接口及配置工具说明&#xff1b; 在 Linux 操作系统中配置网络接口&…

SAR ADC学习笔记(3)

一、SAR ADC采样电路 1.采样网络的时域响应&#xff1a;采保信号 2.采样网络的KT/C噪声 3.采样抖动 采样开关的种类 1.单MOS管开关 2.传输门开关 3.栅极自举&#xff08;Bootstrap&#xff09;开关 结论&#xff1a;M4的衬底需要和B点短接&#xff0c;保证B点能够到达高压&…

Python 主线任务之整数和浮点数,今日buff叠加【玩转Python】

主线任务 主线任务之数据类型已进行33.3%&#xff0c;今日主线任务为“整数和浮点数”的了解和掌握&#xff0c;这两个一般是“共生”关系。了解其中一个&#xff0c;必然不能落下另外一个&#xff0c;两者兼顾方为最佳。 除了上面的主线任务之外&#xff0c;今日还需兼顾支线…

Doris——纵腾集团流批一体数仓架构

目录 前言 一、早期架构 二、架构选型 三、新数据架构 3.1 数据中台 3.2 数仓建模 3.3 数据导入 四、实践经验 4.1 准备阶段 4.2 验证阶段 4.3 压测阶段 4.4 上线阶段 4.5 宣导阶段 4.6 运行阶段 4.6.1 Tablet规范问题 4.6.2 集群读写优化 五、总结收益 六…

【复习】C++11特性

1. 智能指针 作用:堆内存指针+引用计数(控制器,由默认的释放规则,可以自定义),用于堆内存管理,当对象离开生命周期时,引用计数降至为0,释放堆内存。 智能指针由3类std::shared_ptr, std::unique_ptr, std::weak_ptrstd::shared_ptr初始化std::shared_ptr pShared1; s…

【Vue】VueX仓库

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Vue ⛺️稳中求进&#xff0c;晒太阳 目录 Vue概述 是什么 场景&#xff1a; 优势 构建多组件共享环境 创建一个空仓库 核心概念 - state 状态 1. 提供数据 2.使用数据 ​编辑 …

Linux系统运维脚本:批量创建linux用户和密码(读取文件中的账号和密码来批量创建用户)

目 录 一、要求 二、解决方案 &#xff08;一&#xff09;解决思路 &#xff08;二&#xff09;方案 三、脚本程序实现 &#xff08;一&#xff09;脚本代码和解释 1、脚本代码 2、代码解释 &#xff08;二&#xff09;脚本验证 1、脚本编辑 2、给予执行权…

结合大象机器人六轴协作机械臂myCobot 280 ,解决特定的自动化任务和挑战!(上)

项目简介 本项目致力于探索和实现一种高度集成的机器人系统&#xff0c;旨在通过结合现代机器人操作系统&#xff08;ROS&#xff09;和先进的硬件组件&#xff0c;解决特定的自动化任务和挑战。一部分是基于Jetson Orin主板的LIMO PPRO SLAM雷达小车&#xff0c;它具备自主导航…

ELF 1技术贴|在NXP源码基础上适配开发板的按键功能

本次源代码适配是在NXP i.MX6ULL EVK评估板的Linux内核源代码&#xff08;特定版本号为Linux-imx_4.1.15&#xff09;的基础中展开的。 首要任务集中在对功能接口引脚配置的精细调整&#xff0c;确保其能无缝匹配至ELF 1开发板。接下来&#xff0c;我们将详细阐述适配过程中关…

MapReduce内存参数自动推断

MapReduce内存参数自动推断。在Hadoop 2.0中&#xff0c;为MapReduce作业设置内存参数非常繁琐&#xff0c;涉及到两个参数&#xff1a;mapreduce.{map,reduce}.memory.mb和mapreduce.{map,reduce}.java.opts&#xff0c;一旦设置不合理&#xff0c;则会使得内存资源浪费严重&a…

KingbaseES-V8R3下载安装及基础配置以及创建用户数据库

KingbaseES-V8-R3安装 1 下载准备安装包 下载地址&#xff1a;https://gitlab.cn/renfei/KingbaseES-V8-R3 准备好安装包及license.dat文件上传至服务器 2 挂载安装包 安装包为iso文件&#xff0c;需要挂载到目录 mount KingbaseES_V008R003C002B0340_Lin64_install.iso /…

Oracle中使用alter table move命令的方法降低表中的高水位(High Water Mark)

Oracle中使用alter table move命令的方法降低表中的高水位&#xff08;High Water Mark&#xff09; 导读 在Oracle数据库中&#xff0c;“高水位”&#xff08;High Water Mark&#xff09;是指表中数据的存储位置已经达到的最高位置。在表中插入、更新或删除数据时&#xff0…

裸机程序--时间片调度

1.为什么自己写一个时间片调度呢 a. 网上其实有很多成熟的时间片调度例程, 包括我最开始参加工作也是抄的网上的例程(还记得当时领导问我看明白了它的调度原理吗, 作为一个自学刚参加工作的我来说, 看懂别人的意思真的很难, 当时只能含糊其词的说看得差不多) b. 在我看来网上的…

Day 6.有名信号量(信号灯)、网络的相关概念和发端

有名信号量 1.创建&#xff1a; semget int semget(key_t key, int nsems, int semflg); 功能&#xff1a;创建一组信号量 参数&#xff1a;key&#xff1a;IPC对像的名字 nsems&#xff1a;信号量的数量 semflg&#xff1a;IPC_CREAT 返回值&#xff1a;成功返回信号量ID…

Java 中进行数据类型的强制转换

在Java中&#xff0c;数据类型的强制转换是指将一个数据类型的值转换为另一种数据类型的操作。这在编程中经常会用到&#xff0c;特别是在需要将不同类型的数据进行计算或者比较时。Java中的数据类型强制转换分为两种&#xff1a;隐式转换和显式转换。 1、隐式转换&#xff08…

5G智能制造热力工厂数字孪生可视化平台,推进热力行业数字化转型

5G智能制造热力工厂数字孪生可视化平台&#xff0c;推进热力行业数字化转型。在当今这个信息化、数字化的时代&#xff0c;热力生产行业也迎来了转型的关键时刻。为了提升生产效率、降低成本、提高产品质量&#xff0c;越来越多的热力生产企业开始探索数字化转型之路。而5G智能…

Linux-网络相关函数接口-012

1.UDP编程 socket套接字编程 1.1【socket】 1.1.1函数原型 【int socket(int domain, int type, int protocol);】 1.1.2函数功能 创建一个用来通信的文件描述符1.1.3函数参数 【domain】&#xff1a;使用的协议族 AF_INET (IPv4协议族) 【type】&#xff1a;套接字类型【…

SAP 工单CO02删除标记设置增强

需求&#xff1a;工单打上删除标记时检查&#xff0c;满足才能打上删除标记 位置&#xff1a;PPCO0002 -> EXIT_SAPLCORO_001 -》INCLUDE ZXCO1U02.中 如果没有&#xff0c;就新建 然后写下代码测试&#xff1a; MESSAGE test TYPE I. 然后就可以写下自己要的检查了&…