Mình cần giúp đỡ về Css
#TOP
Phần này liên quan đến CSSThông thường khi chỉnh sửa trên Wap mình thường dựa trên Css có sẵn và một số mã cơ bản để thiết lập các mục muốn trang trí. hiệu quả được như mong muốn tuy nhiên khi nhìn vào code thì nhiều phần DIV nó dài và rối
cách viết Code hiện tại của mình:
<!DOCTYPE html>
<html>
<body>
<style>
.phdr{background:#51628d;color:#FFF;font-size:13px;margin-top:4px;padding:8px 5px}
.phdr a{color:#ff0}
.list3{background-color:#FFF;border-radius:5px;border:1px solid #dbdbe6;color:#000;margin:5px 0;padding:5px}
.list4{background:#FFF;border:solid #e9e9e9;border-width:0 1px 1px;padding:2px}
</style>
<div class="phdr"> <b>Tiêu Đề</b> </div>
<div class="list4">
<div class="list3"> » Chữ thường
<br/><b><font color="green"> chữ màu xanh + chữ đậm</font></b>
<br/><font color="red"><b> Chữ màu đỏ + chữ đậm</b></font>
<br/><font color="black"><b><p style="text-transform:uppercase;"> Chữ màu đen + chữ đậm + chữ viết hoa</p></b></font>
</div></div>
</body>
</html>
Hiện tại mình muốn thiết lập lại phần Css để cho html gọn nhất có thể nhưng chưa biết cách làm mong được mọi người giúp đỡ.
đoạn html
<div class="phdr"> <b>Tiêu Đề</b> </div>
<div class="list4">
<div class="list3"> » Chữ thường
<br/><b><font color="green"> chữ màu xanh + chữ đậm</font></b>
<br/><font color="red"><b> Chữ màu đỏ + chữ đậm</b></font>
<br/><font color="black"><b><p style="text-transform:uppercase;"> Chữ màu đen + chữ đậm + chữ viết hoa</p></b></font>
</div></div>
muốn html gọn kiểu (hình dung vậy)
<div class="phdr"> <b>Tiêu Đề</b> </div>
<list4>
<list3> » Chữ thường
<bl1>chữ màu xanh + chữ đậm</bl1>
<r> Chữ màu đỏ + chữ đậm</r>
<bl> Chữ màu đen + chữ đậm + chữ viết hoa</bl>
</list3></list4>
Mình không học về CNTT, chỉ là mình hay chia sẻ blog nên có về tò mò chút về lập trình wap/web để tiện lưu giữ và chia sẻ bài viết cho bạn bè.
Làm đẹp CSS sẽ dễ edit hơn
- Cho vào file .css rồi dùng <link ref dẫn vào
- Mình hay viết css như này
.phdr{ background:#51628d; color:#FFF; font-size:13px; margin-top:4px; padding:8px 5px }
Như này khi muốn chỉnh sửa gì dễ edit và dễ tìm hơn
1 vote w3.css mình cũng nghiệp dư
với mình thì mình không làm vậy, mình sẽ viết
.b {font-weight: 750} // mình sẽ thêm mấy định dạng chữ như i,s,u nữa font.green {color: green} // thay green bằng hex mong muốn .block {display: block; padding: 5px} .block.text-center {text-align: center}
xong khi nào cần trang trí mình sẽ
<div class="mainblok"> <div class="phdr"> Tiêu đề mong muốn</div> <div class="main">Đây là chữ thường, sau đó là <font class="green b">chữ mầu xanh in đậm</font> kèm theo đó là <font class="red i">chữ mầu đỏ in nghiêng</font> ... và tất nhiên là không thể thiếu đó là <font class="block"> dòng chữ nằm một mình một hàng</font>. Ngoài ra mình còn có <font class="block text-center"> chữ một mình một hàng và nằm giữa</font>.</div></div>
Mình sẽ thay font thành span, và nhiều những thẻ khác...
không biết có ảnh hưởng gì tới chất lượng bài viết, seo và vô vàn thứ khác không nữa cơ :D
Gộp class list3 và list4 thành 1 class 😃
Ví dụ:
.list { background-color: #FFF; border-radius: 5px; border: 1px solid #e9e9e9; color: #000; margin: 5px 0; border-width: 0 1px 1px; padding: 2px; }
@Phương Cute ngon lém. Thanks bác
Định nghĩ các thẻ như 1 block vậy. Ví dụ như div, nó cũng là 1 block.
list{display:block}
@Minh Nhí voãi ngon
- @KenBi mình copy css vsites của MrKen, giờ chắc sẽ làm giống kenbi cho gọn dễ nhìn hơn
- @Phương Cute mình cũng đang đọc mấy cái ví dụ trên đấy nhưng vẫn chưa thấy mục mình tìm (có thể là được xem qua rồi nhưng chưa hình dung và hiểu cách áp dụng)
- @Minh Nhí mình vẫn muốn dùng riêng class list3 và list4 vì 2 cái đều có điểm riêng.
list4 sẽ liên kết với tiêu đề, list3 luôn nằm trong list4 (nhiều list3 nằm trong list4)
Ví dụ
<div class="phdr"> <b>Tiêu Đề</b> </div> <list4> <list3> </list3> <list3> </list3> <list3> </list3> </list4>
trong list3 sẽ có
<list3> » Chữ thường <bl1>chữ màu xanh + chữ đậm</bl1> <r> Chữ màu đỏ + chữ đậm</r> <bl> Chữ màu đen + chữ đậm + chữ viết hoa</bl> </list3>
@Chan thế thì css
list3 {display: block; border-bottom: 1px solid #bcbcbc}
<list3>>list3< sẽ nằm riêng một khối :D </list3>
ý là như này hay sao :D