CSS基础总结

Posted 2021-02-02 topshark

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;

 

（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 ;

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

                          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‘]。

（4）CSS3的过度

通过 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