CSS笔记01

黑马程序员视频地址:

前端Web开发HTML5+CSS3+移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes

目录

引入方式

CSS特性

继承性

层叠性

优先级

Emmet写法

选择器

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

复合选择器

后代选择器

子代选择器

并集选择器

交集选择器

伪类选择器

结构伪类选择器

伪元素选择器

文字控制属性 

字体大小 font-size

字体粗细 font-weight

字体样式(是否倾斜)font-style

行高 line-height

行高测量方法​编辑

行高垂直居中

字体族 font-family

复合属性 font

文本缩进 text-indent

内容水平对齐方式 text-align 

文字

图片 

文本修饰线 text-decoration

文字颜色 color

背景属性

背景图 background-image

背景图平铺方式 background-repeat

背景图位置 background-position

背景图缩放 background-size

背景图固定 background-attachment

背景复合属性 background

显示模式

转显示模式

盒子模型

组成部分

边框线 border

内边距 padding / padding-方位名词

內减模式 box-sizing

外边距 margin

外边距问题——合并现象

外边距问题——塌陷问题 

内外边距问题——行内元素

元素溢出 overflow

圆角 border-radius

阴影 box-shadow

清除默认样式


引入方式


CSS特性

继承性


层叠性


优先级


Emmet写法


选择器

基础选择器

标签选择器


类选择器


id选择器


通配符选择器


复合选择器

后代选择器


子代选择器


并集选择器


交集选择器


伪类选择器


结构伪类选择器


伪元素选择器


文字控制属性 


字体大小 font-size


字体粗细 font-weight


字体样式(是否倾斜)font-style


行高 line-height

 行高测量方法

行高垂直居中


 字体族 font-family

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;


复合属性 font


 文本缩进 text-indent


内容水平对齐方式 text-align 

文字

图片 


文本修饰线 text-decoration


文字颜色 color


背景属性


背景图 background-image


背景图平铺方式 background-repeat


背景图位置 background-position


背景图缩放 background-size


背景图固定 background-attachment


背景复合属性 background


显示模式


转显示模式


盒子模型

组成部分


边框线 border


内边距 padding / padding-方位名词


內减模式 box-sizing


外边距 margin


外边距问题——合并现象


外边距问题——塌陷问题 


内外边距问题——行内元素


元素溢出 overflow


圆角 border-radius


阴影 box-shadow


清除默认样式

/* 清除默认内外边距 */ 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }

/* 清除列表项目符号 */ 
li{
list-style: none;
 }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习】制造业转型:机器学习如何推动工业 4.0 的深度发展

我的个人主页 我的领域:人工智能篇,希望能帮助到大家!!!👍点赞 收藏❤ 引言 在当今科技飞速发展的时代,制造业正经历着前所未有的变革,工业4.0的浪潮席卷而来。工业4.0旨在通过将…

【游戏设计原理】72 - 学习曲线

学习曲线的观点本质上强调了玩家在游戏中逐渐掌握新技能的过程,旨在通过设计合适的难度和反馈机制,确保玩家在学习的过程中感受到挑战,同时又不会感到过于困难或无聊。 1. 学习曲线的定义和重要性 学习曲线反映了玩家在完成某个任务时&…

【Linux】进程优先级与进程切换

🔥个人主页🔥:孤寂大仙V 🌈收录专栏🌈:Linux 🌹往期回顾🌹:【Linux】进程状态 🔖流水不争,争的是滔滔不 一、进程优先级是什么二、查看系统进程三…

windows 极速安装 Linux (Ubuntu)-- 无需虚拟机

1. 安装 WSL 和 Ubuntu 打开命令行,执行 WSL --install -d ubuntu若报错,则先执行 WSL --update2. 重启电脑 因安装了子系统,需重启电脑才生效 3. 配置 Ubuntu 的账号密码 打开 Ubuntu 的命令行 按提示,输入账号,密…

二层交换机之作用、故障(Function and Malfunction of Layer 2 Switch)

二层交换机之作用、区别 1️⃣二层交换机 又叫数据链路层交换机 还被称为接入层交换机 又或者以太网二层交换机 用一句话描述其核心功能 就是基于MAC地址进行帧的转发和过滤 与传统的集线器不同 二层交换机能智能学习每个端口连接设备的MAC地址 并更新MAC地址表&#…

cursor重构谷粒商城02——30分钟构建图书管理系统【cursor使用教程番外篇】

前言:这个系列将使用最前沿的cursor作为辅助编程工具,来快速开发一些基础的编程项目。目的是为了在真实项目中,帮助初级程序员快速进阶,以最快的速度,效率,快速进阶到中高阶程序员。 本项目将基于谷粒商城…

Python自动化:基于faker批量生成模拟数据(以电商行业销售数据为例)

引言:个人认为,“造数据”是一个数据分析师的一项基本技能,当然啦,“造数据”不是说胡编乱造,而是根据自己的需求去构造一些模拟数据集,用于测试等用途,而且使用虚拟数据不用担心数据隐私和安全…

【全栈开发】----Mysql基本配置与使用

本篇是在已下载Mysql的情况下进行的,若还未下载或未创建Mysql服务,请转到这篇: 2024 年 MySQL 8.0.40 安装配置、Workbench汉化教程最简易(保姆级)_mysql8.0.40下载安装教程-CSDN博客 本文对于mysql的操作均使用控制台sql原生代码…

微软宣布Win11 24H2进入新阶段!设备将自动下载更新

快科技1月19日消息,微软于1月16日更新了支持文档,宣布Windows 11 24H2进入新阶段。 24H2更新于2024年10月1日发布,此前为可选升级,如今微软开始在兼容的Windows 11设备上自动下载并安装24H2版本。 微软表示:“运行Wi…

15. helm包管理器

helm包管理器 一、helm包管理器介绍、安装1、helm包管理器2、核心概念2.1 chart2.2 repository2.3 release 3、helm安装3.1 安装helm3.2 添加helm国内仓库 二、使用helm安装MySQL 8.01、搜索mysql8.0 chart包2、下载mysql8.0 chart包3、按需定制values.yaml3.1 values.yaml文件…

庄小焱——2024年博文总结与展望

摘要 大家好,我是庄小焱。岁末回首,2024 年是我在个人成长、博客创作以及生活平衡方面收获颇丰的一年。这一年的经历如同璀璨星辰,照亮了我前行的道路,也为未来的发展奠定了坚实基础。 1. 个人成长与突破 在 2024 年&#xff0c…

OSCP - Proving Grounds - BullyBox

主要知识点 如果发现有域名,则可以加入/etc/hosts后重新执行nmap,nikto等扫描dirsearch的时候可以使用完整一些的字典文件,避免漏掉信息.git dump 具体步骤 执行nmap 扫描,发现 80和22端口开放,访问后发现被重定向到 bullybox.local Star…

Linux中的基本指令(一)

一、Linux中指令的存在意义 Linux中,通过输入指令来让操作系统执行,以此达到控制操作系统的目的,类似于Windows中的双击,右键新建文件,新建文件夹等 1.补:关于屏幕的几个操作指令 ①清屏指令 clear 回…

C/C++内存管理(超详解)

目录 1.C/C内存分布 2.C语言动态内存管理 2.1 malloc 2.2 free 2.3 calloc 2.4 realloc 3.C动态内存管理 3.1new/delete操作内置类型 3.2new/delete操作自定义类型 3.3operator new与operator delete函数 3.4定位new表达式(placement-new) 1.C/C内存分布 内存中是如…

【React】静态组件动态组件

目录 静态组件动态组件创建一个构造函数(类)使用 class 实现组件**使用 function 实现类组件** 静态组件 函数组件是静态组件: 组件第一次渲染完毕后,无法基于内部的某些操作让组件更新「无法实现自更新」;但是,如果调用它的父组…

前端【3】--CSS布局,CSS实现横向布局,盒子模型

盒子分类 1、块级盒子 2、内联级盒子 3、内联块级盒子 4、弹性盒子 5、盒子内部分区 方法一:使用 float 普通盒子实现横向布局 方法二:使用 display: inline-block 内联块级元素实现横向布局 方法三:使用弹性盒子 flexbox&#xff0…

Python实现过年烟花效果及打包成可执行文件

博客:Python实现过年烟花效果及打包成可执行文件 在这篇博客中,我们将详细讲解如何使用Python和Pygame库实现一个过年烟花效果的程序,并介绍如何将Python脚本打包成Windows上可以直接执行的exe文件。我们将从代码的各个模块入手,…

新星杯-ESP32智能硬件开发--ESP32的I/O组成-系统中断矩阵

本博文内容导读📕🎉🔥 ESP32开发板的中断矩阵、功能描述与实现、相关API和示例程序进行介绍 ESP32中断矩阵将任一外部中断源单独分配到每个CPU的任一外部中断上,提供了强大的灵活性,能适应不同的应用需求。 ESP32中断主…

SpringBoot2 + Flowable(UI)

文章目录 引言I 技术栈软件架构基于 Vue.js 和 Element UI 的后台管理系统工程结构II 依赖rest,logic,conf 的依赖工作流flowable jar包flowable-ui所需jar包III 配置jdbc 配置 nullCatalogMeansCurrent = true引言 I 技术栈 软件架构 前端基于vue 、element-ui框架分模块设…

.Net 6.0 .Net7.0 .Net8.0 .Net9.0 使用 Serilog 按日志等级写入日志及 appsetting.json 配置方式实现

前言 最近使用最新版的Serilog记录日志时,发现以前有些关于Serilog的Nuget弃用了,最关键的是有些配置写法也改变,于是就整理了一下最新版的Serilog配置方式(appsetting.json)的使用 说明:我是用的.Net6,最新长期支持…