Search

THIẾT KẾ WEBSITE | THIẾT KẾ WEB CẦN THƠ 89 GIÁ RẺ

Search
GỌI TƯ VẤN
css

CSS là gì | Hướng dẫn CSS cho người mới bắt đầu 2023

Trong bài viết trước, thietkewebcantrho89.com đã hướng dẫn bạn khá chi tiết về “HTML Là Gì? HTML Dùng Để Làm Gì, Hoạt Động Ra Sao?” Hôm nay chúng ta tiếp tục bài viết nói về CSS nhé.

1.CSS là gì?

CSS là viết tắt của Cascading Style Sheets. Nó là ngôn ngữ để mô tả cách trình bày của các trang Web, bao gồm màu sắc, bố cục và phông chữ, do đó làm cho các trang web của chúng tôi hiển thị với người dùng.

CSS được thiết kế để tạo các biểu định kiểu cho web. Nó độc lập với HTML và có thể được sử dụng với bất kỳ ngôn ngữ đánh dấu dựa trên XML nào. Bây giờ chúng ta hãy thử phá vỡ từ viết tắt:

  • Cascading: Falling of Styles
  • Phong cách: Thêm thiết kế / Tạo kiểu cho các thẻ HTML của chúng tôi
  • Trang tính: Viết phong cách của chúng tôi trong các tài liệu khác nhau

2. Lịch sử CSS

  • 1994: Lần đầu tiên được đề xuất bởi Hakon Wium Lie vào ngày 10 tháng 10
  • 1996: CSS được xuất bản vào ngày 17 tháng 11 với người có ảnh hưởng Bert Bos
  • Sau đó, anh trở thành đồng tác giả của CSS
  • 1996: CSS trở thành chính thức với CSS được xuất bản vào tháng 12
  • 1997: Tạo CSS cấp 2 vào ngày 4 tháng 11 
  • 1998: Xuất bản vào ngày 12 tháng 5

3.Trình chỉnh sửa CSS

Một số trình chỉnh sửa phổ biến phù hợp nhất với mã CSS dây như sau:

  1. Atom
  2. Mã Visual Studio
  3. Dấu ngoặc
  4. Espresso (Dành cho người dùng Mac OS)
  5. Notepad ++ (Tuyệt vời cho HTML & CSS)
  6. Komodo Edit (Đơn giản)
  7. Sublime Text (Trình chỉnh sửa tốt nhất)

4.Cú pháp CSS

Selector {
Property 1 : value;
Property 2 : value;
Property 3 : value;
}
For example:
h1
{
Color: red;
Text-align: center;
}
#unique
{
color: green;
}
  • Bộ chọn: chọn phần tử bạn muốn nhắm mục tiêu
  • Luôn giữ nguyên cho dù chúng ta áp dụng kiểu dáng bên trong hay bên ngoài 
  • Có một số bộ chọn cơ bản như thẻ, id và lớp
  • Tất cả tạo thành cặp khóa-giá trị này
  • Các phím: thuộc tính (thuộc tính) như màu sắc, kích thước phông chữ, nền, chiều rộng, chiều cao, v.v.
  • Giá trị: các giá trị được liên kết với các thuộc tính này

5.Nhận xét CSS

Nhận xét không hiển thị trên trình duyệt

Giúp hiểu mã của chúng tôi tốt hơn và làm cho nó có thể đọc được.

Giúp gỡ lỗi mã của chúng tôi

Hai cách để nhận xét:

Dòng đơn

/*<h6> This represents the most/ least important line of the doc. </h6>*/
/*
h1
{
color: red;
text-align: center;
}
*/

6.CSS Cách thực hiện 

  • Có 3 cách để viết CSS trong tệp HTML của chúng tôi.
    • CSS nội tuyến
    • CSS nội bộ
    • CSS bên ngoài
  • Thứ tự ưu tiên
    • Nội tuyến> Nội bộ> Bên ngoài

6.1 CSS nội tuyến

  • Trước khi có CSS, đây là cách duy nhất để áp dụng các kiểu
  • Không phải là một cách hiệu quả để viết vì nó có rất nhiều dư thừa
  • Khép kín 
  • Áp dụng duy nhất trên mỗi phần tử
  • Ý tưởng tách rời các mối quan tâm đã mất

Ví dụ:

<h3 style=” color:red”> Have a great day </h3>
<p style =” color: green”> I did this , I did that </p>

6.2 CSS nội bộ

Với sự trợ giúp của thẻ kiểu, chúng tôi có thể áp dụng các kiểu trong tệp HTML

Dự phòng bị loại bỏ

Nhưng ý tưởng tách rời mối quan tâm vẫn mất

Áp dụng duy nhất trên một tài liệu duy nhất

Ví dụ:

< style>
h1{
color:red;
}
</style>
<h3> Have a great day </h3>

6.3 CSS bên ngoài

Với sự trợ giúp của thẻ <link> trong thẻ head, chúng ta có thể áp dụng các kiểu

Tham chiếu được thêm vào

Tệp được lưu với phần mở rộng .css

Dự phòng bị loại bỏ

Ý tưởng tách biệt các mối quan tâm được duy trì

Áp dụng duy nhất cho mỗi tài liệu

Ví dụ:

<head>
<link rel="stylesheet" type="text/css" href="name of the Css file">
</head>
h1{
color:red; //.css file
}

6.4 Triển khai cả ba loại CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
h1
{
color:green;
}
</style>
</head>
<body>
<h1>This heading will be green</h1>
<p style="color:Red">This paragraph will be red</p>
<p id="center">This paragraph will be pink and center-aligned</p>
</body>
</html>
This is Css file
#center {
text-align: center;
color:pink;
}

7.Bộ chọn CSS

Bộ chọn được sử dụng để nhắm mục tiêu các phần tử và áp dụng CSS

Ba bộ chọn đơn giản

Bộ chọn phần tử

Bộ chọn Id

Bộ chọn lớp

Mức độ ưu tiên của người chọn

Id> Lớp> Phần tử

7.1 Bộ chọn phần tử

Được sử dụng để chọn các phần tử HTML theo tên của nó

Làm thế nào chúng tôi làm điều đó

h1
{
Color: red;
}

Chúng tôi đã chọn thẻ tiêu đề và sau đó thay đổi thuộc tính màu tức là màu văn bản thành màu đỏ. Bây giờ bất cứ điều gì được viết trong thẻ này (nội dung) sẽ có màu văn bản là màu đỏ

7.2 Bộ chọn ID

Thuộc tính id được sử dụng để chọn phần tử HTML

Được sử dụng để nhắm mục tiêu phần tử cụ thể hoặc duy nhất

Làm thế nào chúng tôi làm điều đó

#unique

{
Color: red;
}
<h1 id=”unique”> Hi </p>

Chúng tôi đã chọn id và sau đó thay đổi thuộc tính màu tức là màu văn bản thành màu đỏ. Bây giờ bất cứ điều gì được viết trong thẻ này (nội dung) sẽ có màu văn bản là màu đỏ

7.3 Bộ chọn lớp

Thuộc tính class được sử dụng để chọn phần tử HTML

Được sử dụng để nhắm mục tiêu một lớp cụ thể của phần tử

Làm thế nào chúng tôi làm điều đó

group

{
Color: red;
}
<h1 class=”group”> Hi </p>

Chúng tôi đã chọn lớp và sau đó thay đổi thuộc tính màu tức là màu văn bản thành màu đỏ. Bây giờ bất cứ điều gì được viết trong thẻ này (nội dung) sẽ có màu văn bản là màu đỏ

7.4 Triển khai cả ba bộ chọn trong CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
#center1 {
text-align: center;
color:pink;
}
.center2 {
text-align: center;
color:red;
}
h1
{
text-align:center;
color:green;
}
</style>
</head>
<body>
<h1>This heading will be green and center-aligned </h1>
<p class = "center2">This paragraph will be red and center-aligned </p>
<p id ="center1">This paragraph will be pink and center-aligned</p>
</body>
</html>

Bây giờ chúng ta đã thấy tất cả ba bộ chọn, chúng ta hãy xem phong cách giảm hoặc xếp tầng như thế nào. Chúng tôi sẽ triển khai một chương trình trong đó chúng tôi thêm kiểu trên cùng một phần tử bằng cách sử dụng thẻ, id và các lớp làm bộ chọn. Mục tiêu của việc này là chỉ ra cách một kiểu này cắt kiểu khác cũng có thể được gọi là Ưu tiên. Chúng ta sẽ thấy rằng id có mức độ ưu tiên cao nhất so với các thẻ và lớp.

Bây giờ chúng ta hãy xem việc triển khai nó:

<!DOCTYPE html>
<html>
<head>
	<title>HTML</title>
<style>

p{
	color:red;
}
.class {
	color:green;
}
#id{
	color:orange;
}

</style>
</head>
<body>

<p id="id" class="class"> This is CSS </p> 

</body>
</html>
 

Nếu bạn đã quan sát cách một kiểu chống lại kiểu khác để tạo kiểu cho phần tử. Ở đây cuộc đua đã được thắng bằng id, điều gì sẽ xảy ra nếu tất cả các bộ chọn là các lớp hoặc thẻ thì cái nào gần hơn hoặc được áp dụng ở cuối sẽ thắng cuộc đua và điều gì sẽ xảy ra nếu một bộ chọn lớp và thẻ được sử dụng trên cùng một phần tử, trong trường hợp đó , cuộc đua sẽ được phân thắng bại bởi người chọn lớp.

8.Màu sắc CSS

Có nhiều cách phối màu khác nhau trong CSS

Ba kỹ thuật được sử dụng rộng rãi như sau

RGB

Điều này bắt đầu với RGB và có 3 tham số

3 tham số về cơ bản tương ứng với đỏ, xanh lá cây và xanh lam

Giá trị của mỗi tham số có thể thay đổi từ 0 đến 255.

Vd: RGB (255,0,0); có nghĩa là màu đỏ

HEX

Mã hệ lục phân bắt đầu bằng # và bao gồm 6 số được chia thành 3 bộ

Các bộ về cơ bản tương ứng với Đỏ, Xanh lục và Xanh lam

Giá trị đặt đơn có thể thay đổi từ 00 đến 09 và AA thành FF

Vd: # ff0000; có nghĩa là màu đỏ

RGBA

Điều này bắt đầu với RGB và nhận 4 tham số

4 tham số về cơ bản tương ứng với đỏ, xanh lá cây, xanh lam và alpha

Giá trị của ba tham số đầu tiên có thể thay đổi từ 0 đến 255 và tham số cuối cùng nằm trong khoảng từ 0 đến 1, tức là từ 0,1, 0,2,… ..0,9

Vd: RGB (255,0,0,0); có nghĩa là màu đỏ

Triển khai các loại màu khác nhau trong CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
#center{ color:#ff0099;}
h1{ color:rgba(255,0,0,0.5);}
</style>
</head>
<body>
<h1>This heading will be green</h1>
<p style="color:rgb(255,0,0)">This paragraph will be red</p>
<p id="center">This paragraph will be pink and center-aligned</p>
</body>
</html>

This is the output of the above program showing different shades of red.

Nền CSS

• Có nhiều cách khác nhau mà CSS có thể ảnh hưởng đến các phần tử HTML

• Một vài trong số chúng như sau:

o Màu – được sử dụng để đặt màu của nền

o Lặp lại – được sử dụng để xác định xem hình ảnh có phải lặp lại hay không và nếu nó lặp lại thì nó sẽ thực hiện điều đó như thế nào

o Hình ảnh – được sử dụng để đặt hình ảnh làm nền

o Vị trí – được sử dụng để xác định vị trí của hình ảnh

o Tệp đính kèm – Về cơ bản, nó giúp kiểm soát cơ chế cuộn

Triển khai Thuộc tính nền trong CSS:

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
html{
background: #ff9900;
}
p{
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRT8t-o6oUJ-E9YRhimOvTU2TSH7vlBnRWBN554_rX30dZah466&usqp=CAU");
background-position:center;
background-repeat:no-repeat;
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
provident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

Nguồn tham khảo: https://www.mygreatlearning.com/blog/css-tutorial/

Leave a Reply

Your email address will not be published. Required fields are marked *