Học về css để trang trí các trang web html

202 185 0
Học về css để trang trí các trang web html

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Giới thiệu về CSSCSS giúp ích rất nhiều khi viết một trang web bằng HTML. CSS là gì?•CSS là viết tắt của Cascading Style Sheets.•CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các phương tiện khác.•CSS rất hữu ích và tiện lợi. Nó có thể kiểm soát tất cả các trang trên một website.•Các stylesheet ngoài được lưu trữ dưới dạng các tập tin .CSS.Ví dụ về CSS một trang HTML với nhiều kiểu cách khác nhauDưới đây là ví dụ về một trang HTML hiển thị với 4 stylesheet khác nhau.

Giới thiệu CSS CSS giúp ích nhiều viết trang web HTML CSS gì?  CSS viết tắt Cascading Style Sheets  CSS mô tả cách phần tử HTML hiển thị hình phương tiện khác  CSS hữu ích tiện lợi Nó kiểm sốt tất trang website  Các stylesheet lưu trữ dạng tập tin CSS Ví dụ CSS - trang HTML với nhiều kiểu cách khác Dưới ví dụ trang HTML hiển thị với stylesheet khác Một trang HTML với kiểu stylesheet khơng dùng stylesheet Vì nên dùng CSS? CSS dùng để định nghĩa kiểu cách cho trang website bạn, gồm thiết kế, dàn trang cách hiển thị khác nhiều thiết bị với kích thước hình khác CSS giúp giải vấn đề lớn HTML HTML khơng có phần tử để để định dạng cho trang web HTML dùng để tạo nội dung cho trang Khi phần tử thuộc tính màu sắc thêm vào HTML 3.2, ác mộng nhà phát triển web bắt đầu Việc phát triển website lớn mà thêm thông tin font hay màu sắc vào trang đòi hỏi nhiều thời gian Để giải vấn đề này, World Wide Web Consortium (W3C) tạo CSS, giúp loại bỏ việc định dạng kiểu cách khỏi trang HTML.Các định nghĩa liên quan đến kiểu cách đưa vào tập tin css nhờ vào tập tin stylesheet ngồi, bạn thay đổi tồn website tập tin Cú pháp Selector CSS Cú pháp CSS Bộ quy tắc CSS gồm có cơng cụ chọn (selector) khối khai báo (declaration) Công cụ chọn trỏ tới phần từ HTML mà bạn muốn tạo kiểu cách Khối khai báo chứa nhiều khai báo, phân tách với dấu chấm phẩy Mỗi khai báo gồm tên giá trị đặc tính CSS, phân tách dấu phẩy Khai báo CSS kết thúc dấu chấm phẩy, khối khai báo nằm dấu ngoặc móc Trong ví dụ đây, phần tử

giữa, chữ màu đỏ p { color: red; text-align: center; } CSS Selector Công cụ chọn CSS dùng để tìm (và chọn) phần tử HTML dựa tên, id, class, thuộc tính… phần tử Element Selector Đây công cụ chọn phần tử dựa vào tên phần tử Bạn chọn tất phần tử

trang (trong trường hợp này, tất phần tử

có màu đỏ) p { text-align: center; color: red; } id Selector Cơng cụ dùng thuộc tính id phần tử HTML để chọn id phần tử trang phải độc nên id Selector dùng để chọn phần tử Để chọn phần tử id, dùng kí tự # phía trước, sau id phần tử Quy định kiểu cách áp dụng cho phần tử HTML có id=”para1” #para1 { text-align: center; color: red; } Lưu ý: Tên id bắt đầu số class Selector Công cụ chọn phần tử thuộc tính class Để chọn, viết kí tự (.) sau tên lớp Ở ví dụ đây, tất phần tử HTML có class="center" có màu đỏ .center { text-align: center; color: red; } Bạn định phần tử HTML định chịu tác động class Ở ví dụ phần tử

có class="center" p.center { text-align: center; color: red; } Phần tử HTML tham chiếu tới nhiều lớp Ở ví dụ đây, phần tử

tạo kiểu cách theo class="center" class="large"

Đoạn văn sử dụng hai lớp.

Lưu ý: tên class bắt đầu số Group Selector Nếu có phần tử kiểu cách này: h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } Bạn nhóm cơng cụ chọn lại để tối giản hóa code, cơng cụ chọn phân tách dấu phẩy Dưới cách nhóm công cụ chọn bên h1, h2, p { text-align: center; color: red; } Comment CSS Comment dùng để giải thích đoạn mã, giúp chỉnh sửa lại mã nguồn sau cần Trình duyệt không hiển thị comment Comment CSS bắt đầu /* kết thúc */ trải dài nhiều dòng p { color: red; /* Đây bình luận dịng */ text-align: center; } /* Đây bình luận nhiều dịng */ Hãy thử đoạn code xem cách trình duyệt hiển thị ảnh bên p.center { text-align: center; color: red; } p.large { font-size: 300%; } Tiêu đề giữ nguyên

Tiêu đề có màu đỏ giữa.

Tiêu đề có màu đỏ, có kích thước to.

Dùng công cụ chọn để tạo kiểu cách cho phần tử HTML Cách chèn CSS để tạo kiểu cách cho trang HTML (Vị trí đặt CSS) Khi trình duyệt đọc tập tin định dạng (stylesheet), định dạng văn HTML theo thông tin tập tin định dạng cách thêm CSS Có cách để thêm tập tin định dạng cho văn HTML  Tập tin định dạng nội  Tập tin định dạng ngồi  Nội dịng Tập tin định dạng ngồi Với style sheet ngồi, bạn có thay đổi diện mạo website mà cần thay đổi tập tin nhất, Mỗi trang có tham chiếu tới tập tin phần tử nằm phần Tập tin định dạng ngồi viết trình soạn thảo nào, khơng chứa phần tử HTML phải lưu với phần mở rộng css Đây ví dụ phần tập tin style sheet body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } Lưu ý: Không thêm khoảng trắng giá trị đặc tính đơn vị (như marginleft: 20 px ;) mà phải viết sau: margin-left: 20px; Tập tin định dạng nội Nên dùng tập tin trang có kiểu định dạng khác nhau, định nghĩa phần tử nằm phần trang HTML body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } Định dạng nội dòng Nên dùng kiểu định dạng áp dụng kiểu định dạng riêng cho phần tử riêng Để áp dụng, thêm thuộc tính style cho phần tử liên quan, thuộc tính style chứa đặc tính CSS Ví dụ cho thấy cách thay đổi màu sắc lề cho phần tử Tiêu đề Nhiều tập tin định dạng Nếu nhiều đặc tính định nghĩa cho Selector (phần tử) tập tin định dạng khác nhau, dùng giá trị từ lần đọc style sheet gần Giả sử style sheet định dạng phần tử sau: h1 { color: navy; } style sheet nội định dạng cho phần tử này: h1 { color: orange; } Nếu định dạng nội định nghĩa sau đường dẫn tới style sheet ngồi, phần tử có màu da cam h1 { color: orange; } Nhưng định dạng nội định nghĩa trước phần tử có màu xanh navy h1 { color: orange; } Thứ tự phân tầng Nên dùng kiểu định dạng có nhiều kiểu cho phần tử HTML? Thường thứ tự áp dụng kiểu định dạng tuân theo cấp bậc từ cao xuống thấp sau:  Định dạng nội dòng (bên phần tử HTML)  Các tập tin định dạng nội bên (trong phần head)  Mặc định trình duyệt Định dạng nội dịng (bên phần tử HTML) ưu tiên cao nhất, tức ghi đè định dạng định nghĩa thẻ tập tin style sheet giá trị mặc định trình duyệt Màu sắc CSS (CSS – Color) Tương tự HTML, CSS, màu sắc định tên màu định sẵn giá trị RGB, HEX, HSL, RGBA HSLA Tên màu Trong HTML, màu sắc định tên màu HTML hỗ trợ 140 tên màu chuẩn Bạn đọc xem thêm viết Màu sắc HTML Màu Bạn chọn màu cho phần tử HTML Xin chào

Quản trị

Màu văn Tương tự, văn dùng nhiều màu sắc Xin chào

Tôi

Màu viền Bạn thay đổi màu viền Xin chào Giá trị màu Trong HTML, màu sắc xác định giá trị RGB, HEX, HSL, RGBA HSLA Các đoạn code sau cho màu giống “Tomato” Còn đặt giá trị suốt 50% Giá trị RGB Màu RGB sử dụng công thức rgb(red, green, blue) Mỗi thông số red (đỏ), green (xanh cây), blue (xanh dương) cho biết mức độ màu đó, nằm khoảng từ tới 255 Ví dụ rgb(255, 0, 0) màu đỏ đỏ có giá trị cao cịn xanh xanh dương Giá trị màu đen (0, 0, 0) giá trị màu trắng (255, 255, 255) Gam màu xám tạo cách dùng giá trị

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

Giá trị HEX Màu sắc HTML định giá trị hệ thập lục phân (hexadecimal) dạng: #rrggbb Trong rr (red), gg (green) bb (blue) giá trị hệ thập lục phân, nằm 00 ff (tương tự - 255 hệ thập phân) #ff0000 màu đỏ đỏ có giá trị cao (ff) cịn màu xanh xanh dương có giá trị Gam màu xám dùng cách cho giá trị

#ff0000

#3cb371

Giá trị HSL Màu sắc định giá trị vùng màu (hue), độ bão hòa (saturation) độ sáng (lightness) viết tắt thành HSL, dạng: hsl(hue, saturation, lightness) Vùng màu mức độ màu vòng màu sắc, từ tới 360 đỏ, 120 xanh 240 xanh dương Độ bão hòa giá trị phần trăm, thể độ tinh khiết màu, 0% nghĩa gam xám 100% màu tinh khiết Độ sáng đo phần trăm, 0% đen, 50% không sáng không tối 100% trắng Độ bão hòa Độ bão hòa dùng để mô tả độ tinh khiết, đậm đặc màu:    100% tinh khiết hồn tồn, khơng có ám xám 50% 50% xám, nhìn thấy màu 0% hồn tồn xám, khơng thể thấy màu

hsl(0, 100%, 80%, 50%); color:#ffffff;">hsl(0, 80%, 50%, 50%); color:#ffffff;">hsl(0, 50%, 20%, 50%); color:#ffffff;">hsl(0, 20%, 0%, 50%); color:#ffffff;">hsl(0, 0%, Độ sáng Độ sáng cho biết bạn muốn lấy màu sáng đến mức nào, 0% nghĩa không sáng (đen), 50% khơng sáng khơng tối cịn 100% sáng hồn tồn (trắng)

hsl(0, 100%, 100%, 20%); color:#ffffff;">hsl(0, 100%, 100%, 50%); color:#ffffff;">hsl(0, 100%, 100%, 80%); color:#ffffff;">hsl(0, 100%, 100%, 100%); color:#000000;">hsl(0, 100%, Để có màu gam xám thường đặt độ bão hòa vùng màu 0, độ sáng từ 0% tới 100% để lấy sắc xám tối/sáng

hsl(0, 0%, 0%, 50%); color:#ffffff;">hsl(0, 0%, 0%, 70%); color:#ffffff;">hsl(0, 0%, Giá trị RGBA Giá trị màu RGBA phần mở rộng màu RGB, bổ sung thêm kênh alpha - xác định độ suốt màu, với công thức: rgba (red, green, blue, alpha) Trong thơng số alpha nằm khoảng từ 0.0 (hoàn toàn suốt) tới 1.0 (không suốt)

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

Giá trị màu HSLA Giá trị màu HSLA mở rộng HSL, bổ sung thêm kênh alpha - xác định độ suốt màu, với công thức: hsl(hue, saturation, lightness, alpha) Trong thơng số alpha nằm khoảng từ 0.0 (hoàn toàn suốt) tới 1.0 (không suốt)

hsl(9, 100%, 64%, 0.8); color:#000000;">hsl(9, 100%, 64%, 1); color:#000000;">hsl(9, 100%, Nền CSS (CSS – Background) Đặc tính CSS dùng để định nghĩa hiệu ứng cho phần tử Các đặc tính CSS gồm:      Màu background-color background-image background-repeat background-attachment background-position Đặc tính backgroud-color xác định màu cho phần tử body { background-color: lightblue; } Màu sắc CSS thường xác định  tên màu, “red”  giá trị màu HEX, #ff0000…  giá trị RGB, rgb(255,0,0) Trong ví dụ đây, phần tử ,

có màu khác h1 { background-color: green; } div { } background-color: #58257b; /* Định dạng link điều hướng */ topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Thay đổi màu liên kết di chuột qua */ topnav a:hover { background-color: #db7093; color: white; font-weight: bold } /* Tạo ba cột không nhau, float cạnh */ column { float: left; padding: 10px; } /* Cột bên trái phải */ column.side { width: 25%; } /* Cột */ column.middle { width: 50%; } /* Clear float khác sau cột */ row:after { content: ""; display: table; clear: both; } /* Bố cục linh hoạt: ba cột xếp chồng lên thay cạnh hình có chiều rộng 600px */ @media screen and (max-width: 600px) { column.side, column.middle { width: 100%; } } /* Định dạng footer */ footer { background-color: #e9d8f4; color: #58257b; padding: 5px; text-align: center; } Website Quản Trị Mạng Làng Công nghệ Công nghệ Cuộc sống Hướng dẫn

Bạn chia sẻ viết trang có tài khoản.

Giới thiệu

Quantrimang.com mạng xã hội khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu thành viên nhiều lĩnh vực công nghệ điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính

Liên hệ

Điện thoại: 024 2242 6188.

Email: info@meta.vn.

Giấy phép số 362/GP-BTTTT Bộ TT&TT cấp ngày 30/06/2016.

Layout kiểu mẫu * { box-sizing: border-box; } body { font-family: Arial; padding: 10px; background: #e9d8f4; } /* Header/Blog Title */ header { padding: 10px; text-align: center; background: white; color: #58257b; } header h1 { font-size: 40px; } header p { } font-size: 20px; /* Style the top navigation bar */ topnav { overflow: hidden; background-color: #58257b; } /* Định dạng link điều hướng */ topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Thay đổi màu liên kết di chuột qua */ topnav a:hover { background-color: #db7093; color: white; } /* Tạo hai cột không nhau, float cạnh */ /* Cột trái */ leftcolumn { float: left; width: 75%; } /* Cột phải */ rightcolumn { float: left; width: 25%; background-color: #e9d8f4; padding-left: 20px; } /* Hình ảnh tượng trưng */ fakeimg { background-color: #baa1cc; width: 100%; padding: 20px; } /* Thêm định dạng thẻ cho viết */ card { background-color: white; padding: 20px; margin-top: 20px; } /* Clear float khác sau cột */ row:after { } content: ""; display: table; clear: both; /* Footer */ footer { padding: 10px; text-align: center; background: white; margin-top: 10px; } /* Bố cục linh hoạt: cột xếp chồng lên thay cạnh hình có chiều rộng 700px */ @media screen and (max-width: 700px) { leftcolumn, rightcolumn { width: 100%; padding: 0; } } /* Bố cục linh hoạt: Thanh menu điều hướng xếp chồng lên thay cạnh hình có chiều rộng 300px */ @media screen and (max-width: 300px) { topnav a { float: none; width: 100%; } } Website Quản Trị Mạng

Kiến thức - Kinh nghiệm - Hỏi đáp

Làng Công nghệ Công nghệ Cuộc sống Đăng ký Form - Biểu mẫu CSS Quách Tỉnh, 14/02/2019 Ảnh

Form phần thiếu loại website

Ở viết này, Quantrimang.com hướng dẫn bạn cách xây dựng phần giao diện hiển thị biểu mẫu Giao diện làm đẹp mắt với CSS

Attribute Selector CSS Quách Tỉnh, 12/02/2019 Ảnh

Attribute selector cách chọn phần tử bạn muốn định kiểu tài liệu HTML dựa vào thuộc tính hay nhiều thẻ HTML đó.

Attribute selector chọn đối tượng mà không cần phải khai báo thêm Class ID vào thẻ HTML hướng đến thành phần đó, giúp code gọn gàng mạch lạc hơn.

Giới thiệu Ảnh

Quantrimang.com mạng xã hội khoa học công nghệ.

Nổi bật

Ảnh

Ảnh

Ảnh

Follow Me

Facebook

YouTube

Giấy phép số 362/GP-BTTTT Bộ TT&TT cấp ngày 30/06/2016. Unit - Đơn vị đo CSS (CSS – Unit) CSS hỗ trợ cho nhiều đơn vị đo độ dài, hay gọi Unitđể áp dụng vào thuộc tính cần đến margin, padding, width, height Ví dụ đơn vị theo sau thc tính độ dài, chẳng hạn 10px, 2em Tuy nhiên cần ý số điều sử dụng nó:    Đơn vị mang giá trị âm Khơng có khoảng trắng giá trị đơn vị đo Ví dụ: 20px, 30em >> đúng; px >> sai Nếu đơn vị khơng cần thêm đơn vị vào phía sau Trong CSS có loại đơn vị đơn vị tuyệt đối (Absolute) đơn vị tương đối (Relative) Hãy Quantrimang.com tìm hiểu ý nghĩa loại đơn vị phần sau viết Đơn vị đo tuyệt đối - Absolute Absolute loại đơn vị có giá trị cố định thể xác chiều dài kích thước hiển thị, khơng phụ thuộc khơng thay đổi tác động bên Chỉ nên sử dụng loại đơn vị cho thiết bị có độ phân giải cao, đặc biệt khuyến nghị nên dùng cho đầu máy in Trên hình máy tính thiết bị cầm tay bạn khơng nhận mong đợi Một số đơn vị tuyệt đối CSS sau: Đơn vị Mô tả cm centimet mm millimet in inch: 1in = 96px = 2.54cm px pixel: 1px tương ứng với điểm ảnh máy tính 1px = 1/96 in pt point: 1pt = 1/72in pc pica: 1pc = 12 pt Ví dụ: div.cm { font-size: 1cm } div.mm { font-size: 10mm } div.in { font-size: 0.5in } div.px { font-size: 10px } div.pt { font-size: 10pt } div.pc { font-size: 1pc } Ví Ví Ví Ví Ví Ví dụ dụ dụ dụ dụ dụ đơn đơn đơn đơn đơn đơn vị vị vị vị vị vị 1cm 10mm 0.5in 10px 1pt 1pc Kết hiển thị trình duyệt xác tuyệt đối theo kích thước thật Đơn vị đo tương đối - Relative Relative đơn vị đo lường sử dụng CSS mức tương đối, thường phụ thuộc vào thành phần xác định giá trị Một số đơn vị tương đối CSS sau: Đơn vị Mô tả em 1em tương đương với kích cỡ font-size tại, tương tự ta có 2em= lần font ex 1ex tương đương với chiều cao (height) chữ x (in thường) font ch 1ch tương đương với chiều rộng (width) số theo size rem giá trị tương font thành phần gốc vw 1vw tương đương với 1% chiều rộng cửa sổ trình duyệt vh 1vh tương đương với 1% chiều cao cửa sổ trình duyệt vmin 1vmin tương đương với 1% kích thước cửa sổ trình duyệt nhỏ vmax 1vmax tương đương với 1% kích thước cửa sổ trình duyệt lớn % giá trị tương đối so với thành phần gốc Ví dụ 1: px em p { font-size: 16px; line-height: 2em; } div { font-size: 30px; border: 1px solid black; } span { font-size: 0.5em; }

Các đoạn có line-height là:

Các đoạn có line-height là:

Các đoạn có line-height là: Kích thước phông chữ phần span bên phần tử div có kích 0.5x30 = 15px. 2x16px = 32px.

2x16px = 32px.

2x16px = 32px.

tử div đặt thành 30px Phần tử thước phông chữ 0,5em, tương đương với Ví dụ 2: px % body { font-size:16px; } div { font-size: 150%; border: 1px solid black; }

Cỡ chữ tài liệu 16px.

Kích thước font chữ phần tử div 150% 16px.

Đơn vị % đặt kích thước font chữ tương đối so với font chữ tại.

Trình duyệt hỗ trợ Tham khảo đơn vị hỗ trợ phiên trình duyệt sau: Đơn vị em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 vh, vw 20.0 9.0 19.0 6.0 20.0 vmin 20.0 9.0* 19.0 6.0 20.0 vmax 26.0 Không hỗ trợ 19.0 7.0 20.0 *Internet Explorer hỗ trợ vmin với tên vm Specificity CSS (CSS – Specificity) Specificity CSS gì? Nếu có hai hay nhiều quy tắc CSS (CSS rule) xung đột trỏ đến phần tử, trình duyệt tuân theo số nguyên tắc để xác định độ ưu tiên cho quy tắc, quy tắc có độ ưu tiên cao áp dụng Ta có ví dụ sau để dễ hình dung: Ở đoạn code đây, phần xét background-color cho phần tử div lúc bị xét lần selector id #test có màu màu đỏ selector div có màu màu vàng, chạy kết cho output có màu đỏ id #test có mức độ ưu tiên cao đối tượng lại #test { background-color: red; } div { background-color: yellow; } Đây phần tử div Để dễ hình dung hơn, bạn tưởng tượng Specificity bảng xếp hạng CSS rule, CSS rule hạng cao áp dụng vào phần tử Vậy xếp hạng nào? Hãy Quantrimang.com tìm hiểu hệ thống phân cấp Specificity (Specificity Hierarchy) Bảng xếp hạng Specificity - Specificity Hierarchy Nếu có hay nhiều CSS rule nhắm vào phần tử trình duyệt tuân theo nguyên tắc, xem list CSS rule đâu quy tắc cao để chọn apply vào phần tử Ở có bảng xếp hạng cho CSS rule để trình duyệt tuân theo áp dụng CSS, xếp theo thứ tự ưu tiên từ xuống dưới:     Inline style: thiết lập thuộc tính CSS trực tiếp bên phần tử Ví dụ: ID: thiết lập thuộc tính CSS cho phần tử định danh trang Ví dụ: #menu, #header Class, attribute, pseudo-class: ví dụ class menu, header , attribute a[target] pseudo-class :hover, :focus Element, pseudo-element: element h1, h2, div, p pseudo-element ::before, ::after, ::selection Cách tính Specificity Tính tốn giá trị CSS Specificity để biết rule áp dụng vào phần tử, giúp không bị mắc lỗi viết CSS Specificity tính số nguyên dương Cụ thể sau:    Inline style 1000 ID 100 Class, attribute, pseudo-class 10  Element, pseudo-element Ví dụ: A: h1 B: #content h1 C: Heading  A (một phần tử (element) h1)  B 101 (một ID content, element h1)  C 1000 (inline style) Bởi < 101 < 1000, quy tắc (C) có độ ưu tiên cao nhất, nên màu cho phần tử h1 màu trắng (#ffffff) Các quy tắc cho Specificity Nếu có Specificity nhau, quy tắc viết sau áp dụng Trường hợp ta có hai CSS rule hạng ngang này: h1 { background-color: red; } h1 { background-color: purple; } Website Quản Trị - Heading 1 Rõ ràng giá trị specificity phần tử (đều element h1) lúc theo luật selector gần phần tử áp dụng Vậy nên kết là: ID selector có giá trị specificity cao Attribute selector Trường hợp ta có CSS rule này: div#a { background-color: purple; } #a { background-color: green; } div[id=a] { background-color: blue; } Website Quản Trị Theo luật, ID selector áp dụng Kết là: Class selector có giá trị specificity cao element selector Một class selector intro "đánh bại" element đơn h1, p, div intro { background-color: yellow; } h1 { background-color: red; } Website Quản Trị Selector ngữ cảnh cụ thể có có giá trị specificity cao Ví dụ, tình sau: Từ tệp CSS bên ngoài: #content h1 {background-color: red;} Trong file HTML: #content h1 { background-color: yellow; } Quy tắc thứ hai ưu tiên áp dụng Universal selector (*) giá trị thừa kế (inherited) có specificity Universal selector hay ký hiệu chọn toàn CSS (*) chọn đối tượng thuộc loại /* Chọn tất đối tượng */ * { color: green; } Universal selector có specificity thuộc tính có giá trị thừa kế (inherited) có specificity ... < /html> Dùng công cụ chọn để tạo kiểu cách cho phần tử HTML Cách chèn CSS để tạo kiểu cách cho trang HTML (Vị trí đặt CSS) Khi trình duyệt đọc tập tin định dạng (stylesheet), định dạng văn HTML. .. thước hình khác CSS giúp giải vấn đề lớn HTML HTML khơng có phần tử để để định dạng cho trang web HTML dùng để tạo nội dung cho trang Khi phần tử thuộc tính màu sắc thêm vào HTML 3.2, ác... cách khỏi trang HTML .Các định nghĩa liên quan đến kiểu cách đưa vào tập tin css nhờ vào tập tin stylesheet ngồi, bạn thay đổi tồn website tập tin Cú pháp Selector CSS Cú pháp CSS Bộ quy tắc CSS

Ngày đăng: 30/07/2020, 13:10

Từ khóa liên quan

Mục lục

  • Giới thiệu về CSS

  • Cú pháp và Selector trong CSS

  • Cách chèn CSS để tạo kiểu cách cho trang HTML (Vị trí đặt CSS)

  • Màu sắc trong CSS (CSS – Color)

  • Nền trong CSS (CSS – Background)

  • Border trong CSS (CSS – Border)

    • Kiểu cách của đường viền trong CSS

  • Margin - Lề trong CSS (CSS – Margin)

  • Padding trong CSS (CSS – Padding)

  • Chiều cao và độ rộng trong CSS (CSS – Width and Height)

  • Mô hình hộp trong CSS (CSS – Box Model)

  • Outline trong CSS (CSS – Outline)

  • Văn bản trong CSS (CSS – Text)

  • Font trong CSS (CSS – Font)

  • Icon trong CSS (CSS – Icon)

  • Đường dẫn trong CSS (CSS – Link)

  • Danh sách trong CSS (CSS – List)

  • Bảng trong CSS (CSS – Table)

  • Display trong CSS (CSS – Display)

  • Độ rộng tối đa của phần tử trong CSS (CSS - Max-width)

  • Vị trí của phần tử trong CSS (CSS – Position)

  • Overflow trong CSS (CSS – Overflow)

  • Thuộc tính FLOAT và CLEAR trong CSS (CSS – Float and Clear)

    • Thuộc tính float

      • Cú pháp của Float

      • Ví dụ - float: right

      • Ví dụ - float: left

      • Ví dụ - float: none

    • Thuộc tính Clear

    • Clearfix

    • Bố cục lưới dạng hộp

    • Bố cục hình ảnh đặt cạnh nhau

    • Bố cục box chiều cao bằng nhau

    • Menu điều hướng (Navigation Menu)

    • Ví dụ về bố cục web

  • Thuộc tính Display (inline-block) trong CSS (CSS – Inline-block)

    • Các giá trị của thuộc tính Display

      • Giá trị display: inline

      • Giá trị display: block

      • Giá trị display: inline-block

    • Sử dụng inline-block để tạo liên kết điều hướng

  • Căn chỉnh - Align trong CSS (CSS – Align)

    • Căn giữa cho phần tử - Sử dụng margin:auto

    • Căn giữa hình ảnh

    • Căn chỉnh văn bản theo chiều ngang - Sử dụng text-align

    • Căn trái/phải - Sử dụng position

    • Căn trái/phải - Sử dụng float

    • Căn giữa theo chiều dọc - Sử dụng padding

    • Căn giữa theo chiều dọc - Sử dụng line-height

    • Căn giữa theo chiều dọc - Sử dụng position và transform

  • Combinator trong CSS (CSS – Combinator)

    • Descendant combinator

    • Child combinator

    • Adjacent sibling combinator

    • General sibling combinator

  • Pseudo-Class trong CSS (CSS – Pseudo-Class)

    • Cú pháp pseudo-class

    • Pseudo-Class cho đường link

    • Pseudo-class và CSS Class

    • Di chuột vào <div>

    • Dùng Pseudo-Class tạo tooltip :hover đơn giản

    • Pseudo-class :first-child trong CSS

      • Chọn tất cả thẻ <p> đầu tiên và định kiểu cho nó

      • Chọn <i> đầu tiên trong tất cả các <p> và định kiểu cho nó

      • Chọn tất cả các <i> trong <p> đầu tiên và định kiểu cho nó

    • Pseudo-class :lang trong CSS

  • Pseudo-Element trong CSS (CSS – Pseudo-Element)

    • Cú pháp

    • Pseudo-element ::first-line trong CSS

    • Pseudo-element ::first-letter trong CSS

    • Kết hợp Pseudo-element và CSS Class

    • Kết hợp nhiều Pseudo-element

    • Pseudo-element ::before trong CSS

    • Pseudo-element ::after trong CSS

    • Pseudo-element ::selection trong CSS

  • viet

  • Thuộc tính Opacity/Transparency trong CSS (CSS – Opacity)

    • Độ trong suốt của hình ảnh

    • Hiệu ứng trong suốt khi rê chuột

    • Transparent Box

    • Transparent Box sử dụng RGBA

    • Văn bản nằm trong Transparent Box

  • Thanh điều hướng - Navigation Bar trong CSS (CSS – Navigation Bar)

    • Tạo thanh điều hướng

    • Vertical Navigation - Thanh điều hướng dọc

      • Ví dụ thanh điều hướng dọc

      • Đường dẫn điều hướng hiện tại đang hoạt động

      • Căn chỉnh đường dẫn và thêm đường viền (border) cho navigation

      • Cố định chiều cao thanh điều hướng dọc

    • Horizontal Navigation - Thanh điều hướng ngang

      • Sử dụng Inline

      • Sử dụng Float

      • Ví dụ thanh điều hướng ngang

      • Đường dẫn điều hướng hiện tại đang hoạt động

      • Căn chỉnh link điều hướng

      • Chia thanh điều hướng bằng đường viền

      • Thanh điều hướng có border

      • Cố định thanh điều hướng

  • Sử dụng Dropdown trong CSS (CSS – Dropdown)

    • Dropdown box cơ bản

    • Dropdown Menu

    • Căn chỉnh nội dung thả xuống

    • Ảnh Dropdown

    • Thanh điều hướng Dropdown

  • Thư viện hình ảnh trong CSS (CSS – Image Gallery)

    • Ví dụ 1:

    • Ví dụ 2:

  • Image Sprite trong CSS (CSS – Image Sprite)

    • Hình ảnh Sprite là gì?

    • Ví dụ Hình ảnh Sprite đơn giản

    • Tạo danh mục điều hướng với hình ảnh sprite

    • Hiệu ứng khi di chuột vào hình ảnh sprite

  • Bộ chọn thuộc tính - Attribute Selector trong CSS (CSS – Attribute Selector)

    • Attribute selector là gì?

    • Một số Attribute selector nổi bật

      • Bộ chọn [attribute]

      • Bộ chọn [attribute="value"]

      • Bộ chọn [attribute~="value"]

      • Bộ chọn [attribute|="value"]

      • Bộ chọn [attribute^="value"]

      • Bộ chọn [attribute$="value"]

      • Bộ chọn [attribute*="value"]

  • Form - Biểu mẫu trong CSS (CSS – Form)

    • Định dạng các phần trong biểu mẫu

      • Trường nhập vào

      • Thêm padding và margin cho trường nhập vào

      • Định dạng Border

      • Định dạng màu sắc

      • Tạo ấn tượng cho trường nhập vào

      • Trường nhập vào có icon/image

      • Hiệu ứng cho ô tìm kiếm

      • Định dạng hộp textarea

      • Định dạng biểu mẫu dạng chọn

      • Định dạng cho button

    • Form kiểu mẫu

  • Counter - Bộ đếm trong CSS (CSS – Counter)

    • Tự động đánh số với bộ đếm

    • Bộ đếm lồng nhau

  • Thiết kế Layout - Bố cục website trong CSS (CSS – Layout)

    • Layout - Bố cục website

      • Header

      • Thanh điều hướng

      • Nội dung

      • Tạo các cột không đều nhau

      • Footer

    • Layout kiểu mẫu

  • Unit - Đơn vị đo trong CSS (CSS – Unit)

    • Đơn vị đo tuyệt đối - Absolute

    • Đơn vị đo tương đối - Relative

    • Trình duyệt hỗ trợ

  • Specificity trong CSS (CSS – Specificity)

    • Specificity trong CSS là gì?

    • Bảng xếp hạng Specificity - Specificity Hierarchy

    • Cách tính Specificity

    • Các quy tắc cho Specificity

      • 1. Nếu có các Specificity bằng nhau, quy tắc viết sau cùng sẽ được áp dụng

      • 2. ID selector sẽ có giá trị specificity cao hơn Attribute selector

      • 3. Class selector sẽ có giá trị specificity cao hơn element selector

      • 4. Selector ngữ cảnh cụ thể sẽ có có giá trị specificity cao hơn

      • 5. Universal selector (*) và giá trị thừa kế (inherited) có specificity là 0

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan