• WEB前端 -- CSS


    一、CSS介绍

        css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
        
        存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
        
        语法:style = 'key1:value1;key2:value2;'
        
            在标签中使用 style='xx:xxx;'
            在页面中嵌入 < style type="text/css"> </style > 块
            引入外部css文件
        
        必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。

    二、CSS的基本概念

          层叠样式表
          CSS样式表

    三、CSS的书写的方式

    3.1、行内样式

          <div style="color:yellow"></div>

    3.2、内部样式

    head标签中
      <style>
          标签选择器
              div{
                  color:red;
              }
          ID选择器
              #id{
                  font-size:12px
              }
          类选择器
              .class{
                  font-size:12px  
              }
          组合选择器
            
          包含选择器
              div span{
                
              }
            
              <div>
                  <span>
                  </span>
              </div>
          分组选择器
              div,span{
                
              }
          * --通用选择器
              *{
                  color:red;
              }
          伪类选择器
              a:hover{
                  color:red;
              }
              a:active{
                  
              }
              a:visited{
                  
              }
              a:link{
                
              }
    </style>

    3.3、外部样式

        <head>
            <link href="a.css" />
        </head>

    3.4、CSS文字段落基本属性

        1、height:设置div的高度
        2、width:设置宽度
        3、line-height:设置文字的居中(设置与height同样)
            <div>123</div>
        4、text-align:left rigth center
        5、border:1px solid red;

    3.5、CSS背景

        background:
                background-img:url("1.jpg")
                background-repeat-x:
                background-repeat-y:
              background-position-x:
              background-position-y

    3.6、CSS的布局

        float:浮动
            left;
            right;
        清楚浮动:
            <div style="clear:both"></div>

    3.7、SS的盒子模型

        margin: 设置外边距
        padding:设置内边距

    3.8、CSS的定位

        position:
            1、fixed
                top right left bottom
            2、relative
                单独使用没有任何意义,需要结合absolute
            3、absolute
                定位方式:如果父级有定位方式,则以父级定位,如果没有,则以body定位。  

    3.8、z-index:

        设置div浮动,置顶

    3.9、opcatiy:

        透明度
        
    四、ie6的bug:
      http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769/

  • 相关阅读:
    如何将baidu地图中的baidu logo 去掉
    漂亮的圆角文本框 CSS3实现
    jQuery数字加减插件
    腾迅股票数据接口 http/javascript
    JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
    关于编写性能高效的javascript事件的技术
    想做web开发 就学JavaScript
    git的简单理解及基础操作命令
    《CSS权威指南》基础复习+查漏补缺
    TypeScript Writing .d.ts files(编写声明文件)
  • 原文地址:https://www.cnblogs.com/cxcx/p/6543620.html
Copyright © 2020-2023  润新知