首页 > 代码库 > CSS基础

CSS基础

CSS基础

1.全称:Cascading Style Sheets,中文名,层叠样式表,级联样式表。能做到网页表现和内容的一种分离设计的语言。能对对象的位置有像素级的精确控制。拥有对对向和模型模式样式编辑的能力,并且能进行初步的交互设计。

CSS的加载

  • 浏览器默认样式
  • 用户自定义样式
  • 作者定义样式

选择器

  • id选择器
    1. #+id名称
    2. id 是唯一的
  • 类选择器
    1. .+class名称
    2. class 不唯一,可以有多个
  • 元素选择器
    1. 元素:值
  • 属性选择器
    1. 元素名称+[属性名称:值]:值
  • 伪类选择器
    1. 获取选择器无法获取的信息,给其他选择器添加效果用
    2. a标签的 :link(访问前),:visited(访问过后),
    3. :hover(鼠标的悬停和移入),:nth-child(),:nth-last-child(),:active(点击时),:nth-child(odd)(奇数),nth-child(even)(偶数),nth-child(可以添加n的公式给元素添加效果,eg:2n+1),
  • 伪元素(伪元素不是选择器)

    1. 虚拟的元素,在dom树内不真实存在,但是能保存dom的内容
    2. ::before(在某元素之前加入类容) 和 :after(在某元素之后加入类容);
    3. ::first-letter(特殊样式加入文本首字母);
    4. ::first-line(特殊的样式加入文本的首行);
  • 后代
    1. 父级[空格]子级:父级添加效果时 后代所有级都会添加上效果。
  • 子级
    1. 父级 >(大于符号)子级:父级添加效果时,只对子级产生影响。
  • 并级
    1. 选择器,选择器,。。。

权重

  • 外联和内联的权重是后面覆盖前面的
  • 优先级:!important > 内嵌 > id> class > 元素 > 通配符(*)

继承

  • 一般文本类型会继承父级。继承以后也可以自己单独设置样式。

 

基本的属性值

font-weight: 400 700 900() ; /*文字粗细*/
font-style: italic;    /*如果字体里有斜体直接调用斜体*/
            obligne; /* 强制倾斜*/
text-indent:             /*首行文字缩进既可以正值也可以为负数*/
text-shadow:2px 2px 2px 2px #ccc;     /*阴影:第一个值为横向偏移,第二个是纵向偏移,第三个值为模糊值,第四个值为外延值,第五个是颜色*/
background-image: url("");          /*背景插入图片  */  
background-repeat: repeat-x;       /* 向x轴移动*/
background-repeat:repeat-y;         /*向y轴移动*/
background-position: center/right/bottom/ x px或者y px 
background-attachment:fixed;        /*脱离文档流固定在屏幕上*/
background-size: 100%/cover;        /*背景图覆盖在整个框*/
background: red url("") no-repeat center; /*所有属性都可以在这里写除了background-size*/
background-size: 100% 50%
border-radius:50%;                  /*百分之五十为圆形*/

background:linear-gradient(角度(或者to right,to left...),颜色,颜色);            /*颜色渲染*/
transform:scale(.5,2); (宽度和高度)
-webkit-   谷歌苹果
-moz-      火狐
-ms-       微软
-o-        欧鹏

在hover里:width:150px;
          height: 150px;
          background: red;
          transiton:all/width/height linear(渐变的方式) 1s(时间);          /*渐变*/

animation: xyy(名称) 3s(时间) 2(次数,值为infinite时就无限循环);               /*自动播放动画*/
@keyframe xyy{                                                                  /*写在函数外面*/
    from(
        background:-color:red;
        )
    to(
        background-color: yellow;
        )
}
或者
0%{
        样式
}
20%{
        样式
}
40%{
        样式
}
60%{
        样式
}
80%{
        样式
}
100%{

}

雪碧图

  • 作用:获取图片时,减少向服务器请求的次数,提高代码的性能

    .box{
        width: 140px;                               定视口
        height: 65px;                               定视口
        background: url("image/index_01.png"); 
        background-position:-140px -70px;           X轴朝右为正,Y轴朝下为正
    }

 

CSS基础