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ị được với người dùng

CSS được thiết kế để tạo 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

• xếp tầng. sự sụp đổ của phong cách
• 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

Để hiểu rõ hơn về CSS, hãy xem Hướng dẫn CSS này

Lịch sử CSS

• 1994. Đề xuất đầu tiên 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 này ông 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 ngày 12 tháng 5

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. nguyên tử
2. Mã phòng thu trực quan
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. Chỉnh sửa Komodo (Đơn giản)
7. Sublime Text (Trình chỉnh sửa tốt nhất)

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
• chìa khóa. thuộc tính (thuộc tính) như màu sắc, cỡ 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

Nhấn vào đây để xem hướng dẫn về HTML

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ó dễ đọc
• Giúp gỡ lỗi mã của chúng tôi
• Hai cách để bình luận
  • Dòng đơn

 /*
 This represents the most/ least important line of the doc. 
*/

Đây là cách để bình luận ra nhiều dòng

 /*
         h1
     {
     color: red;
     text-align: center;
      } 
      */

Hướng dẫn CSS

• Có 3 cách để viết CSS trong file HTML của chúng ta
  • 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

CSS nội tuyến

• Trướ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 yếu tố
• Ý tưởng tách biệt các mối quan tâm đã bị mất
• Thí dụ

 Have a great day 
 I did this , I did that 

CSS nội bộ

• Với sự trợ giúp của thẻ kiểu, chúng ta có thể áp dụng các kiểu trong tệp HTML
• Dư thừa được loại bỏ
• Nhưng ý tưởng tách mối quan tâm vẫn bị mất
• Áp dụng duy nhất trên một tài liệu
• Thí dụ

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

CSS bên ngoài

• With the help of tag in the head tag, we can apply styles
• Tài liệu tham khảo được thêm vào
• Tệp được lưu với. phần mở rộng css
• Dư thừa được 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 từng tài liệu
• Thí dụ

 

            h1{
                     color:red;         //.css file
                 }

Triển khai cả ba loại CSS

	
	




This heading will be green
This paragraph will be red
 
This paragraph will be pink and center-aligned
 





This is Css file

#center {
  text-align: center;
  color:pink;
}

đầu ra

Hãy xem khóa học Thuộc tính CSS này để tìm hiểu thêm về CSS

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

• Ưu tiên của bộ chọn

Id > Class > Element

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 i. màu văn bản điện tử sang 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 đỏ. Kiểm tra khóa học CSS miễn phí

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 đó

Chúng tôi đã chọn id và sau đó thay đổi thuộc tính màu i. màu văn bản điện tử sang 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 đỏ

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;
     }
 Hi 

Chúng tôi đã chọn lớp và sau đó thay đổi thuộc tính màu i. màu văn bản điện tử sang 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 đỏ

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

 /*
 This represents the most/ least important line of the doc. 
*/

đầu ra

Bây giờ chúng ta đã thấy tất cả ba bộ chọn, bây giờ 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 thành phần bằng cách sử dụng thẻ, id và lớp làm bộ chọn. Mục tiêu của việc này là để chỉ ra cách một phong cách cắt bỏ phong cách khác mà 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 thẻ và lớp

Bây giờ hãy xem triển khai của nó

 /*
 This represents the most/ least important line of the doc. 
*/

Nếu bạn đã quan sát cách một phong cách chiến đấu chống lại phong cách khác để tạo kiểu cho phần tử. Ở đây, id đã giành chiến thắng trong cuộc đua, đ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ì bộ chọn 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 đó

Màu CSS

• Có các 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 màu đỏ, xanh lá cây và xanh dương
    • Giá trị của mỗi tham số có thể thay đổi từ 0 đến 255
    • Ví dụ. RGB(255,0,0);
  • lục giác
    • Mã hex 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 Red, Green và Blue
    • Giá trị cài đặt đơn lẻ có thể thay đổi từ 00 đến 09 và từ AA đến FF
    • Ví dụ. #ff0000 ;
  • RGBA
    • Điều này bắt đầu với RGB và có 4 tham số
    • 4 tham số về cơ bản tương ứng với đỏ, lục, 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
    • Ví dụ. RGB(255,0,0,0);

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

 /*
 This represents the most/ least important line of the doc. 
*/

Nền CSS

• Có nhiều cách khác nhau mà CSS có thể tác động lên các phần tử HTML
• Vài trong số họ là như sau
  • Color – được sử dụng để đặt màu nền
  • 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
  • Hình ảnh – được sử dụng để đặt hình ảnh làm nền
  • Vị trí – được sử dụng để xác định vị trí của hình ảnh
  • 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

 /*
 This represents the most/ least important line of the doc. 
*/

Đường viền CSS

• Giúp thiết lập đường viền cho các phần tử HTML
• Có 4 thuộc tính có thể giúp thiết lập đường viền
  • Chiều rộng - đặt chiều rộng của đường viền
  • Kiểu – đặt kiểu đường viền; . rắn, nét đứt vv
  • Color – đặt màu của đường viền
  • Bán kính – xác định độ tròn của đường viền

• Bạn có thể đặt đường viền cho cụ thể trên, phải, dưới và trái
• Chúng ta cũng có thể câu trên và dưới lại với nhau và tương tự với bên trái và bên phải
  • Ví dụ. chiều rộng biên giới. 2px 5px;
• Đường viền cũng có thể được đặt trong một dòng
  • Ví dụ. biên giới. 2px màu xanh đặc;

Triển khai thuộc tính đường viền trong CSS

 /*
 This represents the most/ least important line of the doc. 
*/

Mô hình hộp CSS

• Mọi phần tử trong CSS có thể được biểu diễn bằng mô hình BOX
• Nó cho phép chúng tôi thêm một đường viền và xác định không gian giữa nội dung
• Nó giúp nhà phát triển phát triển và thao tác các yếu tố
• Nó bao gồm 4 cạnh
  • Cạnh nội dung – Nó bao gồm nội dung thực tế
  • Padding edge – Nó nằm giữa nội dung và cạnh viền
  • Cạnh viền – Phần đệm được theo sau bởi cạnh viền
  • Margin edge – Là đường viền bên ngoài và kiểm soát lề của phần tử

Khi bạn vào chrome và nhấp chuột phải, hãy tiếp tục kiểm tra. Nó sẽ cung cấp tất cả các phần tử được sử dụng trong tệp HTML. Ở phía bên tay phải, sẽ có một mô hình hộp như

Hình chữ nhật bên trong nhất đại diện cho nội dung của chúng ta, phần đệm không là gì ngoài khoảng cách giữa nội dung và đường viền thì lề là khu vực bên ngoài đường viền

Triển khai BoxModel trong CSS

 /*
 This represents the most/ least important line of the doc. 
*/

Câu hỏi thường gặp về hướng dẫn CSS

Q. Các khả năng của CSS là gì?

A. CSS giúp xác định căn chỉnh văn bản, màu sắc, phông chữ, kích thước, khoảng cách, đường viền, bố cục và nhiều đặc điểm kiểu chữ như vậy. Nó có thể thực hiện tất cả một cách độc lập cho các chế độ xem trên màn hình cũng như được in.  

Q. Ba loại CSS là gì?

A. Ba loại CSS bao gồm CSS nội tuyến, CSS nội bộ và CSS bên ngoài. CSS nội tuyến có thể được đưa trực tiếp vào các phần tử HTML. CSS nội bộ là một cách khác để bao gồm CSS bằng cách sử dụng phần tử kiểu trong phần đầu của tài liệu HTML. CSS bên ngoài bao gồm CSS bằng cách sử dụng biểu định kiểu bên ngoài

Q. CSS có khó học không?

A. CSS không khó học nhưng vì nó chi tiết nên dễ gây nhầm lẫn. Học những điều cơ bản về CSS hoàn toàn không mất thời gian. Tuy nhiên nếu muốn thành thạo CSS thì có thể bạn sẽ mất chút thời gian

Q. Làm thế nào tôi có thể giỏi CSS?

A. Bạn có thể giỏi CSS bằng cách tập trung vào các ngữ cảnh định vị, thành thạo các số float, biết các bộ chọn của bạn, tìm hiểu các khái niệm về mã hóa DRY và biết hỗ trợ trình duyệt của bạn. Bạn cũng có thể đọc một số tài liệu có sẵn trên web để trở thành chuyên gia về CSS

Q. Làm cách nào tôi có thể học CSS nhanh?

A. Cách nhanh nhất để học CSS là trước tiên hãy chắc chắn rằng bạn hiểu rõ về HTML5 cũng như nền tảng web. Khi bạn hiểu sâu hơn về các khái niệm và kỹ năng chính này, bạn sẽ có thể hiểu CSS và các kỹ thuật CSS3 thú vị một cách dễ dàng. CSS3 là ngôn ngữ tạo kiểu của thiết kế web;

Q. Làm cách nào để bắt đầu CSS?

A. Bạn có thể bắt đầu học CSS theo ba cách, bao gồm CSS nội tuyến, CSS nội bộ và CSS bên ngoài. Bạn cũng có thể tìm thấy một số hướng dẫn có thể hướng dẫn bạn học CSS

Q. Các cấp độ của CSS là gì?

A. Các cấp trợ giúp của CSS trong việc xây dựng các định nghĩa trước đó, lọc và các tính năng bổ sung. Bộ đối tượng địa lý ở tất cả các cấp độ cao hơn là tập hợp thay thế của bất kỳ cấp độ thấp hơn nào và hành vi được phép đối với một đối tượng địa lý được chỉ định ở cấp độ cao hơn là một danh mục con của đối tượng được phép ở các cấp độ thấp hơn

Q. Các ví dụ về mã CSS là gì?

A. Các ví dụ về mã CSS bao gồm định dạng đoạn dễ dàng, thay đổi kiểu chữ, thay đổi màu liên kết, loại bỏ gạch dưới liên kết, tạo nút liên kết, tạo hộp văn bản, căn giữa các phần tử và điều chỉnh phần đệm

Q. Ngôn ngữ CSS là gì?

A. CSS là ngôn ngữ được sử dụng để xác định 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ữ. Nó cho phép một người điều chỉnh bản trình bày theo một số loại thiết bị, như màn hình nhỏ, màn hình lớn hoặc máy in. CSS có thể rất dễ dàng được sử dụng với tất cả các loại ngôn ngữ đánh dấu dựa trên XML

Q. Ba phần của cú pháp CSS là gì?

A. Cú pháp CSS bao gồm một bộ quy tắc. Các quy tắc này có ba phần như thuộc tính, bộ chọn và giá trị

Q. Ưu điểm của CSS là gì?

A. Một số ưu điểm của CSS bao gồm

• Bố cục của một trang web được đo lường tốt hơn
• Kiểu (CSS) tách biệt với cấu trúc (HTML), có nghĩa là kích thước tệp giảm
• Kích thước tệp nhỏ hơn có nghĩa là băng thông ít hơn và cuối cùng có nghĩa là thời gian tải nhanh hơn

Q. Làm cách nào để mở tệp CSS trong Chrome?

A. Để mở tệp CSS trong Chrome, bạn phải mở DevTools, đi tới cài đặt DevTool, nhấp vào mở phần thử nghiệm và cho phép tùy chọn tổng quan về CSS

Điều này đưa chúng ta đến phần cuối của bài viết này, nơi chúng ta đã tìm hiểu về những điều cơ bản của CSS. Hãy xem khóa học miễn phí dành cho nhà phát triển giao diện người dùng này từ Great Learning Academy

3 loại CSS là gì?

Ví dụ về thuộc tính CSS là gì?

CSS là gì và tại sao nó hữu ích?

Khái niệm cơ bản về CSS là gì?