CSS基础二

1.Emmet语法

1.1快速生成HTML结构语法

在这里插入图片描述

1.2快速生成CSS样式写法

在这里插入图片描述

1.3快速格式化代码

2.CSS的复合选择器

2.1后代选择器

在这里插入图片描述

2.2子元素选择器

在这里插入图片描述

2.3并集选择器

在这里插入图片描述

2.4链接伪类选择器

在这里插入图片描述
在这里插入图片描述

2.5 focus伪类选择器

在这里插入图片描述

2.6 后代选择器

在这里插入图片描述

3.元素的显示模式

3.1什么是元素显示模式
  • 元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>
  • HTML元素一般分为块元素行内元素两种类型
3.2块元素

在这里插入图片描述
注意:

  • 文字类的元素内不能使用块级元素
  • <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
  • 同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
3.3行内元素

在这里插入图片描述

3.4行内块元素

在这里插入图片描述

3.5元素显示模式总结

在这里插入图片描述

3.6显示元素的转换
  • display: block;(转换为块级元素)
  • display: inline;(转换为行内元素)
  • display: inline-block;(转化为行内块元素)
3.7单行文字垂直居中

解决方案:让文字的行高等于盒子的高度
原理:
在这里插入图片描述

4.CSS的背景

4.1背景颜色

在这里插入图片描述

4.2背景图片

在这里插入图片描述

4.3背景平铺

在这里插入图片描述

4.4背景位置

在这里插入图片描述

4.5背景图像固定

在这里插入图片描述

4.6背景属性复合写法

在这里插入图片描述

4.7背景色半透明

在这里插入图片描述

4.8背景总结

在这里插入图片描述

5.CSS的三大特性

5.1层叠性
5.2继承性
5.3优先级

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值