03-Cascading Style Sheets (CSS)

PHÁT TRIỂN WEB
KINH DOANH
GV: ThS Nguyễn Quang Phúc
Phát triển web kinh doanh:
CASCADING STYLE SHEETS (CSS)
ThS. Nguyễn Quang Phúc
phucnq@uel.edu.vn
Phát triển web kinh doanh 3
NỘI DUNG
01
Giới thiệu về CSS
02 Sử dụng CSS trong thiết kế

1. Giới thiệu về CSS

CSS là gì?
ü CSS (Cascading Style Sheets) có thể hiểu là một khuôn mẫu định dạng dùng để mô tả
cách hiển thị các thành phần HTML của trang web, có thể kiểm soát bố cục của nhiều
trang cùng lúc.
+ CSS
HTML HTML + CSS

2. Sử dụng CSS trong thiết kế

Quy tắc tạo CSS
ü Cú pháp của CSS thường được tổ chức thành 3 phần: selector, property và value.
selector {property: value}
p
body {color: black} {
text-align: center;
p {font-family: "sans serif"}
color: black;
p {text-align:center; color:red} font-family: arial
}

Đơn vị giá trị độ lớn
– px - pixel – đơn vị nhỏ nhất – %
– pc - pica – 1 pica ≈ 4.23 millimet – rem, em
– in - inch – 1 inch = 2,54 centimet – vw, vh
– mm - milimet – vmin, vmax
– cm - centimet – ex
– Tương đối: Larger, Smaller – ch
– Kích thước tuyệt đối: xx-small,x-small,
small,medium, large, x-large, xx-large

Ghi chú (comment) trong CSS
ü Cú pháp: /* nội dung ghi chú */

Các dạng thức sử dụng CSS
• Inline Style Sheet
Độ ưu tiên giảm dần

Inline Css
• Internal Style Sheet

Internal Css
• External Style Sheet
External Css
• Browser Default Styles

▷ Inline Style Sheet
ü Khai báo trong thuộc tính style theo từng tag HTML
ü Syntax :
<TagName style="property1:value1; property2:value2; ……..; propertyN:valueN;">
Dữ liệu của tag
</TagName>
ü Ví dụ:
<p style="color: red; margin-left: 20px; font-size: 48px;"> This is a paragraph </p>

▷ Internal Style Sheet
ü Nhúng trong tag <style> của trang HTML (đặt trong <head>)
<head>
<style type=“text/css” >
SelectorName
{
property1: value1;
property2: value2;
………
propertyN: valueN;
}
</style>
</head>

▷ Internal Style Sheet

▷ External Style Sheet
ü Mọi style đều lưu trong file có phần mở rộng là *.css (vd: styles.css)
ü Liên kết bằng tag <link>:
<head>
<link rel="stylesheet" href="URL" type="text/css">
</head>
ü Liên kết bằng tag style dùng @import url.
<head>
<style type="text/css">
@import url(URL);
</style>
</head>



C s s?
dụ ng
ức s ử
ách th
iữ a các c
h ế g
,h ạnc
iểm
hư uđ
t íc
Ph ân
à Cần phân tích, phối hợp các dạng thức sử dụng Css cho hợp lý.

CSS Selectors
Inline
Styling > #id
> .class
> Element
Styling
Css Priority Ranking


CSS Selectors
▷ element

CSS Selectors
▷ #id

CSS Selectors
▷ .class

CSS Selectors
▷ element.class
？

CSS Selectors
▷ * (Universal selector)

CSS Selectors
▷ element, element, element, ….

CSS Selectors
▷ Child & Descendent Selectors
ü Child Selectors: khai báo style cho các element nằm trong một element nào đó
(cấp 1)
li
parent > child { … } ul
li
ü Descendent Selectors: khai báo cho tất cả element bên trong một element nào đó.
parent descendent { … } li
li ul li
ul
li
li ol
li

CSS Selectors
▷ Child & Descendent Selectors

Pseudo classes Pseudo elements
ü Syntax: :class ü Syntax: ::element
:root ::before
:link ::after
:visited ::first-letter
:hover ::first-line
:active ::selection
:first-child ….
:last-child
….

CSS Box Model
width: 200px; width: 120px;

margin: 10px; margin: 5px;
260px ?px
padding: 15px; padding: 3px;
border: 5px solid black border: 2px dashed green

CSS Box Model
ü Cách dùng tương tự cho thuộc tính “padding”
margin-top: 10px;
margin-bottom: 20px;
margin: 10px 15px 20px 5px;
margin-left: 5px;
margin-right: 15px
margin-top: 10px;
margin: 10px 15px 20px;
margin-left: 15px;
margin-right: 15px;
margin-top: 10px;
margin-left: 15px; margin: 10px 15px;
margin-right: 15px;
margin-top: 10px;
margin: 10px;
margin-left: 10px;
margin-right: 10px

CSS Inline-block

CSS Backgrounds
▷ Background-clip
padding-box
boder-box
*Lưu ý: chỉ dùng cho solid

background.
content-box

CSS Backgrounds
▷ Background-image
Kết hợp thuộc tính background-

origin dùng tương tự như
background-clip

CSS Backgrounds
▷ Background-position

CSS Backgrounds
▷ Background-attachment

CSS Borders

CSS Icons
▷ Bootstrap Icons
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Xem thêm: https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp


CSS Icons
▷ Google Icons
https://fonts.googleapis.com/icon?family=Material+Icons
Xem thêm: https://fonts.google.com/icons


CSS Position
▷ Relative
ü Xét vị trí hiện tại của đối tượng làm gốc tọa độ

CSS Position
▷ Absolute
ü Xét vị trí của thẻ cha gần nhất có thuộc tính position làm gốc tọa độ

CSS Position
▷ Fixed
ü Neo vị trí cố định theo trình duyệt


CSS Z-index
ü Quy định thứ tự sắp xếp giữa đối tượng (đặt phía trên hoặc phía dưới đối tượng
khác). Z-index chỉ có hiệu lực với khi kết hợp với thuộc tính position hoặc với
các flex items.

CSS Overflow
ü Chỉ định cắt nội dung hoặc thêm thanh cuộn khi nội dung phần tử vượt quá kích
thước cho phép.
ü Giá trị thuộc tính: visible, hidden, scroll, auto.

CSS Float

CSS Math Functions

CSS Variables

CSS Media Queries

CSS Flexbox wrap: xuong dong còn no-wrap: lên dòng
display: flex | inline-flex group màu đỏ có tác dụng đều căn (dãn đều ra, về 1 bên)
justify-self
flex-direction: row | column
flex-wrap: no-wrap | wrap | wrap-reverse flex container
flex-flow: <flex-direction> | <flex-wrap> cross start main axis
justify-content: flex-start | flex-end | center |
space-between | space-around | space-evenly flex item flex item
cross size
flex item
justify-self: flex-start | flex-end | center main size
cross axis
align-content: flex-start | flex-end | center
align-self: flex-start | flex-end | center
flex-grow: <number> dùng để thiết lập kích thước cross end
về mặt tỉ lệ main start main end
flex-shrink: <number>
flex-basis: <length> thiết lập tỷ lệ c
flex: <flex-grow> | <flex-shrink> | <flex-basis>
order: <number>

CSS Flexbox

CSS Flexbox
justify-content: flex-start | flex-end |
center | space-between | space-around |
space-evenly

CSS Flexbox

CSS Flexbox
A
Q

03-Cascading Style Sheets (CSS)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

03-Cascading Style Sheets (CSS)

Uploaded by

Copyright:

Available Formats

PHÁT TRIỂN WEB

02 Sử dụng CSS trong thiết kế

1. Giới thiệu về CSS

HTML HTML + CSS

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

• Inline Style Sheet

Độ ưu tiên giảm dần

• Internal Style Sheet

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

Css Priority Ranking

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

width: 200px; width: 120px;

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

*Lưu ý: chỉ dùng cho solid

2. Sử dụng CSS trong thiết kế

Kết hợp thuộc tính background-

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

Xem thêm: https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

2. Sử dụng CSS trong thiết kế

Xem thêm: https://fonts.google.com/icons

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

ü Neo vị trí cố định theo trình duyệt

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

2. Sử dụng CSS trong thiết kế

You might also like