Tài liệu TÌM HIỂU VỀ CSS BASIC: TÌM HIỂU VỀ CSS BASIC
******
I. MỞ ĐẦU:
Để đi vào tìm hiểu chi tiết về CSS (theo yêu cầu của thầy Lê Nguyên Sinh là tìm hiểu về CSS Basic) em xin đưa ra một số giới thiệu và khái niệm cơ bản về CSS.
1. CSS HOME:
Chứng chỉ online của W3Schools' - Chương trình trực tuyến. Các giải pháp hoàn hảo cho các chuyên gia, những người bận rộn cần phải cân bằng công việc, gia đình, và sự nghiệp xây dựng. Hơn 3000 người đã được cấp giấy chứng nhận! HTML Giấy chứng nhận tài liệu của bạn kiến thức về HTML, XHTML, and CSS. JavaScript Giấy chứng nhận tài liệu của bạn kiến thức về HTML và Javascript DOM. XML Giấy chứng nhận tài liệu của bạn kiến thức về XML, XML DOM và XSLT. Các LYS Giấy chứng nhận tài liệu của bạn kiến thức về ASP, SQL, và ADO. Các PHP Giấy chứng nhận tài liệu của bạn kiến thức về PHP và SQL (MySQL).
2. CSS INTRODUCTION:
Bạn nên biết điều gì trước khi đọc tài liệu này:Trước khi bạn tiếp tục, bạn nên có một số cơ bản của sự hiểu biết những điều sau đây: * HTML / ...
33 trang |
Chia sẻ: hunglv | Lượt xem: 1266 | Lượt tải: 0
Bạn đang xem trước 20 trang mẫu tài liệu TÌM HIỂU VỀ CSS BASIC, để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên
TÌM HIỂU VỀ CSS BASIC
******
I. MỞ ĐẦU:
Để đi vào tìm hiểu chi tiết về CSS (theo yêu cầu của thầy Lê Nguyên Sinh là tìm hiểu về CSS Basic) em xin đưa ra một số giới thiệu và khái niệm cơ bản về CSS.
1. CSS HOME:
Chứng chỉ online của W3Schools' - Chương trình trực tuyến. Các giải pháp hoàn hảo cho các chuyên gia, những người bận rộn cần phải cân bằng công việc, gia đình, và sự nghiệp xây dựng. Hơn 3000 người đã được cấp giấy chứng nhận! HTML Giấy chứng nhận tài liệu của bạn kiến thức về HTML, XHTML, and CSS. JavaScript Giấy chứng nhận tài liệu của bạn kiến thức về HTML và Javascript DOM. XML Giấy chứng nhận tài liệu của bạn kiến thức về XML, XML DOM và XSLT. Các LYS Giấy chứng nhận tài liệu của bạn kiến thức về ASP, SQL, và ADO. Các PHP Giấy chứng nhận tài liệu của bạn kiến thức về PHP và SQL (MySQL).
2. CSS INTRODUCTION:
Bạn nên biết điều gì trước khi đọc tài liệu này:Trước khi bạn tiếp tục, bạn nên có một số cơ bản của sự hiểu biết những điều sau đây: * HTML / XHTML Nếu bạn muốn học môn này đầu tiên, tim hương dân trên Trang chủ của chúng tôi.
CSS là gì? * Viết tắt của CSS Cascading Style Sheets * Style định nghĩa các thành phần Css được hiển thị như thế nào. * Style thông thường được lưu giữ trong Style Sheets . * Styles đã được thêm vào HTML 4.0 để giải quyết một số vấn đề . * Nhờ External Style Sheets mà bạn có thể tiết kiệm được rất nhiều công việc . * External Style Sheets sẽ được lưu trong tập tin CSS. * Nhiều style định nghĩa sẽ cascade vào một.
Solve một Style thông thường vấn đề Các thẻ HTML được thiết kế ban đầu để xác định nội dung của một tài liệu. Họ được yêu cầu nói, "Đây là một tiêu đề", "Đây là một đoạn", "Đây là một bảng", bằng cách sử dụng thẻ như , , , vv. Việc bố trí của các tài liệu đã được yêu cầu được đưa về chăm sóc của trình duyệt, mà không có bất kỳ bằng cách sử dụng định dạng thẻ. Là một trong hai trình duyệt chính - Netscape và Internet Explorer - tiếp tục để thêm vào các thẻ HTML mới và các thuộc tính (như các từ khóa và màu sắc thuộc tính) vào mã HTML đặc điểm kỹ thuật ban đầu, nó đã trở nên khó khăn hơn và nhiều hơn nữa để tạo ra các trang web có nội dung HTML văn bản rõ ràng đã được tách ra khỏi các tài liệu của trình bày bố cục. Để giải quyết vấn đề này, World Wide Web Consortium (W3C) - phi lợi nhuận, tiêu chuẩn thiết lập công ty, chịu trách nhiệm về standardizing HTML - tạo mẫu trong Ngoài ra HTML 4,0. Tất cả các trình duyệt được hỗ trợ Cascading Style Sheets.
Style Sheets có thể lưu rất nhiều công việc :Các style trong HTML 4.0 định nghĩa các thành phần HTML hiển thị như thế nào - giống như các từ khóa font chữ và màu sắc thuộc tính trong HTML 3.2. Style bình thường được lưu ở bên ngoài. Css tập tin. Bên ngoài theo Style trang tính cho phép bạn thay đổi sự xuất hiện và bố trí của tất cả các trang web của bạn, chỉ cần bằng cách chỉnh sửa một tài liệu duy nhất CSS! CSS là một khâu đột phá trong thiết kế web, vì nó cho phép các nhà phát triển để kiểm soát và bố trí theo Style của nhiều trang web cùng một lúc. Với tư cách là một nhà phát triển web, bạn có thể xác định một Style cho mỗi phần tử HTML và áp dụng nó để càng nhiều các trang Web như bạn muốn. Để thực hiện một thay đổi toàn cầu, chỉ cần thay đổi Style, và tất cả các yếu tố trong trang Web được cập nhật tự động.
Nhiều Styles sẽ xếp lớp vào một: Style trang tính theo Style cho phép các thông tin sẽ được xác định trong nhiều cách khác nhau. Style có thể được xác định bên trong một phần tử HTML, bên trong các yếu tố của một trang HTML, hoặc trong một tập tin CSS bên ngoài. Thậm chí nhiều Style trang tính bên ngoài có thể được tham chiếu trong một tài liệu HTML. Xếp lớp đặt hàng Style sẽ được sử dụng khi có nhiều hơn một Style cụ thể đối với một phần tử HTML? Nói chung, chúng tôi có thể nói rằng tất cả các Style sẽ "cascade" thành một "ảo" theo Style của bảng điều lệ sau đây, số bốn, nơi có ưu tiên cao nhất: 1. Mặc định của trình duyệt . 2. Style sheet bên ngoài . 3. Style sheet bên trong(bên trong các từ khóa) . 4. Style nội tuyến (bên trong một phần tử HTML) .Vì vậy, một Style nội tuyến (bên trong một phần tử HTML) có ưu tiên cao nhất, điều đó có nghĩa là nó sẽ ghi đè lên một Style tuyên bố từ khóa bên trong, bên ngoài theo Style trong một trang tính, hay trong một cửa sổ trình duyệt (một giá trị mặc định). Lưu ý: Nếu bên ngoài, Style trang tính liên kết được đặt bên dưới nội bộ theo Style trang tính trong HTML , bên ngoài, Style trang tính sẽ ghi đè lên nội bộ theo Style trang tính.
3. CÚ PHÁP CSS:
4. CSS LÀM THẾ NÀO…
5. CSS BACKGROUND:
5.1. Thuộc tính Background – color:
Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt.
Ví dụ:
body {background-color: yellow}
h1 {background-color: red}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
This is header 1
This is header 2
This is a paragraph
5.2. Background-image:
Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image.
Ví dụ:
Ví dụ này minh chứng như thế nào để đặt một hình ảnh làm Background:
body
{
background-image:
url('bgdesert.jpg')
}
5.3. Background-repeat:
Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:
- repeat-x: Chỉ lặp lại ảnh theo phương ngang.
Ví dụ:
body
{
background-image:
url('hoang.jpg');
background-repeat: repeat-x
}
- repeat-y: Chỉ lặp lại ảnh theo phương dọc.
Ví dụ:
body
{
background-image:
url('hoang.jpg');
background-repeat: repeat-y
}
- repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
Ví dụ:
body
{
background-image:
url('hoang.jpg');
background-repeat: repeat
}
- no-repeat: Không lặp lại ảnh.
Ví dụ:
body
{
background-image: url('hoang.jpg');
background-repeat: no-repeat
}
5.4. Background-attachment:
Background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:
- scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
Ví dụ:
body
{
background-image:
url('hoang.jpg');
background-repeat:
no-repeat;
background-attachment:
scroll
}
The image will scroll with the rest of the page
- fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.
Ví dụ:
body
{
background-image:
url('hoang.jpg');
background-repeat:
no-repeat;
background-attachment:
fiexd
}
The image will not scroll with the rest of the page
5.5. Background-position:
Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà nó làm nền).
Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Ví dụ như: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos.
body{ background-image: url(hoang.gif);background-repeat: no-repeat;background-attachment:fixed;background-position: top left}
body{ background-image: url(hoang.gif);background-repeat: no-repeat;background-attachment:fixed;background-position: 0% 0%}
5.6 Thuộc tính background rút gọn:
Chúng ta có thể khái quát cấu trúc rút gọn cho nhóm background: background: | | | |
Các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.
Ví dụ:
body
{
background: #00ff00 url('hoang.jpg') no-repeat fixed center;
}
This is some text
6. CSS Text:
Thuộc tính Text của CSS xác định sự xuất hiện của văn bản.
6.1. Text Color:
Để định màu chữ chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ.
Ví dụ:
h1 {color: red}
h2 {color: yellow}
p {color: rgb(0,0,255)}
Day la dong tieu de 2
Day la doan van ban
6. 2. Text-indent:
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS.
Ví dụ sau chúng ta định dạng văn bản thụt vào 3cm:
p {text-indent: 3cm}
Gio theo loi gio may duong may
Dong nuoc buon thiu hoa bap lay
Thuyen ai dau ben song trang do
Co trot rang ve kip toi nay
6.3. Text-align:
Thuộc tính text-align giúp bạn thêm các căn chỉnh văn bản cho các thành phần trong trang web. Thuộc tính này có tất cả 4 giá trị : left (căn trái – mặc định), right (căn phải), center (căn giữa) và justify (căn đều hai bên).
Ví dụ:
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
Welcome to HuyHoang’s website!
See how much I love you
0124
6.4 Letter-spacing:
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản.
Ví dụ:
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
This is header 1
This is header 4
6.5 Text-transform:
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML. Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định).
Ví dụ:
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
Neu la chim toi xin lam loai bo cau trang
Neu la hoa toi xin lam mot doa huong duong
La nguoi toi xin chet cho que huong
6.6 Direction:
Thiết lập hướng cho chữ. Nhận hai giá trị : ltr, rtl.
Ví dụ:
div.one
{
direction: rtl
}
div.two
{
direction: ltr
}
Some text. Right-to-left direction.
Some text. Left-to-right direction.
6.7 Text-decoration:
Thêm trang trí cho văn bản. Thuộc tính nhận các giá trị sau: none, underline, overline, line-through, blink.
Ví dụ:
h1 {text-decoration: line-through }
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
Ta Duy Hoang
K56A
Cong nghe thong tin
Doan van ban
This is a link
6.8 White-Space:
Thiết lập số khoảng trắng trong một thành phần. Thuộc tính nhận các giá trị: normal, pre, nowrap.
Ví dụ:
p.small {line-height: 90%}
p.big {line-height: 200%}
Một mùa thu trước, mỗi hoàng hôn Nhặt cánh hoa rơi chẳng thấy buồn Nhuộm ánh nắng tà qua mái tóc Tôi chờ người đến với yêu đương
Người ấy thường hay ngắm lạnh lùng Dải đường xa vút bóng chiều phong Và phương trời thẳm mờ sương cát Tay vít dây hoa trắng chạnh lòng
Người ấy thường hay vuốt tóc tôi Thở dài trong lúc thấy tôi vui Bảo rằng: hoa giống như tim vỡ Anh sợ tình ta cũng vỡ thôi
6.9 Word-Spacing:
Tăng hoặc giảm khoảng trống giữa các từ. Thuộc tính nhận các giá trị: normal, length.
Ví dụ:
p
{
word-spacing: 30px
}
Hai sac hoa Tigon.
7. THUỘC TÍNH FONT:
7.1. Thuộc tính Font – family:
Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp.
Có hai loại tên font được dùng để chỉ định trong font-family: family-names và generic families.
- Family-names: Tên cụ thể của một font.
- Generic families: Tên của một họ gồm nhiều font.
Ví dụ:
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
Hai sac hoa Tigon
This is a paragraph
Thuở đó nào tôi đã hiểu gì Cánh hoa tan tác của sinh ly Cho nên cười đáp: Màu hoa trắng Là chút lòng trong chẳng biến suy
7.2 Thuộc tính Font-Size:
Kích thước của một font được định bởi thuộc tính font-size. Thuộc tính có thể nhận các giá trị: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %.
Ví dụ:
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
Lap trinh mang 1
Phan CSS
This is a paragraph
7.3 Thuộc tính Font-Size-Adjust:
Xác định một khía cạnh khác nhau có giá trị cho một yếu tố mà sẽ bảo x-chiều cao của sự lựa chọn đầu tiên-font chữ. Thuộc tính nhận hai giá trị: none, number.
Ví dụ:
h1 {font-size-adjust: 0.50}
h2 {font-size-adjust: 0.40}
p {font-size-adjust: 0.60}
Chao mung ban den voi website cua toi!
Huyhoang’s website
This is a paragraph
7.4 Thuộc tính Font-Style:
Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web.
Ví dụ:
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
Chao mung ban den voi website cua toi
Huyhoang’s website
This is a paragraph
7.5 Thuộc tính Font-Variant:
Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ. Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế.
Ví dụ:
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
Huyhoang’s website
Chao mung ban den voi website cua toi
7.6 Thuộc tính Font-Weight:
Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900.
Ví dụ:
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
Đâu biết lần đi một lỡ làng Dưới trời đau khổ chết yêu đương Người xa xăm quá, tôi buồn lắm! Trong một ngày vui pháo nhuộm đường
Từ đấy thu rồi, thu lại thu Lòng tôi còn giá đến bao giờ Chồng tôi vẫn biết tôi thương nhớ Người ấy, cho nên vẫn hững hờ
Tôi vẫn đi bên cạnh cuộc đời Ái ân lạt lẽo của chồng tôi Mà từng thu chết, từng thu chết Vẫn giấu trong tim bóng một người
8. BORDER:
Bảng các thuộc tính Border:
ThuThuộc tính Tính
Mô tả
GiáGiá trị Trị
border
Một thuộc tính tốc hành để thiết lập thuộc tính cho toàn bộ cả 4 đường bao trong một khai báo.
border-widthborder-styleborder-color
border-bottom
Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao đáy trong một khai báo.
border-bottom-widthborder-styleborder-color
border-bottom-color
Thiết lập màu sắc của đường bao đáy
border-color
border-bottom-style
Thiết lập kiểu cách của đường bao đáy.
border-style
border-bottom-width
Thiết lập độ rộng của đường bao đáy
thinmediumthicklength
border-color
Thiết lập màu sắc của bốn đường bao, có thể đạt màu từ một đến bốn.
color
border-left
Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao trái trong một khai báo.
border-left-widthborder-styleborder-color
border-left-color
Thiết lập màu sắc của đường bao trái.
border-color
border-left-style
Thiết lập kiểu cách của đường bao trái.
border-style
border-left-width
Thiết lập độ rộng của đường bao trái.
thinmediumthicklength
border-right
Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao phải trong một khai báo.
border-right-widthborder-styleborder-color
border-right-color
Thiết lập màu sắc của đường bao phải.
border-color
border-right-style
Thiết lập kiểu cách của đường bao phải.
border-style
border-right-width
Thiết lập độ rộng của đường bao phải.
thinmediumthicklength
border-style
Thiết lập kiểu cách của cả bốn đường bao, có thể đạt được kiểu từ một đến bốn.
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-top
Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao đỉnh trong một khai báo.
border-top-widthborder-styleborder-color
border-top-color
Thiết lập màu sắc của đường bao đỉnh.
border-color
border-top-style
Thiết lập kiểu cách của đường bao đỉnh.
border-style
border-top-width
Thiết lập độ rộng của đường bao đỉnh
thinmediumthicklength
border-width
Một thuộc tính tốc hành để thiết lập độ rộng của bốn đường bao trong một khai báo, có thể có từ một đến bốn giá trị.
thinmediumthicklength
Ví dụ 1:
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
A dotted border
A dashed border
A solid border
A double border
A groove border
A ridge border
An inset border
An outset border
Ví dụ 2:
p.dotted {border-bottom-style: dotted}
p.dashed {border-bottom-style: dashed}
p.solid {border-bottom-style: solid}
p.double {border-bottom-style: double}
p.groove {border-bottom-style: groove}
p.ridge {border-bottom-style: ridge}
p.inset {border-bottom-style: inset}
p.outset {border-bottom-style: outset}
A dotted border
A dashed border
A solid border
A double border
A groove border
A ridge border
An inset border
An outset border
2. Border-top:
p
{
border-top: medium solid #ff0000
}
Some text.
3. Border-Width:
p.one
{
border-style: solid;
border-width: 5px
}
p.two
{
border-style: solid;
border-width: thick
}
p.three
{
border-style: solid;
border-width: 5px 10px
}
p.four
{
border-style: solid;
border-width: 5px 10px 1px
}
p.five
{
border-style: solid;
border-width: 5px 10px 1px medium
}
Some text
Some text
Some text
Some text
Some text
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
4. Border-Color:
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
One-colored border!
Two-colored border!
Three-colored border!
Four-colored border!
9. OUTLINE:
Một phác thảo là một dòng đó là rút ra xung quanh thành phần, cạnh bên ngoài biên giới, để làm cho yếu tố "nổi bật". The outline property sets the outlines around elements. Các tài sản đặt ra những phác thảo tóm tắt các yếu tố xung quanh.
9.1. Outline-Color:
Đặt màu sắc của các phác thảo xung quanh một yếu tố.
Thuộc tính nhận 2 giá trị: Color, Invert.
Ví dụ:
p
{
border: red solid thin;
outline-style: solid;
outline-color: #ff0000
}
Chao mung cac ban den voi website cua toi!.
9.2. Outline-Style:
Đặt theo phong cách của các phác thảo xung quanh một yếu tố. Thuộc tính nhận các giá trị như: none, đotte, dashed, solid, double, groove, ridge, inset, outset.
Ví dụ:
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
A dotted outline
A dashed outline
A solid outline
A double outline
A groove outline
A ridge outline
An inset outline
An outset outline
9.3. Outline-Width:
Đặt chiều rộng phác thảo xung quanh một yếu tố. Nhận các giá trị: thin, thick, medium, length.
Ví dụ:
p.one
{
border: red solid thin;
outline-style: solid;
outline-width: thick
}
p.two
{
border: red solid thin;
outline-style: solid;
outline-width: 2px
}
Chao mung cac ban den voi website của toi!.
Huyhoang’s website.
10. MARGIN:
Thuộc tính margin trong CSS cũng được dùng để căn lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang. Chúng ta có thể thực hiện căn lề dưới (margin-bottom), căn lề trên (margin-top), căn lề trái (margin-left), căn lề phải (margin-right). Đơn vị để căn lề có thể là tự động (auto), đơn vị đo chiều dài (length), hay phầm trăn (%).
Bảng thuộc tính của Margin:
Thuộc tính
Mô tả
Giá trị
NN
IE
W3C
Margin
Một thuộc tính nhanh để thiết lập thuộc tính cho lề trong một khai báo
Margin-top
Margin-right
Margin-bottom
Margin-left
auto
4.0
4.0
4.0
4.0
CSS1
CSS1
Margin-bottom
Thiết lập lề đáy của một phần tử
Length
%
auto
4.0
3.0
CSS1
Margin-left
Thiết lập lề trái của một phần tử
Length
%
auto
4.0
3.0
CSS1
Margin-right
Thiết lập lề phải của một phần tử
Length
%
auto
4.0
3.0
CSS1
Margin-top
Thiết lập lề đỉnh của một phần tử
Length
%
Cú pháp như sau: margin: | | |
Ví dụ:
p.margin {margin: 2cm 4cm 3cm 4cm}
Doan trinh khong co thuoc tinh Margin
Doan trinh voi thuoc tinh Margin
This is a paragraph with no specified margins
11. PADDING:
Padding quy định khoảng cách giữa phần nội dung và viền của một đối tượng.
Cú pháp: Tương tự margin. Padding: | | |
Ví dụ 1:
td
{
padding-bottom: 10%
}
This is a tablecell with a bottom padding
12. LIST:
12.1. List-style-type:
Thiết lạp kiểu của điểm đánh dấu mục trong danh sách. Thuộc tính có thể nhận các giá trị: 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.
Ví dụ:
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
Disc type
Tra sua
Cafe sua
Circle type
Tra sua
Cafe sua
Square type
Tra sua
Cafe sua
The "none" type
Tra sua
Cafe sua
Decimal type
Tra sua
Cafe sua
Decimal-leading-zero type
Tra sua
Cafe sua
Lower-roman type
Tra sua
Cafe sua
Upper-roman type
Tra sua
Cafe sua
Lower-alpha type
Tra sua
Cafe sua
Upper-alpha type
Tra sua
Cafe sua
Lower-greek type
Tra sua
Cafe sua
Lower-latin type
Tra sua
Cafe sua
Upper-latin type
Tra sua
Cafe sua
Hebrew type
Tra sua
Cafe sua
Armenian type
Tra sua
Cafe sua
Georgian type
Tra sua
Cafe sua
Cjk-ideographic type
Tra sua
Cafe sua
Hiragana type
Tra sua
Cafe sua
Katakana type
Tra sua
Cafe sua
Hiragana-iroha type
Tra sua
Cafe sua
Katakana-iroha type
Tra sua
Cafe sua
12.2. List-style-position:
Đặt một điểm đánh dấu mục danh sách trong danh sách. Thuộc tính nhận các giá trị: inside (thụt lề và đánh dấu phía trái văn bản) và outside (mặc định và có đánh dấu phía trái văn bản).
Ví dụ:
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
This list has a list-style-position with a value of "inside":
Earl Grey Tea - A fine black tea
Jasmine Tea - A fabulous "all purpose" tea
Honeybush Tea - A super fruity delight tea
This list has a list-style-position with a value of "outside":
Earl Grey Tea - A fine black tea
Jasmine Tea - A fabulous "all purpose" tea
Honeybush Tea - A super fruity delight tea
12.3. List-style-image:
Thiết lập một ảnh như một điểm đánh dấu mục danh sách. Thuộc tính có thể nhận giá trị là none (mặc định, không có hình ảnh được hiển thị) hay url (đường dẫn đến ảnh).
Ví dụ:
ul
{
list-style-image: url('hoang.gif')
}
Coffee
Tra sua
Ruou vang
13. TABLE:
Các bảng thuộc tính CSS cho phép bạn thiết lập cách bố trí của một bảng.
CSS Table Properties:
Các bảng thuộc tính CSS cho phép bạn thiết lập cách bố trí của một bảng. Hỗ trợ trình duyệt: IE: Internet Explorer, M: Mạc chỉ trình duyệt IE, F: Firefox, N: Netscape. W3C: Số trong mục "W3C" cột CSS cho biết, trong đó đề nghị các tài sản được xác định (CSS1 hoặc CSS2).
Thuộc tính
Miêu tả
Giá trị
IE
F
N
W3C
border-collapse
Đặt ra biên của bảng là biên đơn hoặc tách riêng ra như trong tiêu chuẩn mã HTML.
collapseseparate
5
1
7
2
border-spacing
Đặt ra một khoảng tách rời biên của các ô (chỉ dùng cho separated border).
length length
5M
1
6
2
caption-side
Thiết lập vị trí của bảng chú thích.
topbottomleftright
5M
1
6
2
empty-cells
Đặt ra trong bất kỳ trường hợp nào hiển thị ô trống ở trong bảng (chỉ dùng cho separated border)
showhide
5M
1
6
2
table-layout
Đặt thuật toán được sử dụng để hiển thị bảng, các tế bào, các hàng, và các cột
autofixed
5M
1
6
2
Một số ví dụ cụ thể:
Ví dụ 1: Về border-collapse:
table.coll
{
border-collapse: collapse
}
table.sep
{
border-collapse: separate
}
Peter
Griffin
Lois
Griffin
Peter
Griffin
Lois
Griffin
Ví dụ 2: Về border-spacing:
table.one
{
border-collapse: separate;
border-spacing: 10px
}
table.two
{
border-collapse: separate;
border-spacing: 10px 50px
}
Peter
Griffin
Lois
Griffin
Cleveland
Brown
Glenn
Quagmire
Ví dụ 3: Về caption-side:
caption
{
caption-side:bottom
}
This is a caption
Peter
Griffin
Lois
Griffin
Ví dụ 4: Về empty-cells:
table
{
border-collapse: separate;
empty-cells: show
}
Peter
Griffin
Lois
Ví dụ 5: Về table-layout:
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
1000000000000000000000000000
10000000
100
1000000000000000000000000000
10000000
100
Trên đây là toàn bộ phần trình bày của em về một số thuộc tính của CSS Basic. Mong rằng sẽ nhận được sự góp ý của thầy.
Giáo viên hướng dẫn:
Lê Nguyên Sinh
Sinh viên thực hiện:
Tạ Duy Hoàng
Các file đính kèm theo tài liệu này:
- TimhieuveCSS_Taduyhoang.doc