zoukankan      html  css  js  c++  java
  • CSS基础知识

    什么是CSS:
         级联样式表,简称为样式表
     
    CSS作用:
       ----实现了将内容和表现分离
       ----提高代码的可重用性和可维护性
    各元素使用统一的样式声明!
      且提高了样式的重用性和可可维护性
     
    使用CSS样式表:      
    内联方式: 定义在单个HTML元素中
          语法:
                   --用“  ;”隔开多个属性
                   ---属性和属性值之间:用 :连接   
                  ---多对属性之间用 ;隔开
    内部样式表:  定义在HTML页的头元素中
    外部样式表: 定义在外部的CSS文件中(.css)
                        在文档的<head>元素内添加 <link> 元素
     
     
    样式优先级
         就近优先
          内联样式优先级最高,而内部样式表和外部样式表的优先级取决于定义的先后顺序,后定义的样式会覆盖先定义的样式,就近优先
     
    各种选择器:
    元素选择器:html的元素就是选择器
                ---比如: <p>, <h1>等
     
    类选择器:
        语法:  .classNmae { color:red; }
        可以将类选择器和元素选择器结合起来使用,以实现对某种元素中不同样式的细分控制
        语法为: 元素选择器.className{}
     
    id选择器:
        语法: 选择器器前面加一个 # 号
     
    选择器分组:
            选择器声明为以逗号隔开的选择器列表   ,
               ----将一些相同的规则作用于多个元素
     
    派生选择器:
         通过依据元素在其位置的上下文 关系来定义样式
         - 选择器一段包括两个或多个用空格分隔的选择器
     
    伪类选择器:
       伪类用于向某些选择器添加特殊的效果;
       使用冒号(:)作为结合符,左边(其他选择器):右边(伪类)
     如   a:link{}
     常用的伪类: 
            ---link 
           ----active
           ----visited
          -----hover
              ----:focus
     
     
    样式单位:  
      in:英寸 pt: 磅
      em: 1em等于当前的字体尺寸,  2em等于当前字体尺寸的两倍
     
    RGB:rgb(255,0,0)    百分比:rgb(100%,0%,0%)
      #rrggbb: 十六进制数,如 #ff0000
      #rgb:简写的十六进制
     
    尺寸:        
      width和 height
      overflow:当内容溢出的时候如何处理:
          ---visible
          ----hidden
         ----scroll  :总显示滚动条
           ---auto :1。不超出不显示  2. 文本内容超出尺寸时显示滚动条
    如: <div class="auto"></div>
     
    边框:  
       简写方式:
            --border:width style  color;
    单边定义:
      --border-left/rigth/top/bottom: width style color
     
    框模型:         
    -----外边距:与下一个元素之间的空间量
           --margin:value
     单边设置:
         margin-top/right/bottom/left:value
    简写方式:
    ----margin: value1 value2 value3 value4
                             top       right    bottom   left


    ----  内边距: 内容与框线之间的距离
            --padding:value
     单边设置:
         padding-top/right/bottom/left:value
    简写方式:
    ----padding: value1 value2 value3 value4
                             top       right    bottom   left
     
     
    背景色:             
       background-color:
    背景图片:
      background-image
       如:body{
     
          background-image:url("image/bg_01.gif");
    }
     
    背景重复:
       background-repeat
    -------默认情况下,背景图像在水平和垂直方向上重复出现,创建一种称为“墙纸”的效果
    background-repeat 可取值:
      --repeat:在水平和垂直方向上重复,为重复值
      --repeat-x:仅在水平方向重复
      --repeat-y:仅在垂直方向上重复
      --no-repeat:仅显示一次
     
    背景定位:background-position
       --background-position  属性改变图像在背景中的位置
    该属性的取值为:
      x% y%
      x    y
    left:
    center:
    right:
    top:
    botom:
    背景图片的固定:
        background-attachment:
      默认情况下,背景图片会随着页面的滚动和移动
    可以通过设置 background-attachment 属性来设置
       ---默认是 scroll:默认情况,背景会随文档滚动
       ----可取值fixed:背景图片固定。常用于实现水印的图像
  • 相关阅读:
    Django contenttypes组件
    Django admin组件使用
    Django 信号
    Django 中间件
    Django 分页组件替换自定义分页
    Django ORM操作补充
    Django ORM 操作2 增删改
    Django 序列化
    JavaScript
    CSS 属性
  • 原文地址:https://www.cnblogs.com/hdutang/p/5288025.html
Copyright © 2011-2022 走看看