CSS

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 two stages:

1.The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.

2.The browser displays the contents of the DOM.

How does CSS actually work

background-clip

background-clip

background-clip

border-image-repeat

 stretch

repeat

round

border-image-repeat

border-image-repeat

box-shadow

box-shadow

You'll see that we've got four items in the box-shadow property value:

The first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).

The second length value is the vertical offset — the distance downwards that the shadow is offset from the original box (or upwards, if the value is negative).

The third length value is the blur radius — the amount of blurring applied to the shadow.

The color value is the base color of the shadow.

---

Filters

filters

filters

---

Different types of selectors

Simple selectors

Attribute selectors

Pseudo-classes and pseudo-elements

Combinators and multiple selectors

Combinators and groups of selectors

Unitless line height

unitless line height

Here the font-size is 16px; the line height will be 1.5 times this, or 24px.

---

HTML syntax

The syntax is simple. Any attribute on any element whose attribute name starts with data- is a data attribute. Say you have an article and you want to store some extra information that doesn’t have any visual representation. Just use data attributes for that:

html syntax

Reading the values of these attributes out in JavaScript is also very simple. You could use getAttribute() with their full HTML name to read them, but the standard defines a simpler way: a DOMStringMap you can read out via a dataset property.

To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase).

javascript access

Each property is a string and can be read and written. In the above case setting article.dataset.columns = 5 would change that attribute to "5".

You can also use the attribute selectors in CSS to change styles according to the data:

css access

---

Pseudo-classes

A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state.

:active     :checked      :default      :dir()     :disabled      :empty      :enabled      :first

:first-child      :first-of-type      :fullscreen      :focus      :focus-within      :hover

:indeterminate      :in-range      :invalid      :lang()      :last-child      :last-of-type

:left      :link      :matches()      :not()      :nth-child()      :nth-last-child()

:nth-last-of-type()      :nth-of-type()      :only-child       :only-of-type      :optional

:out-of-range      :read-only      :read-write      :required      :right      :root

:scope      :target      :valid      :visited

---

Pseudo-elements

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.

::after     ::before      ::first-letter      ::first-line     ::selection      ::backdrop

---

CSS Priority

For Different Level:

!important > inline styles > id selector > class selector > element selector > universal selector（*）> inheritance > browser's default attribute

For Same Level:

later rules will win over earlier rules

---

Specificity

The amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns:

Thousands: Score one in this column if the declaration is inside a style attribute (such declarations don't have selectors, so their specificity is always simply 1000.) Otherwise 0.

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.

Note: Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not) have no effect on specificity.

specificity

Note: If multiple selectors have the same importance and specificity, which selector wins is decided by which comes later in the Source order.

---

Controlling inheritance

inherit

Sets the property value applied to a selected element to be the same as that of its parent element.

initial

Sets the property value applied to a selected element to be the same as the value set for that element in the browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the property value is set to inherit instead.

unset

Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial.

revert

Reverts the property to the value it would have had if the current origin had not applied any styles to it. In other words, the property's value is set to the user stylesheet's value for the property (if one is set), otherwise the property's value is taken from the user-agent's default stylesheet.

Note: initial and unset are not supported in Internet Explorer.

html

css

result

---

grid

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.

A grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters

grid

Defining a grid

Defining a grid

Flexible grids with the fr unit

Flexible grids with the fr unit

Gaps between tracks

To create gaps between tracks we use the properties grid-column-gap for gaps between columns, grid-row-gap for gaps between rows, and grid-gap to set both at once.

Gaps between tracks

gap

Repeating track listings

Repeating track listings

repeat

The implicit and explicit grid

The implicit and explicit grid

The implicit and explicit grid

The minmax() function

The minmax() function

As many columns as will fit

As many columns as will fit

As many columns as will fit

This works because grid is creating as many 200 pixel columns as will fit into the container, then sharing whatever space is leftover between all of the columns — the maximum is 1fr which, as we already know, distributes space evenly between tracks.

Line-based placement

We now move on from creating a grid, to placing things on the grid. Our grid always has lines, these lines start at 1 and relate to the Writing Mode of the document. Therefore in English, column line 1 is on the left hand side of the grid and row line 1 at the top. In Arabic column line 1 would be on the righthand side, as Arabic is written right to left.

We can place things according to these lines by specifying the start and end line. We do this using the following properties:

grid-column   ——>  grid-column-start    grid-column-end

grid-row   ——>   grid-row-start    grid-row-end

These let you specify the start and end lines at once, separated by a / — a forward slash character

Line-based placement

Line-based placement

Note: you can also use the value -1 to target the end column or row line, and count inwards from the end using negative values. However this only works for the Explicit Grid. The value -1 will not target the end line of the implicit grid.

Positioning with grid-template-areas

An alternative way to place items on your grid is to use the grid-template-areas property and giving the various elements of your design a name.

Remove the line-based positioning from the last example (or re-download the file to have a fresh starting point), and add the following CSS.

Positioning with grid-template-areas

Reload the page and you will see that your items have been placed just as before without us needing to use any line numbers!

Positioning with grid-template-areas

The rules for grid-template-areas are as follows:

1、You need to have every cell of the grid filled.

2、To span across two cells, repeat the name.

3、To leave a cell empty, use a . (period).

4、Areas must be rectangular — you can’t have an L-shaped area for example.

5、Areas can't be repeated in different locations.

You can play around with our layout, changing the footer to only sit underneath the content and the sidebar to span all the way down for example. This is a very nice way to describe a layout as it is obvious from the CSS exactly what is happening.

A CSS Grid, grid framework

Grid "frameworks" tend to be based around 12 or 16 column grids and with CSS Grid, you don’t need any third party tool to give you such a framework — it's already there in the spec.

This contains a container with a 12 column grid defined, and the same markup as we used in the previous two examples. We can now use line-based placement to place our content on the 12 column grid.

A CSS Grid, grid framework

A CSS Grid, grid framework

---

Flexbox

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.

Following 6 properties is for ancestors elements

flex-direction

row | row-reverse | column | column-reverse;

flex-direction

flex-wrap

nowrap | wrap | wrap-reverse;

flex-wrap

nowrap

wrap

wrap-reverse

flex-flow(shorthand of flex-direction and flex-wrap)

flex-flow: flex-direction || flex-wrap

justify-content

flex-start | flex-end | center | space-between | space-around;

justify-content

align-items

flex-start | flex-end | center | baseline | stretch;

align-items

align-content

flex-start | flex-end | center | space-between | space-around | stretch;

align-content

Following 6 properties is for single item

order    flex-grow    flex-shrink    flex-basis    flex    align-self

order

order: 1;

order

flex-grow

flex-grow:1;

flex-grow

flex-shrink

flex-shrink: 1;

flex-shrink

flex-basis

.item {flex-basis: | auto;/* default auto */}

flex

.item {flex:none | [<'flex-grow'><'flex-shrink'>? ||<'flex-basis'> ]}

align-self

auto | flex-start | flex-end | center | baseline | stretch;

align-self

---

Float

float

The elements of normal document flow occupy one row, the element with the float set on it (the element in this case) is taken out of the normal layout flow of the document and stuck to the left hand side of its parent container (<body>, in this case). Any content that comes below the floated element in the normal layout flow will now wrap around it, filling up the space to the right-hand side of it as far up as the top of the floated element

3 boxes and a paragragh of text

add float left to box1

Clearing floats

We have seen that the float is removed from normal flow and that other elements will display beside it, therefore if we want to stop a following element from moving up we need to clear it. This is achieved with the clear property

—— The first way for clear floats is add clear: both to elements that need to be cleared

clear:both

Clearing boxes wrapped around a float

You now know how to clear something following a floated element, but take a look at what happens if you have a tall float and a short paragraph, with a box wrapped around both elements. Change your document so that the first paragraph and our floated box are wrapped with a class of wrapper.

Clearing boxes wrapped around a float

Clearing boxes wrapped around a float

—— The second way for clear floats is use the clearfix hack

the clearfix hack

clearfix hack

—— The third way for clear floats is add overflow:auto to parent wapper
An alternative method is to set the overflow property of the wrapper to a value other than visible.

overflow:auto;

—— The fourth way for clear floats is set display:flow-root property to parent wrapper, it's also the modern way of solving this problem .This exists only to create a BFC without using hacks — there will be no unintended consequences when you use it. Remove overflow: auto from your .wrapper rule and add display: flow-root. Assuming you have a supporting browser, the box will clear.

display:flow-root;

---

Positioning

Positioning allows you to take elements out of normal document layout flow, and make them behave differently

position:static;

Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow

position: absolute;

absolute positioning fixes an element in place relative to the <html> element or its nearest positioned ancestor

absolute

absolute

position: relative;

the relative positioned element has taken its place in the normal layout flow, you can then modify its final position, including making it overlap other elements on the page

relative

You can see above , the yellow box is relative to its original positioning , and it's in the normal document flow because the following elements doesn't occupy its original position  

position: fixed;

fixed positioning fixes an element in place relative to the browser viewport itself

position: sticky

This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed. This can be used to for example cause a navigation bar to scroll with the page until a certain point, and then stick to the top of the page. 

stick

here is the link of sticky positioning : https://codepen.io/pen/

---

Multiple-column layout

column-count:3;

column-width:200px;

column-gap:20px;

column-rule:4px dotted rgb(79,185,227);

reference