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:

Chan Hoang Bạn đang nghĩ gì? 28.11.2022 - 14:40

@Trùm Phụ đúng rồi list3 là 1 khối riêng
->https://hvxs.vsites.net/list3.html

<div class="phdr"> <b>Tiêu Đề</b> </div>
   <list4>
 <list3> </list3>
 <list3> </list3>
 <list3> </list3>
 </list4>

trong list3 sẽ có các phần nhỏ


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

Vì trong list3 hiện tại mình sử dụng nhiều html dài quá, mình đang muốn hỏi mọi người xem có cách nào làm gọn hơn đoạn này

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

Trùm Phụ Ăn bẩn sống lâu \n ăn sâu sống mãi\n ăn lãi trường tồn\n ăn l*n bất tử 28.11.2022 - 15:37

@Chan Hoang Như thế này thì sao :Dhttp://imgill.viwap.com/test

Trùm Phụ Ăn bẩn sống lâu \n ăn sâu sống mãi\n ăn lãi trường tồn\n ăn l*n bất tử 28.11.2022 - 15:39


<!DOCTYPE html>
 <html>
 <body>
 <style>
 /** Định dạng **/
 :root {
 --root-color: #51628d;
 --root-text-color: #FFF;
 --list-color: #fff;
 --list-color2: #f1f1f1;
 --font-family: Arial,sans-serif;
 --font-lg: cursive;
 --color: #51628d;
 --font-style: normal;
 --font-size: 13px;
 }
 /** Lớp block **/
 * {font-family: var(--font-family); }
 .phdr  {font-family: var(--font-lg); }
 .mainblok {border: 1px solid var(--root-color);border-bottom: 0px;}
 .phdr{background:var(--root-color);color:var(--root-text-color);font-size:var(--font-size);margin-top:4px;padding:8px 5px}
 .mainblok>.phdr {margin-top:0px}
 .phdr a{color:#ff0}
 .list3{padding: 4px; padding-left: 8px;border-bottom: 1px solid var(--root-color)}
 .list4{background:var(--root-text-color);}
 .list3:nth-child(odd) {
  background: var(--list-color);
  }
  .list3:nth-child(even) {
  background: var(--list-color2);
   }
   .block {display: block; margin: 3px;}
 /** Màu sắc và định dạng chữ **/
 .color-main {color: var(--root-color);} .red {color: #FF0000;} .blue {color: #0066FF} .green {color: #009900 }
 .b {font-weight: 750;} .i {font-style: italic} .o {font-style: oblique; } .in { font-style: inherit } .u {text-decoration: underline;} .ut { text-decoration: overline; } .s {text-decoration: line-through;} .utu {text-decoration: underline overline;} .uppercase {text-transform:uppercase;} .black {color: #111}
 .phdr::before {  content: "❉";font-size: 15px;}
 </style>
 
 <div class="mainblok">
 <div class="phdr"> <b>Tiêu Đề</b> </div>
 <div class="list4">
 <div class="list3 color-main">
 <span class="block">Chữ thường</span>
 <span class="blue b block"> chữ màu xanh + chữ đậm</span>
 <span class="green b block"> chữ màu xanh lá + chữ đậm</span>
 <span class="red b block"> Chữ màu đỏ + chữ đậm</b></span>
 <span class="black b uppercase block"> Chữ màu đen + chữ đậm + chữ viết hoa</span>
 </div>
 <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 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 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 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>
 </div>
 
 </body>
 </html>

Chan Hoang Bạn đang nghĩ gì? 28.11.2022 - 18:32

@Trùm Phụ bông tuyết đẹp ghê. nhưng mà phần html vẫn chưa rút gọn.
ý mình là htlm trong list3 ạ

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

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

@Chan Hoang cái đó do bạn định nghĩa thôi


list{display:block}
bl1{color:green;font-weight:700}
r{color:red;font-weight:700}
bl{color:black;font-weight:700;text-transform:uppercase}

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

Khi bạn định nghĩa như vậy, list, bl, bl1 hay r được đóng vai trò như 1 thẻ chứ ko phải là 1 class nữa. Giống với div, đây là 1 thẻ. Thể hiện nó qua html


<div class="list">class .list{}</div>
<list>thẻ list được định nghĩa như 1 block</list>

Jani Jani.SacMau.Mobi 28.11.2022 - 18:45

nếu như không nhầm thì đây là ...
tặng thêm bông tuyết


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.phdr{background:#51628d;color:#FFF;font-size:13px;margin-top:4px;padding:8px 5px}
.phdr::before { content: "❉";font-size: 15px;}
.list4{background:#FFF;border:solid #e9e9e9;border-width:0 1px 1px;padding:2px}
.list3 {background-color:#FFF;border-radius:5px;border:1px solid #dbdbe6;color:#000;margin:5px 0;padding:5px}
.list3 d{font-weight:bold;color:green;}
.list3 d1{font-weight:bold;color:red;}
.list3 d2{font-weight:bold;text-transform:uppercase;color:black;}
</style>
</head>
<body>
<div class="phdr"> <b>Tiêu Đề</b> </div>
<div class="list4">
<div class="list3"> &#187; Chữ thường
<br/><d>chữ màu xanh + chữ đậm </d>
<br/><d1> Chữ màu đỏ + chữ đậm</d1>
<br/><d2>Chữ màu đen + chữ đậm + chữ viết hoa</d2>
</div>
<div class="list3"> &#187; Chữ thường
<br/><d>chữ màu xanh + chữ đậm </d>
<br/><d1> Chữ màu đỏ + chữ đậm</d1>
<br/><d2>Chữ màu đen + chữ đậm + chữ viết hoa</d2>
</div>
<div class="list3"> &#187; Chữ thường
<br/><d>chữ màu xanh + chữ đậm </d>
<br/><d1> Chữ màu đỏ + chữ đậm</d1>
<br/><d2>Chữ màu đen + chữ đậm + chữ viết hoa</d2>
</div>
</div>
</body>
</html>

Trùm Phụ Ăn bẩn sống lâu \n ăn sâu sống mãi\n ăn lãi trường tồn\n ăn l*n bất tử 28.11.2022 - 18:58

Như 2 bạn trên

Chan Hoang Bạn đang nghĩ gì? 28.11.2022 - 19:08

Được như ý rồi. Cảm ơn mọi người @tờ ròm @Jani @Trùm Phụ

Yami Tôi yêu Việt Nam 29.11.2022 - 08:05

Thảo luận: 20 comments