Mình cần giúp đỡ về Css

Diễn đàn » Thảo luận chung » Mình cần giúp đỡ về Css

Chan Hoang Bạn đang nghĩ gì? 28.11.2022 - 11:30

Phần này liên quan đến CSS
Thô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"> &#187; 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"> &#187; 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> &#187; 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è.

Gill, Thanh Tam đã thích bài viết này

Files (0)

Chapter (0)

Trống!

BBcode:
Markdown:

Hữu Phương https://fb.com/huuphuong.99x 28.11.2022 - 11:36

Làm đẹp CSS sẽ dễ edit hơn

KenBi mix.id.vn - dangminhdong.name.vn 28.11.2022 - 12:13

- 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

Trùm Phụ Tôi yêu Việt Nam 28.11.2022 - 12:20

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

Minh Nhí Ngủ 28.11.2022 - 12:21

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;
}

Minh Nhí Ngủ 28.11.2022 - 12:23

@Trùm Phụ ngon lém. Thanks bác

tờ ròm Tôi yêu Việt Nam 28.11.2022 - 12:30

Định nghĩ các thẻ như 1 block vậy. Ví dụ như div, nó cũng là 1 block.

list{display:block}

Trùm Phụ Tôi yêu Việt Nam 28.11.2022 - 13:00

@Minh Nhí voãi ngon

Chan Hoang Bạn đang nghĩ gì? 28.11.2022 - 13:20

- @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
- @Trùm Phụ 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>

Chan Hoang Bạn đang nghĩ gì? 28.11.2022 - 13:23

trong list3 sẽ có


<list3> &#187; 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>

Trùm Phụ Tôi yêu Việt Nam 28.11.2022 - 14:03

@Chan Hoang 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

Thảo luận: 20 comments