CSS3

1、CSS样式由一条条规则组成,每一条规则由选择器+声明块组成,声明块由一个个声明+{}组成,声明由CSS属性+CSS属性值构成的键值对组成
2、现有一条选择器: div li #box1,浏览器解析该选择器的顺序为从右往左,这样可以加快渲染时间,提高页面访问速度
3、学习CSS样式,要注意其默认值以及是否可继承
4、li中不能再嵌套li
5、让已经设置好宽高的div的子元素span变得和div一样大的方法:div设为相对定位,span设为绝对定位+left:0;right:0;top:0;bottom:0;

声明的优先级
选择器的特殊性:
选择器的特殊性由选择器本身组件决定,特殊性值表述为4个部分,如 0,0,0,0
一个选择器的具体特殊性如下确定:
内联声明  1,0,0,0
id选择器   0,1,0,0
类选择器,属性选择器,伪类  0,0,1,0
元素选择器,伪元素  0,0,0,1
通配符选择器 0,0,0,0
结合符(逗号)对选择器特殊性没有一点贡献
继承没有特殊性,甚至连0特殊性都没有(0特殊性比没有特殊性强)
特殊性1,0,0,0大于所有以0开头的特殊性(不进位)
若多个规则与同一个元素匹配,而且有些声明互相冲突时,特殊性越大的越占优势

重要声明:
有时某个声明比较重要,超过了所有其他声明,CSS2.1就称其为特殊声明,并允许在这些声明的结束分号前插入!important来标识(必须要准确放置!important,否则声明无效)
!important总是要放在声明的最后,即分号的前面
标识为!important的声明并没有特殊的特殊性,不过要与非重要声明分开考虑
实际上所有的重要声明会被浏览器分为一组,非重要声明被分为另一组,重要声明之间及非重要声明之间的冲突现各自在其内部解决,如果一个重要声明与非重要声明发生冲突,胜出的总是重要声明

来源
CSS样式来源大致由三种:创作人员(程序员)、读者(用户)、用户代理(浏览器)
权重:
读者的重要声明、创作人员的重要声明、创作人员的正常声明、读者的正常声明、用户代理的声明
读者的声明,火狐/chrome没有把这个接口暴露给我们,只能在IE浏览器中找到(设置->Internet选项->辅助功能->使用样式表编排文档格式)

层叠
1、找出所有相关的规则,这些规则都包含一个选择器
2、计算声明的优先级:先按来源排序、(若来源相同)再按选择器的特殊性、(若特殊性一样)最后按顺序
 

自定义字体
windows->fonts中某些字体有的浏览器并不支持,我们可以将字体放到服务器上,在用户计算机加载页面时从服务器上下载即可,消除用户对电脑字体的依赖。
自定义字体规则:@font-face{font-family:"xx";src:url(相对路径)}     (xx为程序员为自定义字体所设的名字)
字体图标:不失帧,降低网络的负担,易于操作

1、opacity属性也不会被继承,但是其会影响后代元素
2、背景透明文字不透明:用background-color:rgba(0,0,0,.5);  color:red;
3、text-shadow用来为文字添加阴影,可以添加多层,阴影值之间用逗号隔开(多个阴影时,第一个阴影在最上边),该样式不能被继承,值:color <offset-x> <offset-y> <blur-radius>,color........  (颜色,x,y偏移量,阴影程度)
4、使用过滤器filter:blur();让整个元素模糊
5、文字描边 -webkit-text-stroke:4px pink;
6、文字排版:
direction控制文字方向(默认:ltr),要配合unicode-bidi:bidi-override;来使用 
文字溢出用省略号显示(盒子不能被内容撑开):文字一般满一行就自动换行,white-space:nowrap;可以不让文字换行;然后:overflow:hidden;截掉溢出内容,最后text-overflow:ellipsis;
7、overflow默认值为visible,设置为auto后,若元素超出指定区域则出现滚动条

盒模型新增样式:
1、盒模型阴影:box-shadow用来为盒子添加阴影,可以添加多层,阴影值之间用逗号隔开(多个阴影时,第一个阴影在最上边),该样式不能被继承,值:color  (inset) <offset-x> <offset-y> <blur-radius> <spread-radius>,.......
(颜色,阴影在边框内(默认在边框外),x,y偏移量,阴影程度,阴影扩大/收缩(默认为0))
2、倒影:-webkit-box-reflect:above <gap>; (倒影方式,倒影与原图间隙(默认为0))(只有支持webkit内核引擎的浏览器才生效)
3、box-sizing:border-box; 本来width,height设置的是盒子内容区的大小,加padding,整个盒子变大,内容区不变;而设置为该属性后,加padding整个盒子大小不变,内容区变小
4、圆角:border-radius也可以分为上下左右,移动端开发值最好不要用百分比

1、PC端IE6固定定位会失效,移动端大部分情况也有问题
      方法:绝对定位模拟固定定位
      初始化块:视窗大小的矩形
      系统默认滑动块在文档(窗口)上
      绝对定位的元素的父元素如果都没有开启相对定位,则该元素相对于初始化块进行定位
 

<div id="wrap">  //以该元素代替初始化块
    <div id="box1">

    </div>
    <div style="height: 2000px">

    </div>
</div>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        html
        {
            height: 100%;
            overflow: hidden;  /*禁止系统默认滑动块*/
        }
        body
        {
            height: 100%;
            overflow: hidden;  /*禁止系统默认滑动块*/
        }
        #wrap
        {
            height: 100%;
            overflow: auto;   /*将滑动块设置为该元素*/
            border: 2px solid black;
        }
        #box1
        {
            width: 200px;
            height: 200px;
            background-color: deeppink;
            position:absolute;
            left: 0;
            top: 0;
        }
    </style>

2、关于背景
CSS2:
2.1background-img与background-color都设置时,会在上方绘制background-img,color只是被img覆盖了,若盒子大小>img,且图像不平铺,则可以看到设置的color
     background-img可以为元素设置一个或多个背景图片(每个ul之间逗号隔开),绘制图像时,先指定的图像会在后指定图像上方显示
2.2 我们通过右键点击图片所看的尺寸都是位图像素(jpeg,png),在页面渲染时会将图片全部渲染出来,如果盒子大小<图片,就会把溢出部分截掉;如果盒子大小>图片,那么默认图片会水平,垂直平铺,但可以设置平铺方式:
     background-repeate:no-repeate; //两个方向都不平铺
     background-repeate:repeate-x;//只有水平方向平铺
     background-repeate:repeate-y;//只有垂直方向平铺
2.3 我们还可以通过background-position来指定背景图在盒子中的位置,值:<水平位移> <垂直位移>;
     这两个值可以是像素,也可以是百分比;
     百分比计算:(图像所在区域大小-图像本身大小)*百分比
     比如盒子width:100px;图像width:50px;水平位移为10%,则相当于(100px-50px)*10%=5px

CSS3:
 2.4 默认情况下background-img从padding-box开始绘制,从border-box开始剪裁(超出border的地方都裁掉);
       利用background-origin可以设置背景图像渲染的起始位置,值:padding-box,border-box,content-box
       利用background-clip可以设置背景图像剪裁的起始位置,值:padding-box,border-box,content-box
       利用-webkit-background-clip:text;可以将背景图像设置为文字的背景图片(沿文字剪裁)[需要对文字设置透明度]
 2.5 back-ground-size 设置背景图片的大小,值:默认为auto auto
       值可以为百分比,该百分比是相对于背景区(由background-origin设置),默认为盒子的内边距+内容区
       若只设置一个值,另一个值为auto(自适应)
       若设置两个值,则可能发生变形

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页