css笔记

复合选择器

• 多元素选择器：选择器1,选择器2{属性:值;}
• 后代元素选择器：E F{属性:值;}
• 子元素选择器：E > F{属性:值;}
• 相邻元素选择器：E + F{属性:值;}

！Important 属性

内容介绍

一、什么是 important

二、!important 在 CSS 中的作用

三、语法格式

一、什么是 important

important 在英文中含义是“重要的”意思

二、!important 在 CSS 中的作用

它主要是用来提升属性的女重。其属性的权重值无穷大

三、语法格式

使用！Important属性的语法格式

属性：值！Important

P{

加了！Important的属性它的权重值会变得无穷

1
2
3
4
5

Color:#foo！Important

P1{Color:#foo ;

#P2{Color:#foo；

一定要注意！import 的语法规则：

Ø 正确的写法

n 属性：值 ！important;

Ø 错误的写法

n 属性：值；！important; （不能将！important 写在分号的外面 一定要写在分号的里面）

n 属性：值 important; （！不能省略）

使用！important 一定要注意以下几点：

1，！important 它是提升的属性的权重，而不是提升选择器的权重！

上图的效果：

文本的颜色是听加了！important 的属性， 文本的大小是听 ID 选择器的 因为！important 它只是提升了属性的权重并没有提升选择器的优先级。

2，！important 它不能提升继承过来的权重!

浮动简介

需求:

能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度!让多个元素排在同一行:行内元素的特性

给这些元素设置宽高:块级元素的特性

在标准文档流中的元素只有两种:块级元素和行内元素。如果想让一些元素既要有块级

元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。

浮动可以让元素脱离标准文档流就可以实现让多个元素排在同一行并且可以设置宽高!

浮动它是通过一个浮动属性来实现

float:这个属性有两个值left(向左浮动)向左移动、right(向右浮动)

向右移动浮动元素的特性:

l 浮动元素它脱离标准文档流它不再占用空间了

l 我们可以把浮动元素理解为“漂”

l 浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住

l 浮动元素它遇到了父元素的边框然后就停止了浮动

l 浮动元素它还会遇到上一个浮动元素后就停止了浮动

l 浮动元素浮动以后 其父元素不会再包裹着浮动元素

l 我们将行内元素进行浮动以后 那么这个行内元素它会变成块级元素

display

• block 转换为块级元素
• inline 转换为行内元素
• none 隐藏元素

position

css中定位分为3种：

• position:fixed 固定定位
• position:relative 现对定位
• position:absolute 绝对定位
  注意：
  在使用定位属性时，一定要配合定位的坐标来使用
  left:定位元素离左边多远
  right:定位元素离右边多远
  top:定位元素离上边多远
  bottom:定位元素离下边多远

  一、固定定位

  position:fixed
  固定定位：它时相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素现实的位置不会改变！
  特点：
  固定定位元素它脱离了标准文档流
  固定定位元素的层级比标准文档流里面的元素要高，所以固定定位元素它会压盖住标准文档里面的元素
  固定定位元素它不再占用空间
  固定定位元素它现实的位置不会随着浏览器滚动而滚动

二、相对定位

相对定位相当于“自己”来定位；

1

语法：position: relative;            

特点：

1.相对定位元素它没有脱离标准文档流

2.相对定位元素没有设置定位坐标，那么相对定位元素还在原来位置

3.相对定位元素设置了定位坐标，就会在原位置留下一个空白元素

4.相对定位元素会将标准文档流中的元素压盖住

5.相对定位元素的定位值可以为负数

/设置定位坐标/

Lift: 100px;

注意：

/相对定位属性/Position: relative;

相对定位元素一般很少单独使用，主要是用来配合“绝对定位”元素来使用

三、绝对定位

1
2

语法:
position:absolute;

三、特点

特点：

 绝对定位元素它脱离了标准文档流。

 绝对定位元素它不再占用空间。

 绝对定位元素它会压盖住标准文档流中的元素。

 绝对定位元素他会相对于其祖先定位元素来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位，但是我们一般只会给其祖先定位元素设置相对定位属性“子绝父相”子元素设置绝对定位父元素设置相对定位。

结构题伪类

二、结构伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

选择器                    功能

1.E:first-child         匹配第一个孩子

2.E;last-child          匹配最后一个孩子

3.E:nth-child(n)        匹配第n个孩子

4.E:nth-child(2n)或     匹配偶数的孩子

E:nth-child(even)

5. E:nth-child(2n+1)     匹配奇数的孩子

E;nth-child(odd)

6.E:only-childo         匹配有且只有一个孩子

border-collapse

简介
这个属性主要是用于来合并边框线 其值为：collapse

1

border-collapse : collapse;

伪元素

1
2
3
4
5
6
7
8
9

选择器                功能

:first-letter         操作当前元素中第一个字

:first-line           操作当前元素中第一行

:beforerw             在之前插入，在一一个盒子内部的最前面

:afterp               在之后插入，在一个盒子内部的最后面

text-shadow

text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色。

注释: text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。

描述:

●文字阴影可以有多组值，多组之间用逗号隔开就可以。

●水平阴影正值阴影在右边，负值在左边。

●垂直阴影正值在下边，负值在上边。

●模糊强度，值越大越模糊。

盒子阴影

内容介绍

一、Box-shadow

二、盒子阴影

三、图片阴影

一、Box-shadow

水平方向阴影、垂直方向阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影。

二、盒子阴影
border:1px solid#000;/*给这个盒子设置阴影语法格式:
box-shadow: 水平方向的阴影 垂直方向的阴影 阴影的清晰度 阴影的大小 阴影的颜色 阴影的位置
1.盒子阴影可以有多组值，多组之间用逗号隔开。

2.水平阴影正值阴影在右边，负值在左边。

3.垂直阴影正值在下边，负值在上边。

4.模糊尺寸，值越大越模糊。

Box-shadow:(两组阴影)3px 3px 3px 3px #f00,-4px -4px 2px 2px #DA70D6（颜色）0 inset;}

三、图片阴影

Border-radius

Border-radius：左上 右上 右下 左下

透明度

CSS 透明度

只要是颜色，都可以用透明度

Rgba（红色，绿色，蓝色，透明度）

a：表示透明度的意思 透明度取值：0~1之间 0表示完全透明 1表示不透明

·背景颜色透明

Background-color:rgba(255,255,255,0.3)

·文件颜色透明

Coler:rgba(255,255,255,0.3)

·边框颜色透明

Border:1px soild rgba(255,255,255,0.5)

过渡

1

transition