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);
}
Copy after login
e
The value 250 represents red, 30 represents green, and 70 represents blue, which in this case would result in something similar to:
![Imagem de tonalidade avermelhada](https://img.php.cn/upload/article/000/000/000/172114658654666.png)
-
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;
}
Copy after login
e
It would result in something like:
![Imagem de tonalidade esverdeada](https://img.php.cn/upload/article/000/000/000/172114658762342.png)
-
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);
}
Copy after login
e
This programming would result in a completely green color, but you can look for other tones using the HSL color wheel.
![Circulo cromático](https://img.php.cn/upload/article/000/000/000/172114658949674.png)
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:忽略父物件的測量值並使用其原始測量值
-
縮小:不變形的最低影像設定
物件位置:使影像居中
The above is the detailed content of CSS Page Styling Frameworks. For more information, please follow other related articles on the PHP Chinese website!