Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS, Grid image, image - Coggle Diagram
CSS
list & table
:check:<ul> link -style - type: circle/ square
<ol> link -style - type: upper-roman/ lower-alpha
,
:check:list-style-image: url('sqpurple.gif');
:check:list-style-position: outside/inside;
:check:[shorthand]
list-style: square inside url("sqpurple.gif");
<table>, <th>, <td>
,
border-collapse: collapse; (single border)
<th>,<td>
border- bottom : 1px solid #ddd;
:warning:horizontal alignment of the content in <th> or <td>.
text-align: right/left/center;
:warning:vertical alignment of the content in <th> or <td>.
vertical-align: bottom/top/middle;
<tr>
tr:hover{background-color: red;}
tr: nth-child (odd/even) {background-color: red;}
back-ground
background-color:
background-repeat: repeat / no-repeat / repeat -x (lặp lại theo chiều ngang) / repeat -y (lặp lại theo chiều dọc) ;
background- images: url("abc.gif");
background-position: right top;
background-attachment: scrolled (cuộn theo thanh cuốn)/ fixed (nền được cố định vào khung hình 'viewport')
shorthand
background: #000000 url("") no-repeat fixed right top;
Syntax
selector { property: value ; (declaration) } ,
selector: type h1{}; universal *{}; class .box{}; id #{}; pseudo-class p: first-child{}; pseudo-element p::first-line{};...
property: background, color, image, border, padding, margin, radius, font,...
cmt : /
abc
/
Build block
box model : The CSS box model is essentially a box that wraps around every HTML element.
Padding
nằm giữa border và content
Mang giá trị dương
padding : top right bottom left
or padding-top: /padding-right:/...
add "width:30px, padding:25px" = width of element =350px - specify the width of the element's content area.
To maintain width of element => add "box-sizing: border- box"
value
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
Margin
create space around elements, outside of any defined borders.
same padding
note: value has "auto" - the browser calculates the margin
Border
border-top/ border-right/ border-left, border-right
(short-hand) border: width style color /
style: option
/
có màu sắc, hình dạng, kích thước
border-width: 1px
border-style: dotted/solid/double
border-color:
border- radius: 5px ( viền tròn xung quanh )
value: px, pt, cm, em, etc
Height and Width of BOX
height: 200px;
width: 50%;
Block & Inline Box:
block box: break structure to create a new line; Take up all space (100%); apply width & height; can't effect when setting padding, margin, border ; (<section>, <div>, <article>, <h1>-<h6>, <p>)
inline block: in a line, only take up the space enough for content; NO apply width & height; effect to the others when setting padding, margin, border (<a>, <span>, <em>, <strong>
display property for controlling layout
Every HTML element has a default display value ; block/inline. :red_flag:However, you can override this.
note: Setting display property of an element only changes how element is displayed, NOT what kind of element it is. So, an inline element with (display: block); is not allowed to have other block elements inside it.
display: none/block/inline;
none:
visibility: hidden; (still take up the same space as before)
:!?:display: inline-block;
outline: the outline is drawn
outside the element's border
Same attribute of border
outline-offset: 15px (adds space between an outline and the edge/border of an element)
BOX-SIZING: allows us to include the padding and border in an element's total width and height.
DEFAULT :warning: element's border and padding are added to the element's specified width/height).
=> box-sizing: border-box; ( :fire: set for *)
Color
rgb(red, green, blue)
rgba(r,g,b, alpha) - alpha (transparent)
HEX: #rrggbb
hsl(hue, saturation, lightness)
Gradient
https://cssgradient.io/
Text ('layout styles' - khoảng cách các ký tự, các chữ, các dòng) & Font ( phông chữ )
ICON; LINK
Text
text color
color: red; background -color: white
:no_entry: If you define the color property,
you must also define the background-color.
text-align: center/ left/ right/justify;
(căn lề :red_cross: justify: stretch
dòng ngang vs width of element)
text -decoration: none/overline/line-through/underline;
text - transform:UPPERCASE / lowercase/ CaPiTaLize
text - indent : 50px (lùi đầu dòng)
letter-spacing: 3px/-3px; (space ~ characters)
line-height: 0.8; (kc dòng)
words- pacing:10px
text -shadow: 2px 2px 5px red;
horizontal - vertical - blur - color
overflow: clip the content or to add scrollbars
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
Font
Font family: "Times New Roman",
Times, serif;
generic family - a group of font families with a similar look (like "Serif" or "Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
If font family is more than one word, in quotes: "Times New Roman".
shorthand font: italic bold 12px Georgia, serif;
font-style: normal ; font-weight: bold;
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning"
:red_cross: font-weight: normal/bold;
font-size: 40px; (defaut: 16px=1em)
icon : fontaswsome
<i class="material-icons">cloud</i>
Link
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example:
The modern TEK for layout
Flexbox
flex-direction: column/row (-reverse: đảo thứ tự)
flex-wrap: wrap/nowrap;
shorthand of flex-direction & -wrap
flex-flow: row wrap;
justify-content: center/ flex-start/ flex-end/ spacing-around (dãn cách)/ space-between (dãn hết);
(align - chỉnh hàng ngang the flex items)
align-items: center/ flex-start/ flex-end/ stretch ( fill the container)/ baseline;
Chỉnh hàng dọc - align the flex items
:star: align- content: space-between/ space- around/ stretch/ center/ flex-start/ flex-end;
used to align the flex lines
:fire:Child element (ITEMS)
order
flex-shrink (lùi)
flex-basis (dùng px)
align-self:
,
flex-grow
,
:<3:SHORTHAND
flex: flex-grow, flex-shrink, flex-basis;
<div style="flex: 0 0 200px">3</div>
Media Queries
Basic:
media
media-type and (media- feature -rule) { /*CSS rules}
media-type: phương tiện để duyệt nội dung web.
all, print, screen, speech (xuất PDF hoặc in ra giấy).
media-feature-rule (media expression): điều kiện thực hiện CSS rules
width/ min-width/ max-width:
orientation: landscape/ portrait (ngang/dọc)
CSS rules: Bộ quy tắc được áp dụng khi thỏa điều kiện.
Complex:
and
media
screen and (min-width: 960px) and (orientation: landscape) { body{color: red;} } // Kiểm tra màn hình có ở width trên 960px VÀ :no_entry: chế độ landscape không thì đổi màu văn bản sang xanh
or ,
media
screen and (min-width: 960px) , (orientation: landscape) { body{color: red;} } :no_entry: HOẶC
not
media
not all and (orientation: landscape) {}
PHỦ ĐỊNH toàn bộ truy vấn
Grid
<div class="grid-container">
<div class="grid-item">1</div>
...
:confetti_ball:.grid-container{
display: grid/ inline-grid;
:confetti_ball:grid-column-gap: 50px;
grid-row-gap: 50px;
grid-gap: 50px 100px; // shorthand of row and column
:confetti_ball:grid-template-columns: auto auto auto auto;
grid-template-columns: 80px 200px auto 40px;
define the width of each column.
THE SAME for///////// grid-template-rows;
:confetti_ball: justify-content: space-evenly/ space-around/ space- between/center/start/ end (ngang)
THE SAME for\\\\\\\align-content (dọc)
:tada:CHILD
.item1 {grid-column: 1/5;}
bắt đầu từ cột 1 kéo dài đến TRƯỚC cột 5
.item1 {grid-column: 2/ span 3;}
bắt đầu từ cột 2 KÉO DÀI 3 cột liên tiếp
THE SAME for\\\\ grow-row
:tada:
grid-area: 1 / 2 / 5 / 6;
start on row-line 1 and column-line 2, and end on row-line 5 and column line 6 (xác định khối)
ROW FIRST COLUMN SECOND
grid-area: 2 / 1 / span 2 / span 3;
The old TEK for Layout
Position
static :pencil2: according to the normal flow of the page
not affected by the top, bottom, left, and right properties.
relative :pencil2: Other content not fit into any gap
Setting the top, right, bottom, and left properties
fixed :pencil2: positioned relative to the viewport; stays in same place even if the page is scrolled
TO create icons like "Chat with us", "send feedback" , " call "on the web page.
absolute :pencil2: positioned relative to the nearest positioned ancestor// NOPE ancestor : moves along with page scrolling.
sticky :pencil2: positioned based on the user's scroll position. sticky to viewport
Float
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent
:no_entry: clear // specifies what elements can float beside the cleared element and on which side.
none - Allows floating elements on both sides. This is default
left - No floating elements allowed on the left side
right- No floating elements allowed on the right side
both - No floating elements allowed on either the left or the right side
inherit - The element inherits the clear value of its parent
CLEARFIX HACK :forbidden:
Grid
