CSS基础知识点回顾

date
Jun 6, 2023
slug
CSS知识点回顾
status
Published
tags
IT
summary
CSS知识点回顾
type
Post
 
 
selector 五种选择器分类：简单&组合&伪类&伪元素&属性
  1. Simple selectors (select elements based on name, id, class)
  1. Combinator selectors (select elements based on a specific relationship between them)
  1. Pseudo-class selectors (select elements based on a certain state)
  1. Pseudo-elements selectors (select and style a part of an element)
  1. Attribute selectors (select elements based on an attribute or attribute value)
selector 普通选择器：#id&.class&el&*&el.class&el,el
  1. #id
  1. .class
  1. el
  1. *
  1. el.class
  1. el,el
selector 组合选择器：There are four different combinators in CSS:空格&>&+&~
记忆：包在里面（1、全包(空格) 2、相邻包 >） 不包里面（1、所有～ 2、相邻+）
https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_element
  • descendant selector (space)后代选择器
  • child selector (>)子选择器
  • adjacent sibling selector (+)相邻兄弟选择器
  • general sibling selector (~)通用同级选择器
  • div p Selects all <p> elements inside <div> elements
  • div > p Selects all <p> elements where the parent is a <div> element
  • div + p Selects the first <p> element that are placed immediately after <div> elements
  • p ~ ul Selects every <ul> element that are preceded by a <p> element
 
 
selector 伪类选择器：伪类用于定义元素的特殊状态。
以一个冒号 ：开头
:nth-child(odd) 奇数行
:nth-child(even) 偶数行
: nth-child (- n + 3) 前3个子元素
https://www.w3schools.com/css/tryit.asp?filename=trycss_link
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus
 
notion image
selector 所有的伪类选择器
selector 伪元素选择器：伪元素用于为元素的指定部分设置样式
https://www.w3schools.com/css/tryit.asp?filename=trycss_firstline_letter
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element
 
selector 属性选择器：可以设置具有特定属性或属性值的HTML元素的样式。
在右括号之前加上小写 i ，表示不区分大小写
https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_attribute_value
 
 
css 添加CSS样式的三种方法：外部&内部&内联
要点1：在css 中，单位不要加空格
要点2：外部样式和内部样式谁生效，看<head>标签中，谁最后出现
要点3：优先级：内联 > 外部或内部 > 浏览器默认
  • External CSS 使用<link>标签引用入<head>标签中
    • Internal CSS 使用<style>标签引用入<head>标签中
      • Inline CSS 直接在元素标签中加 style 属性
         
        css 多个值表示时，第一值表上下，第二值表左右，第三值覆盖下，第四值覆盖左
        注释
        html 使用 <!-- These paragraphs will be red -→
        css 使用 /* Set text color to red */
        css 的单行注释 // （它不完全是一行注释，而是下一个构造注释。）实际上是css 判断语法错误，会直接吃掉下一个结构
        css 变量
        定义全局变量
         
        notion image
         
         
        color:background-color、text color、border color
        记忆：边框、区域、内容的颜色
        1、background-color
         
        notion image
        2、text color
         
        notion image
        3、border color
         
        notion image
        color 的五种形式值：RGB&HEX&HSL&RGBA&HSLA
        color HSL 和 HSV 的比较
        HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
        HSV即色相、饱和度、明度（英语：Hue, Saturation, Value），又称HSB，其中B即英语：Brightness。
         
        • 饱和度（Saturation）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
        • 明度（Value），亮度（Lightness），取0-100%。
         
        notion image
        notion image
         
        background 有5种常用属性（速记使用）：color&image&repeat&attachment&position
        1. background-color 颜色
        1. background-image 图片
        1. background-repeat 哪个方向上重复
        1. background-attachment 附着，是否随背景滚动
        1. background-position 位置
        background (shorthand property 速记） 颜色是必须
         
        所有属性
         
        background 新增属性
        在CSS2.1里，background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-position。从CSS3开始，又增加了3个新的属性值，加起来一共8个。下面是按顺序分别代表的意思：
        注意里面的反斜杠，它更font和border-radius里简写方式使用的反斜杠的用法相似。反斜杠可以在支持这种写法的浏览器里在position后面接着写background-size。
        除此之外，你开可以增加另外两个描述它的属性值： background-origin 和 background-clip.
        它的语法用起来像下面这个样子：
        background-color
         
        background-image + background-repeat + background-position
        https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position
        默认情况下，background-image属性在水平和垂直方向上都重复图像，以使其覆盖整个元素。
        仅水平重复：background-repeat:repeat-x;
        仅垂直重复：background-repeat:repeat-y;
        不重复：background-repeat:no-repeat;
        位置：background-position:right top;
        位置值分布是水平+垂直，水平好理解，背景的左中右。 位置 垂直比较特殊，对齐的是内容：top 时，是头对头，center 时，是中间对内容的中，bottom 是底对内容的底
        background-attachment: 属性指定背景图像是应该滚动还是固定的，默认是随着一起滚动（不会与页面的其余部分一起滚动）
        https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_attachment
        固定：background-attachment:fixed;
        滚动：background-attachment:scroll;
         
        notion image
         
        notion image
        background-clip: 指定背景颜色从哪里开始. background-origin:让背景图片从哪里开始
         
        notion image
         
        notion image
         
        background-size
        3个预设值：auto(默认) cover(扩展到撑满) contain(按比例放大撑开)
        或者 background-size:100% || background-size:800px 600px 宽搞
         
        border 常用3种（速记）: width&style&color
        • border-width
        • border-style (required)
        • border-color
        也可以单独定义一个边框
        border-style:常用 dotted dashed solid double
         
        • dotted - Defines a dotted border
        • dashed - Defines a dashed border
        • solid - Defines a solid border
        • double - Defines a double border
        • groove - Defines a 3D grooved border. The effect depends on the border-color value
        • ridge - Defines a 3D ridged border. The effect depends on the border-color value
        • inset - Defines a 3D inset border. The effect depends on the border-color value
        • outset - Defines a 3D outset border. The effect depends on the border-color value
        • none - Defines no border
        • hidden - Defines a hidden border
            •  
            notion image
        border-width 可以用 px pt em cm thin medium thick 表示
         
        notion image
         
        border-color 通常表示整体，也可以用4个值分别表示 top right bottom left
         
        • name - specify a color name, like "red"
        • HEX - specify a HEX value, like "#ff0000"
        • RGB - specify a RGB value, like "rgb(255,0,0)"
        • HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
        • transparent
         
        border sides 定义上边框的属性是 ：border-top-style
        分别上右下左
        也可以用不同个数的值分别表示
         
        notion image
        border 边框圆角: border-radius
        也可以用多个值分别表示不同的角，方向为：上右下左
         
        margin 外边距，两种方式 直接指定 或者 多个值表示 （padding 也是如此）
        • margin-top
        • margin-right
        • margin-bottom
        • margin-left
        值的表示
        • auto - the browser calculates the margin （padding 没有这个值）
        • length - specifies a margin in px, pt, cm, etc.
        • % - specifies a margin in % of the width of the containing element 宽度的比例
        • inherit - specifies that the margin should be inherited from the parent element 继承父亲
        padding 盒模型切换 : box-sizing:border-box
        盒模型 width 默认是内容宽度，内边距会加宽整个宽度 ，使用box-sizing:border-box ，将width 切换为 包含 border 的宽度
         
        notion image
         
         
        width / height ：宽高不包括 padding border margin
        设置宽高有5种设置方法
        • auto - This is default. The browser calculates the height and width
        • length - Defines the height/width in px, cm etc.
        • % - Defines the height/width in percent of the containing block
        • initial - Sets the height/width to its default value
        • inherit - The height/width will be inherited from its parent value
         
        outline 外边框，来自border
        都有 width style color
        outline-offset: 外边框到边框之间的距离
         
        text-indent: 首行缩进
        text-transform:三个值 none uppercase lowercase capitalize（首字母大写）
        notion image
        text-decoration 用于设置或删除文本装饰，比如
        https://www.w3schools.com/css/tryit.asp?filename=trycss_text-decoration
        text-shadow: 文本阴影 水平距离，垂直距离，模糊效果，颜色
        notion image
        notion image
        text
        • color : text color & background color
        • text-align : 用于设置文本的水平对齐方式start left center right justify（拉伸每行到等宽，左右边距是直的）
        • vertical-align: baseline sub super top middle bottom text-top text-bottom
        • direction & unicode-bidi 设置文本方向
        https://www.w3schools.com/css/tryit.asp?filename=trycss_text_direction
        notion image
         
        • letter-spacing: 字符间隔 letter-spacing:3px/-3px
        • line-height :行间隔 (默认单位em)
        • word-spacing:单词间隔
        • white-space:处理空白区域
           
           
           
           
          font-family
          一般3个备选字体：
           
          notion image
          safe fonts
           
          • Arial (sans-serif)
           
          notion image
          • Verdana (sans-serif)
           
          notion image
          • Helvetica (sans-serif)
           
          notion image
          • Tahoma (sans-serif)
           
          notion image
          • Trebuchet MS (sans-serif)
          是Microsoft于1996年设计的。请谨慎使用此字体。并非所有移动操作系统都支持
          • Times New Roman (serif)
           
          notion image
          • Georgia (serif)
           
          notion image
          • Garamond (serif)
          notion image
          • Courier New (monospace)
          notion image
          • Brush Script MT (cursive)
          notion image
           
          font-style
          有3个值：normal / italic / oblique
          其中 italic 体相当于汉字行书这种手写字体 oblique 是字体倾斜
           
          notion image
          font-weight
          设置粗细：normal / lighter / bold / 900
          notion image
          font-variant 变形
          normal / small-caps (小写字母变大写字母，字体变小)
           
          notion image
          font-size
           
          notion image
           
          notion image
          font 速记
          font-size 和 font-family 是必须
           
          links
          a 标签中 ，hover 要在 link 和 visited 后面，active 要在 hover 后 ，所以顺序应该是 link\visited > hover > active
          • a:hover MUST come after a:link and a:visited
          • a:active MUST come after a:hover
          通常可以将link 和 visited 一样的样式， hover 和 active 一样的样式
           
          List
          notion image
          修改 mark 的标识有两种方式
          1、标签内定义 type 属性 <ul type="A">
          2、css 定义 list-style-type ul { list-style-type:"square" }
          使用图片当 mark 图标 list-style-image
          mark 的起始位置： list-style-position: outside/inside
          去除默认设置
          table
          给 table 添加分格
           
          notion image
          使用 collapse 将 双边框 折叠为单边框
           
          notion image
          table 水平对齐：th 默认对齐，td 要对齐需要添加属性 text-align:center;
          table 垂直对齐：默认居中，可以使用 vertical-align:bottom;
           
           
          notion image
          实现底部横线，鼠标滑过改变背景色 td:hover
          实现间隔不同背景色 tr:nth-child(even)
           
          notion image
           
          position
          值有5个，注意 top left right bottom的设置要生效，需要position的值不为static
          • static position 的默认值为static ，正常流
          • relative 相对布局，正常流，主要用于设置 top left right bottom 用
           
          notion image
          • fixed 非正常流 ，固定，相对于 viewport
           
          notion image
          • absolute 非正常流 ，相对父亲绝对布局，is positioned relative to the nearest positioned ancestor 除了static ，如果没有，则相对于 body
           
          notion image
           
          notion image
          • sticky sticky 介于relative 和 fixed 之间，随 scroll 到目标位置
           
          overflow
          The CSS overflow property controls what happens to content that is too big to fit into an area. 用于当内容超出区域时，该如何处理（剪切还是加滚动条）
          overflow 有 4 个值 overflow-x || overflow-y
          • visible - 默认，超出时不剪切，继续渲染在 box 之外，不影响其他元素位置
          • hidden - 超出时会被剪切
          • scroll - 超出时会有滚动条
          • auto - 和 scroll 类似，但是必要时才添加
           
          notion image
           
          flow
          浮动(放的下就放，放不下另起一行， 两元素有float元素时，位置不变，内容和float竞争，不想竞争则使用clear)，有4个值
          • left - The element floats to the left of its container
          • right - The element floats to the right of its container
          • none - 默认 The element does not float (will be displayed just where it occurs in the text). This is default
          • inherit - The element inherits the float value of its parent
          元素之间的浮动
          notion image
          位置不变，内容和float竞争
           
          notion image
          clear
          是否允许存在浮动元素，值有5个
          • none - 默认值，Allows floating elements on both sides. This is default
          • left - No floating elements allowed on the left side
          • right- No floating elements allowed on the right side
          • both - No floating elements allowed on either the left or the right side
          • inherit - The element inherits the clear value of its parent
           
          overflow: auto; clearfix 让内容与图片一样高
           
          notion image
          align 对齐
          • 元素水平居中：margin:auto
          • 元素左右对齐：position:absolute || float:right
          • 文本水平居中：text-align:center
          • 图片居中：display:block margin:auto
          • 元素内容垂直居中：padding:70px 0
          • 元素内容垂直水平居中： padding：70px 0; text-align:center ||
          opacity 透明
           
          notion image
          Navigation Bar = List of Links
           
          specificity 特异性（选择器优先级）
          特点：
          1、更具体的规则胜出
          2、优先级相同时，后出现的胜出
          如何计算特异性：4个插槽： 0 0 0 0 ，各自插槽出现一次时加1
          插槽从低到高分别为：
          1、元素、伪元素
          2、类、伪类、属性选择器
          3、id
          4、内联
          5、!important
           
           
          inheritance 继承
          如何记住哪些可以被继承：会不会导致无止尽的扩大或者缩小
          强制使用：
          强制不使用：revert
           
          import
          通过 @import 引入其他 css 文件（注意要在其他 css 规则之前）
          url ,在使用背景图片、图片、@import css 文件时使用
          calc 函数
          可以使用 + - * / ，在 + 和 - 中需要左右加上空格，否则无效
           
          less 和 sass 的好处
          1. 允许嵌套选择器
          1. 提供一个简单的导入功能
          1. 提供变量
          css 变量
          使用 var 设置 回退值
           
          box model
           
          notion image
           
          display
           
          • block
          • inline
          • none
          • contents
          • flow
          • flow-root
          • table (and all the table-* ones)
              • (以及所有
              )
          • flex
          • grid
          • list-item
          • inline-block
          • inline-table
          • inline-flex
          • inline-grid
          • inline-list-item
          flexbox
          1、flex-direction
          row \ row-reverse \ column \ column-reverse
           
          notion image
          2、justify-content
          flex-start \ flex-end \ center \ space-between \ space-around
           
          notion image
          3、align-item
          flex-start \ flex-end \ center \ baseline \ strech
           
          notion image
           
          4、align-self
          flex-start \ flex-end \ center \ baseline \ strech
           
          notion image
          水平居中
          1、文字
          2、元素
          垂直居中
          水平垂直居中
          2D transform 变换
           
          1. 平移 translate
            1. 旋转 rotate
              1. 拉伸 scale
                1. 沿坐标轴平移 skew
                  1. 矩阵 matrix
                      2. matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
                   
                  3D transform 变换
                   
                   
                  transition 过渡
                  transition : 属性 + 时间
                  shorthand：
                  animation 动画
                  shorthand：
                  延时
                  执行次数
                  动画播放方向
                  normal \ reverse \ alternate \ alternate-reverse
                  alternate 和 alternate-reverse 需要配合 animation-iteration-count使用，不然只有一次的话就和normal 一样了
                  填充模式 ：定义动画开始之前和之后的动作
                  animation-fill-mode : none;
                  none ：默认值 回到元素本身属性值
                  forwards: 停留在结束位置
                  backwards:停留在关键帧开始位置
                   
                  notion image
                   
                   
                  object-fit
                  表明 <img> or <video> 需要在一定宽高下如何显示
                  值：
                  fill：默认值 ，宽高拉伸或压缩至给定尺寸
                  contain: 按比例缩放，直到最大尺寸先到头
                  cover ：按比例缩放，后裁剪至完全覆盖
                  none: 原图显示
                  scale-down：按比例缩小
                   

                  © xiaosen chen 2022 - 2024 ❤ LOVE