CSS nghĩa là Cascading Style Sheets hay là Bảng định kiểu theo tầng.
Các Website ngày xưa khi chỉ có HTML thì rất xấu.
Vì thế, để làm hài lòng khách hàng hơn, thu hút họ hơn thì CSS được sinh ra như là ngôn ngữ dùng để trang điểm, làm đẹp cho Website.
CSS là gì? CSS có thể làm gì?
CSS sinh ra cũng là để phân chia rõ ràng công việc:
-
HTML là để đánh dấu siêu văn bản
-
CSS dùng để định kiểu cho website
Hạn chế làm rối mã trang web.
Hiện nay, CSS được duy trì bởi tổ chức W3C.
Dưới đây là một số điều thú vị mà CSS có thể LÀM để giúp bạn hiểu về CSS hơn.
> Lưu ý: Một số thuộc tính có thể không hoạt động hoàn hảo trên các trình duyệt khác nhau. Vì thế, để xem ví dụ tốt nhất thì hãy dùng Chorme.
1. CSS có thể thiết lập kiểu chữ trên website
CSS có thể thiết lập các kiểu chữ khác nhau cho website của bạn khác biệt, tạo phong cách riêng như: Font chữ, Chữ in đậm, chữ in nghiêng, kích cỡ của chữ, màu sắc của chữ, chữ gạch chân, màu nền cho chữ, ...
CSS thiết lập kiểu dáng của chữ trong website.
2. CSS có thể chỉ định kiểu chữ nếu nó bị xuống dòng
CSS sử dụng thuộc tính box-decoration-break để chỉ định kiểu cho chữ khi nó bị bẻ trên nhiều dòng, nhiều cột hoặc nhiều trang.
Chỉ định CSS cho text khi bị phá vỡ trên nhiều dòng
3. CSS có thể truy xuất các giá trị của phần tử được chọn
Chúng ta có thể truy xuất các giá trị của phần tử được chọn trong CSS bằng cách sử dụng attr(). Phương thức này có thể rất hữu ích khi bạn muốn mô tả bổ sung thêm cái gì đó.
Thuộc tính attr() trong CSS
4. CSS có thể tạo kiểu lật thẻ
Thuộc tính backface-visibility trong CSS này có thể làm kiểu lật thẻ, mặt sau của thẻ sẽ lật về phía người dùng khi di/click chuột qua.
Giống như trò thẻ bài vậy nhỉ?
CSS có thể tạo biểu đồ với thuộc tính background: conic-gradient
5. Sử dụng Gradient theo cách khác: Tạo biểu đồ
Gradient trong CSS rất thú vị. Bạn có thể sử dụng Gradient với các điều chỉnh khác nhau để tạo ra những những thứ khác nhau.
Ví dụ bên dưới đây mình tạo một biểu đồ hình tròn với thuộc tính background: conic-gradient.
6. CSS có thể lọc hình ảnh thay thế Photoshop
Ai cần hiệu ứng filter trong photoshop khi đã có bộ lọc CSS cơ chứ. 🙃
Các chức năng filter này làm thay đổi hình ảnh ban đầu của bạn. Các bộ lọc fiter mà css có như sau: blur, brightness, contrast, grayscale, hue - otate, opacity, invert, sepia, saturate, drop-shadow.
Bạn có thể đổ bóng cho cả hình ảnh của bạn với drop-shadow
CSS có thể đổ bóng cho hình ảnh
7. CSS có thể tạo chế độ hòa trộn
Thuộc tính CSS mix-blend-mode sẽ thiết lập chế độ hòa trộn của nó với phần nền hoặc phần tử cha của nó.
CSS có thể tạo chế độ hòa trộn
Còn rất nhiều thứ bạn có thể làm được với chế độ hòa trộn mix-blend-mode, hãy thử nghiệm các chế độ hòa trộn, các bộ lọc hòa trộn với hình ảnh và văn bản tại MDN
8. CSS có thể tạo chữ lớn đầu dòng
Một trong những thứ mình thích đó là những đoạn văn bản có chữ cái đầu dòng lớn, đẹp như ví dụ bên dưới đây. Sử dụng thuộc tính first-letter cho pesudo-element.
CSS có thể tạo chữ cái lớn đầu dòng
9. CSS có thể tự động sắp xếp chữ khi bị chèn hình ảnh
Thuộc tính shape-outsite của CSS cung cấp một khả năng tùy chỉnh để văn bản có thể tự động sắp xếp tránh hình ảnh có hình dáng phức tạp thay vì chỉ hình chữ nhật thông thường.
CSS có thể sắp xếp văn bản chạy theo theo các hình khối đa dạng
Note: Hãy thử mở ví dụ trên 1 tab mới, co kéo để thấy rõ sự thay đổi.
10. CSS có thể tạo chế độ viết khác kiểu thông thường
Thuộc tính write-mode của CSS cho phép bạn đặt nội dung theo các chiều khác nhau thay vì chỉ chiều ngang từ trái sang phải.
Bạn có thể có các kiểu viết với các giá trị:
-
horizontal-tb: Nội dung chạy theo chiều ngang từ trái sang phải, theo chiều dọc từ trên xuống dưới.
-
vertical-lr: Nội dung chạy theo chiều ngang từ trái sang phải, theo chiều dọc từ trên xuống dưới
-
vertical-rl: Nội dung chảy theo chiều ngang từ phải sang trái, theo chiều dọc từ trên xuống dưới.
CSS có thể thay đổi chế độ viết
#BONUS 1: CSS có thể tạo Gradient cho text
Bạn có thể tạo Gradient cho text với sự kết hợp của -webkit-background-clip: text và -webkit-text-fill-color: transparent
CSS có thể tạo Gradient cho Text
#BONUS 2: CSS có thể tạo điểm cuộn mượt mà hơn.
Đôi khi có những trang bạn cần cuộn chính xác sang phần tiếp theo để có thể hiển thị nội dung tốt nhất. CSS giúp bạn làm điều này bằng thuộc tính scroll-snap-type
CSS có thể tạo kiểu cuộn mượt mà
> Ghi chú: Thử cuộn ví dụ trên lấn sang giữa 2 phần và đợi một chút, css sẽ tự động cuộn lại vị trí thích hợp nhất để bạn theo dõi nội dung tốt nhất.
Ví dụ này cho thấy cách cuộn dọc theo trục y với giá trị bắt buộc. Bạn cũng có thể xem thêm trong MDN để biết cách thực hiện cuộn ngang theo trục x
Tổng kết về câu hỏi CSS là gì? CSS có thể làm gì?
Như bạn thấy đó, CSS là ngôn ngữ sử dụng để làm đẹp website, website của bạn đẹp thì ai cũng muốn ghé thăm, ở lại lâu hơn và sẵn sàng mua hàng hơn.
CSS có thể làm rất nhiều thứ khác, không chỉ những thứ mà mình nêu ở trên đâu. Bạn có thể tìm hiểu thêm sau này khi học sau về Front-end. Học Back-end thì không cần nhiều lắm, hiểu cơ bản là được rồi. :D
Ananya Neogi
> Tham khảo ngay khóa học LẬP TRÌNH JAVA WEB từ Front-end đến Back-end tại NIIT - ICT Hà Nội.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp