分类
技术

CSS BASIC

definition

what’s css

  • CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
  • css is a rule-set language which is use to specify what web should look like.

purpose

  • specifying how documents are presented to users — how they are styled, laid out, etc.

history

  • CSS is no different — it is developed by a group within the W3C called the CSS Working Group. This group is made of representatives of browser vendors and other companies who have an interest in CSS. There are also other people, known as invited experts, who act as independent voices; they are not linked to a member organization.

How does CSS actually work

  • When a browser displays a document, it must combine the document’s content with its style information. It processes the document in a number of stages, which we’ve listed below. Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways. But this is roughly what happens.
  1. The browser loads the HTML (e.g. receives it from the network).
  2. It converts the HTML into a DOM (Document Object Model). The DOM represents the document in the computer’s memory. The DOM is explained in a bit more detail in the next section.
  3. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images and videos … and linked CSS! JavaScript is handled a bit later on in the process, and we won’t talk about it here to keep things simpler.
  4. The browser parses the fetched CSS, and sorts the different rules by their selector types into different “buckets”, e.g. element, class, ID, and so on. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree).
  5. The render tree is laid out in the structure it should appear in after the rules have been applied to it.
  6. The visual display of the page is shown on the screen (this stage is called painting).

fundamental

cascade

  • source
    • agent style
    • user style
    • author style
  • Stylesheets cascade — at a very simple level, this means that the order of CSS rules matter; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.
  • The cascade is an algorithm that defines how to combine property values originating from different sources. It lies at the core of CSS, as emphasized by the name: Cascading Style Sheets.
  • specificity
    • score
      • Thousands: Score one in this column if the declaration is inside a style attribute, aka inline styles. Such declarations don’t have selectors, so their specificity is always 1000.
      • Hundreds: Score one in this column for each ID selector contained inside the overall selector.
      • Tens: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.
      • Ones: Score one in this column for each element selector or pseudo-element contained inside the overall selector.
    • Specificity is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element.
  • inheritance
    • inheritance describe that parent-child level which property of children will extend parent value.
  • important
    • There is a special piece of CSS that you can use to overrule all of the above calculations, however, you should be very careful with using it — !important.

box model

  • definition
    • The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
    • The box is a representation of a object in a page. And box with css specify what it looks like or how it works.
  • display type
    • outer display type
      • block box
        • 1. The box will break onto a new line.
  1. The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.
  2. The width and height properties are respected.
  3. Padding, margin and border will cause other elements to be pushed away from the box - inline box- 1. The box will not break onto a new line.</code></pre></li>The width and height properties will not apply. Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box. Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box. - These characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page inner display type however, which dictates how elements inside that box are laid out.
  • Overflow
    • Everything in CSS is a box. You can constrain the size of these boxes by assigning values of width and height (or inline-size and block-size). Overflow happens when there is too much content to fit in a box.
    • BFC
      • A block formatting context is a part of a visual CSS rendering of a web page. It’s the region in which the layout of block boxes occurs and in which floats interact with other elements.

syntax

  • basic rule syntax
    • style-rule ::=
      selectors-list {
      properties-list
      }
    • selectors-list ::=
      selector[:pseudo-class] [::pseudo-element]
      [, selectors-list]

properties-list ::=
[property : value] [; properties-list]

  • At-rules syntax
    • At-rules are CSS statements that instructs CSS how to behave. They begin with an at sign, ‘@’ (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semicolon, ‘;’ (U+003B SEMICOLON), or the next CSS block, whichever comes first.
    • /* General structure */
      @IDENTIFIER (RULE);

/* Example: tells browser to use UTF-8 character set */
@charset “utf-8”;

  • rule
    • The rule opens with a selector . This selects the HTML element that we are going to style. In this case we are styling level one headings ().

We then have a set of curly braces { }. Inside those will be one or more declarations, which take the form of property and value pairs. Each pair specifies a property of the element(s) we are selecting, then a value that we’d like to give the property.

  • conponent
    • Selectors
    • Specificity
    • Properties and values
    • Functions
    • @rules
    • Shorthands
    • Comments
    • White space
  • three methods of applying CSS to a document
    • external stylesheet
    • with an internal stylesheet
    • with inline styles

core

selector

  • definition
    • A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them
  • types of selectors
    • type
      • The CSS type selector matches elements by node name.
    • universal
      • The CSS universal selector (*) matches elements of any type.
    • id
      • The CSS ID selector matches an element based on the value of the element’s id attribute.
    • class
      • The CSS class selector matches elements based on the contents of their class attribute.
    • attribute
      • The CSS attribute selector matches elements based on the presence or value of a given attribute.
    • pseudo-classes and pseudo-elements
      • A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
      • A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
    • combinators
      • The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.
      • The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
      • The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
      • The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

writing mode

  • definition
    • A writing mode in CSS refers to whether the text is running horizontally or vertically.

layout

  • purpose
    • CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.
  • normal flow
    • normal flow is default layout
    • normal flow is designed to make a readable document
    • behavior
      • individual element boxes
        • a block level element’s content is 100% of the width of its parent element, and as tall as its content
        • Inline elements are as tall as their content, and as wide as their content. You can’t set width or height on inline elements If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with display: block; (or even,display: inline-block; which mixes characteristics from both.)
      • how elements interact with one another?
        • The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser’s viewport.
        • block-level elements are laid out in the block flow direction, based on the parent’s writing mode (initial: horizontal-tb) — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them. In English therefore, or any other horizontal, top to bottom writing mode, block-level elements are laid out vertically.
        • Inline elements behave differently — they don’t appear on new lines; instead, they sit on the same line as one another and any adjacent (or wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. If there isn’t space, then the overflowing text or elements will move down to a new line.
        • If two adjacent elements both have the margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called margin collapsing, and we have met this before too.
  • flexbox
    • definition
      • Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.
    • The flex model/弹性盒子
      • main axis
        • The main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
      • cross axis
        • The cross axis is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the cross start and cross end.
      • flex container
        • The parent element that has display: flex set on it (the in our example) is called the flex container.
      • flex items
        • The items being laid out as flexible boxes inside the flex container are called flex items
        • size
          • flex-grow
            • This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
          • flex-shrink
            • The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
          • flex-basis
            • The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
      • flex-direction
        • specifies what direction the main axis runs in (what direction the flexbox children are laid out in) — by default this is set to row
        • columns or rows
    • wrapping/overflow
      • One issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout.
      • property
        • flex-wrap
        • flex
      • flex-flow shorthand
        • flex-flow: row wrap;
        • flex-direction: row;
          flex-wrap: wrap;
    • horizontal and vertical alignment
      • align-items
        • align-items controls where the flex items sit on the cross axis.
        • 1. By default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross axis. If the parent doesn’t have a fixed width in the cross axis direction, then all flex items will become as long as the longest flex item. This is how our first example got equal height columns by default.
  • grid
    • definition
      • CSS Grid Layout is a two-dimensional layout system for the web.
      • A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements.
    • purpose
      • to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites
    • element
      • column
      • row
      • gutter
    • property
      • Gaps between tracks
        • column-gap
          • for gaps between columns
        • row-gap
          • for gaps between rows
        • gap Note: The *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is to make them usable in multiple layout methods. The prefixed versions will be maintained as an alias so will be safe to use for some time. To be on the safe side, you could double up and add both properties to make your code more bulletproof.
          • to set both at once
      • track
        • grid-template-columns
          • The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.
          • support by repeat notation
        • grid-template-rows
          • The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.
        • grid-template-areas
          • The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.
  • float
    • The float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it. The kind of thing you might get in a newspaper layout.
    • Clearing floats
      • the float is removed from normal flow and that other elements will display beside it, therefore if we want to stop the following element from moving up we need to clear it; this is achieved with the clear property.
    • Clearing boxes wrapped around a float
      • The modern way of solving this problem is to use the value flow-root of the display property. This exists only to create a BFC without using hacks — there will be no unintended consequences when you use it.
  • position
    • position type
      • static
      • relative
      • absolute
      • fixed
      • sticky
    • position context Which element is the “containing element” of an absolutely positioned element? This is very much dependent on the position property of the ancestors of the positioned element (See Identifying the containing block). If no ancestor elements have their position property explicitly defined, then by default all ancestor elements will have a static position. The result of this is, the absolutely positioned element will be contained in the initial containing block. The initial containing block has the dimensions of the viewport, and is also the block that contains the element. In other words, the absolutely positioned element will be displayed outside of the element, and be positioned relative to the initial viewport. The positioned element is nested inside the in the HTML source, but in the final layout, it is 30px away from the top and left of the edge of the page. We can change the positioning context — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element’s ancestors — to one of the elements it is nested inside (you can’t position it relative to an element it is not nested inside).
      • Which element is the “containing element” of an absolutely positioned element? This is very much dependent on the position property of the ancestors of the positioned element
  • multiple-column
    • The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper.

responsive web design

  • the concept of responsive web design (RWD) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
  • It is important to understand that responsive web design isn’t a separate technology — it is a term used to describe an approach to web design or a set of best practices, used to create a layout that can respond to the device being used to view the content.

topic

style

  • style is a part of css which is used to specify what perform should show to user. ex: background, border…etc
  • text
    • font, boldness, italics, line and letter spacing, drop shadows, and other text features.
    • Font styles
      • Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
    • Text layout styles
      • Properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box.
  • list
    • Lists behave like any other text for the most part, but there are some CSS properties specific to lists
  • link
    • When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs.
  • web font
    • allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.

what is CSS value

  • definition
    • Every property used in CSS has a value type defining the set of values that are allowed for that property.
  • data type You’ll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value type. The term value refers to any particular expression supported by a value type that you choose to use.
    • Numbers, lengths, and percentages …
    • There are various numeric value types that you might find yourself using in CSS.
  • value and unit
    • Absolute length units
    • Relative length units

how to size

  • natural or intrinsic size
    • HTML Elements have a natural size, set before they are affected by any CSS. A straightforward example is an image.This size is described as the intrinsic size — which comes from the image itself.
  • extrinsic size
    • We can, of course, give elements in our design a specific size. When a size is given to an element (the content of which then needs to fit into that size) we refer to it as an extrinsic size.
    • fixing size
    • percentage size
    • min- and max- sizes
    • viewport units
      • The viewport — which is the visible area of your page in the browser you are using to view a site — also has a size.

replaced elements

  • definition
    • replaced element is an element whose representation is outside the scope of CSS;
    • Put in simpler terms, they’re elements whose contents are not affected by the current document’s styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself.
    • Certain replaced elements, such as images and video, are also described as having an aspect ratio. This means that it has a size in both the horizontal (x) and vertical (y) dimensions, and will be displayed using the intrinsic dimensions of the file by default.
  • typical elements
    • iframe
    • video
    • img
    • embed
  • size
    • If you place an image inside a box that is smaller or larger than the intrinsic dimensions of the image file in either direction, it will either appear smaller than the box, or overflow the box.
    • The object-fit property can help you here. When using object-fit the replaced element can be sized to fit a box in a variety of ways.
  • layout
    • When using various CSS layout techniques on replaced elements, you may well find that they behave slightly differently to other elements. For example, in a flex or grid layout elements are stretched by default to fill the entire area. Images will not stretch, and instead will be aligned to the start of the grid area or flex container.

how to debug

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

keep your CSS tidy

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing

high-level guidelines

  • https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS

“CSS BASIC”上的2条回复

有些一些内容还未补全?不过对于入门前端来说,总结的不错了,加油!