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

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

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

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

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

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

Tự 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>

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