I.Lý Thuyết
ID-ClASS
Class và Id là hai thành phần vô cùng quan trọng trong css. Nó giúp cho việc định dạng một hoặc một tập hợp các thẻ html có chung những thuộc tính như màu sắc, kích thước hay cỡ chữ... trở nên nhanh hơn và hiệu quả hơn. Việc sử dụng class và id trong css còn giúp cho việc quản lý codecss trở nên dễ dàng hơn.
- ID được sử dụng cho các thành phần mang tính tuyệt đối và duy nhất trong toàn bộ trang web
- Class được gán cho các thành phần sẽ lặp lại nhiều lần. Việc gán class cho nhiều thành phần của trang web thì bạn chỉ việc khai báo style trên file CSS cho các thành phần này một lần duy nhất.
Ví dụ :
#vidu{
width: 80%;
padding: 20px;
border: 1px solid #666;
}
.vidu2{
font-size: small;
color: #008080;
font-weight: bold;
}
CSS ELEMENT POSITIONING:
-Static
•Định vị với giá trị static là cách mặc định mà một phần tử sẽ xuất hiện trong tài liệu (X)HTMl của bạn. Kể cả khi bạn không khai báo position cho phần tử thì mặc định nó vẫn có giá trị static.
(position: static;)
-Relative
•Định vị một phần tử với vị trí tương đối và sau đó bạn có thể tùy chỉnh lại vị trí của nó với các thuộc tính left, right, top, bottom.
(position: relative;)
-Absolute
•Định vị một phần tử tách biệt hẳn so với tài liệu (X)HTMl của bạn. Nếu như một phần tử được định vị với giá trị là absolute được đặt trong một phần tử khác được định vị với giá trị khác static, nó sẽ được định vị tại top left của phần tử cha, nếu không, nó sẽ được định vị tại top left của cửa sổ trình duyệt
(position: absolute;)
-Fixed
•Định vị một phần tử với giá trị fixed gần giống với giá trị absolute, trừ việc nó sẽ luôn được căn chỉnh với cửa sổ trình duyệt.
II-Bài Tập
Chủ Nhật, 29 tháng 3, 2015
Thứ Ba, 24 tháng 3, 2015
CSS I
I. Lí thuyết.
1) Inline css:
- Viết các thuộc tính quy định luôn trong attribute style.
- Không có khả năng reuse. Viết code nhiều.
- Khi chỉ muốn thay đổi đúng 1 thẻ html, thì sẽ sử dụng inline css.
Ví dụ:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
2) Embbeb css.
- Viết luôn css trong phần head của file html.
- Phạm vi sử dụng là trong 1 file html
Ví dụ:
<head>
<style>body { background-color: linen;}h1 { color: maroon; margin-left: 40px;} </style></head>
3)External css.
- Css được viết ra trong 1 file riêng.
- Có thể sử dụng lại tại nhiều trong html trong cùng wed.
- Muốn sử dụng lại css thì đưa link liên kết.
Ví dụ:
<link href=”Blue Sky.css” type=”text/css” rel=”stylesheet” />
Trong đó: href: địa chỉ file css(thay đổi tùy vào wed).
type=”text/css” loại dữ liệu là text và css (giữ nguyên).
rel=”stylesheet” loại áp dụng là thẻ quy định đặc điểm (giữ nguyên).
II.Thực hành
Thứ Năm, 19 tháng 3, 2015
Bài Tập Ngày 2
I-Lý Thuyết
<ol></ol> được sử dụng để tạo ra một danh sách có thứ tự
<ul></ul> được sử dụng để tạo ra một danh sách không có số thứ tự
2 cấu trúc này đều được thực hiện bởi cấu trúc con <li></li>
VD:
<!-- --> Sử dụng để comment
-style="font-size: " Thay đổi kích cỡ của chữ
VD: <p style="font-size:12px">Nguyễn Trọng Huy</p>
-style="font-family: " Thay đổi phông chữ cho đoạn văn
VD: <p style="font-family:Impact">Nguyễn Trọng Huy</p>
-style="color: "đổi màu chữ
VD: <p style="color:blue">Nguyễn Trọng Huy</p>
-style="text-align:" Chọn vị trí cho văn bản, có thể trái phải giữa
-background-color: Đổi màu nền cho khung ta lựa chọn
-<strong></strong> in đậm 1 từ 1 chữ hoặc 1 đoạn văn
-<em></em> nghiêng 1 chữ hoặc 1 đoạn văn
<table></table> Tạo bảng
<tr></tr> Tạo cột cho bảng
<th></th> Tạo Tiêu đề cho bảng
<td></td>Cập nhật nội dung cho bảng
<span></span> đánh dấu 1 đoạn văn hoặc 1 từ
II-Thực Hành
<ol></ol> được sử dụng để tạo ra một danh sách có thứ tự
<ul></ul> được sử dụng để tạo ra một danh sách không có số thứ tự
2 cấu trúc này đều được thực hiện bởi cấu trúc con <li></li>
VD:
<ol>
<li>1</li>
<li>2</li>
</ol>
__________
<ul>
<li>3</li>
<li>4</li>
</ul>
<!-- --> Sử dụng để comment
-style="font-size: " Thay đổi kích cỡ của chữ
VD: <p style="font-size:12px">Nguyễn Trọng Huy</p>
-style="font-family: " Thay đổi phông chữ cho đoạn văn
VD: <p style="font-family:Impact">Nguyễn Trọng Huy</p>
-style="color: "đổi màu chữ
VD: <p style="color:blue">Nguyễn Trọng Huy</p>
-style="text-align:" Chọn vị trí cho văn bản, có thể trái phải giữa
-background-color: Đổi màu nền cho khung ta lựa chọn
-<strong></strong> in đậm 1 từ 1 chữ hoặc 1 đoạn văn
-<em></em> nghiêng 1 chữ hoặc 1 đoạn văn
<table></table> Tạo bảng
<tr></tr> Tạo cột cho bảng
<th></th> Tạo Tiêu đề cho bảng
<td></td>Cập nhật nội dung cho bảng
<span></span> đánh dấu 1 đoạn văn hoặc 1 từ
II-Thực Hành
Thứ Tư, 18 tháng 3, 2015
I.Khái niệm.
-HTML gọi là "ngôn ngữ đánh dấu siêu văn bản" được sử dụng chủ yếu để tạo nội dung, hình ảnh cho một website và thiết kế cho nó.
-Thành phần của một trang HTML bao gồm các liên kết, hình ảnh hoặc các nút dẫn tới link, ảnh, bảng thống kê.
II.Cấu trúc.
-Văn bản HTML bao gồm các thẻ mang từ khóa đc gói trong một cặp dấu "<'từ khóa'>" và các thẻ được thực hiện khi gồm thêm một cặp </'từ khóa'> nữa.
-Mở đầu nội dung văn bản HTML luôn là thẻ <html> và kết thúc là thẻ </html>
-Trước thẻ <html> còn có thể có <!DOCTYPE html> nhưng đây không phải là một thẻ trong cấu trúc, nó chỉ là chỉ dẫn phiên bản html được sử dụng.
-HTML gọi là "ngôn ngữ đánh dấu siêu văn bản" được sử dụng chủ yếu để tạo nội dung, hình ảnh cho một website và thiết kế cho nó.
-Thành phần của một trang HTML bao gồm các liên kết, hình ảnh hoặc các nút dẫn tới link, ảnh, bảng thống kê.
II.Cấu trúc.
-Văn bản HTML bao gồm các thẻ mang từ khóa đc gói trong một cặp dấu "<'từ khóa'>" và các thẻ được thực hiện khi gồm thêm một cặp </'từ khóa'> nữa.
-Mở đầu nội dung văn bản HTML luôn là thẻ <html> và kết thúc là thẻ </html>
-Trước thẻ <html> còn có thể có <!DOCTYPE html> nhưng đây không phải là một thẻ trong cấu trúc, nó chỉ là chỉ dẫn phiên bản html được sử dụng.
- Mọi trang web mà bạn nhìn thấy đều được viết trên ngôn ngữ gọi là HTML. Bạn có thể hiểu rằng HTML như một bộ xương cấu trúc lên một website.
- Trong khóa học này, chúng ta sẽ dùng HTML để thêm đoạn văn bản, tiêu đề, hình ảnh và địa chỉ liên kết.
- Phần chỉnh sửa bên phải, có một tab gọi là test.html. Đây là thư mục chúng ta sẽ điền HTML vào. Có thể thấy dòng code với dấu <>s? Đó chính là HTML!
- Như những ngôn ngữ khác, nó có cú pháp đặc biệt riêng ( quy tắc để giao tiếp ).
- HTML viết tắt của HyperText Markup Language. HyperText có nghĩa là "chữ có liên kết bên trong". Bất kể khi nào bạn kích vào những chữ đó, nó sẽ đưa bạn đến trang web mới.
- Markup Language là một chương trình ngôn ngữ đc sử dụng để làm văn bản có thể làm nhiều việc hơn. Nó có thể chuyển văn bản thành hình ảnh,liên kết, bảng, mục, và nhiều hơn nữa. HTML là ngôn ngữ đánh dấu chúng ta sẽ học.
- Điều gì làm cho website trở nên đẹp đẽ hơn? Đó chính là CSS-Cascading Style Sheets.Nó như là làn da và trang điểm cho bìa của bộ xương HTML. Chúng ta sẽ học HTML trước, xong rồi lo đến CSS tại khóa sau.
Đăng ký:
Nhận xét (Atom)

.jpg)

