HTML5 XP session 06 định dạng với style sheet t3

Giải thích về các kiểu cho văn bản và font.ColortextaligntextdecorationtextindenttexttransformwordspacinglineheightMô tả về một vùng nằm trong dòng (inline spans)Giải thích về thụt lề đoạn văn (paragraph indentation) text–indentpaddingmarginGiải thích thuộc tính borderGiải thích về căn lề ngang cho đoạnGiải thích về khoảng cách giữa các dòng trong đoạn

NexTGen Web Bài 06: Định dạng với Style Sheet Mục tiêu  Giải thích kiểu cho văn font.          © Aptech Ltd. text-align text-decoration text-indent text-transform word-spacing line-height Mô tả vùng nằm dòng (inline spans) Giải thích thụt lề đoạn văn (paragraph indentation)       Color text–indent padding margin Giải thích thuộc tính border Giải thích lề ngang cho đoạn Giải thích khoảng cách dòng đoạn Định dạng với Style Sheet / Bài 06 Font cho văn 1-2   Các thuộc tính văn xác định điều khiển diện cho văn trang web. Người sử dụng thay đổi màu sắc cho văn bản, tăng giảm khoảng cách ký tự, lề cho văn bản, việc sử dụng thuộc tính text. Mô tả Thuộc tính color Nó sử dụng để xác định màu sắc văn bản. text-align Nó sử dụng việc xác định lề ngang văn phần tử. text-decoration Nó sử dụng để xác định decoration văn phần tử. text-indent Nó sử dụng để xác định thụt đầu dòng dòng văn phần tử chiều dài %. text-transform Nó sử dụng để xác định chuyển đổi hình thức văn phần tử. word-spacing Nó sử dụng để tăng giảm khoảng cách từ. © Aptech Ltd. Định dạng với Style Sheet / Bài 06 Font cho văn 2-2  Các thuộc tính font cho phép bạn quy định phông chữ cho văn thay đổi thuộc tính phông chữ khác văn font chữ, kích thước, phong cách văn bản. Thuộc tính Nó sử dụng để xác định phông chữ định tập font tên font cụ thể "Serif" font-family  Mô tả "Times New Roman". font-size Nó sử dụng để xác định kích thước font chữ có giá trị tuyệt đối hay tương đối. font-style Nó sử dụng để xác định kiểu phông chữ. font-variant Nó sử dụng để xác định liệu văn hiển thị nhỏ. Một số giá trị thuộc tính text-align Giá trị © Aptech Ltd. Mô tả left Văn trái. right Văn phải. center Văn giữa. justify Văn đều. Định dạng với Style Sheet / Bài 06 Web fonts  CSS3 giới thiệu tính Web fonts, cho phép nhà phát triển web tập tin font tùy ý để download với trang web.  Điều giải vấn đề font sử dụng cho trang web, lại sẵn máy người dùng.  Cú pháp: @font-face { font-family: 'My font'; src: url('myfont.ttf') format('truetype'); } © Aptech Ltd. Định dạng với Style Sheet / Bài 06 Kiểu cho văn 1-6  Giá trị thuộc tính text-indent Giá trị Mô tả length Chỉ đơn vị độ dài, mặc định 0. % Chỉ đơn vị phần trăm.  Các giá trị thuộc tính text-transform Giá trị © Aptech Ltd. Mô tả none Không thay đổi. capitalize Chuyển ký tự từ thành ký tự hoa Uppercase Chuyển toàn văn thành chữ hoa. Định dạng với Style Sheet / Bài 06 Kiểu kiểu văn 2-6  © Aptech Ltd. Ví dụ. Định dạng với Style Sheet / Bài 06 Kiểu kiểu văn 3-6  Mã  CSS cho phần tử DIV  © Aptech Ltd. CSS . Kết quả. Định dạng với Style Sheet / Bài 06 Kiểu kiểu văn 4-6  Các giá trị thuộc tính text-decoration. Giá trị Mô tả none Không định dạng. underline Gạch dưới. overline Gạch qua văn Gạch line-through Các giá trị huộc tính word-spacing. blink Giá trị qua văn Văn nhấp nháy Mô tả normal Không định dạng. length dạng với Style / Bài 06dài khoảng cách từ Chỉ giáĐịnhtrị làSheetđộ © Aptech Ltd. Kiểu kiểu văn 5-6  © Aptech Ltd. Ví dụ Định dạng với Style Sheet / Bài 06 10 Thuộc tính visibility  Thuộc tính visibility dùng để xác định nội dung bên phần tử bị ẩn hay hiển thị ra. Giá trị cho thuộc tính:  Hidden: ẩn  Visible: Building Dynamic © Aptech Ltd. Web Sites / 51 of 25 Thuộc tính display  Thuộc tính display cho phép xác định nội dung phần tử thị nào, có chứa ngắt dòng (line-break) hay không.  Bảng giá trị cho thuộc tính Giá trị Mô tả none Nội dung phần tử không hiển thị block Nội dung phần tử hiển thị với ngắt dòng phía trước sau inline Nội dung phần tử hiển thị ngắt dòng phía trước sau © Aptech Ltd. Thuộc tính float  Float (theo nghĩa tiếng Việt thả trôi) thuộc tính CSS dùng để cố định thành phần web bên trái hay bên phải không gian bao quanh nó.  © Aptech Ltd. Thuộc tính float có giá trị:  Left: Cố định phần tử bên trái.  Right: Cố định phần tử bên phải.  None: Bình thường. Định dạng với Style Sheet / Bài 06 53 Thuộc tính float  Thuộc tính float sử việc tạo layout cho toàn trang web.  Thuộc tính float dùng để tạo layout cho khối nhỏ trang trang web. © Aptech Ltd. Định dạng với Style Sheet / Bài 06 54 Thuộc tính clear Đi với thuộc tính float, CSS có thuộc tính clear. Là thuộc tính thường gán vào phần tử liên quan tới phần tử float để định hướng xử phần tử này. Thuộc tính clear có thuộc tính: left (tràn bên trái), right (tràn bên phải), both (không tràn) none. © Aptech Ltd. Định dạng với Style Sheet / Bài 06 55 Thuộc tính clear  Khi không dùng thuộc tinh clear  Có dùng thuộc tinh clear #footer { clear: both; } © Aptech Ltd. Định dạng với Style Sheet / Bài 06 56 Thuộc tính clear   Khi sử dụng float Kỹ thuật xóa clear float .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } © Aptech Ltd. Định dạng với Style Sheet / Bài 06 57 Ví dụ layout © Aptech Ltd. Định dạng với Style Sheet / Bài 06 58 Tổng kết  Các style văn xác định kiểm soát diện văn trang web.  Thụt lề trình bù đắp khoảng cách văn từ vị trí bình thường nó, sang trái bên phải.  Thuộc tính border CSS kiểu nét, màu sắc, độ đậm đường biên.  Thuộc tính border-color chấp nhận giá trị màu sắc khác để xác định sắc thái khác màu sắc áp dụng cho đường biên.  Các giá trị thuộc tính border khác loại hiệu ứng áp dụng cho đường biên.  Trong CSS, thuộc tính text-align sử dụng lề văn phần tử theo phương ngang.  Trong CSS, thuộc tính line-height sử dụng để giãn dòng đoạn. © Aptech Ltd. Định dạng với Style Sheet / Bài 06 59 Tham khảo thêm © Aptech Ltd. Định dạng với Style Sheet / Bài 06 60 Thuộc tính content CSS  Thuộc tính content sử dụng kèm với chọn giả phần tử :before, :after để chèn nội dung phát sinh (generated content).  Cú pháp: Tên_bộ_chọn{ content: Giá_trị; } Giá_trị Ví dụ Mô tả Nội dung content: "thêm text"; Chuỗi nội dung dấu ngoặckép thêm vào thành phần ra. attr(x) content: attr(alt); Nội dung thuộc tính html thêm vào nội dung thành phần. close-quote content: close-quote; Thêm dấu ngoặc đóng vào thành phần. open-quote content: open-quote; Thêm dấu ngoặc mở vào thành phần. no-close-quote content: no-close-quote; bỏ dấu ngoặc đóng thành phần. no-open-quote content: no-open-quote; bỏ dấu ngoặc mở thành phần. inherit content: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). counter content:counter(myIndex) Thiết lập nội dung đếm © Aptech Ltd. Định dạng với Style Sheet / Bài 06 61 Thuộc tính content CSS  Ví dụ 1: Tạo tooltip cho phần tử liên kết dựa thuộc title a { color: #900; text-decoration: none; } a:hover { color: red; a[title]:hover:after { position: relative; content: attr(title); } padding: 4px 8px; color: #333; position: absolute; left: 0; top: 100%; white-space: nowrap; z-index: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); © Aptech Ltd. Định dạng với Style Sheet / Bài 06 62 Thuộc tính content CSS  Ví dụ 2: Các phần tử p đánh thứ tự danh sách thứ tự P { counter-increment: myIndex; } p:before { content:counter(myIndex); } First make a variable (myIndex) and make it increase every time a p element occurs. Then insert the counter in front of all p elements Note: For the counter property to work in IE8, a DOCTYPE must be declared. First make a variable (myIndex) and make it increase every time a p element occurs. Then insert the counter in front of all p elements 3 Note: For the counter property to work in IE8, a DOCTYPE must be declared. © Aptech Ltd. Định dạng với Style Sheet / Bài 06 63 Thuộc tính padding  Padding khoảng trắng đường biên phần tử với nội dung nó.  Thuộc tính padding dùng để xác định tất cạnh (trên, dưới, trái, phải). Giá trị cho thuộc tính giá trị tương đối tuyệt đối.  Tuy nhiên xác định riêng padding cho cạnh với thuộc tính cho bảng sau: © Aptech Ltd. Thuộc tính padding  Ví dụ .fruit { padding-top:5px; padding-bottom:5px; padding-right:5px; padding-left:5px; border: solid thin green; } Bạn viết rút gọn sau: padding:5px; © Aptech Ltd. Thuộc tính padding  Bảng sau liệt kê tất thuộc tính Thuộc tính padding Định nghĩa padding padding-bottom Định nghĩa padding padding-left Định nghĩa padding trái padding-right padding-top  Ví dụ © Aptech Ltd. Mô tả Định nghĩa padding phải Định nghĩa padding [...]... Ltd Chỉ ra kiểu nét đường biên là nét đứt Chỉ ra kiểu nét đường biên là nét liền Định dạng với Style Sheet / Bài 06 22 Kiểu viền (Border Style) 3-7  Mã HTML  Mã CSS © Aptech Ltd Định dạng với Style Sheet / Bài 06 23 Kiểu viền (Border Style) 4-7  © Aptech Ltd Kết quả Định dạng với Style Sheet / Bài 06 24 Kiểu viền (Border Style) 5-7     © Aptech Ltd Thuộc tính viết tắt (Shorthand property) Để mã... Aptech Ltd It is used for specifying that the border is transparent Định dạng với Style Sheet / Bài 06 29 Màu viền - Color 3-6  © Aptech Ltd Following figure shows an HTML code with properties Định dạng với Style Sheet / Bài 06 30 Màu viền - Color 4-6  © Aptech Ltd Mã CSS của thuộc tính border-color Định dạng với Style Sheet / Bài 06 31 Màu viền - Color 5-6  Thuộc tính viết tắt (Shorthand property)... Aptech Ltd Định dạng với Style Sheet / Bài 06 16 Thụt lề cho đoạn văn bản 3-6  Kết quả  Padding  Thuộc tính padding được sử dụng để thêm một không gian trống bao quanh nội dung của một phần tử để tạo khoảng cách giữa nội dung với đường biên phần tử đó  Ví dụ cho inline Inline style Internal CSS p {padding: 20px} © Aptech Ltd Định dạng với Style Sheet / Bài 06 17 Thụt lề... một khoảng trắng bao vòng quanh phần tử Định dạng với Style Sheet / Bài 06 19 Thụt lề cho đoạn văn bản 6-6  Đoạn mã minh họa bảng kiểu nội tuyến cho thẻ và mã CSS bên trong (internal CSS) cho thuộc tính padding Inline style  © Aptech Ltd Internal CSS Kết quả p {margin: 20px} Định dạng với Style Sheet / Bài 06 20 Kiểu viền (Border Style) 1-7  Border là các đường viền chữ... • Cạnh dưới có kiểu nét là outset • © Aptech Ltd Cạnh trên có kiểu nét là grooved Cạnh trái có kiểu nét là dashed Định dạng với Style Sheet / Bài 06 26 Kiểu viền (Border Style) 7-7  © Aptech Ltd Hình minh họa kết quả sử dụng thuộc tính tắt border -style Định dạng với Style Sheet / Bài 06 27 Màu viền - Border Color 1-6    The border-color property in CSS applies colors to all the four borders One... các thuộc tính border -style: Thuộc tính Mô tả border-left -style Chỉ ra kiểu nét của biên bên trái border-right -style Chỉ ra kiểu nét của biên bên phải border-top -style Chỉ ra kiểu nét của biên bên trên border-bottom -style Chỉ ra kiểu nét của biên bên dưới © Aptech Ltd Định dạng với Style Sheet / Bài 06 21 Kiểu viền (Border Style) 2-7  Bảng liệt kê các giá trị cho thuộc tính border -style Giá trị Mô tả... classname Xác định tên class sử dụng cho phần tử dir rtl Sử dụng xác định hướng văn bản ltr id Xác định tên id sử dụng cho phần tử lang language_code Xác định mã ngôn ngữ sử dụng cho phần tử style style_definition Xác định kiểu sử dụng cho phần tử title © Aptech Ltd id text Chỉ ra thông tin mở rộng cho phần tử Định dạng với Style Sheet / Bài 06 14 Thụt lề cho đoạn văn bản 1-6   Thụt dầu dòng là quá trình... Màu viền - Color 5-6  Thuộc tính viết tắt (Shorthand property)  Thuộc tính viết tắt cho màu viền là border-color  Mã HTML © Aptech Ltd Định dạng với Style Sheet / Bài 06 32 Màu viền - Color 6-6  © Aptech Ltd Mã CSS border-color Định dạng với Style Sheet / Bài 06 33 Độ dày viền - Border Width 1-7  Thuộc tính border-width là thuộc tính viết tắt (shorthand) được sử dụng để chỉ ra độ đậm của đường... của đường biên là đậm (thick) thin © Aptech Ltd Chỉ ra độ đậm của đường biên là trung bình Được sử dụng chỉ ra độ dày của biên là mỏng Định dạng với Style Sheet / Bài 06 35 Độ dày viền - Border Width 3-7  Mã HTML  Mã CSS © Aptech Ltd Định dạng với Style Sheet / Bài 06 36 ... tính text–indent  Ví dụ Style nội tuyến bên trong (Internal css) p {text-indent: 50px} © Aptech Ltd Định dạng với Style Sheet / Bài 06 15 Thụt lề cho đoạn văn bản 2-6  Ví dụ sử dụng thuộc tính text–indent trong tệp HTML Font Gallery p {text-indent: 150px} < /style> The font styles properties allow . Bài 06: Định dạng với Style Sheet NexTGen Web Aptech Ltd.  Mục tiêu   !"#$!%  Color  text-align  text-decoration  text-indent  text-transform  word-spacing  line-height  &'()*+(,! - ./01/2  34!".01,1,1015!2  text–indent  padding  margin  . để xác định kích thước của các font chữ và có thể có một giá trị tuyệt đối hay tương đối. font -style Nó được sử dụng để xác định kiểu của phông chữ. font-variant Nó được sử dụng để xác định liệu. được sử dụng để xác định màu sắc của văn bản. text-align Nó được sử dụng trong việc xác định căn lề ngang của văn bản trong một phần tử. text-decoration Nó được sử dụng để xác định decoration của