> CSS(初级)笔记 - Yuyy
Yuyy
Yuyy
CSS(初级)笔记

涵盖内容

1.熟悉css基本语法,以及css工作原理
2.熟练使用css selector 常规选择器class,id,元素,后代,通用,了解选择器的优先级
3.熟悉浮动,定位,盒模型,背景,字体,颜色等常用属性,能运用css进行页面布局和展现效果图


  • css的工作原理
    • css的出现使得内容和样式分离进而让页面变得更简洁,更容易维护。

    • mozilla开发者文档里是这样描述的:

      • 浏览器在展现文档的时候,需要把文档内容和相应的样式信息结合起来展现。

      • 浏览器先将HTML 和 CSS 转换成 DOM (文档对象模型)结构。 这时 DOM 就代表了电脑内存中的相应文档,因为它已经融合了文档内容和相应的样式表

      • 浏览器把 DOM 的内容展示出来
  • /*这是个注释*/

  • 插入样式表的方法有三种:

    • 外部样式表(External style sheet)
      <head>
          <link rel="stylesheet" type="text/css" href="mystyle.css">
      </head>
      
    • 内部样式表(Internal style sheet)
      <head>
          <style>
              hr {color:sienna;}
              p {margin-left:20px;}
              body {background-image:url("images/back40.gif");}
          </style>
      </head>
      
    • 内联样式(Inline style)
      <p style="color:sienna;margin-left:20px">这是一个段落。</p>
      
  • 多重样式优先级

    内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

  • line-height行高

  • text-align 对齐元素中的文本

  • font-family:"Times New Roman"

  • font-size font-style

  • 用em来设置字体大小

    为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

    em的尺寸单位由W3C建议。

    因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em

  • 链接样式

    • a:link - 正常,未访问过的链接
    • a:visited - 用户已访问过的链接
    • a:hover - 当用户鼠标放在链接上时
    • a:active - 链接被点击的那一刻
  • 一个属性多个值
    table, th, td
    {
        border: 1px solid black;
    }
    
  • 盒子模型(Box Model)

    http://bed.yuyy.info//20200804203251.png

  • 边框-单独设置各边

    p{
        border-top-style:dotted;
        border-right-style:solid;
        border-bottom-style:dotted;
        border-left-style:solid;
    }
    
  • CSS 轮廓(outline)

  • 分组选择器

    h1,h2,p
    {
        color:green;
    }
    
  • 嵌套选择器
    p.marked{
        text-decoration:underline;
    }
    
  • max-hright

  • display:none;visibility:hidden;

  • visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间

  • 更改内联元素和块元素

    display:inline;
    display:block;
    
  • Position(定位)
    • static
      • HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
      • 静态定位的元素不会受到 top, bottom, left, right影响。
    • fixed
      • 元素的位置相对于浏览器窗口是固定位置。

      • 即使窗口是滚动的它也不会移动

        p.pos_fixed
        {
            position:fixed;
            top:30px;
            right:5px;
        }
        
    • relative 定位
      • 相对定位元素的定位是相对其正常位置。

      • 移动相对定位元素,但它原本所占的空间不会改变。

        h2.pos_left
        {
            position:relative;
            left:-20px;
        }
        
    • absolute 定位
      • 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
      • absolute 定位使元素的位置与文档流无关,因此不占据空间。
      • absolute 定位的元素和其他元素重叠。
  • 重叠的元素
    • z-index属性指定了一个元素的堆叠顺序

    • 一个元素可以有正数或负数的堆叠顺序

  • overflow 属性用于控制内容溢出元素框时显示的方式。

    描述
    visible 默认值。内容不会被修剪,会呈现在元素框之外。
    hidden 内容会被修剪,并且其余内容是不可见的。
    scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    inherit 规定应该从父元素继承 overflow 属性的值。
  • 元素居中对齐
    • 元素水平居中margin: auto;

    • 文本水平居中text-align: center;

    • 垂直居中 - 使用 line-height

    • 垂直居中 - 使用 position 和 transform
      • transform: translate(-50%, -50%);
  • 组合选择符

    • 后代选择器

    • 后代选择器用于选取某元素的后代元素。

    • 以下实例选取所有<p>元素插入到 <div>元素中:

      div p
      {
        background-color:yellow;
      }
      
    • 子元素选择器
      • 与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

      • 选择了<div>元素中所有直接子元素<p>

        div>p
        {
          background-color:yellow;
        }
        
    • 相邻兄弟选择器
      • 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

      • 紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

      • 以下实例选取了所有位于<div> 元素后的第一个 <p>元素:

        div+p
        {
          background-color:yellow;
        }
        
    • 后续兄弟选择器
      • 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

      • 以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

        div~p
        {
          background-color:yellow;
        }
        
    • div~*:匹配全部

发表评论

textsms
account_circle
email

  • http://0.gravatar.com/avatar/fb21548fde93a47e88c9c75d46784875?s=80&d=monsterid&r=g
    MiMonarchRD

    现在开始学习3剑客了?

    1年前回复

Yuyy

CSS(初级)笔记
涵盖内容 1.熟悉css基本语法,以及css工作原理 2.熟练使用css selector 常规选择器class,id,元素,后代,通用,了解选择器的优先级 3.熟悉浮动,定位,盒模型,背景,字体,颜色等常用…
扫描二维码继续阅读
2020-08-08
友情链接
标签
归档
近期文章
分类
近期文章