NTM Solutions

Facebook Youtube Google+

Thứ Ba, 24 tháng 4, 2018

Tự học CSS - Bài 29 - Thư viện ảnh


1.    Thư viện ảnh

Ví dụ:
<html>
<head>
<style>
div.gallery 
{
    margin
: 5px;
    border
: 1px solid #ccc;
    float
: left;
    width
: 180px;
}

div.gallery:hover 
{
    border
: 1px solid #777;
}

div.gallery img 
{
    width
: 100%;
    height
: 300px; /*Nếu chiều cao hình bằng nhau thì để auto*/
}

div.desc 
{
    padding
: 15px;
    text-align
: center;
}
</style>
</head>
<body>

<div class="gallery">
  
<a target="_blank" href="hinh\hinh01.jpg">
    
<img src="hinh\hinh01.jpg" alt="Fjords" width="300" height="200">
  
</a>
  
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  
<a target="_blank" href="hinh\hinh02.jpg">
    
<img src=" hinh\hinh02.jpg " alt="Forest" width="300" height="200">
  
</a>
  
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  
<a target="_blank" href="hinh\hinh03.jpg">
    
<img src="hinh\hinh03.jpg" alt="Northern Lights" width="300" height="200">
  
</a>
  
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  
<a target="_blank" href="hinh\hinh04.jpg">
    
<img src="hinh\hinh04.jpg" alt="Mountains" width="300" height="200">
  
</a>
  
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

2.    Thư viện ảnh responsive

Thứ Hai, 23 tháng 4, 2018

Tự học CSS - Bài 28 - Hiệu ứng dropdown


Quay về MỤC LỤC TỰ HỌC CSS


Trong thiết kế web có 01 hiệu ứng rất hay được sử dụng:
Rê chuột ngang qua đối tượng-> sổ xuống 01 cái gì đó: gọi là hiệu ứng dropdown.

1.    Dropdown cơ bản

Ví dụ: rê chuột ngang qua đối tượng-> xổ xuống 01 nội dung
<style>
.dropdown 
{
    position
: relative;
    display
: inline-block;
}

.dropdown-content 
{
    display
: none; /*ẩn đối tượng khi chưa rê chuột qua*/
    position
: absolute;
    background-color
: #f9f9f9;
    min-width
: 160px;
    box-shadow
: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding
: 12px 16px;
    z-index
: 1;
}

.dropdown:hover .dropdown-content 
{
    display
: block;
}
</style>

<div class="dropdown">
  
<span>Mouse over me</span>
  
<div class="dropdown-content">
    
<p>Hello World!</p>
  
</div>
</div>

2.    Dropdown menu

Chủ Nhật, 22 tháng 4, 2018

Tự học CSS - Bài 27 - Menu điều hướng

Quay về MỤC LỤC TỰ HỌC CSS

1.    Menu điều hướng là 01 danh sách các liên kết

Ví dụ:
Ban đầu, ta tạo danh sách các liên kết:
<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>
Sau đó bỏ dấu bullet và định dạng:
ul {
    list-style-type
: none;
    margin
: 0;
    padding
: 0;
}
Nếu muốn hiển thị menu nằm ngang ta có 02 cách thiết lập với li:
li {    float: left;   }
Cách này các bạn nhớ khống chế thẻ div tiếp theo bằng thuộc tính clear ( xem lại bài Tự học CSS - Bài 20 - Thuộc tính float và clear).
Hoặc cũng có thể thiết lập như sau với thẻ li:
li {    display: inline;   }
Mấy phần “râu ria” như tô màu nền, bỏ gạch dưới trong liên kết, hiệu ứng hover,… các bạn tự mày mò xem sao.

2.    Thanh menu nằm dọc

Thứ Bảy, 21 tháng 4, 2018

Tự học CSS - Bài 26 - Thuộc tính trong suốt opacity và transparency


Quay về MỤC LỤC TỰ HỌC CSS


·         Opacity là độ trong suốt của phần tử HTML
·         Thuộc tính này nhận giá trị từ: 0.0-1.0
Ví dụ:
img {
    opacity
: 0.5;
    filter
: alpha(opacity=50); /* For IE8 and earlier */
}

1.    Chuyển độ trong suốt kết hợp hiệu ứng :hover


Ví dụ 1:
img {
    opacity
: 0.5;
    filter
: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover
{
    opacity
: 1.0;
    filter
: alpha(opacity=100); /* For IE8 and earlier */
}
Ví dụ 2: tạo chiếc hộp trong suốt
div {
    opacity
: 0.3;
    filter
: alpha(opacity=30); /* For IE8 and earlier */
}

2.    Hiệu ứng trong suốt dùng màu nền rgba

Thứ Sáu, 20 tháng 4, 2018

Tự học CSS - Bài 25 - Phần tử giả lập Pseudo-elements


Quay về MỤC LỤC TỰ HỌC CSS

1.    Cú pháp và công dụng của phần tử giả lập

·         Cú pháp:
Tên thẻ chọn::tên phần tử giả lập{thuộc tính: giá trị}
Ví dụ:
h1::after {
    content
: url(linh.jpg);
}
·         Công dụng:
o   Định dạng dòng đầu tiên, chữ đầu tiên của đối tượng đã chọn.
o   Chèn nội dung dung vào trước (before) hoặc sau(after) nội dung phần tử đã chọn.

2.    Phần tử giả lập ::first-line

Ví dụ:
p::first-line {
    color
: #ff0000;
    font-variant
: small-caps;
}

3.    Phần tử giả lập ::first-letter

Thứ Năm, 19 tháng 4, 2018

Tự học CSS - Bài 24 - Lớp giả lập Pseudo-class


Quay về MỤC LỤC TỰ HỌC CSS 

1.    Cú pháp:

Tên phần tử:lớp giả lập{thuộc tính: giá trị}
Ví dụ:
a:hover{background-color:blue;}
è Gọi lớp giả lập hover của siêu liên kết

2.    Lớp giả lập của siêu liên kết:


/* unvisited link */
a:link
{
    color
: #FF0000;
}

/* visited link */
a:visited
{
    color
: #00FF00;
}

/* mouse over link */
a:hover
{
    color
: #FF00FF;
}

/* selected link */
a:active
{
    color
: #0000FF;
}
Chú ý: các lớp giả lập của siêu liên kết phải khai báo đúng theo thứ tự trên hiệu ứng mới xảy ra.

3.    Lớp giả lập vs lớp CSS

Thứ Tư, 18 tháng 4, 2018

Tự học CSS - Bài 23 - Cách chọn đối tượng trong CSS


Quay về MỤC LỤC TỰ HỌC CSS


Mối quan hệ giữa các phần tử HTML trong CSS được thể hiện qua 04 ký hiệu sau:
·         Chọn phần tử con: dấu khoảng trắng (space)
·         Chọn phần tử con trực tiếp: dấu >
·         Chọn phần tử liền kề: dấu +
·         Chọn tất cả phần tử liền kề: dấu ~

1.    Chọn phần tử con - Descendant Selector

Ví dụ sau chọn tất cả thẻ p nằm tong thẻ div:
div p {
    background-color
: yellow;
}
và các giá trị HTML trong phần body:
<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

2.    Chọn phần tử con trực tiếp – Child Selector

Thứ Ba, 17 tháng 4, 2018

Tự học CSS - Bài 22 - Canh lề Dọc và Ngang


Quay về MỤC LỤC TỰ HỌC CSS

1.    Canh giữa đối tượng

Ta dùng thuộc tính margin:auto và định giá trị cho bề rộng (width).
Ví dụ:
.center {
    margin
: auto;
    width
: 50%;
    border
: 3px solid #73AD21;
}
Và thẻ HTML trong phần body
<div class="center">Lớp học vi tính .COM</div>

2.    Canh giữa chữ

Ta dùng thuộc tính text-align:center
Ví dụ:
.center {
    margin
: auto;
    width
: 50%;
    text-align: center;
    border
: 3px solid #73AD21;
}

3.    Canh giữa hình ảnh

Thiết lập cho thẻ img các thuộc tính sau:
·         display:block
·         margin-left:auto
·         margin-right:auto
Ví dụ:
img {
    margin-left
: auto;
    margin-left
: auto;
    display: block;
}
<img src="hinh\linh.jpg">

Thứ Hai, 16 tháng 4, 2018

Tự học CSS - Bài 21 – Giá trị inline-block



Thuộc tính display:inline-block làm cho đối tượng có thuộc tính giống đối tượng inline nhưng có bề rộng và chiều cao.
VÍ dụ 1: ta tạo các đối tượng float( kết hợp clear thẻ div ở cuối để chặn không cho nổi lên)
.floating-box {
    float
: left;
    width
: 150px;
    height
: 75px;
    margin
: 10px;
    border
: 3px solid #73AD21;
}

.after-box
{
    clear
: left;
}
Và các giá trị HTML trong phần body:
<h2>The New Way - using inline-block</h2>

<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>

Chủ Nhật, 15 tháng 4, 2018

Tự học CSS - Bài 20 - Thuộc tính float và clear


 Quay về MỤC LỤC TỰ HỌC CSS


Thuộc tính float quyết định phần tử sẽ “nổi” như thế nào.
Thuộc tính clear quyết định phần tử nào sẽ “nổi lên” và “nổi lên” phía bên nào bên cạnh phần tử đã thiết lập clear.

1.    Thuộc tính float

Thuộc tính này thường được dùng để xác định vị trí và bố cục trong trang web.
Thuộc tính float có thể gán các giá trị sau:
·         left - phần tử sẽ nổi lên bên trái phần tử chứa nó.
·         right – phần tử sẽ nổi lên bên phải phần tử chứa nó.
·         none – phần tử không nổi lên (xuất hiện tại vị trí của nó trong đoạn văn).Đây là giá trị mặc định.
·         inherit – thừa kế giá trị thuộc tính float của phần tử chứa nó.
Cách sử dụng đơn giản thuộc tính float là dùng định dạng chữ bao quanh hình.
Ví dụ 1: cho hình nổi lên bên phải
img {
    float
: right;
}
và các giá trị HTML trong phần body:
<div>
<img src="hinh\linh.jpg" width="30%">
 <p>DÊ CON VÀ CÁO</p>
<p>Một con dê con được người chăn dê để lại trên mái chuồng dê để tránh cho nó khỏi bị thú dữ ăn thịt.</p>
<p>Dê con đang nhảy ra gần cạnh mái chuồng, bỗng nó nhìn thấy một con cáo và dê bắt đầu chế giễu cáo, nheo mũi và thỏa sức lăng mạ cáo.</p>
<p>Cáo nói,:“Ờ tao nghe mày chửi đây, điều mày nói chẳng hề hấn gì với tao đâu, nhưng coi chừng  mái chuồng  sắp xụp kia.”</p>
<p>Đừng bao giờ nói bất cứ điều gì không nên nói.</p>
</div>
Các bạn sửa thuộc tính float:none để xem sự khác biệt.
Ví dụ 2: Cho hình nổi lên bên trái
Ta sửa ví dụ trên lại thành:
img {
    float
: left;
}
Sau đó thử thiết lập thuộc tính float:none để thấy sự khác biệt.
Ví dụ 3:

2.    Thuộc tính clear

Thứ Bảy, 14 tháng 4, 2018

Tự học CSS - Bài 19 - Thuộc tính overflow


 Quay về MỤC LỤC TỰ HỌC CSS


Thuộc tính overflow dùng xử lý trường hợp nội dung bị “tràn” ra khỏi 01 phần tử.
Có 02 cách xử lý: thêm scrollbar hoặc ẩn phần nội dung bị tràn.
Thuộc tính overflow có các giá trị sau:
·         visible
·         hidden
·         scroll
·         auto
Ghi chú: thuộc tính overflow chỉ có tác dụng với đối tượng dạng block và có chiều cao phần tử( height) được thiết lập.
Trong máy MAC mặc định sẽ không có scrollbar khi nội dung bị “tràn”, chỉ khi ta thiết lập overflow:scroll

1.    overflow:visible

Khi nội dung của phần tử vượt quá kích thước của nó sẽ tự động tràn ra ngoài.
Ví dụ:
div {
    width
: 200px;
    height
: 50px;
    background-color
: #eee;
    overflow
: visible;
}
và giá trị HTML trong phần body
<div>
<p>DÊ CON VÀ CÁO</p>
<p>Một con dê con được người chăn dê để lại trên mái chuồng dê để tránh cho nó khỏi bị thú dữ ăn thịt.</p>
<p>Dê con đang nhảy ra gần cạnh mái chuồng, bỗng nó nhìn thấy một con cáo và dê bắt đầu chế giễu cáo, nheo mũi và thỏa sức lăng mạ cáo.</p>
<p>Cáo nói,:“Ờ tao nghe mày chửi đây, điều mày nói chẳng hề hấn gì với tao đâu, nhưng coi chừng  mái chuồng  sắp xụp kia.”</p>
<p>Đừng bao giờ nói bất cứ điều gì không nên nói.</p>
</div>

2.    overflow:hidden

Thứ Sáu, 13 tháng 4, 2018

Tự học CSS - Bài 18 - Thuộc tính position


Quay về MỤC LỤC TỰ HỌC CSS


Thuộc tính position dùng để di chuyển 01 phần tử mà không ảnh hưởng đến bố cục của trang web.Ta dùng nó kết hợp với các thuộc tính top, left, right, bottom.
Thuộc tính position có các giá trị sau:
·         static
·         relative
·         absolute
·         fixed
·         sticky

1.    static

Đây là giá trị mặc định. Khi đặt position ở giá trị này, các thiết lập thuộc tính top, left, right, bottom của phần tử là vô giá trị.
Ví dụ:
div.static {
    position
: static;
    border
: 3px solid #73AD21;
}

2.    relative

Thứ Năm, 12 tháng 4, 2018

Tự học CSS - Bài 17 - Thuộc tính max width


Quay về MỤC LỤC TỰ HỌC CSS


Dùng thuộc tính max-width thay vì width để khi hiển thị trên màn hình nhỏ, kích thước bề ngang của đối tượng block sẽ tự động co lại vừa màn hình.
Sau đây là 02 ví dụ:
div.ex1 {
    width
: 500px;
    margin
: auto;
    border
: 3px solid #73AD21;
}

div.ex2
{
    max-width
: 500px;
    margin
: auto;
    border
: 3px solid #73AD21;
}
Các bạn phóng to, thu nhỏ màn hình để thấy sự khác biệt.

Thứ Tư, 11 tháng 4, 2018

Tự học CSS - Bài 16 - Thuộc tính display


Quay về MỤC LỤC TỰ HỌC CSS


Thuộc tính display xác định cách thức/điều kiện hiển thị của 01 đối tượng HTML.
Giá trị mặc định của đối tượng tùy vào loại và thường là 01 trong 02 giá trị sau: block và inline.

1.    Đối tượng dạng block

Là dạng đối tượng luôn bắt đầu bằng dòng mới, kéo dài từ đầu dòng đến hết chiều dài màn hình (full width).
Các đối tượng dạng block:
<div>
<h1> đến <h6>
<p>
<form>
<header>
<footer>
<section>
Ví dụ:
h1{border:3px solid green}

2.    Đối tượng dạng inline

Thứ Ba, 10 tháng 4, 2018

Tự học CSS - Bài 14 - Định dạng các danh sách


Quay về MỤC LỤC TỰ HỌC CSS

1.    Thiết lập kiểu bullet

Ta dùng thuộc tính list-style-type
Ví dụ:
ul.a {
    list-style-type
: circle;
}

ul.b
{
    list-style-type
: square;
}

ol.c
{
    list-style-type
: upper-roman;
}

ol.d
{
    list-style-type
: lower-alpha;
}
và các giá trị HTML trong phần body

2.    Thiết lập hình cho bullet

Thứ Hai, 9 tháng 4, 2018

Tự học CSS - Bài 13 - Định dạng liên kết


Quay về MỤC LỤC TỰ HỌC CSS

1.    Định dạng liên kết

Liên kết có 04 trạng thái sau:
·         a:link – trạng thái bình thường, người dùng chưa bấm vào.
·         a:visited – trạng thái người dùng đã bấm vào.
·         a:hover – trạng thái người dùng rê chuột lên liên kết.
·         a:active – trạng thái ngay thời điểm người dùng đang bấm liên kết.
04 trạng thái này ta phải tuân thủ thứ tự như trên khi khai báo trong CSS.
Ta có thể định dạng liên kết bằng các thuộc tính định dạng chữ.
Ví dụ:
/* unvisited link */
a:link
{
    color
: red;
}

/* visited link */
a:visited
{
    color
: green;
}

/* mouse over link */
a:hover
{
    color
: hotpink;
}

/* selected link */
a:active
{
    color
: blue;
}

Và một thẻ liên kết trong phần body:
<a href=”http://www.lophocvitinh.com”>Lớp học vi tính .COM</a>
Các bạn thử 04 trạng thái của liên kết vừa nêu ở trên xem sao nhé.

Chủ Nhật, 8 tháng 4, 2018

Tự học CSS - Bài 12 - Thêm ICON


 Quay về MỤC LỤC TỰ HỌC CSS

1.    Sử dụng Font Awesome Icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Ví dụ:
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>


2.    Sử dụng Bootstrap Icons

Thứ Bảy, 7 tháng 4, 2018

Tự học CSS - Bài 11 - Định dạng kiểu chữ


Quay về MỤC LỤC HỌC CSS

1.    Font Family

Có 02 loại kiểu chữ sau:
·         Generic family – 01 nhóm kiểu chữ dễ đọc, dễ nhìn như “Serif” hay “Monospace”
·         Font family – nhóm kiểu chữ riêng biệt.
Generic family
Font family
Description
Serif
Times New Roman
Georgia
Serif fonts có những đường gạch nhỏ ở cuối trong 01 vài ký tự.
Sans-serif
Arial
Verdana
"Sans" nghĩa là không – những kiểu fonts này không có những đường gạch ở cuối các ký tự.
Monospace
Courier New
Lucida Console
Tất cả ký tự monospace có cùng bề rộng.
Trong CSS để thiết lập kiểu chữ ta dùng thuộc tính font-family.
Thuộc tính này giữ một nhóm các kiểu chữ tương tự nhau, nếu kiểu chữ này trình duyệt không tìm thấy, nó sẽ tự động tìm kiểu tiếp theo, và cứ thế.Kết thúc sẽ là họ tổng quát của kiểu chữ đó (generic family)
Ví dụ:
p {
    font-family
: "Times New Roman", Times, serif;
}

2.    Font Style