Báo cáo 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 / 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à