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

28.11.2022 - 11:30 1,168 lượt xem

Chan Hoang

Junior

Bạn đang nghĩ gì?

Bài viết 79

Tài sản 1,757

28/11/2022 11:30 Bình luận (20)

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

BÌNH LUẬN (20)

Chan Hoang

Tác giả

28.11.2022 - 14:40 Tag Quote

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

28.11.2022 - 15:37 Tag Quote

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

Trùm Phụ

28.11.2022 - 15:39 Tag Quote


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

Tác giả

28.11.2022 - 18:32 Tag Quote

@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

28.11.2022 - 18:40 Tag Quote

@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

28.11.2022 - 18:44 Tag Quote

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

28.11.2022 - 18:45 Tag Quote

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ụ

28.11.2022 - 18:58 Tag Quote

Như 2 bạn trên

Chan Hoang

Tác giả

28.11.2022 - 19:08 Tag Quote

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

Yami

29.11.2022 - 08:05 Tag Quote

Viết bình luận

Vui lòng đăng nhập để tham gia bình luận.

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

Chia sẻ liên kết

Viết bình luận