CSS Page Styling Frameworks

CSS Styling:

Tools that shape page content

• Width: width } auto/ initial

• heigt: height } min/ max

• inherit: maintains the already defined measurement

• margin: top/ left/ right/ bottom

• padding: space between internal and external content

• box sizing: returns the element to predefined sizes

Colors in CSS

• RGB: Values ​​between 0 and 255 to define the tones of red, green and blue, separated by a comma. Example:

#rgb{
   color: rgb(250, 30, 70);
}

e

The value 250 represents red, 30 represents green, and 70 represents blue, which in this case would result in something similar to:

• RGBA: Very similar to RGB, but the transparency factor is added, which varies between 0 and 1;
• HEX: Hexadecimal defined between 0 and 9, and A to F, where F is the highest value, following a similar pattern to RGB. Example:

00FF00 -> Green
FF0000 -> Red
0000FF -> Blue

#hex{
  color: #03BB76;
}

e

It would result in something like:

• HSL (hue, saturation, lightness): defining the color through its hue (0 red, 120 green, 240 blue), saturation (0% gray tone, 100% full color), luminosity (0% black, 100 % white) - There is also HSLA, which relies on the alpha factor (0 to 1) to measure the level of transparency. Example:

#hsl{
  color: hsla(120, 100%, 50%, 1.0);
}

e

This programming would result in a completely green color, but you can look for other tones using the HSL color wheel.

---

Funds

• background-color: solid background color
• background-image: reference image in the background
• linear-gradient: linear gradient
• radial-gradient: circular gradient
• repeating: repeat effect

background-size: defines the size of the element's background, accompanied by the settings:

• auto: automatic adjustment
• cover: cover the entire space of the element
• contain: resize the content so that the full/uncropped image appears
• value: Set the size of the image inside the element

Repetition background-repeat: defines the axis on which the image repeats:

• repeat: maximum possible repetitions
• repeat-x: only repeats on the x axis (horizontal)
• repeat-y: only repeats on the y axis (vertical)
• space: repeats on both axes without being cut with spaces
• round: repeats in all directions without being cut, just resized
• no-repeat: no repetitions

Background-position: Positioning of background images
center, left, right, x%,y%

background-attachment: How the image will behave according to the browser window

• fixed: doesn't leave its place
• scroll: it is fixed to an object
• location: "scrolls" next to the content

background-origin: Defines the image positioning area

• padding-box: origin corner next to padding
• border-box: the image starts next to the outer area of ​​the border
• content-box: lower than padding, aligned to element content

background-flip: Defines whether or not the element color covers the edges

• padding-box: aligned to padding
• border-box: border-aligned
• content-box: fills the content area
• clip-text: background in the text (the color must be transparent)

background-bland-mode: effects on the background of elements

---

Edges

• border-width: size that the border will be
• border-style: border type
• border-color: border color
• border-radius: Rounds the border

border-image

• source: set image path
• widht: border image width
• repeat: control whether the image repeats or not
• outset: distance from the edge of the element
• slice: divide into regions

---

Content (image or video)

object-fit : How the content of an element behaves in the established box

• fill：填滿整個空間並扭曲
• 包含：它不會變形，但會符合既定的尺寸
• cover：填滿所有空間而不扭曲
• none：忽略父物件的測量值並使用其原始測量值
• 縮小：不變形的最低影像設定

物件位置：使影像居中

• x 軸和 y 軸
• 左、右、中、上、下

The above is the detailed content of CSS Page Styling Frameworks. For more information, please follow other related articles on the PHP Chinese website!