Tìm hiểu về css

1. Cú pháp CSS. Cú pháp CSS cơ bản: Selector { property: value; } Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó là các tag HTML, class hay id Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ: backgroundcolor, font-family, color, padding, margin,… Value: Giá trị của thuộc tính. 2. Vị trí đặt CSS. Cách 1: Nội tuyến (kiểu thuộc tính) đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Trong trường hợp này chúng ta sẽ không cần selector trong cú pháp. Lưu ý: Nếu muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này. Cách 2: Bên trong (thẻ style) phương pháp thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style để tiện cho công tác bảo trì, sửa chữa. Lưu ý: Thẻ style nên đặt trong thẻ head. Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link. Lưu ý: Đây là cách làm được khuyến khích, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu. Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một file CSS vào CSS hiện tại. Cú pháp: @import url(link) 3. Class & ID. Class: Nhóm các phần tử với class: sử dụng dấu chấm theo sau là tên của selector. Ví dụ: .center{ text-align: center; color: red; } 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. 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. ID: Nhóm các phần tử với id: sử dụng dấu # theo sau là tên của selector. Ví dụ: center{ text-align: center; color: red; } Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất. 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. **4. Background. ** Background-color: Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt. Ví dụ: body { background-color: red; } Background-image: Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image. Ví dụ: body { background-image: url(“abc.jpg”); } Nếu ảnh đặt trong cùng thư mục với file .css nên chúng ta chỉ cần ghi “abc.jpg”. Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục thì chúng ta sẽ phải ghi là: background-image: url(img/abc.jpg). Nếu không chắc lắm ta có thể dùng đường dẫn tuyệt đối cho ảnh. Background-repeat: Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị: repeat-x: Chỉ lặp lại ảnh theo phương ngang. repeat-y: Chỉ lặp lại ảnh theo phương dọc. repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định. no-repeat: Không lặp lại ảnh. Background-attachment: Background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với nội dung trang web. Thuộc tính này có 2 giá trị: scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định. fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web. Background-position: Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position ta có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà nó làm nền). Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right. 5. Font chữ. Thuộc tính font-family: Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Có hai loại tên font được dùng để chỉ định trong font-family: family-names và generic families. Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,… Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif,… Thuộc tính font-size: Xác định kích thước của một font Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Tùy theo mục đích sử dụng của website bạn có thể lựa chọn những đơn vị phù hợp khu đô thị vạn phúc. Ví dụ: h1 { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 35px; font-family: arial, verdana, sans-serif; } Thuộc tính font-style: Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web. Thuộc tính font-variant: Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ. Thuộc tính font-weight: Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). 6. Text. Màu chữ (thuộc tính color): Để định màu chữ cho một thành phần nào đó trên trang web. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ. Thuộc tính text-indent: Cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS. Thuộc tính text-align: Canh chỉnh văn bản cho các thành phần trong trang web. Có tất cả 4 giá trị: left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều). Thuộc tính letter-spacing: Dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản. Thuộc tính text-decoration: Dùng để thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink). Thuộc tính text-transform: Qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML. Có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định). 7. Span & Div. Nhóm phần tử với thẻ <span>: Thẻ <span> 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ả. Nó là một công cụ đánh dấu để chúng ta có thể viết CSS định dạng cho các phần tử mong muốn. Nhóm khối phần tử với thẻ <div>: Cũng như <span>, <div> 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 để có thể định dạng bằng CSS dễ dàng hơn. Tuy nhiên, điểm khác biệt là <span> dùng để nhóm một khối phần tử trong khi đó <div> có thể nhóm một hoặc nhiều khối phần tử. 8. Box Model. Trong CSS, box model 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. 9. Margin & Padding. Thuộc tính 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. Cú pháp như sau: margin: <margin-top> | <margin-right> | <margin-bottom> | <margin-left> Thuộc tính 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 (xem lại ảnh minh họa về boxmodel). Cú pháp: Tương tự margin. padding: <padding-top> | <padding-right> | <padding-bottom> | <padding-left> 10. Border. Thuộc tính border-awidth: 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. Thuộc tính border-color: Quy định màu viền cho một đối tượng web. Thuộc tính 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. 11. Height & Width. Thuộc tính awidth: quy định chiều rộng cho một thành phần web. Ví dụ: awidth: 700px; Thuộc tính max-awidth: quy định chiều rộng tối đa cho một thành phần web. Thuộc tính min-awidth: quy định chiều rộng tối thiểu cho một thành phần web. Thuộc tính height: quy định chiều cao cho một thành phần web. Ví dụ: height: 300px; Thuộc tính max-height: chiều cao tối đa cho một thành phần web. Thuộc tính min-height: quy định chiều cao tối thiểu cho một thành phần web. 12. Float & Clear. Thuộc tính float: Float là một thuộc tính CSS 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, 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. 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. 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) và none.vạn phuc city 13. Position. Nguyên lý hoạt động của position: Hãy tưởng tượng cửa sổ trình duyệt của bạn giống như một hệ tọa độ và với position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này. Giả sử 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 } 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 độ. Relative position: 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.