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
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>
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) :
- 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.
- 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.
- 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.
- 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.
- 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.) :
- overflow: visible;
- overflow: hidden;
- overflow: scroll;
- overflow: auto;
- overflow: initial;
- 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 ) :
- padding-top: 10px;
- padding-left: 10px;
- padding-right: 10px;
- 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 ) :
- margin-top: 10px;
- margin-right: 10px;
- margin-left: 10px;
- margin-bottom: 10px;
❀ Tìm hiểu thuộc tính Object-fit ( hình ảnh ) :
- 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.
- 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ị.
- contain : Phóng to / thu nhỏ hình ảnh theo tỉ lệ phù hợp với bên trong box / div,...
- none : Lấy theo tỉ lệ kích thước ảnh gốc .
- 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 :
- https://xuanthulab.net/kich-thuoc-rong-cao-phan-tu-html-trong-css.html
- https://www.w3schools.com/cssref/pr_background-image.asp [ background Css ]
- https://www.w3schools.com/css/css_overflow.asp [ CSS Overflow ]
- https://freshdesignweb.com/css-popup-window [ css Popup ]
- https://www.w3schools.com/css/css_rwd_grid.asp [ column responsive css | Grid CSS | Responsive grid CSS ]
- https://www.w3schools.com/howto/howto_css_table_responsive.asp [ Responsive table CSS ]
- https://www.tipsandtricks-hq.com/simple-table-of-contents-toc-using-pure-html-and-css-code-9217 [ table of contents css ]
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_nowrap8 [ css flexbox | intro to css flexbox ]
- https://sonweb.net/huong-dan-tao-popup-hien-thi-theo-theo-gian-tren-wordpress.html/ [ Popup hiển thị theo thời gian ]
- https://www.wikitechy.com/html/html5-popup-window [ Nút Popup ]
==End==
Dành cho anh em, kiếm cái mô bai, cài áp tài xế công nghệ, chạy Gờ ráp, kiếm thêm thu nhập.
+ Poco M4 Pro :
Xem Tại Đây
+ Oppo A54 :
Xem Tại Đây
+ Xiaomi Redmi Note 11 :
Xem Tại Đây
+ Samsung Galaxy A23 :
Xem Tại Đây
Dành cho anh em săn sale điện thoại giá rẻ, cài App, viết blog kiếm tiền, làm video viral, bật tính năng kiếm tiền từ quảng cáo trên Youtube, tiktok
+ Tecno Poca 3 :
Xem Tại Đây
+ Realme narzo 50i Prime :
Xem Tại Đây
