Css3 Đối với người mới bắt đầu Cheat Sheet - núm vú

Tác giả John Paul Mueller

Khi bạn nghĩ đến việc thêm các yếu tố thiết kế vào các trang web, CSS3 tự động đề cập đến. Thuộc tính và bộ chọn của CSS3 cung cấp nhiều tuỳ chọn và công cụ để giúp bạn chỉnh sửa và xác định bản trình bày của trang web và các hiệu ứng đặc biệt. Kiểm tra các bộ chọn và tài sản hữu ích ở đây.

Bộ chọn CSS3

CSS3 cung cấp quyền truy cập vào nhiều bộ chọn mà bạn sử dụng để xác định phần tử nào cần định dạng trên một trang. Bộ chọn lựa định nghĩa định dạng; phong cách định nghĩa làm thế nào để định dạng nó. Tuy nhiên, rất dễ dàng để đi vào quá tải bộ chọn. Hầu hết các nhà phát triển sử dụng một sự kết hợp của bộ chọn từ khóa và thuộc tính để thực hiện tất cả các tác vụ liên quan đến bộ chọn. Đây là các công cụ chọn thẻ thông dụng, cung cấp phương pháp lựa chọn tổng thể.

, Thẻ : Việc tách hai thẻ bằng dấu phẩy có nghĩa là chọn cả hai thẻ, bất kể vị trí chúng xuất hiện trong tài liệu. Ví dụ: bằng cách sử dụng p, div sẽ chọn tất cả và các thẻ trong tài liệu.

Thẻ >>

Thẻ : Việc tách hai thẻ với dấu lớn hơn (>) nói với trình duyệt chọn một thẻ có một thẻ khác làm cha mẹ. Ví dụ: nếu bạn có và sử dụng div> p, trình duyệt sẽ chọn thẻ .

Thẻ

: Việc tách hai thẻ theo dấu cách cho phép trình duyệt chọn một thẻ xuất hiện trong một thẻ khác. Bộ chọn này khác với sử dụng dấu hiệu lớn hơn mà thẻ đầu tiên không cần phải trực tiếp xuất hiện ngay trước thẻ thứ hai. Ví dụ: nếu bạn có và sử dụng div> p, trình duyệt sẽ không chọn bất cứ điều gì. Tuy nhiên, nếu bạn sử dụng div p, trình duyệt sẽ chọn thẻ .

Thẻ

: Việc tách hai thẻ với dấu cộng (+) cho trình duyệt chọn một thẻ xuất hiện ngay sau thẻ khác. Ví dụ: nếu bạn có và sử dụng div + p, trình duyệt sẽ chọn thẻ . Lưu ý rằng thẻ không xuất hiện bên trong thẻ, nó xuất hiện sau thẻ.

Thẻ

: Việc tách hai thẻ với dấu ngã (~) nói với trình duyệt chọn mỗi thẻ xuất hiện sau một thẻ khác. Ví dụ: nếu bạn có và sử dụng div ~ p, trình duyệt sẽ chọn cả hai thẻ . Điều này khác với div + p (trong đó trình duyệt sẽ chỉ chọn thẻ đầu tiên đi theo thẻ).

: root

Chọn phần tử gốc của tài liệu. Phần tử gốc phụ thuộc vào loại tài liệu. Bộ chọn này thường được sử dụng với các tài liệu XML, nhưng bạn có thể sử dụng nó với bất kỳ loại tài liệu nào.

Để có thể lựa chọn tốt các yếu tố đúng, các nhà phát triển thường sử dụng các bộ chọn thuộc tính thay cho các công cụ chọn thẻ.Dưới đây là các bộ chọn thuộc tính mà các nhà phát triển thường sử dụng. . ClassName :

Chọn bất kỳ đối tượng nào có giá trị thuộc tính lớp với tên đã cho. Ví dụ,. StdPara sẽ chọn tất cả các đối tượng có thuộc tính class = "StdPara" mà không quan tâm đến loại đối tượng.

#Id : Chọn bất kỳ đối tượng nào có giá trị thuộc tính id với tên đã cho. Ví dụ: #ThirdHeader sẽ chọn mọi đối tượng có thuộc tính id = "ThirdHeader" mà không quan tâm đến loại đối tượng.
: lang (Language Identifier) : Chọn bất kỳ đối tượng nào có giá trị ngôn ngữ được chỉ định. Ví dụ: lang (en) sẽ chọn bất kỳ đối tượng nào sử dụng tiếng Anh làm ngôn ngữ của nó. Dưới đây là danh sách các định danh ngôn ngữ chung.
[Thuộc tính ]
: Chọn tất cả các đối tượng sử dụng một thuộc tính cụ thể bất kể giá trị của thuộc tính. Ví dụ, [lang] sẽ chọn tất cả các đối tượng sử dụng thuộc tính lang. Thuộc tính =
Giá trị > : Chọn tất cả các đối tượng có thuộc tính với một giá trị cụ thể. Giá trị phải khớp chính xác. Ví dụ, [lang = "en-us"] sẽ chọn mọi đối tượng có thuộc tính ngôn ngữ có giá trị bằng tiếng Anh. Thuộc tính ~ =
Giá trị > : Chọn tất cả các đối tượng có thuộc tính chứa giá trị cụ thể. Giá trị tìm kiếm chỉ cần xuất hiện ở một nơi nào đó trong giá trị tổng thể. Ví dụ: [title ~ = "Trung học"] chọn tất cả các đối tượng có thuộc tính tiêu đề có chứa từ Thứ cấp như một từ rời rạc. Công cụ chọn này hoạt động với toàn bộ từ. Thuộc tính | =
Giá trị : Chọn tất cả các đối tượng có thuộc tính bắt đầu bằng một giá trị cụ thể. Giá trị tìm kiếm cần xuất hiện ở đầu giá trị như một tổng thể, nhưng không phải là toàn bộ giá trị. Ví dụ, [title | = "Sub"] chọn tất cả các đối tượng có thuộc tính tiêu đề bắt đầu bằng từ Sub. Bộ chọn này hoạt động với các thuật ngữ phân cách. Giá trị ^ =
Giá trị > : Chọn tất cả các đối tượng có thuộc tính bắt đầu bằng một giá trị cụ thể. Ví dụ, [title | = "Sub"] chọn tất cả các đối tượng có thuộc tính tiêu đề bắt đầu bằng từ Sub. Biểu mẫu này của bộ chọn ít hạn chế hơn thuộc tính [Thuộc tính | = Giá trị]. Sử dụng mẫu này sẽ chọn title = "SubHeader", title = "Tiêu đề phụ" hoặc title = "Tiêu đề phụ" với độ tin cậy bằng. Thuộc tính $ =
Giá trị : Chọn tất cả các đối tượng có thuộc tính kết thúc bằng một giá trị cụ thể. Ví dụ: [title $ = "Trung học"] chọn tất cả các đối tượng có thuộc tính tiêu đề kết thúc bằng từ Thứ Hai. Hình thức thuộc tính này là không giới hạn - nó không yêu cầu định dạng đặc biệt. Thuộc tính * =
Giá trị > : Chọn tất cả các đối tượng có thuộc tính có chứa một giá trị cụ thể. Ví dụ: [title $ = "Trung học"] chọn tất cả các đối tượng có thuộc tính tiêu đề có chứa từ Khoá phụ. Biểu mẫu này của bộ chọn ít hạn chế hơn thuộc tính Thuộc tính ~ = Giá trị ].Sử dụng mẫu này sẽ chọn title = "SecondaryParagraph", title = "Secondary Paragraph", hoặc title = "Secondary-Paragraph" với độ tin cậy bằng. Một bộ chọn đặc biệt not () sẽ hoàn thành mảng selectors chung. Để cho trình duyệt không chọn một thẻ hoặc thuộc tính cụ thể, nhưng để chọn mọi thứ khác thay vào đó, bạn sử dụng bộ chọn: not (). Ví dụ:: không (p) sẽ chọn tất cả mọi thứ trừ các thẻ đoạn văn trên trang. Thuộc tính CSS3 Một số thuộc tính CSS3 hiếm khi được sử dụng; nhiều người khác được sử dụng thường xuyên đủ để các nhà phát triển nên biết về họ. Thuộc tính và các giá trị liên quan của chúng tạo thành cơ sở của định dạng bạn thực hiện bằng cách sử dụng CSS3. Dưới đây là danh sách các thuộc tính bạn sẽ thấy mình sử dụng thường xuyên nhất khi làm việc với nền CSS3:

: Xác định nội dung cho nền của một phần tử. Giá trị cho thuộc tính này thường là một hàm, chẳng hạn như linear-gradient ().

background-attachment

Chỉ định cách một hình ảnh tương tác với phần còn lại của một phần tử. Bạn sử dụng các từ khoá sau để cấu hình thuộc tính này: di chuyển, cố định và địa phương.
background-color : Chỉ định màu nền của một thực thể, chẳng hạn như màu trang bên dưới. Bạn có thể sử dụng một trong các kỹ thuật này để xác định màu nền: giá trị thập lục phân, tên màu, chức năng rgb (), chức năng rgba (), chức năng hsl () hoặc hsla ().
background-image : Cung cấp vị trí của một tài nguyên để sử dụng làm đồ hoạ cho nền của một phần tử. Bạn sử dụng chức năng url () để xác định vị trí.
background-repeat : Cho phép hình nền lặp lại hoặc không lặp lại (sử dụng từ khoá không lặp lại) nếu cần. Bạn cũng có thể chọn lặp lại hình ảnh chỉ với hướng ngang (lặp lại-x) hoặc dọc (lặp lại-y).
nền-size : Xác định kích thước của hình nền dưới dạng giá trị tuyệt đối hoặc phần trăm.
border : Xác định loại đường biên cần tạo bằng cách chỉ định một trong những từ khóa sau đây: none, hidden, dotted, dashed, solid, double, groove, giòn, inset, outset, hoặc thừa kế. Cũng có thể thay đổi từng phong cách của từng cạnh của một đường biên bằng cách sử dụng các thuộc tính kiểu đường biên, kiểu đường viền phía trên, thuộc đường biên, và kiểu đường biên.
border-color : Chỉ định màu sắc của đường biên xung quanh một thực thể. Bạn có thể sử dụng một trong các kỹ thuật này để xác định màu nền: giá trị thập lục phân, tên màu, chức năng rgb (), chức năng rgba (), chức năng hsl () hoặc hsla ().
border-image : Định nghĩa một hình ảnh sử dụng cho nội dung đường biên chứ không phải kiểu đường. Bạn thường sử dụng hàm url () để xác định giá trị của thuộc tính này.
bán kính biên : Xác định xem các góc của đường viền được làm tròn và số lượng làm tròn. Khi tạo một góc tròn, bạn chỉ định số lượng làm tròn. Để loại bỏ một góc tròn, sử dụng từ khóa none.
biên độ rộng : Xác định độ dày của đường viền xung quanh một phần tử.Bạn có thể xác định chiều rộng đường viền bằng cách sử dụng từ khoá (trung bình, dày, hoặc mỏng) hoặc đo lường thực tế.
cột đếm : Chỉ định số lượng các cột để tạo. Chiều rộng cột tự động dao động khi người dùng thay đổi kích thước cửa sổ trình duyệt (hoặc trình duyệt sẽ hiển thị một thanh cuộn ngang để làm cho nó có thể cuộn qua các cột khi có chiều rộng cụ thể cũng được thiết lập).
điền cột : Xác định cách trình duyệt điền vào các cột (điền vào từng cột một lần hoặc điền đầy đủ các cột cùng một lúc với một lượng nội dung).
khoảng cách cột : Tạo khoảng trống giữa các cột để dễ dàng xác định nơi một cột kết thúc và cột kia bắt đầu.
nguyên tắc cột : Tạo ra một quy tắc giữa các cột để người dùng có thể thấy một dấu tách vật lý. Thuộc tính này bao gồm màu sắc, phong cách và chiều rộng.
cột-quy tắc-màu : Xác định màu của quy tắc được sử dụng giữa các cột.
kiểu cột-quy tắc : Xác định kiểu của quy tắc được sử dụng giữa các cột.
column-rule-width : Xác định độ rộng của quy tắc được sử dụng giữa các cột.
cột-khoảng : Chỉ định số cột mà một đối tượng có thể mở rộng.
chiều rộng cột : Chỉ định chiều rộng của cột.
cột : Cung cấp một phương pháp viết tắt để xác định cả tính cột và chiều rộng cột.
màu : Chỉ định màu tiền cảnh của một thực thể, chẳng hạn như văn bản. Bạn có thể sử dụng một trong những kỹ thuật này để xác định màu sắc: giá trị thập lục phân, tên màu, chức năng rgb (), chức năng rgba (), chức năng hsl () hoặc hsla ().
nội dung : Xuất văn bản hoặc tài nguyên khác được chỉ định như là một phần của phần trình bày phần tử. Thuộc tính này thường được sử dụng để thực hiện các tác vụ như thêm mũi tên vào các phần tử trực quan. Bạn chỉ định giá trị bằng cách sử dụng hàm url (), số ký tự Unicode có dấu gạch chéo ngược (như 27A8) hoặc từ khóa.
hiển thị : Chỉ định cách hiển thị các loại phần tử nhất định trên trang. Bạn có thể sử dụng bất kỳ từ khóa nào sau đây để xác định kiểu hiển thị: none, hộp (hoặc flex-box), block, flex, inline, inline-block, inline-flex, inline-table, list-item, phụ đề, bảng-cell, bảng-cột, bảng-cột-nhóm, bảng-footer-nhóm, bảng bảng tiêu đề-nhóm, bảng hàng, hay bảng hàng-nhóm.
float : Cho phép một hình ảnh trôi theo hướng được chỉ định. Bạn xác định thuộc tính này bằng các từ khóa sau: trái, phải hoặc không.
font-family : Định nghĩa tên của phông chữ. Ba là ba loại phông chữ thường được sử dụng như là một phần của CSS (và hầu hết các trang CSS đều sử dụng cả ba trừ khi bạn chỉ định thuộc tính src): cụ thể, Web an toàn và chung chung.
font-size : Xác định kích thước của phông khi so sánh với phông chữ khác trên trang hoặc cung cấp một kích thước phông chữ cụ thể. Bạn có thể sử dụng một trong các kỹ thuật này để xác định kích thước phông chữ: kích thước cụ thể, từ khóa (chẳng hạn như lớn hoặc lớn hơn) và tỷ lệ phần trăm.
font-style : Xác định kiểu phông chữ mà trình duyệt tạo ra.Trình duyệt phải hỗ trợ kiểu dáng và phông chữ phải cung cấp kiểu dáng để cho thuộc tính này có hiệu lực. Các kiểu chữ kiểu chữ là: bình thường, nghiêng, xiên (thường là chữ nghiêng mạnh hơn), và kế thừa.
font-variant : Chỉ định liệu phông chữ phải được trình bày ở dạng biến thể hay không. Không phải tất cả các trình duyệt và phông chữ đều hỗ trợ tính năng này. Các từ khoá cho thuộc tính này là thông thường, chữ hoa và thừa kế.
font-weight : Xác định độ bóng tối tương đối của phông chữ và chiều rộng của nét vẽ. Có hai phương pháp xác định trọng lượng phông chữ: số và từ khóa (như đậm).
chiều cao : Cho biết kích thước theo chiều dọc của một phần tử.
còn lại : Cho biết vị trí bên trái của phần tử trên một trang.
list-style : Xác định sự xuất hiện của một phần tử trong danh sách. Bạn có thể xác định loại đánh dấu để sử dụng, vị trí của các điểm đánh dấu, và liệu các điểm đánh dấu thực sự được tạo ra bằng cách sử dụng hình ảnh chứ không phải là các ký tự tiêu chuẩn.
margin : Chỉ định khoảng trống giữa đường biên của một phần tử và lề của một phần tử khác.
margin-bottom : Cho biết vị trí đáy của một lề phần tử trên một trang.
margin-left : Cho biết vị trí bên trái của một lề phần tử trên một trang.
margin-top : Cho biết vị trí trên cùng của một lề phần tử trên một trang.
padding : Chỉ định khoảng trống giữa đường biên của một phần tử và nội dung bên trong phần tử.
vị trí : Cho biết vị trí các phần tử trên trang. Bạn chỉ định vị trí sử dụng các từ khoá này: static (các phần tử được chảy), absolute (các phần tử xuất hiện ở một vị trí cụ thể, ngay cả khi vị trí đó sẽ ghi đè lên một phần tử khác), cố định (các phần tử được đặt liên quan đến cửa sổ trình duyệt) relative (các phần tử được đặt liên quan đến các phần tử cha).
text-align : Chỉ định vị trí của văn bản trên một dòng. Bạn chỉ định liên kết bằng cách sử dụng các từ khoá justify, right, center và left.
text-decoration : Định nghĩa việc bổ sung một đặc tính, chẳng hạn như gạch chân, overline, hoặc line-through vào phông chữ. Thuộc tính này hoạt động ở mọi nơi, vì vậy bạn không cần phải lo lắng xem ai đó xem trang của bạn trên truyền hình hay sử dụng điện thoại thông minh sẽ nhận được thông báo của bạn hay không.
text-tràn : Xác định hành động sẽ xảy ra khi văn bản tràn hộp được sử dụng để chứa nó. Giá trị chấp nhận được là: clip, hình bầu dục, hoặc một giá trị chuỗi bạn cung cấp.
text-shadow : Hiển thị một bóng tối của các ký tự đích có cùng độ rộng với ký tự đích. Định vị, độ mạnh và màu sắc của bóng được xác định bởi các thuộc tính sau: h-shadow (xác định vị trí ngang của bóng), v-shadow (xác định vị trí thẳng đứng của bóng), blur (xác định rõ nét văn bản bóng tối), và màu sắc (xác định màu sắc của phác thảo).
tầm nhìn : Chỉ rõ mức độ hiển thị của một phần tử.Bạn sử dụng các từ khoá sau để định cấu hình thuộc tính này: hiển thị, ẩn hoặc sụp đổ.
chiều rộng : Cho biết kích thước ngang của một phần tử.
word-break : Xác định cách văn bản được bao bọc trong một hộp chứa khi làm việc với một ngôn ngữ không phải là CJK (tiếng Trung Quốc tiếng Hàn). Giá trị chấp nhận được là: bình thường, phá vỡ tất cả và dấu nối.
word-wrap : Xác định cách văn bản bị hỏng và sau đó được quấn vào dòng kế tiếp trong một hộp chứa khi làm việc với một ngôn ngữ không phải là CJK. Các giá trị được chấp nhận là: bình thường và từ vỡ.