Đang tải... (xem toàn văn)
o Thẻ đoạn trích dẫn, dung đoạn văn cách lề đoạn o nội dung trích dẫn o định nghĩa từ viết tắt ví dụ: ĐTT 3) Thẻ đánh dấu ý nghĩa o Thẻ nhấn mạnh cách in đậm o Thẻ nhấn mạnh cách in nghiêng o Thẻ viết tắt từ bold hay gọi chữ béo có tác dụng in đậm ký tự o Thẻ viết tắt từ italic hay cịn gọi chữ gầy cóa tác dụng in nghiêng ký tự o Thẻ , cú pháp: số o Thẻ , cú pháp: số o Thẻ văn định dạng trước 4) Thẻ đánh dấu thay đổi nội dung o Thẻ o Thẻ o Thẻ ngạch ngang qua phần văn 5) Câu trích dẫn định nghĩa o Thẻ nội dung tham chiếu o Thẻ thuật ngữ cần diễn giải o Thẻ thông tin liên lạc 6) Một số thẻ khác o o o o Thẻ chữ bị gạch ngang Thẻ chữ lớn bình thường Thẻ tương tự thẻ Thẻ rỗng định nghĩa kích thước font chữ kết thúc văn ,thẻ có thuộc tính size có thẻ mở Thẻ rỗng thẻ có thẻ mở khơng có thẻ đóng 7) Thẻ Là thẻ tạo đường thẳng ngang gồm giá trị sau: • • • • • Align: lề left/center/right Color: mà sắc cho đường Noshade khơng có bóng Size: độ dày đường thẳng Width: chiều dài đường thẳng pixel % bề dày cửa sổ trình duyệt 8) Thẻ liên kết Cú pháp: …… siêu văn bản……… Trong đó: • • • • • Href : địa trang web liên kết url Name: đặt tên cho vị trí đặt thẻ Tableindex: thứ tự di chuyển nhấn phím tab Title: văn thị di chuột siêu liên kết Target: mở trang web liên kết cửa sổ (_blank) cửa sổ (_self) frame (tên frame) Ngồi ta dung thẻ liên kết để kết nối tới email Như sau: Nếu đặt thuộc tính href thẻ giá trị mail to: address@domain kích hoạt kết nối kích hoạt chức thư điện tử trình duyệt Cú pháp sau: …….nội dung cần nói đến……… 9) Thẻ chèn hình ảnh a Thẻ Nhược điểm thẻ khơng có thích cho ảnh b Thẻ Cú pháp: thích cho ảnh 10) Thẻ Thẻ kiểu chữ thị Thẻ đặt tham số size color, kích thước tuyệt đối (nhận giá trị từ đến 7) tương đối (+2,-4,…) so với font chữ Cú pháp: …………… 11) o o o o o o o o o o o Các thuộc tính thẻ Link: liên kết chưa xem Alink: liên kết xem Vlink: liên kết xem Bgcolor: màu Background: ảnh Text: màu chữ Scroll: có giá trị yes no, xác định cuộn có hay khơng Top margin: lề Right margin: lề phải Bottom margin: lề Left margin: lề trái 12) Biểu mẫu form Cú pháp: ………nội dung………… Trong : Method có giá trị post cần bảo mật, có giá trị get khơng cần bảo mật thường post sử dụng nhiều PHẦN B: CSS_CASCADING STYLE SHEET I ĐỊNH NGHĨA CSS Khái niệm Trong lĩnh vực xây dựng có trang trí nội thất; Trong kỹ thuật làm đẹp coa Make-up; Trong thiết kế web có CSS CSS từ viết tắt Cascading Style Sheet, ngôn ngữ định dạng cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,… Trên web site đóng vai trị làm đẹp như: chia cột, thay đổi màu sắc, biến đổi khối,… Cấu trúc đoạn CSS Vùng chọn {tên thuộc tính:giá trị; Tên thuộc tính: giá trị; ………………….} Trong đó: Vùng chọn thẻ HTML,ID,CLASS,danh sách thứ cấp… Nhúng CSS vào trang web Có cách cho phép chèn định dạng CSS vào web site o Cách 1: Chèn kiểu Inline o Cách 2: Chèn kiểu External o Cách 3: Chèn trực tiếp vào thẻ HTML (Inline style) 3.1 Chèn kiểu Inline style Là cách chèn trực tiếp định dạng CSS cặp thẻ đặt phần Head Cú pháp sau: tiêu đề web site định dạng CSS cho thành phần ………………………………………… ………………………………………… 3.2 Chèn kiểu External style Là cách định dạng CSS riêng file có phần mở rộng CSS, sử dụng cách file CSS áp dụng cho nhiều web site Cú pháp: ta khai báo thẻ để đến file chứa định dạng CSS phần Head sau tiêu đề web site …………………………………… …………………………………… 3.3 Chèn trực tiếp vào thẻ HTML Inline style sử dụng nhiều trường hợp thẻ HTML cần có style (định dạng) riêng Inline style cách áp dụng cho thẻ HTML đó, cách có độ ưu tiên cao so với cách 3.4 Nhiều stylesheet Áp dụng định dạng CSS cho nhiều Style khác sau Cú pháp: Tên thẻ thư nhất, tên thẻ thứ hai,…,tên thẻ thứ n {định dạng CSS} Ví dụ: h1,h2,h3,h4 { color:light-cyan; font-site:13; margin-left:10px; } II CÁC THẺ TRONG CSS Vùng chọn CSS Có kiểu vùng chọn bao gồm: o Vùng chọn theo tên thẻ HTML: định dạng CSS cho thẻ có sẵn HTML o Vùng chọn theo ID: định dang CSS riêng cho thành phần riêng biệt ,chọn theo tên riêng vùng chọn có ID riêng o Vùng chọn theo CLASS: định dạng CSS dùng cho nhiều phần tử khác o Vùng chọn thứ cấp: định dạng cho phần tử phần tử Chẳng hạn định cho li danh sách ul ol… o Vùng chọn thứ cấp liền nhau: định dạng cho phần tử thứ cấp liền kề với phần tử mẹ.chẳng hạn định dạng cho phần tử li ul danh sách ul khác Cách khai báo sử dụng vùng chọn 1.1 Vùng theo tên thẻ HTML Cú pháp khai báo: Tên thẻ {định dạng cho thuộc tính thẻ} Cách dùng: Sử dụng theo cách bình thường nội dung thẻ 1.2 Vùng theo ID Cú pháp: #tên ID {định dạng CSS co ID} Cách dùng: nội dung thẻ 1.3 Vùng theo CLASS Cú pháp: .tên class {định dạng cho class} Cách dùng: nội dung thẻ 1.4 Vùng chọn thứ cấp: Cú pháp: #tên ID ul li {định dạng CSS cho phần tử li danh sách ul} cách dùng: khai báo sử dụng danh sách ul bình thường 1.5 Vùng chọn thứ cấp kề Cú pháp: #tên ID ul ul li > p {định dạng CSS cho phần tử thứ cấp kề nhau} cách dung: khai báo sử dụng bình thường sử dụng id Các đơn vị đo lường Đơn vị đo lường ứng dụng việc thiết lập chiều dài chiều rộng đối tượng Có loại đơn vị đo bản: o Đơn vị đo tuyệt đối (Absolute unit) đơn vị vật lý định nghĩa sẵn máy tính • Px • Pt • … o Đơn vị đo tương đối (Relative unit) đơn vị bị biến đổi thành phần khác thành phần mẹ • % • Em • Rem 10 • … Các thuộc tính thơng dụng cho đoạn văn o Text-align: lề văn gồm thuộc tính • Left: trái • Right: phải • Centre: • Justify: bên o Text-decoration: thêm gạch trên, gạch dưới, gach (gạch ngang) văn , gồm thc tính • Underline: kẻ dịng (gạch chân ký tự văn bản) • Line-through: kẻ ngang dòng (gạch ngang qua ký tự văn bản) • Overline: kẻ dịng (gạch ký tự văn bản) o Text-indent:tạo khoảng trống bên tay trái cho văn (chỉnh vị trí đoạn văn theo chiều ngang) • Cú pháp: text-indent: vị trí; • Ví dụ: p{ text-indent: 200px;} p {text-indent: -200px;} vị trí giá trị âm dương o Text-shadow: đổ bóng cho văn o Text-transform: tùy chỉnh thi in hoa in thường gồm có thuộc tính như: • Uppercase: chữ in hoa tồn văn • Capitalize: Chữ in thường tồn văn • Lowercase: viết hoa chữ đầu toàn văn o Letter-spacing: định khoảng cách ký tự, cú pháp: letterspacing: kích thước (kích thước đung đơn vị dung đơn vị px, ) Đây thuộc tính dung cho số thẻ p, h1, h2,… Một số lưu ý đoạn văn bản: Thường sử dụng thẻ p block Một số thuộc tính thơng dụng sử dụng để định dạng cho đoạn văn là: Color: #mã màu color: tên màu; định dạng màu sắc cho đoạn văn Font-family: tên font (arial,tahoma,sans-serif…) đặt font cho đoạn văn 11 Font-size : kich thước ; đặt kích thước font cho đoạn văn ví dụ : p { font=size : 13px ;} Font-style : kiểu font ; đặt kiểu font cho đoạn văn kiểu font bao gồm giá trị : italic (chữ in nghiêng hay chữ gầy), bold (chữ in đậm hay chữ béo), normal (chữ in thường), oblique (kiểu chữ xiên) Font-weigh : giá trị ; thuộc tính có giá trị normal ( bình thường), bold ( đậm), đặt dạng số 3.300 Letter-spacing : chỉnh khoảng cách ký tự ví dụ: h3 { leter-spacing: 2em; } h3 { letterspacing: -3em; } Line-heigh : chỉnh khoảng cách dòng Ví dụ : p {line-heigh : 150%} p {line-heigh:15px; } Đặt hướng cho đoạn văn • Div.rtl {direction: rtl; } hướng từ phải qua trái • Div { direction: ltr; } hướng từ trái qua phải Word-spacing : khoảng cách ; tăng khoảng cách từ ví dụ p { word-spacing : 30px ; } White-space : giá trị ; làm giá trị đường bao thẻ HTML Thuộc tính white-space làm tồn đoạn văn dịng Ví dụ : p { whitespace :nowrap ; } Đường viền thuộc tính đường viền Border thành phần quan trọng trang web Nó thường dùng trang trí, đóng khung cho đối tượng cần nhấn mạnh, phân cách đối tượng giúp trang web trơng dễ nhìn Thuộc tính áp dụng cho thẻ : div, li, table… Các thuộc tính đường viên bao gồm : o Border- width : quy định độ rộng đường viền đối tượng web Bao gồm giá trị : • Thin (mảnh) • Medium (vừa) • Thick (dày) • Length • Hoặc giá cụ đo cụ thể px 12 o Border- color : quy định màu sắc đường viền cho đối tượng web Giá trị bao gồm tất giá trị màu mà CSS hỗ trợ o Border-style : quy định kiểu đường viền đối tượng web CSS cung cấp kiểu đường viền tương ứng với giá trị : • Dotted • Dashed • Solid • Double • Groove • Ridge • Inset • Outset • None Ví dụ : P { border-width :thick ; Border-color : light-cyan ; Border-style: double;} Ngoài với phía đối tượng ta có thuộc tính border tương ứng (ứng với đường viền phía có có thuộc tính tương ứng: border-width, border-color, boder-style) o o o o Border-top: đường viền phía Border-right: đường viền phải Border-bottom: đường viền bên Border-left: đường viền bên trái Ta sử dụng phương pháp viết mã giản lược sau: Border: border-width border-color border-style; Ví dụ: 13 div.border { border: 1px solid #333; } Thuộc tính Margin Định nghĩa khoảng trắng bao quanh phần tử HTML Nó dùng giá trị âm để lồng nội dung vào với Cá giá trị thuộc tính gồm : • Auto : tự động • Length • % Tương ứng với phía phần tử ta có thuộc tính sau : • • • • Margin-top Margin-right Margin-bottom Margin-left Ta sử dụng phương pháp viết mã giản lược cho phần tử theo thứ tự margin-top, margin-right, margin-bottom, margin-left cho cách khai báo có giá trị Ví dụ : div.margin { margin : 10px 4px 5px 9px ;}// margintop=10,margin-right=4,margin-bottom=5,margin-left=9 Nếu khai báo có gía trị theo thứ tự margin-to, margin-right marginleft mang giá trị thứ 2, margin-bottom ví dụ: div.margin { margin: 2px 4px 6px;}// margin-top=2,marginright=margin-left=4,margin-bottom=6 Nếu khai báo có giá trị theo thông số thứ tương ứng với top bottom, thông số thứ tương đương với left right Ví dụ: div.margin {margin: 3px 5px;}// margin-top=marginbottom=3,margin-right=margin-left=5 14 Thuộc tính Padding Định nghĩa khoảng trống mép phần tử tới phần tử nội dung bên Chúng ta gán giá trị âm cho thuộc tính này, padding khơng ảnh hưởng tới khoảng cách đối tượng margin quy định khoảng cách phần nội dung viền đối tượng Cú pháp : Padding : giá trị ; Ví dụ : P {padding: 5px; } Tương ứng với phía phần có thuộc tính padding tương ứng là: • • • • Padding-top Padding-right Padding-bottom Padding-left Có thể sử dụng cách viết gọn (dùng mã giản lược) cho thuộc tính padding o Nếu thuộc tính có giá trị thứ tự padding-top,padding-right, padding-bottom, padding-left Ví dụ: div.padding { padding: 5px 3px 6px 4px; } //padding-top=5, padding-right=3, padding-bottom=6, padding-left=4 o Nếu thuộc tính có giá trị thứ tự padding-top, paddingright=padding-left, padding-bottom Ví dụ: div.padding { padding: 3px 4px 5px;} //padding-top=3, padding-right=padding-left=4, padding-bottom=5 o Nếu thuộc tính có giá trị thứ tự padding-top=padding-bottom, padding-right=padding-left Ví dụ: 15 div.padding { padding: 4px 6px; } //padding-top=paddingbottom=4, padding-right=padding-left=6 Background Gồm thuộc tính: o Background-color: định màu cho thành phần trang web, cú pháp background-color: tên màu #mã màu; o Background-image: chèn ảnh vào thành phần trang web, cú pháp background-image: url(đường dẫn tói ảnh cần chèn), đặt ảnh thư mục với file CSS ta cần viết tên ảnh khơng cần đường dẫn o Background-repeat: lặp lại ảnh nền, thuộc tính sử dụng ảnh đặt cho đối tượng q nhỏ so với khơng gian cịn lại đối tượng thuộc tính gồm giá trị: • Repeat-x: lặp lại ảnh theo phương ngang • Repeat-y: lặp lại theo Phuong doc • Repeat: lặp lại theo phương • No-repeat: khơng lặp lại o Background-position: theo mặc định hình chèn nằm góc bên trái hình Tuy nhiên bạn đặt hình vị trí khơng gian mà làm thuộc tính backgroundposition Cú pháp sau background-position: vị trí ảnh nền; vị trí ảnh giá trị centimeters,pixels,inches,… hay vị trí đặc biệt top,bottom,left,right Ví dụ thuộc tính background-position Giá trị Background-position:5cm 2cm Background-position:20% 30% Background-position:bottom left Ý nghĩa Ảnh định vị 5cm từ trái qua 2cm từ xuống Ảnh định vị 20% từ trái qua 30% từ xuống Ảnh định vị góc trái phía Có thể sử dụng cách viết gọn (dùng mã giản lược) cho thuộc tính background Ví dụ : Từ đoạn code : Background-color: #fffffff; 16 Background-image: url(hinh.jpg); Background-repeat:no-repeat; Background-attachment:fixed; Background-position: bottom; ta nhóm lại sau: background: #ffffff url(hinh.jpg) no-repeat fixed right bottom; Làm thẻ Div có thnh cuộn Tiến hành style(định dạng CSS) cho thẻ Div cần để cố định giá trị width height, để thẻ div thị cuộn ta để thuộc tính display có giá trị auto Định dạng CSS cho thẻ Div sau: # tên ID {width: giá trị cụ thể đó; Height: giá trị cụ thể đó; Display: auto; Border:giá trị ; Margin: giá trị;} Ví dụ: #scroll_box{ width: 120px; Height:400px; Display: auto; Border: 1px solid #cccccc; Margin: 1em 0;} Sau sử dụng kỹ thuật nội dung bạn đưa vào dài chiều rộng chiều cao thẻ Div trình duyệt tự đọng sinh cuộn ngang dọc giống iframe Style kiểu bubber đơn giản Dạng bubble thường sử dụng việc trích dẫn lời nói tác giả lời bình luận blog Phần HTML 17 Đây ví dụ kiểu bubble đơn giản, bạn ứng dụng chúng vào site Chúc bạn thành công! CSSYeah.com Với cách làm ta sử dụng thẻ Div , thẻ div class=”comment” chứa lời bình luận cịn thẻ Div class=”footercomment” chứa thơng tin tác giả, thẻ Div class=”bubblewrapper” trường hợp có tác dụng giới hạn kích thước cho thẻ div bên Trong phần nội dung dung nhiều lần dạng bubble nên ta định dạng CSS Phần định dạng CSS thuộc tính class cho thẻ Div #wrapper { width: 400px; margin: auto; padding: 0; } div.comment { margin: 0; padding: 10px; background: #E8ECEF; } div.commentfooter { padding: 8px 0 22px; 18 background: url(arrow-down.gif) no-repeat 20px #FFFFFF; } span.author { padding-left: 15px; background: url(author.gif) no-repeat left center; font-weight: bold; } div.commentfooter a { color: #CC0000; } div.commentfooter a:hover, div.commentfooter a:active { text-decoration: none; } 10 Trang trí danh sách với list-style Gồm thuộc tính sau o Thuộc tính list-style-type gồm giá trị • Disc: dấu trịn đặc • Circle: dấu trịn rỗng • Square: dấu hình vng đặc • Decimal: số 1,2,3… • Lower-roman: số la mã thường: i, ii, iii, iv, • Upper-roman: số la mã hoa: I,II,III,IV,… • None: khơng để o Thuộc tính list-style-position gồm giá trị • Inside: dấu nằm bên khung danh sách, giá trị mặc định • Outside: dấu nằm bên ngồi khung danh sách, để thấy rõ ta phải để padding margin khung ul 19 o Thuộc tính list-style-image: url(); dùng để thay đổi dấu thị hình ảnh Khi dung thuộc tính ta nên để thuộc tính list-styletype có giá trị none để dễ sử dụng Có thể dung cách viết giản lược code cho list-style sau: List-style: type position image Ví dụ: Li { list-style : circle inside ; } /////////////////////////////////////////////////////////////////////////////////////// Overflow : auto ; Clear : both ; A{ Color :#ten mau ; Text-decoration ;none ;} A:hover{ Color:#ten mau; Font-weight: bold; Display: block; Background:#ten mau; Width: 50px; } A:visited{ Color:#ten mau; } A{} vaf a:link{} la nhu A :action{ Background :#ten mau}…khi nhap vao ma chua tha chuot 20 21 22 ... • • Href : địa trang web liên kết url Name: đặt tên cho vị trí đặt thẻ Tableindex: thứ tự di chuyển nhấn phím tab Title: văn thị di chuột siêu liên kết Target: mở trang web liên kết cửa sổ (_blank)... làm đẹp coa Make-up; Trong thiết kế web có CSS CSS từ viết tắt Cascading Style Sheet, ngôn ngữ định dạng cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,… Trên web site đóng vai trị làm đẹp như:... Trong đó: Vùng chọn thẻ HTML,ID,CLASS,danh sách thứ cấp… Nhúng CSS vào trang web Có cách cho phép chèn định dạng CSS vào web site o Cách 1: Chèn kiểu Inline o Cách 2: Chèn kiểu External o Cách 3: