Báo cáo Tìm hiểu các thuộc tính cơ bản của CSS

Bài thu hoạch: Tìm hiểu các thuộc tính cơ bản của CSS Họ và tên: Nguyễn Thùy Linh Lớp 56A – Khoa Công nghệ thông tin Background Thiết lập màu nền, ảnh nền cho 1 trang web, định vị và điều chỉnh ảnh nền trong trang web. Background-color Thuộc tính background color giúp đặt 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: cyan } H1 { Background-color: red } H2 { Background-color: orange } Background-image Chèn ảnh nền vào một thành phần trên trang web. Ví dụ: Body { Background-image: url(6.jpg); } Chúng ta phải chỉ định đường dẫn của ảnh trong cặp ngoặc đơn sau url(). Nếu ảnh đặt cùng thư mục với file .css nên ta chỉ cần ghi tên ảnh 6.jpg. Nhưng nếu như ảnh nằm trong thư mục con khác, ta phải ghi đường dẫn đến thư mục con đó. Background-repeat: Lặp lại ảnh nền. Nếu sử dụng 1 ảnh có kích thước quá nhỏ để làm nền cho 1 đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho ta các điều khiển giúp kiểm soát quá trình 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 theo phương ngang. Repeat-y: chỉ lặp lại ảnh theo phương dọc. Repeat: lặp lại ảnh theo cả 2 phương. No-repeat: không lặp lại ảnh. Ví dụ: Body{ Background-image: url(6.jpg); Background-repeat: no-repeat; } Background-attachment (khóa ảnh nền): Thuộc tính này cho phép xác định tính cố định của ảnh nền so 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. 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. Background-possition (định vị ảnh nền): Theo mặc định ảnh nề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-possition ta 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 dung một cặp 2 giá trị để biểu diễn tọa độ ảnh nền. Có nhiều kiểu giá trị cho thuộc tính position: cm, pixels, inches…các đơn vị quy đổi %, các vị trí đặc biệt: top, left, right, bottom… STT Thuộc tính Mô tả 1 top left hình ảnh ở vị trí đầu tiên ngay đỉnh góc trái của trang web. 2 top center hình ảnh ở vị trí đầu trang web nhưng được căn ở vị trí giữa trung tâm trang web 4 top right ảnh ở vị trí trên đầu trang web nhưng căn ở mép góc phải. 3 center left hình ảnh ở vị trí dòng giữa của trang web nhưng nằm ở mép góc trái của trang web. 5 center center hình ảnh ở vị trí dòng giữa của trang web và nằm ngay ở vị trí chính giữa center right Hình ảnh ở vị trí dòng giữa của trang web và nằm sát mép góc phải. bottom left Hình ảnh ở dòng cuối của trang web và nằm sát mép trái bottom center Hình ảnh ở dòng cuối trang web và nằm ngay chính giữa, trung tâm của trang web x-%y-% tọa độ của hình ảnh, vị trí của ảnh nằm ở (x,y) tính theo phần trăm của tọa dộ màn hình. Ví dụ : background-position: 20%80% ; x-posy-pos là tọa độ của hình ảnh , vị trí của ảnh nằm ở (x,y) tính theo pixel Ví dụ : background_position: 95px 240px ; Thuộc tính background rút gọn: Khi sử dụng nhiều thuộc tính CSS sẽ gây khó khăn cho người đọc, công tác chỉnh sửa, tốn nhiều dung lượng cho ổ cứng nên CSS đưa ra 1 cấu trúc rút gnj cho các thuộc tính cùng nhóm. Ví dụ: Nhóm đoạn code: background-color: transparent; background-image: url(anhnen.jpg); background-repeat: no-repeat; background-attachment: fixed; background-possition: right bottom; Thành đoạn ngắn hơn: Background: transparent url(anhnen.jpg) no-repeat fixed right bottom; Cấu trúc rút gọn của background: Background: | | | Border Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đường viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho các thẻ html như , , ,... Trong thuộc tính đường viền (border) có 3 giá trị cơ bản: border-color: border-width: border-style: 1. Thuộc tính màu của đường viền Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính border-color: div.color { border-color: #CC0000;} 2. Đặt chiều rộng cho đường viền (border) Nếu muốn đặt chiều rộng của đường viền chúng ta sẽ đặt giá trị cho thuộc tính border-width: div.borerwidth { border-width: 2px;} STT Giá trị 1 thin 2 medium 3 thick 4 length 3. Chọn kiểu của đường viền Sử dụng thuộc tính border-style để đặt kiểu cho đường viền. div.borderstyle { border-style: solid; } Có thể gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác nhau. STT border-style 1 none 2 hidden 3 dotted 4 dashed 5 solid 6 double 7 groove 8 ridge 9 inset 10 outset Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng: border-top: border-right: border-bottom: border-left: Ứng với đường viền của mỗi phía đều có 3 giá trị (color, width, style) STT Phía Thuộc tính Mô tả Giá trị 1 top border-top-color: Đặt màu cho đường viền trên border-color border-top-width: Đặt chiều rộng cho đường viền trên thin medium thick length border-top-style: Đặt kiểu cho đường viền trên border-style 2 right border-right-color: Đặt màu cho đường viền bên phải border-color border-right-width: Đặt độ rộng cho đường viền bên phải thin medium thick length border-right-style: Đặt kiểu cho đường viền bên phải border-style 3 bottom border-bottom-color: Đặt màu cho đường viền phía dưới border-color border-bottom-width: Đặt độ rộng cho đường viền phía dưới thin medium thick length border-bottom-style: Đặt kiểu cho đường viền phía dưới border-style 4 left border-left-color: Đặt màu cho đường viền bên trái border-color border-left-width: Đặt độ rộng cho đường viền bên trái thin medium thick length border-left-style: Đặt kiểu cho đường viền bên trái border-style Chúng ta có thể dùng phương pháp viết mã giản lược (shorthand) để viết các thuộc tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border của thẻ với độ rộng bằng 1, kiểu solid và màu là #CC0000 div.border { border: 1px solid #CC0000; } padding CSS padding định nghĩa khoảng trống giữa mép của các phần tử tới các phần tử con hoặc nội dung bên trong. Không thể gán giá trị âm cho thuộc tính này. Thuộc tính padding tương ứng với 4 phía của phần tử. STT Thuộc tính Mô tả Giá trị 1 padding-top: thin 2 padding-bottom: medium 3 padding-right: thick 4 padding-left: length Các giá trị có thể gán cho các thuộc tính này là : % hoặc length Để viết cho gọn chúng ta cũng có thể viết thuộc tính padding dưới dạng shorthand. div.padding { padding: 5px 3px 2px 8px; } Tabble Stt Thuộc tính Mô tả Giá trị 1 Border-collapse Đặt vị trí đường viền được lấp trong một đường viền đơn hoặc được gỡ ra như trong thanh HTML Ví dụ : table { border-spacing:5px; } collapseseparate 2 Border-spacing Thiết lập khoảng cách nơi tách biệt những ô đường viền Ví dụ : table { border-spacing:5px; } length length 3 Caption-side Thiết lập vị trí bảng phụ đề Ví dụ : caption { caption-side:top; } topbottomleftright 4 Empty-cells Thiết lập nơi hoặc không chỉ ra ô rỗng trong bảng Ví dụ : table { empty-cells:show; } showhide 5 Table-layout Thuộc tính dùng để hiển thị những cột, hàng, của bảng Ví dụ : table { table-layout:auto; } autofixed . Font Font-family: Định nghĩa một danh sách ưu tiên các font sẽ được dung để hiển thị một thành phần trang web. Theo đó, font đầu tiên được liệt kê trong danh sách dung để hiển thị trang web, nếu trên máy tình không cài font nỳ thì font thứ 2 được ưu tiên. Đến khi có 1 font phù hợp. Có 2 loại font được dùng để chỉ định trong font-family: - family-names: tên cụ thể của 1 font. - generic families: tên của 1 họ gồm nhiều font. Ví dụ: font chữ dùng cho cả trang web là Times new roman, Tahoma, san-serif.: Body {font-family : “Times new roman”, Tahoma, san-serif } H1, h2, h3{font-family: arial, verdana, serif} Đối với các font có khoảng trắng trong tên như Times new Roman cần đặt trong dấu “”. 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; } 3. Thuộc tính Font-size : Đặt kích thước font cho đoạn văn bản. Khi chúng ta muốn những đoạn văn bản hoặc tiêu đề có kích thước của chữ khác nhau, chúng ta có thể sử dụng thuộc tính font-size STT Giátrị 1 x-small 2 small 3 medium 4 large 5 x-large 6 xx-large 7 smaller 8 larger 4. Thuộc tính font-size-ajust: Xác định kích thước chữ. Vd: div { font-size-adjust:0.54; } 5. Thuộc tính Font-variant: Muốn hiển thị chữ ở dạng small-caps hoặc ở dạng normal thì chúng ta sẽ sử dụng thuộc tính font-variant. Thuộc tính này có hai giá trị normal và small-caps Giá trị: - normal- small-caps Vd: p {font-variant: normal; } 6. Thuộc tính Font-weight: Đặt độ đậm nhạt của chữ Khi chúng ta muốn thay đổi độ đậm nhạt của văn bản chúng ta sẽ dùng thuộc tính font-weight:. Chúng ta có thể đặt giá 3 loại giá trị cho thuộc tính này 1. normal(bình thường), 2. bold(đậm), 3. 300(đặt dạng số) Vd: div { font-weight:bolder; } div { font-weight:200; } outline Thuộc tính đường viền ngoài Thuộc tính Outline sẽ vẽ một đường bao ngoài toàn bộ một phần tử HTML, đối với phần tử có đường viền (border) thì đường bao này sẽ bao trọn đường viền của phần tử đó. Cũng tương tự như đường viền bạn có thể đặt cho nó các thuộc tính về màu săc, độ lớn và kiểu. Gồm 3 giá trị : outline-color outline-style outline-width Stt Thuộc tính Mô tả Giá trị 1 Outline-Color đặt màu cho đường bao ví dụ: div { outline color: green; } color inver 2 Outline-Style chọn kiểu cho đường bao ví dụ: div{outlinestyle:solid; } none dotted dashed solid double groove ridge inset outset 3 Outline-with đặt độ rộng cho đường bao Ví dụ : div{outline-width:2px; } Thin Medium Thick length margin (Lề trang) Thuộc tính margin sẽ định nghĩa khoảng trắng bao quanh một phần tử HTML. Nó có thể dùng giá trị âm để lồng nội dung vào với nhau. Tương ứng với 4 phía của một phần tử chúng ta có 4 thuộc tính tương ứng. Mặt khác để viết cho gọn chúng ta cũng có thể dùng cách viết giản lược để định nghĩa các giá trị cho thuộc tính margin. Stt Thuộc tính Miêu tả Giá trị 1 Margin Thuộc tính ngắn cho các thiết lập về căn chỉnh lề margin-topmargin-rightmargin-bottommargin-left 2 Margin-top Thiết lập căn lề trên autolength% 3 Margin-right Thiết lập căn lề phải autolength% 4 Margin-left Thiết lập căn lề trái autolength% 5 Mafgin-bottom Thiết lập căn lề dưới autolength% Text Định dạng và thêm vào các kiểu định dạng đặc biệt cho phần nội dung một trang web. 1. Color : Để định màu chữ cho một thành phần nào đó trên trang. Ví dụ: body { color:#000 } h1 { color:#0000FF } h2 { color:#00FF00 } 2. Letter-spacing : Định dạng hoảng cách giữa các ký tự trong một đoạn văn. Có 2 giá trị : nomal : tức là khoảng cách bình thường length : các ký tự cách nhau với khoảng cách có độ dài quy định (length) Ví dụ: h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} 3. Text-align : Để gióng hàng cho một đoạn văn bản chúng ta sẽ dùng thuộc tính text-align: vị trí; Các giá trị căn chỉnh: - Left : đoạn văn được căn vào phía trái trang web - Center : đoạn văn được căn vào giữa trang web. - Right : đoạn văn được căn vào phía phải trang web. Ví dụ: h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} This is header 1 This is header 2 This is header 3 4. Text-decoration : Thêm hiệu ứng đặc biệt cho văn bản Gồm các giá trị : -None : không miêu tả một đặc tính gì cho đoạn văn này cả. -Underline : đoạn văn được gạch chân -Overline : đoạn văn được gạch phía trên . -Line-through : đoạn văn đực gạch ngang dòng chữ. -Blink : đoạn văn hiện nhấp nháy . Ví dụ: h3 { text-decoration: underline; /* Gạch chân */ } h2 { text-decoration: line-through; /* Gạch ngang */ } h1 { text-decoration: overline; /* kẻ trên */ } Thuộc tính Text-indent : Thụt lề cho dòng đầu của văn bản của phần tử Các giá trị : - Length : khoảng cách từ dòng thứ nhất từ chữ cái đầu tiên đến mép lề. Tính theo cm. - % : cũng là khoảng cách từ dòng thứ nhất từ chữ cái đầu tiên đến mép lề. Tín theo phần trăm. Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px cho dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần 6. Thuộc tính text-shadow Tạo chữ bóng Ví dụ:  CSS Text shadow CSS Text shadow 7. Thuộc tính Text-transform: 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. None Không mặc định gì cho văn bản Capitalize Tất cả các ký tự đầu cảu mỗi chữ đều được viết hoa Uppercase Tất cả các ký tự của văn bản được viết hoa Lowercase Tất cả các ký tự của văn bản được viết thường. Thuộc tính white-space : Tạo các khoảng trống trắng của phần tử. Normal văn bản được trình bày bình thường,các câuđược trình báy trong một đoạn văn, có ngắt dòng Pre hết mỗi câu, văn bản sẽ tự động ngắt dòng. nowrap tất cả các đoạn văn đều được thể hiện trên một dòng. 8. Thuộc tính word-spacing Khoảng cách giữa các từ có thể được tăng bởi thuộc tính word-spacing: khoảng cách; - normal : Các chưa cách nhau theo mắc định. - length : các chữ cách nhau theo đọ dài quy định cho trước. Ví dụ: p { word-spacing: 30px } List Thuộc tính Mô tả Giá trị List-style Thuộc tính ngắn cho các thiết lập danh sách list-style-typelist-style-positionlist-style-image List-style-image Thiết lập ảnh để chọn noneurl List-style-position Thiết lập nơi mà mục chon trong danh sách insideoutside List-style-type Thiết lập kiểu mục chọn nonedisccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiraganakatakanahiragana-irohakatakana-iroha  Marker-offset autolength