CSS笔记基础篇01——选择器、文字控制属性、背景属性、显示模式、盒子模型

黑马程序员视频地址:

前端Web开发HTML5+CSS3+移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodeshttps://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodeshttps://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

 合并表格边框 border-collapse

 


内边距 padding / padding-方位名词


內减模式 box-sizing


外边距 margin


外边距问题——合并现象


外边距问题——塌陷问题 


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


元素溢出 overflow


圆角 border-radius


阴影 box-shadow


清除默认样式

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

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

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

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

相关文章

C++学习第五天

创作过程中难免有不足,若您发现本文内容有误,恳请不吝赐教。 提示:以下是本篇文章正文内容,下面案例可供参考 一、构造函数 问题1 关于编译器生成的默认成员函数,很多童鞋会有疑惑:不实现构造函数的情况下…

2024嵌入式系统的未来发展与技术洞察分享

时间如白驹过隙,不知不觉又是一年,这一年收获满满。接下来,将本年度对技术的感悟和洞察分析如下,希望对大家有所帮助。 在过去几十年里,嵌入式系统技术迅速发展,成为现代电子设备和智能硬件的核心组成部分。…

01设计模式(D3_设计模式类型 - D3_行为型模式)

目录 一、模版方法模式 1. 基本介绍 2. 应用案例一:豆浆制作问题 需求 代码实现 模板方法模式的钩子方法 3. View的draw(Android) Android中View的draw方法就是使用了模板方法模式 模板方法模式在 Spring 框架应用的源码分析 知识小…

Linux 中如何使用 inotify-tools 监控目录变化 ?

当 Linux 系统目录中有新文件创建时执行命令,可以通过组合使用工具和脚本实现监控。一种常见的方法是使用 inotify-tools,这是一个允许您监视文件系统事件的实用程序,与 shell 脚本一起使用。 Step 1: 安装 inotify-tools 首先,…

vid2vid-zero:使用Stable Diffusion进行零样本视频编辑

Paper: Wang W, Jiang Y, Xie K, et al. Zero-shot video editing using off-the-shelf image diffusion models[J]. arXiv preprint arXiv:2303.17599, 2023. Introduction: Unreleased Code: https://github.com/baaivision/vid2vid-zero 目录 一. 预备知识1. diffusion 引导…

AI 大爆发时代,音视频未来路在何方?

AI 大模型突然大火了 回顾2024年,计算机领域最大的变革应该就是大模型进一步火爆了。回顾下大模型的发展历程: 萌芽期:(1950-2005) 1956年:计算机专家约翰麦卡锡首次提出“人工智能”概念,标志…

蓝桥杯训练—完美的代价

文章目录 一、题目二、示例三、解析四、代码 一、题目 回文串,是一种特殊的字符串,它从左往右读和从右往左读是一样的。现在给你一个串,它不一定是回文的,请你计算最少的交换次数使得该串变成一个完美的回文串。 交换的定义是&am…

雷电9最新版安装Magisk+LSPosd(新手速通)

大家好啊!我是NiJiMingCheng 我的博客:NiJiMingCheng 在安卓系统的定制与拓展过程中,获取 ROOT 权限以及安装各类框架是进阶玩家常用的操作,这可以帮助我们实现更多系统层面的个性化功能。今天,我将为大家详细介绍如何…

【25】Word:林涵-科普文章❗

目录 题目​ NO1.2.3 NO4.5.6 NO7.8 NO9.10 NO11.12 不连续选择:按住ctrl按键,不连续选择连续选择:按住shift按键,选择第一个,选择最后一个。中间部分全部被选择 题目 NO1.2.3 布局→纸张方向:横向…

ESP8266-01S、手机、STM32连接

1、ESP8266-01S的工作原理 1.1、AP和STA ESP8266-01S为WIFI的透传模块,主要模式如下图: 上节说到,我们需要用到AT固件进行局域网应用(ESP8266连接的STM32和手机进行连接)。 ESP8266为一个WiFi透传模块,和…

Vscode:问题解决办法 及 Tips 总结

Visual Studio Code(简称VSCode)是一个功能强大的开源代码编辑器,广泛用于各种编程语言和开发场景,本博客主要记录在使用 VSCode 进行verilog开发时遇到的问题及解决办法,使用过程中的技巧 文章目录 扩展安装失败调试配…

Comment(爆破+git泄漏+二次注入)

通过爆破密码的后三位,获得账号为:zhangwei666 F12查看控制台 使用bugscanteam的githack工具,下载泄漏的源码,根据控制台的提示,完整源码还在历史的commit中 git log –reflog 查看历史记录 查看最新的提交记录&#…

物联网网关Web服务器--Boa服务器移植与测试

1、Boa服务器介绍 BOA 服务器是一个小巧高效的web服务器,是一个运行于unix或linux下的,支持CGI的、适合于嵌入式系统的单任务的http服务器,源代码开放、性能高。 Boa 嵌入式 web 服务器的官方网站是http://www.boa.org/。 特点 轻量级&#x…

vim文本编辑器

vim命令的使用: [rootxxx ~]# touch aa.txt #首先创建一个文件 [rootxxx ~]# vim aa.txt #vim进入文件aa.txt进行编辑 vim是vi的升级版,具有以下三种基本模式: 输入模式(编辑模式) 点击i进入编辑模式 (说明…

MYSQL主从同步----1、基于binlog 2、基于gtid

目录 前提(无论是基于binlog还是基于gitd) 一、对MySQL主从同步的了解 1、MySQL支持的复制类型 2、为什么要做主从复制 3、主从复制原理---面试会考 二、基于binlog的主从同步 1、主库上的操作 1)配置文件 2)备份数据库&am…

opencv笔记2

图像灰度 彩色图像转化为灰度图像的过程是图像的灰度化处理。彩色图像中的每个像素的颜色由R,G,B三个分量决定,而每个分量中可取值0-255,这样一个像素点可以有256*256*256变化。而灰度图像是R,G,B三个分量…

Hadoop•用Web UI查看Hadoop状态词频统计

听说这里是目录哦 通过Web UI查看Hadoop运行状态🐇一、关闭防火墙二、在物理计算机添加集群的IP映射三、启动集群四、进入HDFS的Web UI 词频统计🦩1、准备文本数据2、在HDFS创建目录3、上传文件4、查看文件是否上传成功5、运行MapReduce程序6、查看MapRe…

C语言二级查漏补缺

直接拿错过的选择开始补知识点 二叉树 推荐视频 基础名词讲解 根节点(Root):二叉树的顶端节点,没有父节点。子节点(Children):每个节点下面的节点。对于二叉树来说,每个节点最多…

Low-Level 大一统:如何使用Diffusion Models完成视频超分、去雨、去雾、降噪等所有Low-Level 任务?

Diffusion Models专栏文章汇总:入门与实战 前言:视频在传输过程中常常因为各种因素(如恶劣天气、噪声、压缩和传感器分辨率限制)而出现质量下降,这会严重影响计算机视觉任务(如目标检测和视频监控)的性能。现有的视频修复方法虽然取得了一些进展,但通常只能针对特定的退…

【22】Word:小李-高新技术企业政策❗

目录 题目​ NO1.2 NO3 NO4 NO5.6 NO7.8 NO9.10 若文章中存在删除空白行等要求,可以到最后来完成。注意最后一定要检查此部分!注意:大多是和事例一样即可,不用一摸一样,但也不要差太多。 题目 NO1.2 F12Fn&a…