Teya Salat

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Chèn, thứ tự ưu tiên và Cú pháp của CSS

Admin* RoSino18k *
* 21-09-2015
Đây là bài mở đầu vì thế nó toàn chỉ là các thứ cơ bản thôi nhưng rất quan trọng về sau này!

Ở bài này mình sẽ hướng dẫn các bạn về cách chèn CSS, thứ tự ưu tiên của CSS, và cú pháp của CSS.

Cách chèn CSS:
để chèn CSS vào trang web bạn có 3 cách cơ bản dưới đây, mỗi cách đều có ưu và nhược điểm riêng nhưng 1 trang web hoàn thiện đều phải sử dụng cả 3 cách này!
- Cách 1: chèn file .css vào trang web
<link rel="stylesheet" href="linkCSS" type="text/css"/>

- Cách 2: dùng tag
<style>các đoạn CSS</style>
VD:
<style>.ddvn{padding: 5px; magrin: 10px;}</style>

- Cách 3: dùng thuộc tính style="" trong HTML (áp dụng với mọi tag HTML)
<p style="các thuộc tính CSS">WAPKA</p>
VD:
<div style="padding: 5px; magrin: 10px">WAPKA</div>

Thứ tự ưu tiên của CSS:
chỉ vài chữ thôi: lấy phần gần nhất và độc nhất!
VD: mình có đoạn code sau:
<style>.ddvn{padding: 5px; margin: 10px;}
.ddvn{padding: 10px; color: #fff;}</style>
<div class="ddvn" style="width: 30%">ABC</div>

thì div trên sẽ có padding 10px, margin 10px, color #fff, width: 50%. Nó sẽ lấy tất cả các thuộc tính, nếu trùng sẽ lấy thuộc tính gần với code nhất và nhớ là CSS áp dụng cho code nào thì phải nằm phía trên code đó nhé, nằm dưới coi như vô dụng!

Cú pháp của CSS:
1 cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value)

.selector {property: value}

Nếu nhãn của bạn có nhiều từ thì bạn nên đặt nhãn của bạn vào trong dấu nháy kép

p {font-family: "sans serif"}

Trong trường hợp thẻ chọn của bạn nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;)

.p {text-align: center; color: red}

Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt

#p {text-align: center;
color: black;
font-family: arial}

bạn có chú ý các kí tự ở trước chữ p ko? Nó là định nghĩa đi theo HTML
ở đây ta có:

.p{...} dấu chấm (.) sử dụng với thuộc tính class="p" của HTML

#p{...} dấu thăng (#) sử dụng với thuộc tính id="p" của HTML

p{...} ko có dấu gì sử dụng cho tag HTML cùng tên (tag )

Nguồn: DuyPoppy
↑↑ Lượt xem: 347
score
Đánh giá: 4.5/ 5, 347 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-347]