CSS_CORE

该博客围绕CSS展开,介绍了复杂选择器,包括兄弟、属性、伪类和伪元素选择器;重点讲解弹性布局,涵盖概念、语法及容器和项目属性;还涉及CSS Hack、转换、过渡、动画等内容,最后阐述了CSS优化的目的、原则和代码优化方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:复杂选择器

1.兄弟选择器

兄弟元素:具有相同父级元素的平级元素

兄弟选择器,只能找弟弟,不能找哥哥

 ① 相邻兄弟选择器

   选择器1+选择器2{ }

获取紧紧挨在某元素后面的兄弟元素

 ②通用兄弟选择器

  选择器1~选择器2{ }

 获取某元素后所有符合要求的兄弟元素

2.属性选择器

  id class style title value iwdth....

允许通过元素多附带的属性,及其值来匹配页面属性,很精准

①[attr]   attr代表任意属性

  [id]{ }       [id][title]{ }

匹配页面中所有带attr这个属性的元素

②elem[attr]

  p[title]{}   p[id][title][class]....{ }

匹配元素中所有带attr属性的elem元素

③elem[attr=value]

  div[title="name"][classs="c"]{ }

匹配页面中带有attr属性。并且值为value的elem元素

④模糊属性值匹配

[attr ^= value]{ } 匹配attr的值以value开头的元素

[attr $= value]{ } 匹配attr的值以value结尾的元素

[attr *= value]{ } 匹配属性值中,有value的元素

[attr ~= value]{ } 匹配属性值中,有value这个独立单词的元素

3.伪类选择器

  :link  :visited  :hover  :active  :focus  已经学过的伪类

①目标伪类(锚点)

   选择器:target{ }            让被激活的锚点,应用样式

②结构伪类

elem:first-child{ }   代表两个条件

 匹配elem的父元素的第一个儿子(elem的大哥)  这个大哥必须是elem元素

elem:last-child{ }  

匹配elem的父元素的最后一个儿子(elem的小弟)这个最小的弟弟必须是elem元素

  elem:nth-child(n) 

匹配elem的父元素的第n个儿子(n从1开始)  这个儿子也必须是elem

③匹配空元素

   :empty{ }   空元素      空元素:没有文本,没有空格,没有其它子元素的元素

④ :only-child

:only-child    匹配,当前元素是其父元素的唯一的子元素

⑤否定伪类

   :not(selector)  

   a:not(:first-child){ color:#ff0;}  /* 除了第一个a标签,其它a的字体都变成黄色 */

   a:not(:nth-child(3)){color:#f0f;}   /*除了第三个a标签,其它a的字体都变成蓝*/

4.伪元素选择器

 ①内容伪元素

1.  ::first-letter{ } :first-letter{ }         匹配首字符的样式

2.  ::first-line{ }  或 :first-line{ }      匹配首行的样式,

当前行和首字符冲突时,以首字符未准

3.  ::selection{ }  必须是两个 :       匹配选中部分的文字样式

  注意:只能改变字体颜色和背景颜色

②伪元素选择器,内容生成   

使用CSS,添加html元素,称之为伪元素内容生成

  :before::before    匹配到某个元素的内容区域的最前面,添加一个内容

      content:添加文本或者图片

      display:是设置这个添加的内容的显示规则

  :fater 或 ::after  匹配到某个元素的内容区域的最后面,添加一个内容

注意:content中,只能添加文本或者图片

我们可以理解为在内容区域中最前面或者最后面,添加一个元素,这个元素的显示方式,由display来设定

③伪元素内容添加,可以解决的问题

  1. 外边距溢出(添加空table)

 #parent::before{

content:"";

display:table;

     }

  1. 解决高度坍塌

#d1:after{

content:"";

display:block;

clear:both;   }

二:弹性布局  (重点********)

1.什么是弹性布局

  弹性布局是一种布局方式,

 主要解决某个元素中子元素的布局方式,为布局提供很大灵活性

2.弹性布局相关的概念和名词解释

1.容器              要发生弹性布局的子元素,他们的父元素称之为容器

      容器要设置属性 display:flex;

2.项目      要发生弹性布局的子元素们,称之为项目

                   就是设置了 display:flex; 那个元素的,子元素们

3.主轴           项目们在容器中排列的方向,就是主轴

     如果项目横向排列,x轴就是主轴;

     如果项目纵向排列,y轴就是主轴

 项目们的排列顺序,靠主轴的起点和主轴的终点来定义

4.交叉轴    与主轴垂直相交的一条轴,叫做交叉轴

   项目们在交叉轴上的对齐方式,是交叉轴的起点和终点

3.语法

  display:   写在父元素中

    取值:1. flex 将块级元素设置为容器

                     2. inline-flex 将行内元素设置为容器

 特点:

  1.弹性项目,默认x轴是主轴,主轴起点在左侧(块级元素横向排列的第二个解决方案)

  2.项目的float/clear/text-align/vertical-align 属性失效

  3.每个项目可以自由的设置尺寸

4.容器的属性

①主轴的方向

  flex-direction

取值:

row(默认值)

主轴是x轴,主轴起点是左侧

row-reverse

主轴是x轴,主轴起点是右侧

column

主轴是y轴,主轴起点是顶端

column-reverse

主轴是y轴,主轴起点是底部

②设置项目换行

  flex-wrap

取值:

nowrap (默认值)

容器空间不够,也不换行,项目自动缩小

wrap

空间不够就换行

wrap-reverse

换行并反转

③主轴方向,项目换行的缩写

  flex-flow:      取值:direction wrap

④定义项目在主轴上的对齐方式

   justify-content

取值

flex-start(默认值)

以主轴为起点对齐

flex-end

以主轴为终点对齐

center

在主轴上居中对齐

space-between

主轴两端对齐,两端无空白

space-around

每个间距大小相同

⑤项目在交叉轴上的对齐

  align-items

取值

flex-start

交叉轴起点对齐

flex-end

交叉轴终点对齐

center

交叉轴居中对齐

baseline

交叉轴基线对齐(主轴起点)

stretch

前提,项目不写高,占满交叉轴上所有的空间

5.项目的属性

order     定义项目的排列顺序

    取值:无单位整数,值越小,越靠近主轴起点

flex-grow  定义项目的放大比例 ,如果容器有足够大的剩余空间,项目将按比例放大

  取值:  无单位的数字,  默认值 0  ,不放大

flex-shrink   定义项目缩小比例,容器空间不够时,项目该如何缩小

  取值:无单位数字  默认值 1  ,取值越大,缩小比例越大 ,  0 不缩小

align-self  设置此项目在交叉轴上的对齐方式,不影响其他项目

  取值:

flex-start

交叉轴起点对齐

flex-end

交叉轴终点对齐

center

交叉轴居中对齐

baseline

交叉轴基线对齐

stretch

前提,项目不写高,占满交叉轴上所有的空间

auto

使用容器定义的align-items的值

三:CSS  Hack   

div{

  background:-webkit-linear-gradient(....);

  background:-o-linear-gradient(....);

  background:-ms-linear-gradient(....);

  background:-moz-linear-gradient(....);

}

由于不同的浏览器对css的解析认知不同,会导致同一份css在不同浏览器中生成页面效果不同

面对这种情况,开发人员需要针对不同浏览器写不同的css

这个行为,就叫做css hack

tmooc有css hack相关拓展视频

四:转换  (重点-********)

1.什么是转换

  改变元素在页面中的位置,大小,角度以及形状

 2D转换。只在x轴和y轴发生的转换效果

 3D转换,增加了z轴的转换效果,3D是模拟出来的

2.转换的属性

  transform: 转换函数1 转换函数2......

取值  1. none 默认值,无任何转换效果

      2. transform-function 转换函数  

          表示1个或者多个转换函数,如果是多个转换函数,每个函数之间用空格分开

         transform:tranlate(400px) rotate(90deg);

学习转换就是学习转换函数

3. 转换原点

  transform-origin

取值: 1. 以px为单位的数字  2.  %

       3. 关键字  x(left/center/right) y(top/center/bottom)

  取值个数: 2个值,原点在x轴和y轴上的位置

             3个值,原点在x轴,y轴,z轴上的位置

默认值: center  center

4. 2D转换

①位移(改变元素的位置)

    transformtranslate(参数)

参数: 1. translate(x)等同于translateX(x)   指定元素在x轴上的位移距离

              + 往右   - 往左

       2. translate(x,y)          指定元素在x轴和y轴上的位移距离

              x:+ 往右  - 往左      y:+ 往下  - 往上

       3. translateX(x)

       4. translateY(y)

 取值: 1. 以px为单位的数字   2.  % 百分比(自身宽度的百分比)   

面试题

一个div200px*200px。使用css操作,如何在浏览器窗口不断变化的情况下,让该div永远在窗口中心显示

解决方案:  position:absolute;top:50%;left:50%;transform:reanslate(-100px,-100px);

②缩放(改变元素的尺寸)

   transformscale(value)

取值: 一个值,value >=1 x轴和y轴都放大的倍数

               0 < value < 1 x轴和y轴都缩小

               -1<value<0 x轴和y轴都缩小,并反转180度

               value<=-1 x轴和y轴放大,并反转180度

       两个值,scale(x,y) 分别设置x轴和y轴的放大比例

                                     scaleX(x) 单独设置x轴    

                                     scaleY(y) 单独设置有轴

③旋转(改变元素的角度)

    transformrotate(180deg)

取值:  + 顺时针旋转     - 逆时针旋转

注意:旋转原点会影响效果,旋转是连同坐标轴一起旋转的,会影响旋转之后的移动方向

④倾斜

 1.skew(x)等同于skewX(x)    让元素向着x轴发生倾斜,实际上改变的是y轴的角度

     x:+ 逆时针倾斜  - 顺时针倾斜

   

 2.skewY(y)     让元素向着y轴发生倾斜,实际上改变的是x轴的角度

     y:+  x轴顺时针倾斜   -  x轴逆时针倾斜   

5. 3D转换----3d都是模拟的

①透视距离

   模拟人的眼睛到3D转换元素之间的距离,透视距离不同,看到的效果不同

  perspective:距离       设置透视距离 ,此属性要加载到3d转换元素的父元素上

②3D旋转

  属性:transform:

  取值:1. rotateX(xdeg)  以x轴为中心轴旋转,烤羊,老式爆米花机

        2. rotateY(ydeg)  以y轴为中心轴旋转,旋转木马,钢管舞

        3. rotateZ(zdeg)  以z轴为中心轴旋转,风车,摩天轮

             4. rotate3D(x,y,z,ndeg)    x,y,z 取值0 代表这条轴不参与旋转

                                                                   取值 >0 表示该轴参与旋转    

五:过渡(重点*****)

1.什么是过渡

让css属性的值,在一段时间内平缓变化的效果

2.语法

①指定过渡的属性

    transition-property:

取值:  直接写css的属性,多个属性之间用空格分开

       all  所有支持过渡的属性,都参与此次过渡效果

支持过渡的属性
    1.颜色值  2.大多数取值为数字的属性   3.阴影  4. 转换 transform  5. 显示visibility

②指定过渡时长

    transition-duration    指定用多长时间完成此次过渡操作

取值: s/ms 为单位的数字     1s=1000ms

③过渡时间曲线函数

    transition-timing-function

取值: 1. ease  默认值,慢速开始,中间变快,慢速结束

       2. linear 匀速

            3. ease-in 慢慢开始,快速结束

            4. ease-out 快速开始,慢慢结束

            5. ease-in-out 慢速开始,慢速结束,中间先加速后减速

④过渡的延迟时间

    transition-delay:    让过渡效果,延迟多少时间执行

取值: s/ms 为单位的数字

⑤过渡代码的编写位置

  原始选择器中,过渡效果有去有回

   :hover中,过渡效果有去无回

⑥简写方式

    transition:property duration timing-function delay;

最简方式: transition:duration;

六:动画

1.什么是动画

  元素从一种样式逐渐变为另外一种样式,

 其实就是多个过渡效果放到一起

2.使用关键帧来控制动画的每一个状态

  关键帧     1. 动画执行的时间点   2.在这个时间点上的样式

3.使用动画

①使用关键帧定义动画

   @keyframes 动画名称{

                  0%{ 样式}  ….50%{ 样式}  …. 100%{样式}

         }

eg:

@keyframes liangjump{

  0%{transform:translate(0px,0px);}

  20%{transform:translate(0px,200px);}

  40%{transform:translate(0px,0px);}

  60%{transform:translate(0px,150px);}

  80%{transform:translate(0px,0px);}

  100%{transform:translate(0px,110px);}

}

②调用动画

 1. 调用动画名称         

      animation-name:动画名称

 2. 设置动画执行时间     

     animation-duration:s/ms

 3. 设置动画的时间曲线函数 

      animation-timing-function

 4. 设置动画延迟播放      

      animation-delay2s;

③动画的其它属性

  animation-iteration-count:      设置动画的播放次数

取值:  1. 具体次数,无单位数字  
        2. infinite 无限

  animation-direction:          设置动画的播放顺序

取值:  1. nomal 默认 0%~100%

        2. reverse   100%~0%

        3. alternate  轮流播放,第一遍正向,第二遍逆向,…..

  动画的简写方式

animation:name duration timing-function delay count direction
最简方式: animationname duration;

animation-fill-mode:          设置动画,播放前后的状态

取值: 1. backwards  动画播放之前的延迟时间内,显示第一帧

       2. forwards  动画播放完成后,保持在最后一帧

       3. both  同时使用backwards和forwards

       4. none  默认值,不填充

  animation-play-state      设置动画的播放状态

取值:  1. paused  暂停   2. running  播放

5.动画的兼容性

如果要兼容低版本浏览器,需要在动画声明的时候加前缀

@keyframes 动画名称{}

@-webkit-keyframes 动画名称{}

@-o-keyframes 动画名称{}

@-moz-keyframes 动画名称{}

@-ms-keyframes 动画名称{}

6.开发中使用的动画样式

使用animation.css中预定义好的动画

七:CSS优化

1.CSS优化的目的

 1. 减少服务器的压力    

 2. 提升用户体验

2.CSS优化原则

 尽量减少http的请求个数, .css  .js  .jpg

 在页面顶部,引入css文件

 将css和js文件放到外部独立文件中

2.CSS代码优化

 1. 合并样式(能简写,就不分开写,能写群组,就不单写)

 2. 缩小样式文件的大小,(能重用的样式,尽量重用)

 3. 减少样式重写

 4. 避免出现空的href和空的src

 5. 选择更优的样式属性

 6. 代码压缩

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值