当前位置: 首页 > news >正文

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;}
http://www.lryc.cn/news/524158.html

相关文章:

  • pytest全局配置文件pytest.ini
  • PyTest自学-认识PyTest
  • 【专题】为2025制定可付诸实践的IT战略规划报告汇总PDF洞察(附原数据表)
  • 自旋锁与CAS
  • 数组-二分查找
  • 如何使用 Python 进行文件读写操作?
  • springcloud中的Feign调用
  • 【部署】将项目部署到云服务器
  • 2024年AI大模型技术年度总结与应用实战:创新与突破并进
  • docker离线安装及部署各类中间件(x86系统架构)
  • SuperdEye:一款基于纯Go实现的间接系统调用执行工具
  • PCL 新增自定义点类型【2025最新版】
  • Docker导入镜像
  • PyTorch使用教程(9)-使用profiler进行模型性能分析
  • SpringBoot中使用MyBatis-Plus详细介绍
  • PCL 部分点云视点问题【2025最新版】
  • 【Linux】常见指令(三)
  • 第5章:Python TDD定义Dollar对象相等性
  • nuxt3项目打包部署到服务器后配置端口号和开启https
  • MongoDB文档查询
  • 【GORM】初探gorm模型,字段标签与go案例
  • Windows下的Milvus安装秘籍:向量数据库轻松上手
  • 在GUI中添加一个Label
  • hive连接mysql报错:Unknown version specified for initialization: 3.1.0
  • Unity Shader学习日记 part5 CG基础
  • 第7章:Python TDD测试Franc对象乘法功能
  • 两级式三相光伏并网逆变器Matlab/Simulink仿真模型
  • redis性能优化参考——筑梦之路
  • Ubuntu 22.04 TLS 忘记root密码,重启修改的解决办法
  • HTML<bdo>标签