GIỚI THIỆU CSS

Người thực hiện: Nguyễn Ngọc Lâm

Minh họa về CSS
Cú pháp của CSS

selector {
Tagname

Selector
Property1: value1;
Property2: value2;
Property3: value3;
Class
} ID
Thuộc tính của FONT

Property Description Values

font-style, font-variant, font-
weight, font-size/line-height, font-
Sets all the font properties in one
font family, caption, icon, menu,
declaration
message-box, small-caption,
status-bar, inherit
family-name, generic-
font-family Specifies the font family for text
family, inherit
xx-small, x-small, small, medium,
font-size Specifies the font size of text large, x-large, xx-large, smaller,
larger, length, %, inherit
font-style Specifies the font style for text normal, italic, oblique, inherit
Specifies whether or not a text
font-variant should be displayed in a small- normal, small-caps, inherit
caps font
normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600,
font-weight Specifies the weight of a font
700, 800, 900, inherit
Thuộc tính của TEXT

Property Description Values

color Sets the color of a text RGB, hex, keyword
line-height Sets the distance between lines normal, number, length, %
Increase or decrease the space
letter-spacing normal, length
between characters
text-align Aligns the text in an element left, right, center, justify
none, underline, overline, line-
text-decoration Adds decoration to text
through
Indents the first line of text in an
text-indent length, %
element
Controls the letters in an none, capitalize, uppercase,
text-transform
element lowercase
background-color RGB, hex, keyword
Set background color
Thuộc tính của List

Property Description Values

Sets all the properties for a list in list-style-type, list-style-position,
list-style
one declaration list-style-image, inherit
Specifies an image as the list-
list-style-image URL, none, inherit
item marker
Specifies where to place the list-
list-style-position inside, outside, inherit
item marker
none, disc, circle, square,
decimal, decimal-leading-zero,
Specifies the type of list-item armenian, georgian, lower-alpha,
list-style-type
marker upper-alpha, lower-greek,
lower-latin, upper-latin, lower-
roman, upper-roman, inherit
Thuộc tính của Box
Thuộc tính của Box

Property Values
inline | block | run-in | flex | grid | flow |
flow-root | list-item |
table | table-row-group | table-header-
group | table-footer-group |
table-row | table-cell | table-column-group |
table-column |
Display
table-caption | ruby | ruby-base | ruby-text
| ruby-base-container |
ruby-text-container | inline-block | inline-
table | inline-flex |
inline-grid | contents | none
Thuộc tính của Box

Property Value
width length | percentage | auto

height length | percentage | auto

overflow visible | hidden | scroll | auto

box-sizing content-box | border-box

horizontal offset’ ‘vertical offset’ ‘blur

box-shadow distance’ ‘spread distance’ color
inset | none
float None | left | right | initial | inherit;
Thuộc tính của Border

Property Description Values

Sets all the border properties in border-width, border-style,
border
one declaration border-color
border-bottom-width, border-
Sets all the bottom border
border-bottom bottom-style, border-bottom-
properties in one declaration
color
Sets the color of the bottom
border-bottom-color border-color
border
Sets the style of the bottom
border-bottom-style border-style
border
Sets the width of the bottom
border-bottom-width border-width
border
color_name, hex_number,
Sets the color of the four
border-color rgb_number, transparent,
borders
inherit
Sets all the left border border-left-width, border-left-
border-left
properties in one declaration style, border-left-color
border-left-color Sets the color of the left border border-color
border-left-style Sets the style of the left border border-style
Thuộc tính của Border

Property Description Values

border-left-width Sets the width of the left border border-width
Sets all the right border border-right-width, border-right-
border-right
properties in one declaration style, border-right-color
border-right-color Sets the color of the right border border-color
border-right-style Sets the style of the right border border-style

border-right-width Sets the width of the right border border-width

none, hidden, dotted, dashed,

border-style Sets the style of the four borders solid, double, groove, ridge,
inset, outset, inherit
Sets all the top border properties border-top-width, border-top-
border-top
in one declaration style, border-top-color
border-top-color Sets the color of the top border border-color
border-top-style Sets the style of the top border border-style
border-top-width Sets the width of the top border border-width
thin, medium,
border-width Sets the width of the four borders
thick, length, inherit
Thuộc tính của Border

Property Description Values

border-radius
Radius of border length | percentage

border-top-left-radius
length | percentage

border-top-right-radius
length | percentage

border-bottom-right-radius
length | percentage

border-bottom-left-radius
length | percentage
Nhóm CSS về Margin

Property Values

Margin length | percentage | auto

Margin-top length | percentage | auto

Margin-right
length | percentage | auto

length | percentage | auto

Margin-bottom
length | percentage | auto
Margin-left
Nhóm CSS về Padding

Property Values

padding length | percentage | auto

padding-top length | percentage | auto

padding-right
length | percentage | auto

length | percentage | auto

padding-bottom
length | percentage | auto
padding-left
Thuộc tính của Outline

Property Values

outline-style auto | solid | none | dotted | dashed | double | groove | ridge | inset | outset

outline-width length | thin | medium | thick

outline-color RGB, hex, keyword

outline outline-style outline-width outline-color

Nhúng CSS vào HTML

Inline

Internal

External
Inline

<p style=“color:red;” >Hello CSS</p>

Internal

<p id=“nnl” class=“lnn”>Hello CSS</p>

<style> <style> <style>

p{ .lnn { #nnl {
color:red; color:red; color:red;
} } }
</style> </style> </style>
External

<p class=“nnl”>Hello CSS</p>

<header>
<link rel="stylesheet" type="text/css" href=“lam.css“/>
</header>

.nnl {
lam.css
color:red;
}
Đường dẫn trong HTML

• Quy tắc :
Đường dẫn
• Bên trong thư mục: / tương đối
Bên ngoài thư mục: ../
Bài tập 01
Bài tập 01
Bài tập 02
Bài tập 03
Tài liệu tham khảo

1. Learning Web Design: A Beginner's Guide to HTML, CSS,

JavaScript, and Web Graphics - Jennifer Robbins

2. https://www.w3schools.com/html/default.asp
Xin chân thành cảm ơn !