Hướng Dẫn Và Ví Dụ HTML Styles - Openplanning

Trang chủ » Chỉnh Css Trong Html » Hướng Dẫn Và Ví Dụ HTML Styles - Openplanning

Có thể bạn quan tâm

  • Tất cả tài liệu
  • Java
    • Java Basic
    • Java Collections Framework
    • Java IO
    • Java New IO
    • Java Date Time
    • Servlet/JSP
    • Eclipse Tech
      • SWT
      • RCP
      • RAP
      • Eclipse Plugin Tools
    • XML & HTML
    • Java Opensource
    • Java Application Servers
  • Maven
  • Gradle
  • Servlet/Jsp
  • Thymeleaf
  • Spring
    • Spring Boot
    • Spring Cloud
  • Struts2
  • Hibernate
  • Java Web Service
  • JavaFX
  • SWT
  • Oracle ADF
  • Android
  • iOS
  • Python
  • Swift
  • C#
  • C/C++
  • Ruby
  • Dart
  • Batch
  • Database
    • Oracle
    • MySQL
    • SQL Server
    • PostGres
    • Other Database
  • Oracle APEX
  • Report
  • Client
  • ECMAScript / Javascript
  • TypeScript
  • NodeJS
  • ReactJS
  • Flutter
  • AngularJS
  • HTML
  • CSS
  • Bootstrap
  • OS
    • Ubuntu
    • Solaris
    • Mac OS
  • VPS
  • Git
  • SAP
  • Amazon AWS
  • Khác
    • Chưa phân loại
    • Phần mềm & ứng dụng tiện ích
    • VirtualBox
    • VmWare
Hướng dẫn và ví dụ HTML Styles
  1. HTML Styles
  2. Inline Style
  3. CSS Class
  4. Tập tin CSS

1. HTML Styles

Câu chuyện về HTML Styles bắt đầu từ năm 1994, thời điểm mà website đang bắt đầu được sử dụng như một nền tảng cho các xuất bản điện tử. Người ta nhận thấy rằng rất khó khăn để tạo ra một trang web có bố cục và kiểu dáng (style) giống như các tờ báo giấy truyền thống. Điều này tạo ra nhu cầu cần phải có một "ngôn ngữ biểu đạt kiểu dáng trang" (style sheet language), và rồi ngôn ngữ CSS (Cascading Style Sheets) ra đời.
CSS là một chủ đề thú vị và có nhiều điều để nói, nó nên được giới thiệu chi tiết trong một bài viết riêng biệt, bao gồm lịch sử và lợi ích mà CSS mang lại, thật tuyệt vời hãy đọc bài viết của tôi về CSS theo liên kết dưới đây:
  • Lich su cua CSS
Về cơ bản CSS định nghĩa ra các kiểu dáng (style) có thể áp dụng cho các phần tử của HTML, chẳng hạn thước, mầu sắc, font chữ,...Trong bài học này tôi sẽ giới thiệu cho bạn làm thế nào để sử dụng Style trong HTML, và một vài các thuộc tính (property) CSS cơ bản, chúng tôi có một chủ đề riêng biệt về CSS và bạn có thể học chi tiết hơn tại đây.
  • Các hướng dẫn CSS

2. Inline Style

Cách đơn giản nhất để áp dụng kiểu dáng cho một phần tử là sử dụng thuộc tính (attribute) style.<tagname style="property1:value1; property2: value2">Ví dụ:<p>I am normal</p> <p style="color:red;">I am red</p> <p style="color:blue; font-weight:bold">I am blue and bold</p> <p style="font-size:35px; font-style:italic">I am big and italic</p>color, font-size, font-style, font-weight là các thuộc tính (property) của CSS. Mỗi thuộc tính của CSS quy định một khía cạnh kiểu dáng cho phần tử.OK, chúng ta sẽ làm quen với một vài thuộc tính (property) CSS thông dụng thông qua các ví dụ dưới đây:CSS background-colorThuộc tính (property) CSS background-color được sử dụng để chỉ định mầu nền cho phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại.background-color-example.html<!DOCTYPE html> <html> <head> <title>Style</title> <meta charset="UTF-8"/> </head> <body style="background-color: AliceBlue;"> <h1>CSS background-color</h1> <p style="background-color:yellow">My Background Color is yellow!</p> </body> </html>CSS colorThuộc tính (property) CSS color được sử dụng để chỉ định mầu chữ (text color) cho một phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại.<p style="color:red;">I am red</p>CSS font-familyThuộc tính (property) CSS font-family được sử dụng để thiết lập font chữ cho một phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại.font-family-example.html<h1>CSS font-family</h1> <hr/> <div style="font-family: 'Comic Sans MS';"> <h3>This is a Heading h3</h3> <p>This is a Paragraph</p> </div> <hr/> <p style="font-family: Arial;"> This is a Paragraph </p>CSS font-sizeThuộc tính (property) CSS font-size được sử dụng để chỉ định kích thước font chữ cho phần tử, nó cũng có tác dụng đối với các phần tử con của phần tử hiện tại.font-size-example.html<p> This is a Paragraph (Default font-size) </p> <p style="font-size: 150%"> This is a Paragraph (font-size: 150%) </p> <p style="font-size: 35px"> This is a Paragraph (font-size: 35px) </p>CSS text-alignThuộc tính (property) CSS text-align được sử dụng để chỉ định căn chỉnh văn bản theo chiều ngang (horizontal text alignment). Nó có 3 giá trị là: left, center, right.text-align-example.html<p style="background-color:AliceBlue;text-align:left;"> This is a Paragraph (text-align:left;) </p> <p style="background-color:AliceBlue;text-align:center;"> This is a Paragraph (text-align:center) </p> <p style="background-color:AliceBlue;text-align:right;"> This is a Paragraph (text-align:right) </p>

3. CSS Class

CSS cho phép bạn tạo ra một lớp (class), nó là một nhóm các thuộc tính (property), và bạn có thể áp dụng lớp này cho một hoặc nhiều phần tử. Các lớp được định nghĩa bên trong một thẻ mở <style> và thẻ đóng </style>.Thẻ <style> có thể đặt tại bất cứ vị trí nào trong tài liệu HTML, nhưng theo khuyến nghị nó nên được đặt trong thẻ <head>.Ví dụ, định nghĩa một lớp có tên "app-note" bên trong thẻ <style></style>. Chú ý: Cần có dấu chấm ( . ) ngay trước tên của lớp.<style> .app-note { font-size:90%; font-style: italic; color: red; } </style>Sau đó bạn có thể áp dụng lớp này cho các phần tử HTML:<p class="app-note"> This is a Paragraph </p> <div class="app-note"> This is a Div </div>Xem code đầy đủ của ví dụ.css-class-example.html<!DOCTYPE html> <html> <head> <title>CSS Class</title> <meta charset="UTF-8"/> <style> .app-note { font-size:90%; font-style: italic; color: red; } </style> </head> <body> <h3>CSS Class</h3> <hr/> <p class="app-note"> This is a Paragraph </p> <div class="app-note"> This is a Div </div> </body> </html>Ví dụ, định nghĩa một nhóm các thuộc tính (property) áp dụng cho một thẻ cụ thể.<style> div { font-size:120%; color: CadetBlue; } code { font-weight: bold; font-style: italic; background-color: yellow; color: blue; } </style><div> The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/> The <code>confirm()</code> method displays a dialog box with a specified message, along with an OK and a Cancel button. </div>Xem code đầy đủ của ví dụ trên:styles-for-tag-example.html<!DOCTYPE html> <html> <head> <title>Styles for a Tag</title> <meta charset="UTF-8"/> <style> div { font-size:120%; color: CadetBlue; } code { font-weight: bold; font-style: italic; background-color: yellow; color: blue; } </style> </head> <body> <h3>Styles for a Tag</h3> <hr/> <div> The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/> The <code>confirm()</code> method displays a dialog box with a specified message, along with an OK and a Cancel button. </div> </body> </html>

4. Tập tin CSS

Rất thường xuyên bạn viết các style trong một tập tin CSS riêng biệt, điều này làm cho tập tin có thể được sử dụng bởi nhiều tài liệu HTML khác nhau.Chẳng hạn, tạo một tập tin có tên main.css:main.cssdiv { font-size:120%; color: CadetBlue; } code { font-weight: bold; font-style: italic; background-color: yellow; color: blue; } .app-note { font-size:90%; font-style: italic; }Và khai báo để sử dụng tập tin CSS nói trên trong tài liệu HTML:using-css-file-example.html<!DOCTYPE html> <html> <head> <title>Using CSS File</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="main.css" /> </head> <body> <h3>Using CSS File</h3> <hr/> <div> The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/> The <code>confirm()</code> method displays a dialog box with a specified message, along with an OK and a Cancel button. </div> <br/> <br/> <div class="app-note"> This is a DIV with class 'app-note' </div> </body> </html>

Các hướng dẫn HTML

  • Giới thiệu về HTML
  • Cài đặt trình soạn thảo Atom
  • Cài đặt Atom HTML Preview
  • Bắt đầu với HTML
  • Hướng dẫn và ví dụ HTML Images
  • Hướng dẫn và ví dụ HTML Block/Inline Elements
  • Trình soạn thảo HTML
  • Cài đặt Atom-Beautify
  • Hướng dẫn và ví dụ HTML Styles
  • Hướng dẫn và ví dụ HTML Hyperlink
  • Hướng dẫn và ví dụ HTML Email Link
  • Hướng dẫn và ví dụ HTML Paragraphs
  • Hướng dẫn và ví dụ HTML IFrame
  • Hướng dẫn và ví dụ HTML Entity
  • Hướng dẫn và ví dụ HTML Lists
  • Hướng dẫn và ví dụ HTML Tables
  • Hướng dẫn và ví dụ HTML Col, Colgroup
  • Hướng dẫn và ví dụ HTML Heading
  • Hướng dẫn và ví dụ HTML Quotation (Các trích dẫn)
  • Hướng dẫn và ví dụ HTML URL Encoding
  • Hướng dẫn và ví dụ HTML Video
  • Hướng dẫn và ví dụ thuộc tính HTML dir
Show More
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn CSS

Các hướng dẫn HTML

  • Giới thiệu về HTML
  • Cài đặt trình soạn thảo Atom
  • Cài đặt Atom HTML Preview
  • Bắt đầu với HTML
  • Hướng dẫn và ví dụ HTML Images
  • Hướng dẫn và ví dụ HTML Block/Inline Elements
  • Trình soạn thảo HTML
  • Cài đặt Atom-Beautify
  • Hướng dẫn và ví dụ HTML Styles
  • Hướng dẫn và ví dụ HTML Hyperlink
  • Hướng dẫn và ví dụ HTML Email Link
  • Hướng dẫn và ví dụ HTML Paragraphs
  • Hướng dẫn và ví dụ HTML IFrame
  • Hướng dẫn và ví dụ HTML Entity
  • Hướng dẫn và ví dụ HTML Lists
  • Hướng dẫn và ví dụ HTML Tables
  • Hướng dẫn và ví dụ HTML Col, Colgroup
  • Hướng dẫn và ví dụ HTML Heading
  • Hướng dẫn và ví dụ HTML Quotation (Các trích dẫn)
  • Hướng dẫn và ví dụ HTML URL Encoding
  • Hướng dẫn và ví dụ HTML Video
  • Hướng dẫn và ví dụ thuộc tính HTML dir
Show More
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn CSS

Các bài viết mới nhất

  • Xử lý lỗi 404 trong Flutter GetX
  • Ví dụ đăng nhập và đăng xuất với Flutter Getx
  • Hướng dẫn và ví dụ Flutter NumberTextInputFormatter
  • Hướng dẫn và ví dụ Flutter multi_dropdown
  • Hướng dẫn và ví dụ Flutter flutter_form_builder
  • Hướng dẫn và ví dụ Flutter GetX obs Obx
  • Hướng dẫn và ví dụ Flutter GetX GetBuilder
  • Từ khoá part và part of trong Dart
  • Hướng dẫn và ví dụ Flutter InkWell
  • Bài thực hành Flutter SharedPreferences
  • Hướng dẫn và ví dụ Flutter Radio
  • Hướng dẫn và ví dụ Flutter Slider
  • Hướng dẫn và ví dụ Flutter SkeletonLoader
  • Chỉ định cổng cố định cho Flutter Web trên Android Studio
  • Hướng dẫn và ví dụ Flutter SharedPreferences
  • Tạo Module trong Flutter
  • Flutter upload ảnh sử dụng http và ImagePicker
  • Bài thực hành Dart http CRUD
  • Hướng dẫn và ví dụ Flutter image_picker
  • Flutter GridView với SliverGridDelegate tuỳ biến
Show More
  • Các hướng dẫn HTML

Từ khóa » Chỉnh Css Trong Html