Series thẻ Html, Css - Class, Id & thuộc tính thường dùng trong thiết kế template & làm đẹp nội dung trước khi đăng bài viết

Gia Bảo
CSS & html là ngôn ngữ cơ bản trong quá trình lập trình & viết code nhằm làm đẹp cho nội dung văn bản chỉnh sửa cấu trúc giao diện cho trang web của chúng ta. Css được xem là bộ ngôn ngữ góp phần tạo nên phong cách thiết kế riêng, định dạng kiểu cách đăng bài viết của mỗi blogger thông qua việc sử dụng các bộ quy tắc ( Rule Style ), Class, ID cùng các thuộc tính & giá trị được quy định trong bộ ngôn ngữ của Css kết hợp với thẻ Html tạo nên một thế giới template & nội dung vô cùng phong phú, đầy sắc màu tùy vào tư duy sáng tạo của mỗi người.

Sau đây là bộ thẻ Html, quy tắc ( Rule Style ), Class, ID cùng các thuộc tính & giá trị Css được người viết code ứng dụng vào thực tiễn hay dùng.


Lưu ý về Css :

Cú pháp Css : selector { property: value }
Tóm tắt Class / ID / Thuộc tính & giá trị
Dấu “#” trước tên đối tượng mà chúng ta đặt là id.
<div id="IdName"> Nội dung </div>
//Thì trong file CSS chúng ta viết như sau.
#IdName{
//Lệnh CSS
}
Dấu “.” trước tên của đối tượng mà chúng ta đặt là class.
<div class="ClassName"> Nội dung </div>
//Thì trong file CSS chúng ta viết như sau.
.ClassName{
//Lệnh CSS
}
Xem thêm tại  : http://www.aloseo.xyz/2017/04/css-luom-lat-1.html

Mẹo vặt Css Blogspot ẩn hiện / tăng giảm kích thước phần tử Widget / Search Bar / Menu Bar / Sidebar... 

Code Thủ Thuật Blogspot Css trên trang bài viết ( Post )  :  

Trong một vài trường hợp chèn code tiện ích blogspot vào trang bài viết blogspot dẫn đến việc xung đột code làm thay đổi vị trí hiển thị của một số phần tử như thanh menu, công cụ tìm kiếm search bar, wigget, trong trường hợp để làm đẹp giao diện mà chưa tìm ra lỗi code và cách khắc phục,  thay vì xóa bỏ tiện ích mong muốn chèn vào trang bài viết, cách tốt nhất là chọn giải pháp điều chỉnh lại kích thước hoặc cho ẩn luôn các phần tử bị ảnh hưởng cho đỡ phiền phức.      

Ẩn thanh tìm kiếm / sidebar / header trên trang web thiết kế bằng blogspot trong một số trường hợp :

<style>
.searchbar{display: none;}
.sidebar{display: none;} 
</style>   

<style>
header{visibility: hidden;} 
</style>
 

Tăng giảm kích thước widget :

<style>
.sidebar{width:35%} 
</style> 

Css đơn giản hay dùng

Code Thủ Thuật Bỏ Dấu Chấm Tạo List. :  

<ul style="list-style: none;">
<li>Dòng 1</li>
<li>Dòng 2</li>   
</ul>

Xem : https://www.digitalnomad.vn/2021/06/tong-hop-html-css-javascript-du-kieu-chen-vao-blogspot-website-cua-banNhi687.html#codelistUlLi

Canh thẻ Div Con nằm giữa thẻ Div Cha với : margin: 0 auto : 

Tham khảo Mẫu code html & Css :

<style>
#Cha {width: 100%; height: auto; background: white}
.con {width: 50%; height: auto; background: blue}  
</style>

<div id="Cha">
<div class="con" style="margin: 0 auto;">
  <center>margin: 0 auto</center>
  </div>
</div>

Code Hình Bên Trái, Nội Dung Hiển Thị Bên Phải. :

<div>
<img src="https://3.bp.blogspot.com/-SSw5tSPruqc/YD3lmYpiqcI/AAAAAAAACvA/3d0Cjwnap-oaEMrTD01WdM6FSatnnrIKQCK4BGAYYCw/s1600/Logo-Blog-Gia-Bao300.png" style="float:left;width:30px;margin:0 10px">
Code Hình bên Trái Nội dung Text bên phải. 
</div>  

Xem : Html, Css thực dụng

Sưu tầm bộ quy tắc Css bao gồm ID, Class,  thuộc tính & giá trị  kết hợp với bộ thẻ Html  :

Chèn thuộc tính & giá trị vào thẻ HTML :

Thẻ Div Float / Clear :

  • <div style='float: left;'/>...</div> 
  • <div style='float: right;'/>...</div> 
  • <div style='float: none;'/>...</div> 
  • <div style='float: inherit;'/>...</div> 
  • <div style='clear: both;'/>

Thẻ Div tạo khung :

  • <div style="padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;"> </div> 
  • <div style="border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;">top padding có giá trị 50px, right padding có giá trị 30px, bottom padding có giá trị 50px,và left padding có giá trị 80px.</div>

Thẻ Div chứa văn bản  :

  • <div style="text-align:center;">Nội_dung canh giữa</div> 
  • <div style="text-align: justify;padding:5px"> Nội dung dàn đều chữ </div>

Thẻ Font :

  • <font color='red' size='6' style='line-height: 1.1;'>thuộc tính line-height giúp dãn dòng text</font> 
  • <font size="2" color="blue">Đây là chữ có kích thước= 2, màu xanh.</font>

Thẻ Img :

  • <img src="đường dẫn đến tập tin hình ảnh" width="chiều rộng" height="chiều cao" alt="mô tả"/> 
  • <img src="Link Hình" alt="Viết mô tả cho tấm hình" title="Nội dung tấm hình" width="n" height="n" border="n" /> 
  •  <img alt="Ván gỗ ghép" src="https://lh4.googleusercontent.com/-vUd7R4IMWZk/Wk2Rv1iMWnI/AAAAAAAAABU/7rROFhQ8jVYik9sws4SQzbCjO6NQDMuNACLcBGAs/s1200/goghep.jpg" style="margin-top: 5px;box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.2);width: 100%;margin-bottom: 10px;border: 1px dotted #ccc;"/>

Tạo bộ quy tắc gán thuộc tính & giá trị  vào ID - Class gọi Css khi cần sử dụng trên thẻ HTML :

❀  Tạo bộ quy tắc  Rule Style đổi màu link :
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

📌 Gọi thẻ html <a...>  :
<a href="https://www.ivietpr.com" target="_blank">Visit web viết bài PR - quảng cáo online !</a>

==End quy tắc  Rule Style & thẻ Html đổi màu link ==

❀  Tạo bộ quy tắc  Rule Style ... :
nội dung...

 📌 Gọi thẻ html ...  :
nội dung...

==End quy tắc  Rule Style & thẻ Html ... ==

Tìm hiểu thuộc tính CSS quan trọng 

thường xuyên sử dụng :

❀  Tìm hiểu 5 giá trị - thuộc tính position (quy định vị trí cho thành phần trong Css) :

  1. Static : thuộc tính này giúp phần tử,  hiển thị vị trí một cách mặc định (default) trong css, theo đó các thành phần hiển thị sẽ được căn cứ theo thứ tự của văn bản.
  2. Relative : thuộc tính quy định vị trí tuyệt đối cho các thành phần, không gây ảnh hưởng tới vị trí ban đầu hay các thành phần khác.
  3. Absolute : thuộc tính này nhằm giúp lập trình viên định vị trí tuyệt đối cho thành phần căn cứ vào thành phần bao ngoài, hoặc ít nhất là dựa theo cửa sổ trình duyệt. 
  4. Fixed : Định vị trí tương đối cho thành phần theo cửa sổ trình duyệt. Fixed : thuộc tính này giúp chúng ta  định vị  & cố định các phần tử tại một vị trí, ví dụ như khi bạn scroll trình duyệt chẳng hạn, phần tử sẽ không thay đổi.
  5. Inherit : thuộc tính thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

 ==End tìm hiểu 5 giá trị thuộc tính, quy định vị trí cho các thành phần trong Css  ==

❀  Tìm hiểu thuộc tính overflow (điều khiển khi nội dung phần tử HTML vượt quá kích thước box.) :

  1. overflow: visible;
  2. overflow: hidden;
  3. overflow: scroll;
  4. overflow: auto;
  5. overflow: initial;
  6. overflow: inherit;

❀  Tìm hiểu thuộc tính padding ( Tạo khoảng cách - không gian bên trong đối tượng ) :

  1. padding-top: 10px; 
  2. padding-left: 10px; 
  3. padding-right: 10px; 
  4. padding-bottom: 10px;

❀  Tìm hiểu thuộc tính margin ( Tạo khoảng cách - không gian bên ngoài đối tượng ) :

  1. margin-top: 10px;
  2. margin-right: 10px;
  3. margin-left: 10px;
  4. margin-bottom: 10px;

❀  Tìm hiểu thuộc tính Object-fit ( hình ảnh ) :

  1. fill (default): Chiều rộng và chiều cao của hình ảnh đầy box căn cứ theo tỉ lệ của ảnh.
  2. cover : lấp đầy toàn bộ box, theo tỉ lệ ảnh, các bộ phận của nó thừa ra sẽ được cắt đi và sẽ không được hiển thị.
  3. contain : Phóng to / thu nhỏ hình ảnh theo tỉ lệ phù hợp với bên trong box / div,...
  4. none : Lấy theo tỉ lệ kích thước ảnh gốc .
  5. scale-down : hiển thị tương tự 1 trong số những thuộc tính nêu trên (fill,cover,contai...), căn cứ vào thuộc tính nào tạo ra size ảnh nhỏ nhất.

❀  Thuộc tính Object-position : Xác định định vị trí ảnh nằm bên trong box,  Object-position có 2 giá trị 1 là cách căn cứ dựa theo trục trên & trục dưới,  2 là  cách căn theo trái & phải. Ví dụ : object-position: center; object-position: 50% 50%;

❀  Một số mẫu trong cặp thẻ  <style> ... </style>:

<style>
body{
background-image: url(https://1.bp.blogspot.com/-YCpZa0ccamU/YMyha6eh8nI/AAAAAAAADgk/ZiCpBdqNJ9ITBulDBjPepAlbfU6Gl8kXQCLcBGAsYHQ/w640-h426/an-tam-mua-sam-tai-nha-giao-hang-tan-noi-chang-lo-ve-giaPro48.png);
background-color: #cccccc;
}
</style>

 

Thuộc Tính CSS Tổng Hợp :

❀ Thuộc tính z-index : được mô tả như sau mỗi element trên trang web được hiển thị ngang và dọc theo 2 trục x và y, hiển thị thứ tự chồng lấn theo trục z. Do đó thuộc tính z-index quy định của element càng cao thì nó được ưu tiên xuất hiện trước ( nằm lên trên các element có z-index thấp hơn ).

Nội dung đang tiếp tục được cập nhật 

Web tham khảo code web Html / Css / Javascript  :

  1. https://xuanthulab.net/kich-thuoc-rong-cao-phan-tu-html-trong-css.html
  2. https://www.w3schools.com/cssref/pr_background-image.asp [ background Css ]
  3. https://www.w3schools.com/css/css_overflow.asp [ CSS Overflow ]
  4. https://freshdesignweb.com/css-popup-window [ css Popup ]
  5. https://www.w3schools.com/css/css_rwd_grid.asp [ column responsive css | Grid CSS | Responsive grid CSS ]
  6. https://www.w3schools.com/howto/howto_css_table_responsive.asp [ Responsive table CSS ]
  7. https://www.tipsandtricks-hq.com/simple-table-of-contents-toc-using-pure-html-and-css-code-9217 [ table of contents css ]
  8. https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_nowrap8 [ css flexbox | intro to css flexbox ]
  9. https://sonweb.net/huong-dan-tao-popup-hien-thi-theo-theo-gian-tren-wordpress.html/ [ Popup hiển thị theo thời gian ]
  10. https://www.wikitechy.com/html/html5-popup-window [ Nút Popup ]

==End==

Biến Content Thành tiền
Chiến mã đường rừng
Gia Bảo