Định dạng bằng CSS

ĐĐịịnhnh ddạạngng bbằằngng CSSCSS
 NguyNguyễễnn DuyDuy HHảảii
 KhoaKhoa CNTTCNTT--ĐĐHSPHSP HHàà NNộộii
 CSSCSS
9 CSS=Cascading Style Sheet: Mẫuquy
 định cách thứcthể hiệncácthẻ HTML
9 Style được đưa vào HTML 4.0 để giải
 quyếtmộtsố vấn đề.
9 Giúp tiếtkiệm đượcrất nhiềuthờigianvà
 công sứcchoviệcthiếtkế web.
9 Có thểđịnh nghĩa nhiềustyle vàomộtthẻ
 HTML (Cascading)
 CCáácc loloạạii stylestyle
9 Có 4 loại style:
 – Inline Style (Style đượcqui định trong 1 thẻ
 HTML cụ thể)
 – Internal Style (Style đượcqui định trong phần
 của 1 trang HTML )
 – External Style (style đượcqui định trong file 
 .CSS ngoài)
 – Browser Default (thiếtlậpmặc định củatrình
 duyệt)
9 Thứ tựưutiên: Mức ưutiêngiảmdầntừ
 trên xuống
 CCááchch chchèènn CSSCSS
9 Đặt trong …
9 VớiInternal style:
 <!--
 Nội dung định nghĩa style
 -->
 CCááchch chchèènn CSSCSS ((tttt))
9 Với External style:
 – Định nghĩa style trong file riêng (thường có
 đuôi .CSS)
 – Nhúng file CSS đã định nghĩa vào trang web:
 <link href=“địachỉ file" 
 rel="stylesheet" type="text/css">
9 Với Inline style:
KhaiKhai bbááoo vvàà ssửử ddụụngng stylestyle
 ChChúú ýý khikhi viviếếtt stylestyle
9 Style phân biệtchữ hoa, chữ thường
9 Để ghi chú trong style sử dụng:
 /*
 Đoạn ghi chú
 */
 KhaiKhai bbááoo stylestyle
selectorselector {{
 Property1:Property1: Value1;Value1; 
 Property2:Property2: Value2;Value2;
}}
 StyleStyle áápp ddụụngng chocho ththẻẻ ccụụ ththểể
9 Trường hợp1 thẻ: Đặt selector là tên_thẻ
 p {
 color: red;
 }
9 Khai báo đồng thời nhiềuthẻ: Viếtdanh
 sách tên thẻ phân cách bởidấuphảy
 h1,h2,h3,h4,h5,h6{
 font-family:arial;
 }
 TTạạoo llớớpp
9 Gắnvớithẻ cụ thể: Đặt selector là
 tên_thẻ.tên_lớp
 p.loai1{
 color:red;
 }
 p.loai2{
 color:blue;
 }
9 Không gắnvớithẻ cụ thể: bỏ phần tên_thẻ đi, 
 giữ lạidấuchấm:
 .loai3{
 color:green;
 }
 SSửử ddụụngng llớớpp
9 Đặtthuộctínhclass củathẻ=“tên_lớp”:
9 Ví dụ:
 Đoạn này màu đỏ
 Style không có hiệu
 lực
 Tiêu đề màu xanh
 ĐĐịịnhnh danhdanh
9 Tương tự như class. Thay dấuchấm(.) thànhdấu
 thăng (#).
9 Cho thẻ cụ thể: tên_thẻ#định_danh{…}
9 Tổng quát: #định_danh{…}
9 Ví dụ:
 p#doan1{
 color:red;
 }
 #loai2{
 color:blue;
 }
 SSửử ddụụngng đđịịnhnh danhdanh
9 Mỗi định danh là duy nhấttrêntrang
9 Đặtthuộctínhid củathẻ = định_danh
9 Ví dụ:
 Đoạnnàymàuđỏ
 Tiêu đề xanh
MMộộtt ssốố trtrưườờngng hhợợpp ccụụ ththểể
 CSSCSS BasicBasic
1. CSS Background
2. CSS Text
3. CSS Font
4. CSS Border
5. CSS Margin
6. CSS Padding
7. CSS List
 CSSCSS AdvancedAdvanced
1. CSS Dimension
2. CSS Classification
3. CSS Positioning
4. CSS Pseudo-class
5. CSS Pseudo-element
6. CSS Media Types
CSSCSS chocho nnềềnn
CSSCSS chocho nnềềnn ((tttt))
CSSCSS vvàà chocho bbảảnn
CSSCSS vvàà chocho bbảảnn ((tttt))
CSSCSS vvàà fontfont
CSSCSS vvàà fontfont ((tttt))
CSSCSS vvàà fontfont ((tttt))
CSSCSS vvàà fontfont ((tttt))
CSSCSS vvàà đưđườờngng viviềềnn