CSS3 development document

  css, css3, exploitation, Front end, Style

Sites:Front-end development document
Original:CSS selector
Original:CSS inheritance properties
Original:CSS3 Core Module
Original text:CSS box model
Original text:CSS background image
Original text:CSS clear float
Original text:CSS positioning

CSS selector

  • Union: Grouping selectors. Grouped selectors can share the same declaration. UsecommaSeparate the selectors that need grouping.

    • h1,h2,h3,h4,h5,h6{}

  • Intersection: Both attributes belong to the same element.

    • p.name{}、p#id{}、.name1.name2{}

  • Descendants (Derived): Defines styles based on the relationship of elements in position, usesSpacesSeparated, offspring selector as far as possible not more than 3, don’t have to list each level, only need to write the key points

    • li strong {}

  • Child: only child elements as certain elements can be selected, only children are selected, and future grandchildren are not selected.

    • h1 > strong {}

  • Brothers and Neighboring Brothers: Select immediately after another element and both have the same parent element

    • h1 + p {}

  • Attribute: Sets the style for HTML elements with the specified attribute, with a weight of 10

    • Attribute selector: withtitleProperty sets the style for all elements of the,[title] {}
    • Attribute and value selector: istitle="name"All elements of the are styled,[title=name] {}
    • Set the style of the form：input[type="text"] {}

  • Pseudo class:

    • :active: activated element
    • :focus: Element with keyboard input focus
    • :hover: Mouse Hover
    • :link: Unaccessed Links
    • :visited: visited links
    • :first-child: The first child element of the element
    • :lang: with designationlangThe element of the attribute

  • Weight:

    • div（1）
    • Class/ class selector（10）
    • id（100）

  • Structure Selector (New Pseudo Class (Face Test))

    • :not: exclusion
    • :nth-child(n): which element is set from 1
    • :nth-child(2n): even elements are set from 0
    • :nth-child(2n+1): odd elements
    • :nth-of-type(n): which element of the same type of an element
    • :nth-last-child: last element
    • :first-child->:nth-child(1)：
    • :fisrt-of-type: First sibling sibling element
    • :last-of-type: Last sibling element
    • :nth-of-type(n): Which sibling sibling element
    • :last-child: Last child element
    • :only-child: only one child element
    • :only-of-type: There is only one child element of the same type
    • :empty: empty content
    • :checked: selected mainly forinputForm element

  • Attribute selector

    • E[attr=val]：
    • E[attr|=val]: can only be equal tovalOr only byval-Beginning
    • E[attr*=val]: includesvalString
    • E[attr~=val]: There are multiple attribute values, one of which isval
    • E[attr^=val]: tovalBeginning
    • E[attr$=val]: tovalending

  • Target pseudo class selector

    • :target(): used to match the target element pointed to by the URL (the style effect will not take effect until the URL points to the matching element)

  • Pseudo element:

    • :first-line: Matches the first line of text and can only be used for block-level elements
    • :first-letter: matches the first character

    • :before/:after: DOM element inserts extra content before and after

      • Pseudo element encounteredbefore/afterWe will addcontent=''
      • display: block;: Exclusive line
      • display: inline-block;: not exclusive to one line

CSS inheritance properties

  • Non-inheritable attribute

    1. display: specifies the type of box the element should generate

    2. Text properties:

      • vertical-align: vertical text alignment
      • text-decoration: add text decoration
      • text-shadow: Text Shadow Effect
      • white-space: handling of blank characters
      • unicode-bidi: Sets the direction of text

    3. Properties of Box Model:

      • width、height
      • margin、margin-top/right/bottom/left
      • border、border-top/right/bottom/left
      • border-style、border-top/right/bottom/left-style
      • border-width、border-top/right/bottom/left-width
      • border-color、border-top/right/bottom/left-color
      • padding、padding-top/right/bottom/left

    4. Background properties:

      • background
      • background-color
      • background-image
      • background-repeat
      • background-position
      • background-attachment

    5. Location attribute:

      • float
      • clear
      • position
      • top/right/bottom/left
      • min-width/min-height、max-width/max-height
      • overflow
      • clip
      • z-index

    6. Generate content attributes:

      • content
      • counter-reset
      • counter-increment

    7. Profile style properties:

      • outline-style
      • outline-width
      • counter-color
      • outline

  • Inherited attribute

    1. Font family properties

      • font: combined fonts
      • font-family: font family
      • font-weight: font weight
      • font-size: font size
      • font-style: font style
      • font-variant: lowercase letters are converted to uppercase and the font size is smaller
      • font-stretch: for the currentfont-familyStretch and deform. Not supported by all mainstream browsers.
      • font-size-adjust: Specify a for an elementaspectValue that maintains the preferred fontx-height

    2. Text series properties

      • text-indent: text indent
      • text-align: text aligns horizontally
      • line-height: line height
      • word-spacing: word spacing
      • letter-spacing: character spacing
      • text-transform: Controls the case of text
      • direction: Text Writing Direction
      • color: Text Color
    3. Element visibility:visibility

    4. Table layout properties

      • caption-side
      • border-collapse
      • border-spacing
      • empty-cells
      • table-layout

    5. List layout properties

      • list-style-type
      • list-style-image
      • list-style-position
      • list-style
    6. Generate content attributes:quotes
    7. Cursor properties:cursor

    8. Page style properties

      • page
      • page-break-inside
      • windows
      • orphans

CSS3 Core Module

Transition animation

  • transition: transitional animation

    • transition-property: transition attributeall[attr]
    • transition-duration: transition time
    • transition-delay: delay time

    • transition-timing-function: type of run

      • ease: (Gradually Slow) Default
      • linear: uniform speed
      • ease-in: acceleration
      • ease-out: slow down
      • cubic-bezier: Bezier curve

Thinking Steps of Transition Animation Effect:

  1. Transition attribute found
  2. Found transition attribute start and end values
  3. Increase in appropriate positiontransitionAttribute

2D transformation

  • transform: deformation attribute

    • rotate(): rotation function

      • deg: degree
      • transform-origin: Base point of rotation

    • skew(): tilt function

      • skewX()
      • skewY()

    • scale(): The default value of the zoom function is 1

      • scaleX()
      • scaleY()

    • translate(): displacement function

      • translateX()
      • translateY()

Animation- Declare Key Frames

  • Key frame-@keyframes

    • similarlyflash

      • Defines the style of animation at each stage, that is, frame animation.

    • The time unit of the keyframe

      • Figures:0%、25%、100%Etc. (Sets the style of any point in time within a certain period of time)
      • Characters:from(0%)、to(100%)：

    • Format

      • @keyframes: animation name
      • {Animation Status}

Animation- Invoke Animation

  • Required attribute

    • animation-name: Animation Name (Key Frame Name)
    • animation-duration: Animation Execution Time

  • Optional attributes:

    • animation-timing-function

      • linear: uniform speed
      • ease: buffering
      • ease-in: from slow to fast
      • ease-out: from fast to slow
      • ease-in-out: from slow to fast and then to slow
      • ease-bezier(num,num,num,num): For a specific Bezier curve type, 4 values must be within [0,1] interval
    • animation-delay: animation delay
    • animation-iteration-count: number of repetitions
    • animation-direction: direction of animationnormal|reverse|alternate|alternate-reverse
    • animation-play-state: animation statusrunning|paused
    • animation-fill-mode: Status after Animationnone|forwards|backwards|both

3D transformation

  • transform-style: flat|preserve-3d: 3D Space Display
  • perspective: Depth of Field Effect
  • transform: persective(800px): acts directly on child elements

  • transform: add function

    • translate3d(tx, ty, tz)：translateX() translateY() translateZ()
    • rotate3d(rx, ry, rz, a)：rotateX() rotateY() rotateZ()
    • scale3d(sx, sy, sz)：sacleX() sacleY() sacleZ()

Rounded border-radius

  • border-radius: 1-4 digits /1-4 digits

    • Horizontal radius/vertical radius
    • The four numerical directions areTop left, top right, bottom right, bottom left

    • No/The horizontal radius is the same as the vertical radius

      • border-radius: 10px/5px;
      • border-radius: 60px 40px 30px 30px/30px 20px 10px 5px
      • Example: Circular Ellipse, Semicircular Sector

Linear-gradient

  • linear-gradient: ([< starting point > | | < angle >,]? < point >, < point > …)
  • Can only be used in the background
  • Color changes along a straight axis

  • Parameter

    • Starting point: Start gradient direction
    • Angle: Start Gradient Angle
    • Points: Color and Position of Gradient Points
  • Repeated linear gradient

Radial-gradient

  • radial-gradient
  • Color Gradient from “One Point” to Multiple Directions
  • shapeShape:ellipse、circleOr set the horizontal radius, vertical radius

  • size: The size of the gradient, that is, where the gradient stops:

    • closet-side: leftmost
    • farthest-side: farthest edge
    • closet-corner: nearest corner
    • farthest-corner: farthest angle (default)
  • position: Keywords | Numeric | Percent
  • Repeated radial gradient

Background

  • background-origin

    • padding-box: FrompaddingArea display
    • border-box: FromborderArea display
    • content-box: FromcontentArea display

  • background-clip

    • padding-box: FrompaddingRegion clipping outward
    • border- box: FromborderRegion clipping outward
    • content-box: FromcontentRegion clipping outward
    • text: text clipping

  • background-size

    • 100% 100%: percentage
    • 10px 10px: value
    • contain: Shrink according to the original scale, the background image is complete, but it does not necessarily cover the whole container.
    • cover: Shrink according to the original scale, the background map may not be complete, but it covers the whole container.

  • background-attachment

    • The background picture is scroll/fixedfixed(fixed) by default is rolling

Box shadow

  • box-shadow：h v blur spread color inset;

    • h: horizontal offset
    • v: vertical offset
    • blur: fuzzy radius
    • spread: extended radius
    • color: color
    • inset: inner shadow, default is outer shadow

Text shadow

  • text-shadow：x y blur color

    • xAxis offsetyAxis offset blur color
    • The multi-layer shadow creates the three-dimensional effect of the text, and sets various colors, separated by commas in the middle.

  • Text Add Border

    • text-stroke：2px blue

      • By setting1pxThe transparent border of can make the text smooth.
      • Setting the color to transparent can create hollow fonts.

Filter

  • -webkit-filter:normal;: normal
  • -webkit-filter:grayscale(1);: gray scale, value range 0-1
  • -webkit-filter:brightness(0);: brightness, value range 0-1
  • -webkit-filter:invert(1);: reverse color, the value range is 0-1, 0 is the original image, 1 is completely reverse color
  • -webkit-filter:sepia(0.5);: Overlay brown, value range 0-1
  • -webkit-filter:hue-rotate(30deg);: hue (clockwise according to color ring rotation) (red-orange-yellow-yellow-green-green-blue-green-blue-blue-purple-purple-purple-red) here is the superimposed yellow filter
  • -webkit-filter:saturate(4);: saturation, the value range is 0-*, 0 is no saturation, 1 is the original image, the higher the value, the greater the saturation
  • -webkit-filter:contrast(2);: contrast, the value range is 0-*, 0 is no contrast (gray), 1 is the original image, the higher the value, the greater the contrast
  • -webkit-filter:opacity(0.8);: transparency, with values ranging from 0 to 1, 0 being fully transparent and 1 being the original image

Mask

  • mask-image：
  • mask-position：
  • mask-repeat：

CSS box model

borderFrame

  • Triangle arrow:

    • Any two adjacent sides of a square, and then rotate a certain angle to obtain the arrow in any direction we need.
    • border、border-width、border-style、border-color

  • Triangle:

    • borderThe 3 attributes of:border-width/border-style/border-color, width and height are0, triangle arrow direction set color, other direction color set to transparenttransparent

marginMargin

  • marginMargin overlap: take a large value, not the sum of the two.

  • margin-topTransmission of: large box nested small box, small box plusmargin-topValue, passed to the big box, causing the whole to move down.

    • SolvemarginCompatibility issues for:

      1. float: left;
      2. overflow: hidden;
      3. padding-top: 0/1px;
      4. border-top: 1px solid transparent;

CSS background image

backgroundBackground

Main attributes:

  • background-color: background color, abbreviationbackground

    • Cannot inherit, default istransparent
    • inheritSpecifies the background color, inherited from the parent element

  • background-image: background picture

    • url: picture URL address
    • node: no picture placed on default background
    • inherit: Specifies that the background picture is inherited from the parent element

    • One element can introduce multiple background pictures;

      • Specify one or more background pictures to use. By default,background-imagePlace in the upper left corner of the element and repeat the vertical and horizontal directions
    • Attributes cannot be inherited

  • background-repeat: duplicate background

    • Default repetitionbackground-imageThe vertical and horizontal directions of
    • repeatDefault
    • repeat-xOnly horizontal positions are repeated
    • repear-yOnly vertical positions are repeated
    • no-repeatDo not repeat
    • inheritInherit from parent element

  • background-position: background positioning

    • Sets the starting position of the background picture
    • x、yHorizontal position, vertical position. The upper left corner is0. Units (px, keywords, percentages)
    • Keywords appear in pairs.left right top bottom center, specifying only one keyword, the other values will becenter
    • Set onlyxAxis direction, defaultyAxis iscenter
    • inheritInherit from parent element

  • background-attachment: background association

    • Set the background picture to be fixed or scroll with the rest of the page
    • scrollDefault
    • fixedFixed
    • inheritInherit from parent element

  • background-size: Size of background image

    • <length>The length value specifies the image size. Negative values are not allowed
    • <percentage>Percentage specifies the image size. Negative values are not allowed
    • autoThe true size of the image
    • coverScales the background image to completely cover the container, possibly beyond the container.
    • containThe width/height of the container is equal to the width/height of the container, and the background image is always contained in the container.

  • background-origin: Sets the reference origin (position) of the background image

    • padding-box: FrompaddingArea (includingpadding) Start displaying background
    • border-box: FromborderArea (includingborder) Start displaying background
    • content-box: FromcontentThe area begins to display the background

  • background-clip: Sets the area where the background image of the object is cropped outward

    • padding-box: FrompaddingArea (excludingpadding) Start cropping the background outward
    • border-box: FromborderArea (excludingborder) Start cropping the background outward
    • content-box: FromcontentThe area begins to crop the background outward
    • text: Cut outward from the shape of the foreground content (such as text) as a clipping region to achieve masking effects such as using the background as a fill color.
  • Sprite map:background-position: x y

CSS clear float

overflow: hidden

  1. overflowSpill concealment
  2. Clear float
  3. Solvemargin-topThe problem of transmission of

(face-to-face questions)：

  • Ellipsis appears in single-line text (4 required conditions, none required)

    • widthWidth (width not written, default inherits width of parent element)
    • overflow: hidden;(Overflow Hidden)
    • white-space: nowrap;
    • text-overflow: ellipsis;Text is hidden by ellipsis

  • Ellipsis appears in multiline text (required condition, mainly applied on mobile side)

    • display: -webkit-box;Elastic box model
    • -webkit-box-orient: vertical;Specifies the arrangement of elements: vertically
    • -webkit-line-clamp: 2;: Number of lines of text (custom)
    • overflow: hidden;Spill concealment

  • Method for displaying multiple elements in one line

    • display: inline;
    • display: inline-block;
    • float: left/right;

display: inline-block;Characteristics of Elements

  • Boxes are arranged horizontally.
  • verticle-alignAttributes affectinline-blockElement, the value may be set totop
  • You need to set the width of each column.

  • If there are spaces between elements in HTML source code, there will be gaps between columns.

    • Solution：

      • If an element is addeddispay: inline-block;, the parent element adds an attributefont-size: 0;, while adding to the element itselffont-sizeAttribute to override

  • display:inline-block;Incompatible Solutions under IE6/7

    • Increasedisplay: inline; zoom: 1;Attribute

IE7 Lower Block Element Compatibilitydisplay: inline-block;Writing?

  • Directly set block elements as inline objects (set attributesdisplay: inline;), and then triggers the of the block elementlayout(e.g.:zoom: 1;, etc.).
  • The code compatible with each browser is as follows:div {display: inline-block; *display: inline; *zoom: 1; }

floatFloating

floatCharacteristics of Elements

  1. Show on one line
  2. Set the property value toleft, floating elements are arranged from the left side of the parent box to the right in turn
  3. It automatically has attributes of block-level elements and does not need to be added.display: block;
  4. Detach from document flow
  5. Child elements do not inherit floating attributes
  6. The element below the floating element cannot recognize the height and position of the floating element and occupies the position of the floating element.
  7. All elements can use floating attributes

Document Flow and Departure Document Flow

  • Document Flow: Elements are automatically arranged from left to right and from top to bottom in the process of element layout.
  • Each non-floating element block level element has an exclusive row, and floating elements float at one end of the row according to rules. If the current row is full, another row will float.
  • Inline elements do not have an exclusive line
  • Almost all elements (including block-level, introverted, and list elements) can generate sublines to place subelements.
  • Standard document flow level: divided into two levels, block level element and inline element
  • Departure from the document flow: normal elements in the document flow cannot recognize this element (elements that depart from the document flow are e quivalent to floating on the document flow in parallel)

floatThe influence of elements

  1. The parent element sets the background colorbackground-colorNot working
  2. The parent element sets the padding propertypaddingWill not be spread out
  3. Parent Element Sets Border AttributesborderWill not be spread out

Clear floatfloat

How to Clear Floating

  1. Adds a fixed height to the parent element of a floating elementheight(not recommended)
  2. Adds an overflow hidden attribute to the parent element of a floating elementoverflow: hidden;;

  3. Add a block-level element after the last floating element withclear: both;Attribute

    • clearClear the influence of floating elements on elements in the document stream (it can make the elements in the document stream recognize the height of floating elements)
    • leftRemovefloatForleftThe impact of
    • rightRemovefloatForrightThe impact of
    • bothRemovefloatAll impacts
    • inheritInherit the attribute value from the parent element

  4. clearfixClear Float (Fixed Code)

    • Using pseudo elements:afterClear floating prerequisites, one is indispensable.
    • display: block;Ensure that the element is a block level element
    • clear: both;Floating objects are not allowed on the left and right sides.
    • content: '';Pseudo element:brfore/:afterSelf-contained attributes, if not written, pseudo elements will not work.
    • Write full style attributes; Not a prerequisite
    • height: 0;Prevents default in earlier browsersheight: 1px;The situation, withheight: 0;To cover
    • font-size: 0;Font size
    • overflow: hidden;Spill concealment
    • visibility: hidden;Hide all visible elements

overflow: hidden;Andvisibility: hidden;What’s the difference?

(Face-to-Face Questions): How to Make an Element Disappear?

  1. opacity: 0;[0-1] Transparency
  2. display: none;Hide
  3. widht/height/line-height + overflow: width/height/row height+overflow hiding
  4. visibility: hidden;Hide all visible elements

clear: both;The characteristics of

  1. Element needs to be a block level element
  2. Element cannot have floating attribute
  3. Element must be placed after the last floating element

CSS positioning

  • Relative positioning-position: relative;

    • No departure from document flow
    • The reference is the position of the element itself
    • WhentopAndbottomAt the same time there is a value,topThe value takes effect and supports negative values.
    • WhenleftAndrightAt the same time there is a value,leftThe value takes effect and supports negative values.
    • Any element can set the relative positioning attribute
    • The displacement of the relative positioning element changes, but the original position of the element will still be occupied, and other elements will normally recognize the original position of the element.

  • Absolute positioning-position: absolute;

    • Detach from document flow
    • You can set a reference object. The reference object must be its parent element (immediate parent). If there is no direct parent, it will look up until the outermost root element is found.
    • In case of width and height,topAndbottomAt the same time there are values,topEntry into force;leftAndrightAt the same time there are values,leftEffective.
    • Without width and height,topAndbottomAt the same time, when setting the value, the box will be enlarged, the upper and lower values will play a role, and the left and right are the same.
    • You can set up hierarchical relationshipsz-indexThe attribute must be used together with the positioning element (absolute, relative, fixed) to be effective.
    • Positioning (absolute positioning) can be used when one element is positioned on another element or when two elements are superimposed.
    • The absolute positioning must set the relative reference object

  • Fixed positioning-position: fixed;

    • Detach from document flow
    • The reference object is the visual window of the browser.
    • Any element can be set with fixed positioning
    • Can be settop/bottom/left/rightFour directions
    • Throughz-indexChange hierarchy

  • z-indexCharacteristics of attributes

    • The default is that the positioning element with the writing order after overwrites the positioning element with the order before
    • Can be usedz-indexAttribute to modify the hierarchical relationship of positioning elements
    • For all positioning elementsz-indexThe default values are the same
    • z-indexThe value is a number with no unit. Negative numbers are supported.
    • Generally, the same level elements are used for level comparison.
    • When the reference object is relative or absolute, there are no parent elementsz-indexValue of the child elementz-indexValue for comparison