CSS基础总结

Posted topshark

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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属性, 格式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三个属性

技巧:

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

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

   html,body {

          height: 100%;

        }

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

background-position: center center;

 

1background-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 ;

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

                          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

                      *{

                           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:属性向框添加一个或多个阴影。

属性值

描述

h-shadow

必需。水平阴影的位置,允许负值。

v-shadow

必需。垂直阴影的位置,允许负值。

blur

可选。模糊距离。

spread

可选。阴影的尺寸。

color

可选。阴影的颜色。

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

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

属性值

描述

content-box

设置元素触发标准盒子模型

border-box

设置元素触发怪异(IE)盒子模型

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

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

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

4CSS3的过度

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

transition: property duration timing-function delay;

属性值

描述

property

指定CSS属性的name,transition效果

duration

transition效果需要指定多少秒或毫秒才能完成

timing-function

指定transition效果的转速曲线

delay

定义transition效果开始的时候

 

timing-function取值

描述

linear

规定以相同速度开始至结束的过渡效果

ease

规定慢速开始,然后变快,然后慢速结束的过渡效果

ease-in

规定以慢速开始的过渡效果

ease-out

规定以慢速结束的过渡效果

ease-in-out

规定以慢速开始和结束的过渡效果,中间匀速

 

实例:将鼠标悬停在一个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基础总结的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

Vue3基础知识总结

Vue3基础知识总结

Vue3基础知识总结

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画