Khai niệm Text và các thuộc tính của Text trong Css - #9

Đăng bởi: Minacode|Cập nhật:09-01-2024

Ok anh em, Tiếp theo chủ đề học nhanh Css cùng Minacode. Bài này mình sẽ đề cập đến một khái niệm khá dài dòng nhưng rất thú vị trong Css là Text nhé. Chúng ta sẽ tìm hiểu các thuộc tính của nó như: Color cho text; Text Alignment ; Text Decoration; Text Transform; Khoản cách trong Text và cuối cùng là khai niệm Text Shadow đổ bóng nhé! Nào Let's Go thôi

Text trong Css

Trong Css có rất nhiều thuộc tính để định dạng văn bản.

<!DOCTYPE html>
<html>
<head>
<style>
div {
 border: 1px solid gray;
 padding: 8px;
}

h1 {
 text-align: center;
 text-transform: uppercase;
 color: #4CAF50;
}

p {
 text-indent: 50px;
 text-align: justify;
 letter-spacing: 3px;
}

a {
 text-decoration: none;
 color: #008CBA;
}
</style>
</head>
<body>

<div>
 <h1>minacode</h1>
 <p>Kênh chia sẻ kiến thức lập trình miễn phí
 <a target="_blank" href="https://minacode.net/">"Xem ngay"</a>.</p>
</div>

</body>
</html

Ta có:

Color cho Text

Thuộc tính color được sử dụng để thiết lập màu sắc của văn bản. Màu sắc được chỉ định bởi các cách:

+Tên màu: như "red"
+Một giá trị HEX:như "#ff0000"
+Một giá trị RGB: như "rgb(255,0,0)"

body {
  color: blue;
}

h1 {
  color: green;
}

background-color cho Text

Trong ví dụ này, mình sẽ sử dụng cả background-color và color:

<!DOCTYPE html>
<html>
<head>
<style>
body {
 background-color: lightgrey;
 color: blue;
}

h1 {
 background-color: black;
 color: white;
}

div {
 background-color: blue;
 color: white;
}
</style>
</head>
<body>

<h1>Minacode</h1>
<p>Kênh học lập trình miễn phí</p>
<div>Xem thêm</div>

</body>
</html>

Ta có:

Text Alignment trong Css

Trong phần này chúng ta sẽ lần lượt tìm hiều các thuộc tính:

+ text-align
+ text-align-last
+ direction
+ unicode-bidi
+ vertical-align

`text-align:`

Thuộc tính text-align được sử dụng để thiết lập để căn chỉnh theo chiều ngang của văn bản. Một văn bản có thể được căn trái hoặc phải, căn giữa hoặc căn đều. (căn chỉnh trái là mặc định nếu hướng văn bản là từ trái sang phải và căn chỉnh phải là mặc định nếu hướng văn bản là từ phải sang trái):

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Khi thuộc tính text-align được gán giá trị "justify", mỗi dòng được kéo dài sao cho mỗi dòng có chiều rộng bằng nhau và lề trái và phải đều thẳng (như trong tạp chí và báo)

text-align-last:

Thuộc tính text-align-last chỉ định cách căn chỉnh dòng cuối cùng của văn bản.

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
 text-align-last: right;
}

p.b {
 text-align-last: center;
}

p.c {
 text-align-last: justify;
}
</style>
</head>
<body>

<h1>Minacode|text-align-last</h1>

<h2>text-align-last: right:</h2>
<p class="a">Kênh tự học lập trình miễn phí</p>

<h2>text-align-last: center:</h2>
<p class="b">Kênh tự học lập trình miễn phí</p>

<h2>text-align-last: justify:</h2>
<p class="c">Kênh tự học lập trình miễn phí</p>

</body>
</html>

Ta có:

Direction và Unicode-bidi:

Các thuộc tính direction và unicode-bidi có thể được sử dụng để thay đổi hướng văn bản của một phần tử:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
 direction: rtl;
 unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>Kênh chia sẻ kiến thức lập trình miễn phí.</p>

<p class="ex1">MINACODE</p>

</body>
</html>

Ta có:

vertical-align:

Thuộc tính vertical-align thiết lập căn chỉnh theo chiều dọc của một phần tử.

<!DOCTYPE html>
<html>
<head>
<style>
img.a {
 vertical-align: baseline;
}

img.b {
 vertical-align: text-top;
}

img.c {
 vertical-align: text-bottom;
}

img.d {
 vertical-align: sub;
}

img.e {
 vertical-align: super;
}
</style>
</head>
<body>

<h1>Minacode|vertical-align</h1>

<h2>vertical-align: baseline (Mặc định):</h2>
<p>vertical-align <img class="a" src="sqpurple.gif" width="9" height="9"> Mặc định.</p> 

<h2>vertical-align: text-top:</h2>
<p>vertical-align <img class="b" src="sqpurple.gif" width="9" height="9"> text-top.</p> 

<h2>vertical-align: text-bottom:</h2>
<p>vertical-align <img class="c" src="sqpurple.gif" width="9" height="9"> text-bottom.</p>

<h2>vertical-align: sub:</h2>
<p>vertical-align <img class="d" src="sqpurple.gif" width="9" height="9"> sub.</p> 

<h2>vertical-align: sup:</h2>
<p>vertical-align <img class="e" src="sqpurple.gif" width="9" height="9"> super.</p>

</body>
</html>

Ta có:

Decoration trong Css

Thuộc tính Decoration sẽ được dùng để trang trí cho văn bản. Nó bao gồm:

+ text-decoration-line
+ text-decoration-color
+ text-decoration-style
+ text-decoration-thickness
+ text-decoration

text-decoration-line:

Thuộc tính text-decoration-line được sử dụng để thêm dòng trang trí vào văn bản.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
 text-decoration: overline;
}

h2 {
 text-decoration: line-through;
}

h3 {
 text-decoration: underline;
}

p.ex {
 text-decoration: overline underline;
}
</style>
</head>
<body>

<h1>Minacode</h1>
<h2>Kênh chia sẻ kiến thức lập trình</h2>
<h3>Kênh chia sẻ kiến thức lập trình</h3>
<p class="ex">Kênh chia sẻ kiến thức lập trình.</p>

</body>
</html>

Ta có:

Các bạn hạn chế sử dụng:

p.ex {
 text-decoration: overline underline;
}

Do sẽ dễ nhầm lẫn với một liên kết là thẻ a trong Html

text-decoration-color:

Thuộc tính text-decoration-color đơn giản được sử dụng để thiết lập cho text-decoration

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Các bạn thử trải nghiệm nhé!

text-decoration-style

Thuộc tính text-decoration-style được sử dụng để thiết lập kiểu dáng của đường trang trí text-decoration.

h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Các bạn thử trải nghiệm nhé!

text-decoration-thickness

Thuộc tính text-decoration-thickness được sử dụng để thiết lập độ dày của đường trang trí text-decoration.

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

Các bạn thử trải nghiệm nhé!

Chúng ta có thể rút gọn cách viết trong text-decoration

+ text-decoration-line(yêu cầu)
+ text-decoration-color(không bắt buộc)
+ text-decoration-style(không bắt buộc)
+ text-decoration-thickness(không bắt buộc)

Ví dụ:

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

Lưu ý:

Tất cả các thẻ liên kết a trong HTML đều được gạch chân theo mặc định. Đôi khi bạn thấy rằng các liên kết này cần được tạo kiểu không có gạch chân. Bạn hãy chỉ định text-decoration: none để xóa phần gạch chân khỏi các liên kết nhé.

Ví dụ:

a {
  text-decoration: none;
}

text-transform

Thuộc tính text-transform được sử dụng để chỉ định chữ hoa và chữ thường trong văn bản. Nó có thể được sử dụng để chuyển một văn bản thành chữ hoa hoặc chữ thường hoặc viết hoa chữ cái đầu tiên của mỗi từ:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
 text-transform: uppercase;
}

p.lowercase {
 text-transform: lowercase;
}

p.capitalize {
 text-transform: capitalize;
}
</style>
</head>
<body>

<h1>Minacode|text-transform</h1>

<p class="uppercase">kênh tự học lập trình miễn phí!</p>
<p class="lowercase">kênh tự học lập trình miễn phí!</p>
<p class="capitalize">kênh tự học lập trình miễn phí!</p>

</body>
</html>

Ta có:

Khoảng cách văn bản trong Css

Chúng ta sẽ tìm hiểu qua các thuộc tính:

+ text-indent
+ letter-spacing
+ line-height
+ word-spacing
+ white-space

text-indent:

Thuộc tính text-indentđược sử dụng để chỉ định thụt dòng của dòng đầu tiên trong văn bản:

p {
  text-indent: 50px;
}

letter-spacing:

Thuộc tính letter-spacing được sử dụng để chỉ định khoảng cách giữa các ký tự trong văn bản.

Ví dụ:

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

Ta có:

line-height:

Thuộc tính line-height được sử dụng để chỉ định khoảng cách giữa các dòng:

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

word-spacing:

Thuộc tính word-spacing được sử dụng để chỉ định khoảng cách giữa các từ trong văn bản.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
 word-spacing: 10px;
}

p.two {
 word-spacing: -2px;
}
</style>
</head>
<body>

<h1>Minacode|word-spacing</h1>

<p class="one">Kênh tự học lập trình miễn phí!</p>

<p class="two">Kênh tự học lập trình miễn phí!</p>

</body>
</html>

Ta có:

white-space:

Thuộc tính white-space chỉ định cách xử lý khoảng trắng bên trong một phần tử.

Ví dụ này của mình sẽ tắt tính năng ngắt dòng văn bản bên trong một phần tử:

p {
  white-space: nowrap;
}

text-shadow:

Thuộc tính text-shadow dùng để thêm bóng vào văn bản. Cách sử dụng đơn giản nhất, bạn chỉ cần xác định bóng ngang (2px) và bóng dọc (2px):

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
 text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>MinaCode!</h1>

</body>
</html>

Ta có:

Bạn có thể thêm màu cho bóng:

h1 {
  text-shadow: 2px 2px red;
}

Sau đó, thêm hiệu ứng làm mờ (5px) cho bóng:

h1 {
  text-shadow: 2px 2px 5px red;
}

Tóm lại ta sẽ được:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
 text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>MinaCode!</h1>

</body>
</html>

Ta có:

Các bạn hãy mạnh dạn thử nghiệm với các kiểu đổ bóng khác nhau nữa nhé!

>>Còn tiếp nhé>>

Khai niệm Text và các thuộc tính của Text trong Css - #9

Text trong Css

Color cho Text

background-color cho Text

Text Alignment trong Css

text-align:

text-align-last:

Direction và Unicode-bidi:

vertical-align:

Decoration trong Css

text-decoration-line:

text-decoration-color:

text-decoration-style

text-decoration-thickness

text-transform

Khoảng cách văn bản trong Css

text-indent:

letter-spacing:

line-height:

word-spacing:

white-space:

text-shadow:

Css Là gì? Cú Pháp Css, cách Select các thẻ và thê...

Thứ tự ưu tiên khi một class có nhiều value khác n...

Background và các thuộc tính của Background trong...

Border và các thuộc tính của Border trong Css - #4

Margin và các thuộc tính của Margin trong Css - #5

Padding và các thuộc tính của Padding trong Css -...

Thuộc tính Height, Width và Max-Width trong Css -...

Khái niệm Box-Model, Outline và vai trò của chúng...

Khai niệm Text và các thuộc tính của Text trong Cs...

Khái niệm Fonts chữ và các thuộc tính của Fonts ch...

Icons và một số thư viện phổ biến cung cấp Icons m...

Khái niệm Links, Lists và Các thuộc tính của thẻ a...

Table và Các thuộc tính của Table trong Css - #13

Display và Các thuộc tính của Display trong Css -...

Position và Các thuộc tính của Position trong Css...

Overflow, Float, Clear, Clearfix trong Css - #16

Inline-block và các cách đặt vị trí phần tử trong...

IvyModa

Tạo tính năng CRUD với Livewire Laravel

Php-MySqli-DataBase Cơ Bản

`text-align:`