Cấp bậc tác giả:

TRAINING

CSS - Text - Font

Được viết bởi webmaster ngày 16/07/2018 lúc 08:40 PM
Về định dạng kiểu Text và kiểu Font
  • 0
  • 5881

CSS - Text - Font

1. Về CSS3
hoc-html-07.png 
a. Cách thức sử dụng CSS
Cách 1: Đặt trong thẻ <head> của mã nguồn trang Web
<head>
  <meta charset="utf-8">
  <title>Sample HTML5 Structure</title>
  <style>
    h1, h2 {
      margin:0px;
      font-size:1.5em;
    }
    footer{
      background-color:#999;
      text-align:center;
    }
   </style>
  </head>
- Có thể tái sử dụng được
- Chỉ sử dụng được cho trang đó
Cách 2: Kiểu Inline – Đặt vào giá trị của thuộc tính trong thẻ
   <p style="font-size: 14px; color: purple;"></p>
- Không thể tái sử dụng được
- Không thể sử dụng ở bất kỳ đầu trên trang web
Cách 3: Kiểu External – Đặt vào trong tệp tin CSS
- Tạo tệp body.css
BODY {
  background-color: gray;
  font-family: arial;
  font-style: italic;
}
- Tạo trang index.html
<!DOCTYPE html>
<html>
  <head>
    <LINK rel="stylesheet" type="text/css" href="body.css"/>
    <title>Webex e-Server</title>
  </head>
  <body>
    This is the fastest web server..!!
  </body>
</html>
- Tái sử dụng được ở tất cả các trang
- Có thể tìm kiếm dễ dàng
b. Về Selectors
- Type Selectors
hoc-html-08.png 
+ Kiểu được chỉ định trên HTML và được sử dụng ở tất cả các phần tử đó
- Class Selectors
hoc-html-09.png 
+ Áp dụng cho các kiểu trong nội dung có thuộc tính class
+ Sử dụng dấu chấm(.)
<style>
.chudam{
Font-weight: bold;
}
</style>
Ví dụ: <p class=”planets chudam”>Thẻ đoạn văn</p>
- ID Selectors
hoc-html-10.png 
+ Áp dụng cho các kiểu trong nội dung có thuộc tính Id
+ Sử dụng dấu thăng(#)
Ví dụ:
<p Id=”E001”>Thẻ đoạn văn</p>
- Universal Selector
hoc-html-11.png 
+ Áp dụng tất cả nội dung trên tất cả phần tử
+ Thể hiện bằng dấu sao(*)
c. Thứ tự ưu tiên CSS
hoc-html-12.png 
d. Class giả
selector_name:state_name {property: value}
:active Người dùng tác động vào
:hover Người dùng di chuột qua
:link Người dùng chưa click hay di chuột vào
:visited Người dùng đã click vào
:focus Người dùng chọn vào phần tử nhập
:first-letter Chọn chữ cái đầu tiên của thẻ <p>
:first-line Chọn dòng đầu tiên của thẻ <p>
:first-child Chọn tất cả các phần tử <p> là con đầu tiên của thẻ cha
:before Chèn nội dung trước thẻ <p>
:after Chèn nội dung sau thẻ <p>
a:link {
color: white;
background-color: black;
border: 2px solid white;
}
a:visited {
color: white;
background-color: brown;
border: 2px solid white;
}
a:hover {
color: black;
background-color: white;
border: 2px solid black;
}
p:first-line
{
font-family: “Tahoma”;
font-weight: bolder;
background-color: #FFFFCC;
}

p:first-letter
{
font-family: “fantasy”;
font-size: xx-large;
font-weight: bold;
}
e. Các phép chọn nâng cao:
Phép chọn đã biết
p{}
.class{}
#id{}
Phép chọn toàn bộ
*{}
Phép chọn thẻ bên trong thẻ khác
h3 em{}
A+B chọn thẻ kế tiếp thẻ khác
h3 + p {}
a[thuộc tính]: chọn thẻ sở hữu thuộc tính nào đó
a[title=“theo đường dẫn”]
2. Kiểu Text và Font
a. Text
- color xác định màu sắc cho text trong phần tử
- text-align định hướng text trong phần tử 
left căn trái
right căn phải
center căn giữa
justify căn đều hai bên
hoc-html-13.png 
 
hoc-html-14.png 

hoc-html-15.png
- text-decoration để trang trí text trong phần tử
none
underline
overline
line-through
blink
- text-indent để xác định dòng đầu tiên của text trong phần tử với độ dài hoặc %
length
%
- text-transform sử dụng trong việc xác định loại text trong phần tử
none
capitalize
Uppercase
Lowercase
- word-spacing sử dụng để tăng hoặc giảm khoảng cách giữa các từ
normal
length
hoc-html-16.png
 
 hoc-html-17.png

hoc-html-18.png
 
b. Font
Font-color : màu font chữ
font-family kiểu tên font 
font-size kích cỡ font
font-style kiểu của font
font-variant sử dụng để xác định xem text có được hiển thị ở dạng chữ nhỏ hay không.
3. Padding
Khoảng cách giữa border và và nội dung trong đó
hoc-html-19.png 
4. Margin
Khoảng cách giữa lề xung quanh phần tử và bên ngoài phần tử
hoc-html-20.png


Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML