0
点赞
收藏
分享

微信扫一扫

CSS基础二

邯唐情感 2022-04-03 阅读 60
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优先级

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

举报

相关推荐

CSS基础班笔记(二)

css3基础入门(二)

CSS基础知识点总结(二)

CSS基础学习第二天

第二章 前端开发基础CSS

0 条评论