CSS学习笔记

Posted 2021-06-28 coderkey

四，复合选择器

1，后代选择器

（1）含义：

后代选择器又称包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开。当标签发生嵌套时，内层标签就成为外层标签的后代。

（2）语法：

元素1/选择器 元素2 { 样式声明 }

（3）例如：

  ul  li  {   color: red }    /*  选择ul里面所有的li标签元素 */

（4）注意：

上面语法表示选择（父级）元素1里面的所有（子集）元素2（后代元素）。

2，子元素选择器

（1）含义：

子元素选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

（2）语法：

元素1/选择器 > 元素2 { 样式声明 }

（3）例如：

 div > p   {   color: red }    /*  选择div里面最近一级p标签元素 */

（3）注意：

上面语法表示选择元素1里面的所有直接后代（子元素）元素2。

3，并集选择器

（1）含义：

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

（2）语法：

元素1/选择器,元素2/选择器 { 样式声明 }

（3）例如：

  div, p   {   color: red }    /*  选择div和p标签元素 */

（4）注意：

元素1和元素2中间用英文逗号隔开，逗号理解为和的意思。

4，链接伪类选择器

（1）含义：

伪类选择器用于向某些选择器添加特殊的效果，或选择第一个，第n个元素。用冒号":"表示比如 :hover,:first-child

（2）语法：

a:link /* 选择所有未被访问的链接 /
a:visited / 选择所有已被访问的链接 /
a:hover / 选择鼠标经过时的链接 /
a:active / 选择鼠标按下未弹起的链接 */

---

五，元素三大显示模式

1，块级元素

元素种类：

（1）常见的块级元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等。

特点：

（1）div自己独占一行。
（2）高度，宽度、外边距及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%。
（4）是一个容器及盒子，里面可以放行内或者块级元素。

注意：

（1）文字类的元素内不能使用块级元素。
（2）<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别不能放<div>.
（3）同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。

2，行内元素（内联元素）

元素种类：

（1）常见的行内元素有<a>,<strong>,<b>,<i>,<del>,<s>,<ins>,<u>,<span>等。

特点：

（1）相邻行内元素span在一行上，一行可以显示多个。
（2）不能直接设置高、宽属性。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或者其他行内元素。

注意：

（1）a标签里面可以放块级元素，比较特殊。

3，行内块元素

元素种类：

（1）在行内元素中有几个特殊的标签<img/>,<input/>,<td>,他们同时具有块元素和行内元素的特点，称他们为行内块元素。

特点：

（1）和相邻行内元素（行内块）在一行上，但之间会有空白缝隙。一行可以显示多个（行内元素特点）。
（2）默认宽度就是它本身内容的宽度。（行内元素特点）。
（3）高度，宽度、外边距及内边距都可以控制。（块级元素特点）。

4，元素显示模式转换

转换为块元素：

 display:  block;

转换为行内元素：

display:  inline;

转换为行内块元素：

display:  inline-block;

---

六，背景属性

可以设置背景颜色、背景图片、背景平铺、背景图片位置，背景图像固定等。

1，背景颜色

（1）含义：

background-color属性定义了元素的背景颜色。

（2）语法：

background-color: 颜色值；

（3）注意：

一般情况下元素背景颜色默认值transparent（透明），也可以手动指定背景颜色为透明色。

2，背景图片

（1）含义：

background-image属性描述了元素的背景图像。用于装饰性的小图片或者超大的背景图片。

（2）语法：

background-image: none| url (url图片路径)；

（3）参数值：

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像。

3，背景平铺

（1）含义：

在html页面上对背景图像进行平铺，可以使用background-repeat属性。

（2）语法：

  background-repeat: repeat | no-repeat | repeat-x | repeat-y;

（3）参数值：

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）。
no-repeat	背景图片不平铺。
repeat-x	背景图片在水平X轴（横向）上平铺。
repear-y	背景图片在垂直Y轴（纵向）上平铺。

4，背景图片位置

（1）含义：

利用background-position属性可以改变图片在背景中的位置。

（2）语法：

background-position: x y ; /* x坐标 y坐标 */

（3）参数值：

参数值	说明
length	百分比
position	top / center / bottom /left / center / right 方位名词。

（4）注意：

1，参数是方位名词：

（1）如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和 top left效果一样。
（2）如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

2，参数是精确单位：

（1）如果参数值是精确坐标，那么第一个肯定是X坐标，第二个一定是Y坐标。
（2）如果只指定一个数值，那该数值一定是X坐标，另一个默认垂直居中（值跟X坐标一样）。

3，参数是混合单位：

（1）如果指定的两个值是精确单位和方位名词混合使用，则第一个值是X坐标，第二个值是Y坐标。

5，背景图像固定

（1）含义：

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

（2）语法：

  background-attachment: scroll  |  fixed

（3）参数值：

参数值	作用
scroll	背景图像是随对象内容滚动。
fixed	背景图像固定。

6，背景属性复合写法

（1）顺序：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。

（2）例如：

  background: red  url (image.jpg)   repeat-y   fixed   top;

7，背景色半透明

（1）含义：

CSS3为我们提供背景颜色半透明的效果。

（2）语法：

background: rgba(0, 0, 0, 0.3); /* 最后一个参数是alpha透明度，取值范围在0~1之间*/

---