và thuộc tính Color.). Do đặc điểm kỹ thuật ban đầu, nó đã trở thành trở khó khăn hơn cho vệc tạo ra các web site có nội dung rõ ràng, tách khỏi cách bố trí.
- Để giải quyết vấn đề này World Wide Web Consortium (W3C) đã tạo ra STYLE để đưa thêm vào trong HTML 4.0
- Tất cả các trình duyệt được hỗ trợ CSS.
22 trang |
Chia sẻ: maiphuongtl | Lượt xem: 2021 | Lượt tải: 2
Bạn đang xem trước 20 trang tài liệu Báo cáo Các thuộc tính của CSS, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
TRƯỜNG ĐẠI HỌC SƯ PHẠM HÀ NỘI
Khoa công nghệ thông tin
=====o0o=====
Báo Cáo
Đề tài: Các thuộc tính của CSS
Sinh viên thực hiện: Mạc Thị Mai
NỘI DUNG
Định kiểu trình bày trang Web bằng CSS
I . Giới thiệu về CSS:
1. CSS là cái gì?
- CSS viết tắt của Cascading Style Sheet
- CSS là mẫu quy định cách thức thể hiện các thẻ HTML
- CSS được đưa vào HTML 4.0 để giải quyết một số vấn đề về trình bày dữ liệu
- Giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.
- Có thể định nghĩa nhiều style vào một thẻ HTML (Cascading)
- Định dạng một số tính chất thông thường được lưu trữ trong style Sheet.
2. Style (định dạng mẫu) giải quyết một số vấn đề thông thường:
(Styles solve a common problem)
- Các thẻ HTML chuẩn được thiết kế để định nghĩa nội dung của một văn bản. Đầu tiên các thẻ HTML hỗ trợ cách viết "Đây là tiêu đề", "Đây là đoạn", "Đây là bảng".... bằng cách sử dụng các thẻ , , ... Cách bố trí văn bản này được qui định bởi trình duyệt web và không có bất cứ một thẻ nào để định dạng văn bản.
- Nescape và Internet Explorer là một trong hai trình duyệt chính tiếp tục đưa thêm vào các thẻ HTML mới cùng các thuộc tính (như các thẻ và thuộc tính Color..). Do đặc điểm kỹ thuật ban đầu, nó đã trở thành trở khó khăn hơn cho vệc tạo ra các web site có nội dung rõ ràng, tách khỏi cách bố trí.
- Để giải quyết vấn đề này World Wide Web Consortium (W3C) đã tạo ra STYLE để đưa thêm vào trong HTML 4.0
- Tất cả các trình duyệt được hỗ trợ CSS.
3. Style Sheets có thể tiết kiệm được nhiều cho công việc thiết kế:
(Style Sheets can save a lot of work)
- Style thường được lưu trong các file nằm ngoài trang web. Chúng giúp bạn có thể thay đổi cách thức định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS. Chỉ khi bạn muốn thay đổi lại toàn bộ màu sắc, cách định dạng của các tiêu đề, nội dung bạn mới hiểu rõ tác dụng thực sự của CSS.
- CSS cho phép chúng ta điều khiển cách định dạng và cách bố trí của cùng lúc nhiều web site với chỉ duy nhất web site với chỉ duy nhất 1 lần thay đổi tại một vị trí. Là một người thiết kế web, bạn có thể định nghĩa 1 file CSS cho các thẻ HTML và áp dụng nó vào nhiều trang - CSS cho phép chúng ta điều khiển cách định dạng và cách bố trí của cùng lúc nhiều web mà bạn muốn. Để thay đổi tổng thể các trang web này bạn chỉ đơn giản là thay đổi file CSS và tất cả các trang đã áp dụng sẽ được thay đổi một cách tự động.
4. Nhiều Style xếp tầng vào một
(Multiple Styles will cascade into one)
- CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong 1 trang web hoặc ở trong một file CSS bên ngoài. Thậm chí nhiều Style Sheet bên ngoài có thể tham chiếu trong một tài liệu HTML.
-Có 4 loại: Trong đó mức ưu tiên giảm dần từ trên xuống
Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)
Internal Style (Style được qui định trong phần của 1 trang HTML )
External Style (style được qui định trong file .CSS ngoài)
Browser Default (thiết lập mặc định của trình duyệt)
a . Inline Style:
- Là kiểu được gán cho một dòng hoặc một đoạn văn bản bằng cách sử dụng thuộc tính style bên trong tag muốn định dạng.
-Cú pháp:
Nội dung văn bản muốn định dạng
Ví dụ : TU BACH.
b . Internal Style:
-Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản, bằng cách tạo bảng mẫu chung trên đầu trang và dùng chung cho cả trang HTML.
-Cú pháp:
Tên_thẻ{thuộctính1:giátrị1; thuộctính2:giátrị2;…}
c . External Style:
-Là bảng kiểu được lưu trữ thành 1 file bên ngoài và được liên kết với trang HTML. Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của một Website
- Cách tạo:
+ tạo một tập tin văn bản mới
+ nhập tên các tag muốn định dạng thuộc tính theo mẫu:
Tên_thẻ{thuộctính1:giátrị1; thuộctính2:giátrị2;…}
+lưu tập tin với định dạng Text Only và có phần đuôi mở rộng .css
- Cách dùng:
- Cú pháp:
d. Browser Default - Là cách thiết lập mặc định của trình duyệt.
II.Cú pháp của CSS
1.Cú pháp
Cú pháp của CSS gồm có 3 phần: Selector, Property, Value.
-Selector: Đối tượng bị ảnh hưởng, có thể là tên thẻ, có thể là một lớp hoặc một định danh.
-Property: Tên thuộc tính
-Value: Giá trị thiết lập cho thuộc tính
Cách khai báo Style:
selector {
Property1: Value1;
Property2: Value2;
}
Chú ý:
Nếu Value1 là nhiều từ ngữ phải đặt dấu ngoặc kép (“ “) quanh giá trị.
Nếu muốn chỉ định nhiều hơn một property bạn phải tách riêng từng sở hữu với một dấu chấm phẩy.
Có thể nhóm các Selector, được phân tách bằng dấu phẩy:
Ví dụ:
h1,h2,h3,h4,h5,h6
{
color: green
}
Ví dụ:
Đối tượng là tên 1 thẻ:
P
{
Text-align:center ;
Color: red;
Font-family:arial
}
Đối tượng là 1 nhóm các thẻ:
h1, h2, h3, h4, h5, h6
{
Color:red;
}
2. Đối tượng lớp: Với lớp , ta có thể xác định các Style khác nhau cho cùng một loại phần tử HTML.
a.Tạo lớp:
- Trường hợp 1: gắn với thẻ cụ thể: đặt selector là tên_thẻ . tên_lớp
Ví dụ:
p.kich_thuoc_12
{
color:#336699;
font-size:12px;
}
p. kich_thuoc_10
{
color:#336677;
font-size:10px;
}
- Trường hợp 2: không gắn với thẻ cụ thể: bỏ tên thẻ, chỉ có dấu chấm và tên lớp.
Ví dụ: . kich_thuoc_10
{
color:#336677;
font-size:10px;
}
b. Sử dụng lớp: Đặt thuộc tính class của thẻ=“tên_lớp”:
Ví dụ:
Đoạn này có cỡ chữ là 10 pixel
Để áp dụng nhiều hơn 1 lớp cho một thẻ, cú pháp là:
Đoạn này sẽ dùng lớp center và dùng lớp bold.
3.Đối tượng định danh: được xác định bởi #.
Tạo định danh: tương tự như lớp(class) nhưng ta thay dấu chấm(.) thành dấu (#) và định danh chỉ được sử dụng 1 lần.
Ví dụ: p# kich_thuoc_10
{
color:#336677;
font-size:10px;
}
#kich_thuoc_10
{
color:#336677;
font-size:10px;
}
Chú ý: Không được bắt đầu tên định danh với 1 số, nó sẽ không làm việc trong Mozilla / Firefox.
III.Các thuộc tính của CSS
1.CSS và nền (background):
CSS cung cấp cho chúng ta các thuộc tính để ta có thể chọn lựa màu nền, thiết lập 1 hình ảnh làm nền, lặp lại hình nền theo chiều dọc , ngang và vị trí của 1 ảnh trên 1 trang…
Thuộc tính
Mô tả
Giá trị
background
Cài đặt tất cả các thuộc tính cho nền
background-color
background-image
background-repeat
background-attachment background-position
background-attachment
Thiết lập một nền với hình ảnh được cố định hoặc di chuyển với phần còn lại của trang web
Scroll (cuốn) fixed (cố định)
background-color
Thiết lập màu sắc cho nền
(Màu sắc có giá trị có thể là một tên màu (red), một giá trị rgb (rgb (255,0,0)), hoặc một số hex (# FF0000))
color-rgb color-hex color-name transparent (mặc định. Màu nền là trong suốt)
background-image
Thiết lập hình ảnh cho nền
url(URL) (URL: thay thế bằng tên ảnh) none (không có hình ảnh)
background-repeat
Cách thiết lập cho hình ảnh lặp lại
Repeat ( lặp cả ngang lẫn chiều dọc) repeat-x ( lặp theo tọa độ ngang) repeat-y( lặp theo tọa độ dọc) no-repeat ( không lặp)
background-position
Thiết lập các vị trí bắt đầu của hình nền
top left (trên, bên trái) top center (trên, ở giữa) top right (trên, bên phải) center left (giữa trái) center center (giữa giữa) center right (giữa phải) bottom left (đáy, trái) bottom center (đáy , giữa) bottom right (đáy, phải) x% y%
xpos ypos
Ví dụ: Các bạn có thể xem ví dụ tại
2. CSS và văn bản (Text)
Cung cấp cho chúng ta các thuộc tính làm thay đổi màu sắc, tăng hoặc giảm khoảng trống giữa các kí tự trong một văn bản, canh lề , trang trí một văn bản, thụt dòng đầu tiên trong một văn bản …
Thuộc tính
Mô tả
Giá trị
color
Đặt màu cho văn bản
Màu sắc(có giá trị có thể là một tên màu (red), một giá trị rgb (rgb (255,0,0)), hoặc một số hex (# FF0000))
direction
Đặt hướng của văn bản
ltr ( từ trái sang phải) rtl (từ phải sang trái)
line-height
Đặt khoảng cách giữa các dòng.
Normal ( mặc định khoảng cách hợp lý) number length ( có thể là 1px, 2px…) % (Thiết lập một khoảng cách giữa các dòng là % kích thước hiện tại của phông chữ)
letter-spacing
Tăng hoặc giảm khoảng trống giữa các ký tự
normal length
text-align
Căn chỉnh văn bản
left right center justify
text-decoration
Thêm trang trí cho văn bản
none underline ( gạch chân) overline (gạch trên đầu) line-through ( gạch xuyên chữ) blink
text-indent
Thụt lề dòng đầu tiên của văn bản.
length %
text-shadow
none color length
text-transform
Định dạng chữ hoa hay chữ thường
None ( mặc định chữ bình thường) capitalize (mỗi từ bắt đầu bởi 1 chữ cái viết hoa) uppercase (tất cả các chữ cái đều viết in) lowercase ( tất cả đều là chữ thường)
unicode-bidi
normal embed bidi-override
white-space
Tạo khoảng trống
normal pre nowrap
word-spacing
Khoảng cách giữa các chữ
normal length
Ví dụ: Các bạn có thể xem ví dụ tại:
3 . CSS và font
Cho phép ta thay đổi font chữ, in đậm, kích thước và kiểu chữ.
Thuộc tính
Miêu tả
Giá trị
font
font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar
font-family
Định dạng font
family-name generic-family
font-size
Định dạng kích thước của 1 font chữ
xx-small x-small small medium large x-large xx-large smaller larger length %
font-size-adjust
Điều chỉnh kích thước font chữ
none number
font-stretch
normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded
font-style
Thiết đặt kiểu của font chữ
normal italic ( chữ nghiêng) oblique (chữ xiên)
font-variant
normal small-caps
font-weight
Tạo độ đậm, nhạt của font chữ
normal bold (đậm) bolder lighter (mỏng, nhạt) 100 200 300 400 500 600 700 800 900
Ví dụ: Các bạn có thể xem ví dụ tại:
4 . CSS và phân cấp (outline)
Giúp xác định cá thuộc tính về màu sắc, kiểu, chiều rộng của các outline.
Thuộc tính
Miêu tả
Giá trị
outline
outline-color outline-style outline-width
outline-color
Đặt màu sắc của khung
color invert
outline-style
Kiểu khung
none dotted dashed solid double groove ridge inset outset
outline-width
Đặt chiều rộng của khung
thin medium thick length
Ví dụ: Các bạn có thể xem ví dụ tại đây:
5. CSS và đường viền
Cho phép xác định được kiểu và màu sắc đường viền…
Thuộc tính
Miêu tả
Giá trị
border
A shorthand property for setting all of the properties for the four borders in one declaration
border-width border-width border-style border-style border-color đường viền màu
border-bottom
A shorthand property for setting all of the properties for the bottom border in one declaration
border-bottom-width border-bottom-width border-style border-style border-color đường viền màu
border-bottom-color
Sets the color of the bottom border
border-color đường viền màu
border-bottom-style
Sets the style of the bottom border
border-style border-style
bordor-bottom-width
Sets the width of the bottom border
thin mỏng medium trung thick dày length chiều dài
border- color
Sets the color of the four borders, can have from one to four colors
color màu sắc
border-left
A shorthand property for setting all of the properties for the left border in one declaration
border-left-width border-left-width border-style border-style border-color đường viền màu
border-left-color
Sets the color of the left border
border-color đường viền màu
border-left-style
Sets the style of the left border
border-style border-style
border-left-width
Sets the width of the left border
thin mỏng medium trung thick dày length chiều dài
border-right
A shorthand property for setting all of the properties for the right border in one declaration
border-right-width border-right-width border-style border-style border-color đường viền màu
border-right-color
Sets the color of the right border
border-color đường viền màu
border-right-style
Sets the style of the right border
border-style border-style
border-right-width
Sets the width of the right border
thin mỏng medium trung thick dày length chiều dài
border-style
Sets the style of the four borders, can have from one to four styles
none không cái nào hidden ẩn dotted yêu thương dashed dashed solid rắn double đôi groove groove ridge cây rơm inset inset outset outset
border-top
A shorthand property for setting all of the properties for the top border in one declaration
border-top-width border-top-width border-style border-style border-color đường viền màu
border-top-color
Sets the color of the top border
border-color đường viền màu
border-top-style
Sets the style of the top border
border-style border-style
border-top-width
Sets the width of the top border
thin mỏng medium trung thick dày length chiều dài
border-width
A shorthand property for setting the width of the four borders in one declaration, can have from one to four values
thin mỏng medium trung thick dày length chiều dài
Ví dụ: Các bạn có thể xem ví dụ tại đây:
6. CSS và canh lề
Giúp xác định lề của trang: canh lề trái, lề phải, phía trên, phía dưới.
Thuộc tính
Miêu tả
Giá trị
margin
A shorthand property for setting the margin properties in one declaration
margin-top margin-right margin-bottom margin-left
margin-bottom
Sets the bottom margin of an element
auto length %
margin-left
Sets the left margin of an element
auto length %
margin-right
Sets the right margin of an element
auto length %
margin-top
Sets the top margin of an element
auto length %
Ví dụ: Các bạn có thể xem ví dụ tại đây:
7. CSS và danh sách
Cho phép đặt, thay đổi giữa các mục trong danh sách hoặc thiết đặt hình ảnh trong danh sách.
Thuộc tính
Miêu tả
Giá trị
list-style
A shorthand property for setting all of the properties for a list in one declaration
list-style-type list-style-position list-style-image
list-style-image
Sets an image as the list-item marker
none url
list-style-position
Sets where the list-item marker is placed in the list
inside outside
list-style-type
Sets the type of the list-item marker
none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha
marker-offset
auto length
8. CSS và bảng
Thuộc tính
Miêu tả
Giá trị
border-collapse
Sets whether the table borders are collapsed into a single border or detached as in standard HTML
collapse separate
border-spacing
Sets the distance that separates cell borders (only for the "separated borders" model)
length length
caption-side
Sets the position of the table caption
top bottom left right
empty-cells
Sets whether or not to show empty cells in a table (only for the "separated borders" model)
show hide
table-layout
Sets the algorithm used to display the table cells, rows, and columns
auto fixed
Ví dụ: Các bạn có thể xem ví dụ tại đây:
Tài liệu tham khảo:
Nội dung chủ yếu của bài được dịch từ , phần còn lại từ... một số nguồn khác.
Mục lục
I.Giói thiệu về CSS
1.CSS là cái gì?
2. Style (định dạng mẫu) giải quyết một số vấn đề thông thường:
3. Style Sheets có thể tiết kiệm được nhiều cho công việc thiết kế:
4.Nhiều Style xếp tầng vào một
a. Inline Style
b .Internal Style:
c. External Style:
d. Browser Default
II.Cú pháp của CSS
1.Cú pháp
2. Đối tượng lớp
a.Tạo lớp:
b. Sử dụng lớp:
3.Đối tượng định danh
III.Các thuộc tính của CSS
1.CSS và nền (background):
2. CSS và văn bản (Text)
3 . CSS và font
4 . CSS và phân cấp (outline)
5. CSS và đường viền
6. CSS và canh lề
7. CSS và danh sách
8. CSS và bảng
