NTM Solutions

Thứ Ba, 24 tháng 4, 2018

Khóa học CSS - Bài 29 - Thư viện ảnh

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

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

<!DOCTYPE html>
<html>
<head>
<style>
/*Chú ý các tấm hình sử dụng phải có kích thước bằng nhau*/
div.gallery {
    border: 1px solid #ccc;
}

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

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>

<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>

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


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

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

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

<div class="clearfix"></div>

<div style="padding:6px;">
  <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>

</body>
</html>

Nếu vẫn chưa rõ, các bạn xem thêm video clip sau:

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


Tác giả: #drM

Nguồn: Sưu Tầm

Thứ Hai, 23 tháng 4, 2018

Khóa 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>

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

Khóa 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ộctí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.

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

Khóa 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 */
}

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

Khóa 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;
}

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

Khóa 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.

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

Khóa 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>

Thứ Ba, 17 tháng 4, 2018

Khóa 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

Khóa học CSS - Bài 21 – Giá trị inline-block

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


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

Khóa 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:

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

Khóa 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>

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

Khóa 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;
}

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

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

Khóa 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}

Thứ Hai, 9 tháng 4, 2018

Khóa 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é.
Facebook Youtube RSS