VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • Python
  • Java WS
  • MyBatis
  • Eclipse
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • PHP
    • CSS
    • HTML
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Phần mềm tiện ích
    • Selenium Test
    • Lập trình C
    • Lập trình C++
  • Tuyển Dụng

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Line Height CSS Margin CSS Opacity CSS Overflow CSS Padding CSS Position CSS Vertical Align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Counter

CSS nâng cao

CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS FlexBox CSS @Media Query CSS 2D Transforms CSS 3D Transforms CSS Aural Media CSS User Interface CSS Pagination

CSS Design

CSS Layout CSS Table

Câu hỏi phỏng vấn

Câu hỏi phỏng vấn CSS

Liên kết css với html


HTML là gì?
CSS Syntax

CSS được thêm vào các trang HTML để định dạng trang web theo quy tắc CSS. Có ba cách để liên kết CSS với HTML.

  1. CSS nội tuyến (Inline CSS)
  2. CSS nội bộ (Internal CSS)
  3. CSS bên ngoại (External CSS)

CSS nội tuyến (Inline CSS)

CSS nội tuyến (inline) được sử dụng để áp dụng CSS trên một dòng hoặc một phần tử. Để sử dụng CSS nội tuyến, bạn phải sử dụng thuộc tính style cho thẻ có liên quan.

Cú pháp:

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
  <h2 style="color: red; margin-left: 40px;">
    CSS nội tuyến áp dụng cho thẻ heading này.
  </h2>
  <p>Thẻ p này không bị ảnh hưởng.</p>
</body>
</html>

Ouput:


Sự bất lợi của CSS nội tuyến

  • Bạn không thể sử dụng dấu nháy kép '"' bên trong CSS nội tuyến. Ví nếu bạn dùng dấu nháy kép thì trình duyệt sẽ hiểu đó là dấu kết thúc thuộc tính style.
  • CSS nội tuyến không được tái sử dụng.
  • CSS nộ tuyến khó khăn trong việc chỉnh sửa vì chúng không được lưu trữ ở một nơi.
  • Không thể tạo các pseudo-code và pseudo-class với CSS nội tuyến.
  • CSS nội tuyến không lợi dụng bộ nhớ cache của trình duyệt.


CSS nội bộ (Internal CSS)

Nội bộ CSS được sử dụng để áp dụng CSS trên một tài liệu hoặc trang. Nó có thể ảnh hưởng đến tất cả các yếu tố của trang. Nó được viết bên trong thẻ <style> trong phần <head> của html.

Ví dụ 1:

<style>  
  p {
    color:blue
  }  
</style>  

Ví dụ 2:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
  background-color: linen;
}

h2 {
  color: red;
  margin-left: 80px;
}
</style>
</head>
<body>
  <h2>CSS nội bộ áp dụng cho thẻ heading này.</h2>
  <p>Thẻ p này không bị ảnh hưởng.</p>
</body>
</html>

Ouput:


CSS bên ngoài (External CSS)

CSS bên ngoài được sử dụng để áp dụng CSS trên nhiều trang. Ở đây, chúng ta viết tất cả các mã CSS trong một tệp css. Phần mở rộng của nó phải là .css ví dụ style.css.

Ví dụ:

File: style.css

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

Bạn cần phải liên kết file style.css này với các trang html như sau:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">  
</head>
<body>
  <h1>Liên kết với tập tin CSS bên ngoài.</h1>
  <p>Màu nền là lightblue.</p>
</body>
</html>

Ouput:

Thẻ <link> phải được sử dụng trong phần <head> của html.



Ghi đè quy tắc CSS

Dưới đây là các quy tắc để ghi đè quy tắc CSS.

  • Bất kỳ CSS nội tuyến nào cũng có ưu tiên cao nhất. Vì vậy, nó sẽ ghi đè bất kỳ quy tắc được định nghĩa trong thẻ <style> ... </ style> hoặc các quy tắc được định nghĩa trong bất kỳ tập tin CSS bên ngoài.

  • Bất kỳ quy tắc nào được định nghĩa trong thẻ <style> ... </ style> sẽ ghi đè các quy tắc được định nghĩa trong bất kỳ tập tin CSS bên ngoài.

  • Bất kỳ quy tắc nào được định nghĩa trong tập tin CSS bên ngoài đều có mức độ ưu tiên thấp nhất và các quy tắc được xác định trong tệp này sẽ chỉ được áp dụng khi hai quy tắc trên không áp dụng.


HTML là gì?
CSS Syntax

Recent Updates

Phân biệt List, Tuple, Set, Dictionary trong PythonHàm Dictionary dict() trong PythonHàm Set set() trong PythonBài tập Java - Trộn 2 mảng trong javaBài tập Java - Chèn phần tử vào mảng trong javaBài tập Java - Sắp xếp mảng theo thứ tự giảm dầnBài tập Java - Sắp xếp mảng theo thứ tự tăng dầnJava - Liệt kê số lần xuất hiện của các phần tử trong một mảngJava - Liệt kê các phần tử xuất hiện trong mảng đúng 2 lầnJava - Liệt kê các phần tử xuất hiện trong mảng đúng 1 lầnChuỗi chứa chuỗi trong javaJava - Liệt kê số lần xuất hiện của các từ trong một chuỗi

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn

Danh sách bài học

Học java
Học servlet
Học jsp
Học Hibernate
Học Struts2
Học Spring
Học SQL

Câu hỏi phỏng vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

About VietTuts.Vn

Hệ thống bài học trên VietTuts.Vn bao gồm các bài lý thuyết và thực hành về các công nghệ java và công nghệ web. Các bài lý thuyết trên hệ thống VietTuts.Vn được tham khảo và tổng hợp từ các trang http://javatpoint.com, http://www.tutorialspoint.com, http://docs.oracle.com/en …

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | VietTuts.Vn team | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml