Định dạng trang với CSS

r:0000FF } Thiết kế CSS như sau để phân biệt Lưu ý: Không nên đặt tên class với ký tự đầu là chữ số, nó sẽ không làm việc cho Firefox. 3.7.2. Id Cũng với đoạn HTML như ví dụ về class. Nhưng yêu cầu đặt ra là Lập trình sẽ có màu đỏ sậm, Thiết kế web màu đỏ, Flash màu đỏ tươi, Phân tích thiết kế màu vàng còn các môn đại cương màu xanh da trời. Để giải quyết vấn đề này chúng ta sẽ sử dụng thuộc tính HTML là Id để nhận dạng các môn chuyên ngành và dùng class để nhóm các môn đại cương. Đoạn HTML của chúng ta bây giờ sẽ là : Danh sách các môn học 	 	Lập trình web ASPX 	Thiết kế web 	Phân tích thiết kế 	Vật lý 	Toán A1 	Tin học Đại cương 	Flash 	 Và đoạn CSS cần dùng sẽ là #ltw 	{ color:# 790000 } #tkw 	{ color:#FF0000 } #pttk 	{ color:#FF00FF } #fl 	{ color:"#FFFF00”} .dc 	{ color:#0000FF } Lưu ý: Không nên đặt tên Id với ký tự đầu là chữ số, nó sẽ không làm việc cho Firefox. Trải qua hai ví dụ trên ta thấy: - Class được đặt tên với ký tự đầu tiên là dấu chấm (.) - Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần. - Id được đặt tên với ký tự đầu tiên là dấu thăng (#) - Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất. 3.8. Span & Div 	Thẻ trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn. 3.8.1. Thẻ : Ví dụ: Chúng ta có đoạn HTML sau: 	Không có gì quý hơn độc lập, tự do. Yêu cầu ở đây là chúng ta hãy dùng CSS tô đậm 2 từ độc lập, tự do. Để giải quyết vấn đề này, chúng ta sẽ thêm thẻ vào đoạn HTML như sau: 	Không có gì quý hơn độc lập, tự do. Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên: .nhanmanh 	{ font-weight:bold } 	Cũng như , cũng là một thẻ trung hòa và được thêm vào tài liệu HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là dùng để nhóm một khối phần tử trong khi đó có thể nhóm một hoặc nhiều khối phần tử. 3.8.2. Thẻ 	Trở lại ví dụ về danh sách các môn học trong phần class trước ta sẽ giải quyết vấn đề bằng cách nhóm các phần tử với như sau: Danh sách các môn học 	 	 	Lập trình web ASPX 	Thiết kế web 	Phân tích thiết kế 	 Flash 	 	Vật lý 	Toán A1 	Tin học Đại cương 	 	 Và đoạn CSS sẽ là: #cn { color:#FF0000 } .dc { color:0000FF } 3.9. Box Model 	Box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web. 	 Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Ví dụ: Chúng ta có một đoạn HTML sau: p 	{ 	width:200px; 	margin:30px 20px; 	padding:20px 10px; 	border:1px solid #000; 	text-align:justify 	} Phần CSS cho đoạn HTML trên: Ta được mô hình hộp như sau: 3.10. Margin & Padding 3.10.1. Margin 	Thuộc tính Margin trong CSS cũng được dùng để canh 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. 	Ví dụ sau sẽ chỉ cho chúng ta biết cách canh lề cho một trang web. body 	{ margin-top:80px; margin-bottom:40px; margin-left:50px; margin-right:30px; border:1px dotted #FF0000 	} Hoặc gọn hơn: 	body 	{ 	 margin:80px 30px 40px 50px; 	border:1px dotted #FF0000 	} margin: | | | Cách viết tắt như sau: Body 	{ margin:80px 30px 40px 50px; 	border:1px solid #FF0000 	} #box1 	{ margin:50px 30px 20px 40px; 	border:1px solid #00FF00 	} #box2 	{ margin:50px 30px 20px 40px; 	border:1px solid #0000FF 	} Các ví dụ: 3.10.1. Padding 	Padding có thể hiểu như là một thuộc tính đệm. Padding không ảnh hưởng tới khoảng các giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng 	Cú pháp: Tương tự margin. Padding: | | | 3.11 Border 3.11.2. Thuộc tính border-color 	Border-width quy định độ rộng cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels 	Border-color quy định màu viền cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ. 	Border-style quy định kiểu viền thể hiện của một đối tượng web. CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền. 3.11.3. Thuộc tính border-style 3.11.1. Thuộc tính border-width Các kiểu đường viền Ví dụ: h1 { border-width:thin; 	border-color:#FF0000; 	border-style:solid 	} h2 { border-width:thick; border-color:#CCC; border-style:dotted } p { border-width:5px; border-color:#FF00FF; border-style:double } 	Ngoài ra, chúng ta cũng có thể dùng riêng các thuộc tính border-top, border-right, border-bottom hay border-left để chỉ định viền riêng cho các đối tượng. h1 { border-top-width:thin; border-top-color:#FF0000; border-top-style:solid; border-right-width:thick; border-right-color:#AFAFAF; border-right-style:dotted; border-bottom-width:2px; border-bottom-color:blue; border-bottom-style:double; border-left-width:5px; border-left-color:violet; border-left-style:groove } Ví dụ: Ta có thể sử dụng cấu trúc rút gọn của CSS như sau: Border: | | 3.12 Height & Width 3.12.1. Thuộc tính width 	Width dùng để quy định chiều rộng cho một thành phần web. Ví dụ. 	p 	{ width:700px; } 3.12.2. Thuộc tính max-width: 	Max-width quy định chiều rộng tối đa cho một thành phần web. 3. 12.3. Thuộc tính min-width: 	Min-width quy định chiều rộng tối thiểu cho một thành phần web. 3.12.4. Thuộc tính height: 	Height là một thuộc tính CSS dùng để quy định chiều cao cho một thành phần web. Ví dụ: 	p { height:300px } 3.12.5. Thuộc tính max-height: 	Max-height quy định chiều cao tối đa cho một thành phần web. 3.12.6. Thuộc tính min-height: 	Min-height quy định chiều cao tối thiểu cho một thành phần web. Lưu ý: Thông thường chiều cao một thành phần web do văn bản trong trang web đó quyết định. Việc định chiều cao chính xác cho một thành phần sẽ tạo thanh cuộn văn bản nếu chiều cao văn bản lớn hơn chiều cao đã định. Các thuộc tính max/min-width/height được sử dụng trong những trường hợp ta không chắc giá trị chính xác cho width, height cả một thành phần. Ví dụ, Vùng chứa bài post của một forum có bề ngang 500px, bạn có thể định max-width:500px cho phần hình ảnh trong phần đó để tránh những ảnh lớn bị lệch ra ngoài. 3.13. Float & Clear 3.13.1 Float: 	Float (theo như nghĩa tiếng Việt là thả trôi) dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó. 	Đây là một thuộc tính rất cần thiết khi dàn trang (như tạo các trang web 2 column layout hay 3 column layout), hiển thị văn bản thành cột, hay thực hiện việc định vị trí ảnh và text. Thuộc tính float có 3 giá trị: + Left: Cố định phần tử về bên trái. + Right: Cố định phần tử về bên phải. + None: Bình thường. 	Nhìn vào hình minh họa trên chúng ta thấy là ban đầu trong box lớn có hai thành phần là Box B và phần Content. Lúc đầu Box B nằm bên trên và Content nằm bên dưới, nhưng khi chúng ta đặt thuộc tính float cho Box B thì Box B bị cố định về bên trái và chừa lại khoảng trống bên trái nó. Còn phần Content thì vốn nằm bên dưới sẽ tự động tràn lên để lắp đầy khoảng trống do Box B tạo ra. Ví dụ sau, chúng ta sẽ thực hiện float ảnh logo sang trái để phần nội dung bên dưới tràn lên nằm cạnh logo. #logo 	{ 	float:left; 	} Ví dụ: Chúng ta sẽ thử dùng float để chia 2 cột văn bản. .column1, .column2 	{ width:45%; float:left; 	text-align:justify; 	padding:0 20px; 	} .column1 { 	border-right:1px solid #000 	} 3.13.2 Clear: 	Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là Clear. 	Thuộc tính clear là một thuộc tính thường được gán vào các phần tử liên quan tới phần tử đã được float để quyết định hướng xử sự của phần tử này. 	Ở ví dụ trên, khi chúng ta float tấm ảnh qua trái thì mặc nhiên văn bản sẽ được tràn lên để lắp vào chỗ trống. Nhưng khi chúng ta đặt vào văn bản thuộc tính clear thì chúng ta có quyền quyết định xem phần văn bản đó có được tràn lên hay không. Thuộc tính clear có tất cả 4 thuộc tính: left (tràn bên trái), right (tràn bên phải), both (không tràn) none. 3.14: Position 	Hãy tưởng tượng cửa sổ trình duyệt của ta giống như một hệ tọa độ và với position ta có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này. Ví dụ: Chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái tài liệu, chúng ta sẽ viết CSS như sau: 	img 	{ 	 position:absolute; top:70px; left:90px 	} 3.14.1 Absolute position: 	Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu. Một thành phần được định vị tuyệt đối sẽ nhận giá trị position là absolute. Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ. Ví dụ sau sẽ chỉ cho chúng ta cách đặt bốn ảnh ở bốn góc tài liệu bằng định vị tuyệt đối. #logo1 	{ position:absolute; top:50px; left:70px } #logo2 	{ position:absolute; top:0; right:0 } #logo3 	{ position:absolute; bottom:0; left:0 } #logo4 	{ position:absolute; bottom:70px; right:50px } 	Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative. 3.14.1 Relative position: 3.15 Layers 	Layers là cách bạn đặt một thành phần này lên trên một thành phần khác. Với thuộc tính z-index Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp. #logo1 { position:absolute; top:70px; left:50px; z-index:1 } #logo2 { position:absolute; top:140px; left:100px; z-index:2 } #logo3 { position:absolute; top:210px; left:150px; z-index:3 } #logo4 { position:absolute; top:280px; left:200px; z-index:4 } #logo5 { position:absolute; top:350px; left:250px; z-index:5 } The end