CSS(初级)笔记
本文最后更新于 1328 天前,其中的信息可能已经有所发展或是发生改变。

涵盖内容

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)

    image-20200804203248942

  • 边框-单独设置各边

    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~*:匹配全部

作者:Yuyy
博客:https://yuyy.info

评论

  1. MiMonarchRD
    Windows Edge
    4年前
    2020-8-08 21:43:23

    现在开始学习3剑客了?

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇