CSS进阶

 
 --by 邝伟科 
 

1.css基础

html & css


1. 什么是html？什么是css？




<a>sysumiac.com</a>

内容

样式

    HTML负责内容

    但是只有内容的网页是这样的:

 

  CSS负责样式：背景，字体颜色，高度，位置，装饰 ···

考一下大家css：这里用到哪些css属性？

font-size

font-family

color

background

width & height

text-align

border?

margin?padding?

概述：CSS 指层叠样式表 (Cascading Style Sheets)


  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一
    • --from w3school

    css基本用法

    • 内部样式
      • 直接嵌入html代码
      • <style>标签
    • 外部样式
      • <link>标签
      • @import

    css书写格式


    css基本属性

     

    2.css选择器,样式继承，层叠

    css选择器

    • 标签选择器
      • h1 { ... }
    • 类选择器（class）
      • div.classname { ... }
    • ID选择器（id）
      • div#idName { ... }
    • 伪类选择器
      • a:hover { ... }
    • 高级选择器
      • a, li { ... }
      • *  { ... }
      • div a { ... }

    class and id

    • class 是一类元素，可以多个，比如 个人头像类，要求每一个图片高宽都是40px： 
      html:
                <img alt="头像" class="avatar" src="...">
                <img alt="头像" class="avatar" src="...">
                <img alt="头像" class="avatar" src="...">
            
      css:
                img.avatar {
                    width: 40px;
                    height: 40px;
                }
    • id 是该页面上独一无二的元素，只能有一个，一般表示页面布局或结构的元素，或者有特殊用途的元素，比如页面头部跟页脚,logo

    css样式继承

    • css样式继承就是标签的css属性传递到嵌套的标签上的过程

      css样式继承

      • 注意：不是所有属性都会被继承的
        • 一般来说：影响网页上元素位置，整体外观，背景等属性不会继承，如border

      css样式层叠

      • 试想下：

        css样式层叠

        • 样式层叠：支配样式如何相互作用，以及当有冲突时哪一种样式会得到优先权
        • 层叠规则：
          • 不同样式会累积
          • 样式冲突
            • 最近者优先
            • 标签选择 < class选择 < id选择 < html嵌入 < !important
            • 多个选择：计算其和，值大优先，对应上点：1，10，100，1000， +o0
            • 排最后样式优先

         

        3.html文档流

        html文档流

        可以理解为“文档”和“流”两部分：

        • “文档”指html内容，如<h1>,<p>,<a>,<img>,<input>等，在页面上呈现时，内容会占据页面空间，形成一个个内容块；

        •  “流”指html内容块自上而下分成一行一行,并在每行中按从左至右的挨次排放元素

        html内容块分为块级元素跟内联元素（行内元素）

        • 块级元素 会单独单独占据文档中的一行，而 内联元素 只占据自己宽度的空间        

      • 常见的块级元素： h1, h2, p, ul, li, form  ...(div:没有语意的块级元素)
      • 常见的内联元素：a, img, input, textarea,  b, em, i ... (span：没有语意的内联元素)

        • div && span

        • div: 没有语意的块级元素，一般用于表示特定结构块，比如网页结构
        • span：没有语意的内联元素，一般用于处理一段文字中某个几个字或某一句

        这里的文档流是这样的：
        h1
        p
        p
        a a img span 
        p(em,b,span)

        结果就是这样：demo 


         

        4.css盒子模型

        盒子模型

        • 每个html元素除了内容之外，四周还包裹着一层层“外框”，用于决定元素的内外边距以及边框，如图：

        盒子模型

        • margin: 外边距，用于控制元素与元素之间的间距,不可见
        • padding：内边距，用于控制元素内容与边框之间的空间，不可见
        • border:  边框，在padding跟margin之间，可见
        • element(content)：元素内容
        demo

        盒子模型

        • margin, padding跟border都有四边的，可以分别设置：
        css:
        div {
            border-top: 1px #000 solid;
            margin-left: 10px;
        }
        也可以一起设置：
        html:
        border: 1px;
        margin: 10px;
        padding: 10px 7px 10px 5px;
        margin: 7px 8px;
        margin: 0 auto;
        /*not~ margin: 1px 2px 3px*/
        PS: 元素在文档流所占的空间就是整个盒子所占的空间

        盒子模型

        Tips：

        • 垂直方向边距会折叠（相邻，包裹）
        • 行内元素上下内外边距，边框不占空间，不会起到挤开其他元素的作用
        • 边距可设为负值，可用于去除没必要的空格

         

        4.css定位

         

        正常文档流就是元素从上到下，从左到右，按顺序，按块级元素，内联元素，盒子模型规定占据空间来排列

        但这种死板的排列方式肯定不能满足我们对网站的需求，下面的属性能帮助我们更灵活地控制网页上元素的位置：

        demo
        • display
        • z-index
        • position
        • float

        display属性

        • display属性可以决定元素在文档流中的显示形式
        • 常见的属性值有：
          • none
          • inline
          • block
          • inline-block 
          • inherit（继承）
        • 使用display属性可以控制内联元素跟块级元素之间转换，可以让一个元素显示或者消失

        position属性

        • 用于灵活控制元素的位置，属性值有：
          • static(默认)
          • relative
          • absolute
          • fixed

        position属性

          • 除了static之外，其它3个都可以给元素设置top，left，right，bottom属性，表示其具体位置
          • static：默认属性，占据正常文档流位置，不会偏离正常位置
          • relative：元素在文档流中占据位置跟static一样，但是显示上可以相对其正常位置偏移
          • absolute：元素脱离文档流，不占文档流空间，位置相对于其最近的设置了除static属性之外的position属性的父元素，如果都没设置，则相对于body
          • fixed：元素脱离文档流，不占空间，位置相对于浏览器窗口

          z-index属性

          • 用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面
          • 注意：
            • z-index值是相对的，不是绝对的，也就是说z-index 的值大的不一定显示在最前，还要考虑元素之间的层叠关系，
            • 没有设置position属性的元素设置z-index是没有作用的
            • 可参考：CSS z-index 属性的使用方法和层级树的概念

          float属性

          • float属性可以设置元素向左向右移动（注意，不能中间）到父元素或者另外浮动元素边框为止
          • 属性值有：
            • left
            • right
            • none
            • inherit

          float属性

          • 注意：

            • 浮动后的元素会自动变成块级元素，即其宽高，垂直边距等属性会生效
            • 浮动后的元素原则上都要明确设定其宽度（图片除外，其自带隐含宽度）
            • 浮动后的元素会脱离文档流，不占空间， 但是会挤开周围的内联元素！！


          • 一般用在：
            • 实现文字环绕图片效果
            • 页面块布局
            • 类名片样式
            • 元素靠右排
               例子

          float&&clear

          • 浮动后元素脱离文档流，不占空间，但有时我们需要浮动后的元素占据空间：比如：demo
          • clear：让浮动元素后面的元素忽略浮动属性，即把浮动元素看做占据正常的文本流位置

            • 使用clear属性可实现卡位效果，让浮动元素既能达到浮动的效果，又能正常占据文档流空间

          清除浮动 clear

          The end

          推荐阅读

          thank you && Q&A

          Made with Slides.com