9. css属性

发布时间：2020-12-14 06:33:35 所属栏目：Java 来源：网络整理

导读：CSS细化知识点总结 1. 行内样式: 只对它所修饰的元素起作用语法：style=”属性1：值1;属性2：值2...属性n:值n” 2. 样式的优先级：当有多个样式作用在同一元素上时，谁离元素近，就使用谁的样式，即谁离得近，谁的优先级高. 3. 长度单位em: 1em就是当前一

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属性，格式class="值"

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

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

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

????????????? ?? 3.1.给要选中的元素添加id属性，???? 格式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三个属性

技巧：

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

??????? }

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

background-position: 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.列表属性

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

11.元素分类：

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

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

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

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

display:inline

display:block

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

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

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

visibility属性，值为hidden，隐藏元素，但是会保留元素的物理空间

12.CSS定位

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

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

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

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

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

????????????????????

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

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

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

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

13.CSS浮动：float

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

right:设置向右浮动,

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

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

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

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

14.CSS的盒子模型

???? （1）内边距padding：

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

padding-left:20px ;

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

padding-right:20px ;

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

?padding-top:40px ;

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

padding-bottom:40px;

统一设置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-top:20px;

margin-bottom: 20px;

margin-left:20px;

margin-right: 20px

设置4个方向的外边距

margin: 20px;

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

?(5)块级元素居中对齐

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

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

15.CSS3的新知识

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

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

属性值

描述

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

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

属性值

描述

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

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

（4）CSS3的过度

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

transition: property duration timing-function delay;

属性值

描述

timing-function取值

描述

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

transition: width 3s ease;

}
.box:hover {
width: 500px;
}

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

精品java学习视频?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!