CSS基础总结

CSS细化知识点总结

1.行内样式:只对它所修饰的元素起作用

语法：style=”属性1：值1;属性2：值2...属性n:值n”

2. 样式的优先级： 当有多个样式作用在同一元素上时，谁离元素近，就使用谁的样式，即谁离得近，谁的优先级高.

3. 长度单位em:1em就是当前一个字体的尺寸，text-indent: 2em;让文本缩进2个字符

4. 颜色的三种表示法：

1.rgb颜色表示法：rgb(red,green,blue)，其中三个参数代表三种颜色的强度，值是[0,255]

2.十六进制表示法：用十六进制的值表示颜色，#RRGGBB

3.英文单词表示法：用英文单词表示颜色，例如红色是red

5.基础选择器：1. 标签选择器：用元素名称作为选择器，选择出网页上所有名称匹配的元素

2.类选择器使用分2步：

2.1.给要选中的元素添加class属性， 格式

2.2.声明类选择器，类选择器名称:.class属性值

类选择器可以选出多个元素，它们的类名要相同

3. ID选择器使用分2步：

3.1.给要选中的元素添加id属性， 格式

3.2.声明ID选择器，ID选择器名称:#id属性值

按h5的标准，每个元素的id都是唯一的，ID选择器只能选出一个元素

4. 通配符选择器*:选出网页上所有的元素

6.关系选择器：1. 交集选择器:由2个选择器直接构成,选择的元素范围是它们各自的元素的公共部分,即交集

2. 并集选择器:由多个选择器通过逗号连接在一起,这些元素可以是任意的基础选择器，并集选择器选择的元素范围是所有选择器选出的元素的并集(合并在一起)

3. 后代选择器:选出参考元素的所有后代元素，

语法：E F，即选出所有E选择器匹配元素的所有后代F元素(包含儿子和孙子)

4. 亲子选择器:选出参考元素的所有亲子元素，

语法：E>F，即选出所有E选择器匹配元素的所有直接儿子元素F(不包含孙子元素)

7.属性及伪类选择器：1.属性选择器:根据元素的属性来选择元素

语法1： [attr]:选择网页上具有attr属性的所有元素，不用管attr属性的值

语法2：E[attr]:选择具有attr属性的所有E元素,不用管attr属性的值

语法3：E[attr=value]:选择具有attr属性且属性值是value的所有E元素

语法4：[attr=value]:选择具有attr属性且属性值是value的所有元素

注意：如果属性值value没有/及：等特殊字符，那么value可以不用双引号包裹

2. 伪类选择器:

2.1.:active:鼠标在元素上按下时的状态

2.2. :hover:鼠标悬浮(停在上面)在元素上的状态

8.选择器的优先级：1.简单选择器优先级顺序: !important>id选择器>类选择器>标签选择器>通配符选择器 如果在简单选择器里的某个样式上加了!important，那么此时它的优先级是最高的

2. 当修饰元素的选择器是复合选择器时，先比较id选择器出现的次数，谁的id选择器的次数多，谁的优先级高；在id选择器次数相同情况下，再比较类选择器的次数，谁的类选择器的次数多，谁的优先级高

9. css属性

背景属性

可以使用background属性来代替background-image, background-repeat, background-position三个属性

技巧：

设置背景图片水平和竖直方向都居中

1)将html和body的高度都设为100%

2)设置背景图片的位置为50% 50%或者center center

（1）background-repeat：设置背景图片重复，默认值是repeat(在水平和竖直方向都平铺)

* repeat-x：在水平方向平铺

* repeat-y：在竖直方向平铺

* no-repeat:不平铺，只显示一张

（2）background-position: center center; 背景图片居中,默认只能水平居中

（3）background-attachment: fixed; 将背景图片固定，不会随着文档滚动而消失

文本属性

（1） opacity：设置不透明度,范围是[0,1],1表示完全不透明，最清楚，0表示完全透明，元素就隐藏了

（2） font-style: italic; 字体风格,italic为斜体

（3） font-weight: bold；字体粗细 ,bold和bolder都是加粗

（4） text-decoration: line-through；text-decoration:文本装饰，可以定义文本的下划线，上划线或中划线

（5） letter-spacing: letter-spacing:字与字之间的间距

（6） height: 50px;line-height: 50px; 当元素内的行高和高度相同时，元素内的文本就能在竖直方向上居中

（7） text-align: text-align:设置块级元素内的文本的水平对齐方式

（8） overflow: hidden:超出元素框的内容会被修剪，看不到了

scroll:多余的内容能够看到，会出现滚动条

auto:自动适应，如果元素高度不够，则会出现滚动条，否则没有滚动条

10.列表属性

有序列表ol>li

list-style-type: upper- alpha:列表项的符号是大写英文字母

upper- roman:列表项的符号是大写罗马字母

11.元素分类：

(1) 块级元素：独占一行的元素，不能和相邻元素共享一行，例如：h1-h6,p，div,ol,ui,li,pre,table等

(2) 行内元素：能和相邻元素共享一行的元素，例如：span,a,img等

特点：不要对行内元素设置宽和高，设了也没用,宽和高自动适应内容,img除外(它可以设置宽高)

(3)行内元素和块级元素的转换：

块级元素转换为行内元素:给块级元素设置display:inline

行内元素转换为块级元素:给行内元素设置display:block

（4）行内块级元素：既有行内元素的特点(可以和相邻的行内元素共享一行)，

又有块级元素的特点(可以设置宽和高，以及padding和maring)

将元素设置为行内块级元素：display:inline-block

（5）把元素隐藏起来，有两种方式：

方式1：给元素设置display属性，值为none,隐藏元素且不会保留元素的物理空间，与它相邻的元素会挤过来

方式2：给元素设置visibility属性，值为hidden，隐藏元素，但是会保留元素的物理空间

12.CSS定位

（1）绝对定位（position: absolute;）：设置绝对定位，此时元素会脱离文档流 ,它原来的物理空间会被相邻的元素占有.，绝对定位的元素在移动过程中是参照离它最近的父元素进行平移

left:让元素向右移动多少像素

top:让元素向下移动多少像素

绝对定位的元素会脱离文档流，与它相邻的元素会挤过来

固定定位：特殊的绝对定位，它的参照物是body元素(网页上所有的元素的祖先元素)

（2）相对定位:参照元素当前的位置进行定位，相对定位元素需要配合left,right,top,bottom来定位，相对定位的元素没有脱离文档流，在定位过程中保留了物理空间 ，不会被相邻元素占有

绝对定位，参照物是离他最近的父元素

相对定位:参照元素当前的位置进行定位

（3）Z-index属性：在z轴(视觉线)上的堆叠顺序，值越大的就越在前面，离我们的眼睛越近

13.CSS浮动：float

left: 设置元素向左浮动,参照父元素的左上角,向父元素的左边移动

right:设置向右浮动,

设置了浮动的元素的物理空间消失了，会被相邻的元素占有--浮动定位的元素脱离了文档流

注意：浮动定位的元素也脱离了文档流

清除浮动：让浮动的元素再次回到文档流中，重新拥有物理空间，清除浮动的步骤

1.在最后一个浮动元素的后面添加一个空div

2.给空div设置clear样式，值是left/right/both，left是清除左边的浮动元素 right清除向右浮动元素 both是清除两边的浮动元素

14.CSS的盒子模型

（1）内边距padding：

左内边距，即内容到左边框的距离

padding-left:20px ;

右内边距，即内容到右边框的距离

padding-right:20px ;

上内边距，即内容到上边框的距离

下内边距，即内容到下边框的距离

统一设置4个方向的内边距

padding: 40px;

（2）边框boder：

设置4个方向的边框，值：边框宽度 样式 颜色 dashed:虚线边框 solid:实线边框

border-top:20px solid red;

border-bottom: 20px solid red;

border-left:20px solid red;

border-right: 20px solid red;

统一设置4个方向的边框

border:10px solid red;

（3）外边距margin

margin-left:20px;

margin-right: 20px

设置4个方向的外边距

margin: 20px;

(4)清除默认样式，充分利用整个body

*{

margin: 0;

padding: 0;

}

(5)块级元素居中对齐

清除默认样式，充分利用整个body

*{

margin: 0;

padding: 0;

}

div{

设置块级元素左右的margin为auto，会自动适应父元素，在水平方向上居中

margin:值1(上下的margin) 值2(左右的margin)

margin:0px auto;

15.CSS3的新知识

（1）设置圆角边框：border-radius: 20px;

（2）box-shadow：属性向框添加一个或多个阴影。

注意：扩展：text-shadow添加文字阴影

（3）box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

标准盒子模型：width和height属性设置的是内容区的宽高。

怪异盒子模型：width和height属性设置的是内容区、内边距和边框的宽高。

常见的怪异盒子标签：input[type=‘submit‘]和input[type=‘reset‘]。

（4）CSS3的过度

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

transition: property duration timing-function delay;

实例：将鼠标悬停在一个div元素上，实现在3秒内实现盒子的宽度从100px到500px：

.box { ???width: 100px; ???height: 100px; ???????transition: width 3s ease;}.box:hover { ???width: 500px;}

实例：将鼠标悬停在一个div元素上，实现在4秒内实现盒子的宽度从100px到500px，并且在10秒内改变盒子背景颜色：

 1 .box { 2 ?????width: 100px; 3 ?????height: 100px; 4 ??????5 ?????transition: width 4s ease, background-color 10s linear; 6 } 7 .box:hover { 8 ?????width: 500px; 9 ?????10 }11 ?

精品java学习视频

正则表达式和文本操作：链接：https://pan.baidu.com/s/1f2As51CjLdTNDFQTbg1K6Q提取码：98b4

CSS基础总结

原文地址：https://www.cnblogs.com/topshark/p/10260892.html