码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础学习

时间:2016-01-31 02:44:21      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

学习是多方面的,多学习总是没错的。

CSS就在我们眼前。

一、什么是CSS

CSS又叫层叠样式表,它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

二、为什么学习CSS

它是能够真正做到网页表现与内容分离的一种样式设计语言,也是能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,

拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

三、走进CSS

  三种样式表:
  1. 外部样式表Linking:将网页链接到外部样式表。
  2. 内部样式表Embedding:在网页上创建嵌入的样式表。
  3. 内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素。
  其中,优先级:内联式 > 内部式 =外部式
  选择器分类:
              1、元素(h,p,span,div等);
              2、类(class)+ .名称;
              3、ID:+#名称;
              4、通配符:*;
              5、属性(title,target,alt,href);
              6、伪类/伪元素:hover;

  权重值:(内联 > ID选择器> 类,伪类> 元素)
      背景,颜色单位;
      背景色:background-color;
      背景图:background-img:url(“”);
      背景重复:background-repeat
      文本: 
        1、缩进文本:text-indent;
        2、水平对齐:text-align;
        3、字符转换:text-transform;

  文本装饰: text-decoration ;
      列表:简写属性:list-style;
      去掉li小圆点:list-style:none;
      轮廓:outline:none  /*取消按钮边框*/

      border:none;

框模型:

  框模型包含了四部分:
                1、元素内容;
                2、内边距;
                3、边框;
                4、外边距;

  内边距:padding 常跟PX,少用%,禁负值
                 四个值顺序:上、右、下、左
      外边距:margin 同上 ; 但可用负值
      边框:border+宽度值 solid+颜色;
      浮动:float+左(右、none)
      触发BFC环境: 
              清除浮动:clear : both
              overflow:hidden等;

  定位:position
            1、static 默认
            2、relative 相对定位:文档流,以相临元素为定位
            3、absolute 绝对定位:脱离文档,以窗口为定位
            4、fixed 固定定位

  z-index 元素的堆叠顺序

  边框:
            圆角border-radius:自左上按顺时针赋值
            按钮border-image:+url(“”)+宽高
            box-shadow:向框添加一个或多个阴影
      背景大小:background-size
      文本阴影:text-shadow

动画篇:

  通过CSS转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

  2D转换:
          1、translate()方法:元素从当前位置移动
          2、rotate():元素顺时针旋转,允许负值
          3、scale():元素的尺寸会增加或减少
          4、skew() :元素翻转给定的角度
      3D转换:
          1、rotateX():元素围绕其 X 轴以给定的度数进行旋转
          2、rotateY():元素围绕其 Y 轴以给定的度数进行旋转
      过渡的实现:
            1、效果添加到哪个CSS属性
            2、效果时长
            3、配合hover属性
      动画:
            在@keyframes中创建动画时,请把它捆绑到某个选择器:
                1、规定动画的名称
                2、规定动画的时长

学代码是学习动手写代码,而不是复制。

                                                                                           加油!

CSS基础学习

标签:

原文地址:http://www.cnblogs.com/daiyunfei/p/5172280.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!