我和CSS的第二天——复合选择器、背景、块元素/行内元素

一.选择器

  1. 复合选择器:写法.nav a{ }

  2. 子元素选择器:写法.nav>a{ }。只能选择最近一级的元素。

  3. 并集选择器:写法.nav,a{ }。用于集体声明。

  4. 伪类选择器:写法例如a:link{选择所有未被访问的链接},a:visited{选择所有已被访问的链接},a:hover{选择鼠标位于其上的链接},a:active{选择活动链接},必须按照link>visited>hover>active的顺序书写。顺序简单记忆为LVHA。

  5. 在这里插入图片描述

  6. 交集选择器:写法p.one{ 用于声明既是p标签又是one类名的元素 }。

  7. 后代、链接伪类、并集是必须要掌握的!
    在这里插入图片描述

格式化对齐快捷键:
Windows: Ctrl + K + F
Windows:Shift + Alt + F
Mac: Shift + Option + F
Ubuntu: Ctrl + Shift + I
二.元素显示模式
块元素 —— block
特点:独占一行
可以设置宽度、高度、外边距、边框和内边距
宽度默认是父级容器的宽度
可以存放其他行内元素和块级元素
注意:开发时不要在文本类元素(例如p、h1~h6)中添加其他元素
在这里插入图片描述

  1. 行内元素 —— inline
    特点:相邻行内元素在一行显示,一行多个
    给行内元素设置宽高是无效的
    默认宽度是内容的宽度(被内容撑开)
    只能容纳文本或其他行内元素
    注意:链接不能再放链接
    特殊情况的链接可以存放块级元素
    3.行内块元素 —— inline-block
    特点:相邻行内元素在一行显示,一行多个(行内元素特点)
    默认宽度就是本身内容的宽度(行内元素特点)
    可以设置宽度、高度、外边距、边框和内边距(块级元素 特点)
    在这里插入图片描述

4.显示模式的转换
应用场景:让行内元素具有宽高:把行内元素转换成块元素或者行内块元素
让块元素一行显示:把块元素转换成行内块元素
代码:display: block 转换为块元素
display: inline-block 转换为行内块元素
display: inline 转化为行内元素(使用较少)
tip:
行高=高可以实现单行文字垂直居中
代码:line-height:高;
在这里插入图片描述

三.背景
1.background-color:背景颜色
属性transparent 透明的
2.background-image:背景图片
3.background-repeat:背景平铺
在这里插入图片描述

  1. background-position:背景方位名词
    在这里插入图片描述

5.背景固定
background-attachment
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述