Trang Chủ Xã hội Truyền thông Css3 Đối với người mới bắt đầu Cheat Sheet - núm vú

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

Video: CSS Crash Course For Absolute Beginners 2025

Video: CSS Crash Course For Absolute Beginners 2025
Anonim

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ẻ

    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ẻ

    ~

    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ỡ.

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

    Lựa chọn của người biên tập

    Nhúng tệp Video và Audio vào các trang Web của bạn để có kết quả SEO tốt hơn - những núm vú

    Nhúng tệp Video và Audio vào các trang Web của bạn để có kết quả SEO tốt hơn - những núm vú

    Nếu bạn muốn bao gồm nội dung video và âm thanh trong các trang Web của mình, bạn có thể nhúng các tệp này để làm cho chúng thân thiện hơn với SEO. Bạn cũng nên chọn nội dung tăng cường thông điệp của trang web và làm cho nó thêm thú vị và có ý nghĩa với khách truy cập của bạn. Một số trang web cung cấp các tệp video hoặc âm thanh bằng cách hiển thị chúng trong ...

    Loại trừ một trang web hoặc trang web khỏi các công cụ tìm kiếm Sử dụng một tệp tin văn bản Robots

    Loại trừ một trang web hoặc trang web khỏi các công cụ tìm kiếm Sử dụng một tệp tin văn bản Robots

    Bạn có thể sử dụng tệp văn bản rô-bốt để chặn một nhện công cụ tìm kiếm khỏi thu thập thông tin trang Web hoặc một phần của trang web của bạn. Ví dụ, bạn có thể có một phiên bản phát triển của trang Web nơi bạn làm việc về những thay đổi và bổ sung để kiểm tra chúng trước khi chúng trở thành một phần của trang Web trực tiếp của bạn. ...

    Lựa chọn của người biên tập

    Nhìn vào các ngày lễ Công giáo - những con voi

    Nhìn vào các ngày lễ Công giáo - những con voi

    Một điều rất hay về Đạo Công giáo là nhiều ngày trong năm dương lịch là một nguyên nhân cho lễ kỷ niệm. Gần như mỗi ngày đánh dấu ngày lễ của một vị thánh - một ngày mà cuộc đời thánh thiện và những việc làm của thánh nhân được ghi nhớ. Một số ngày là ngày lễ của nghĩa vụ, có nghĩa là bạn phải tham dự ...

    Sách Khải Huyền Đối với Người Dummies Cheat Sheet - núm vú

    Sách Khải Huyền Đối với Người Dummies Cheat Sheet - núm vú

    Nếu bạn bị cuốn hút bởi Sách Khải Huyền trong Kinh Thánh, đừng bận tâm. Hãy xem cấu trúc cơ bản của Sách Khải Huyền; các giải thích chính của nó; những quan điểm khác nhau về Vương quốc ngàn năm đã đề cập trong Khải huyền 20; và những sự kiện quan trọng đã tạo nên Giăng cho Vị Tông Đồ và bài viết của ông. Bằng cách làm như vậy, bạn sẽ tốt hơn ...

    Hồng y Các Giáo lễ của Giáo Hội Công Giáo - Thập niên

    Hồng y Các Giáo lễ của Giáo Hội Công Giáo - Thập niên

    Một đức tính là thói quen hoàn thiện quyền hạn của linh hồn và định đoạt bạn làm tốt. Người Công giáo tin rằng ân sủng của Thiên Chúa được dâng lên cho linh hồn, bởi vì nếu không có sự giúp đỡ của Đức Chúa Trời, con người không thể làm điều tốt một mình. Grace, đó là sự can thiệp của Thiên Chúa, nâng đỡ linh hồn của một người, cung cấp oomph cần thiết để làm việc.

    Lựa chọn của người biên tập

    Làm thế nào để Khởi động lại Web Host Manager Services của bạn - núm vú

    Làm thế nào để Khởi động lại Web Host Manager Services của bạn - núm vú

    Vẻ đẹp của máy chủ web là mỗi chức năng chính của nó có "dịch vụ" của riêng bạn mà bạn có thể khởi động lại. Một dịch vụ là một phần của phần mềm - một chương trình chạy trên máy chủ xử lý một chức năng cụ thể. Nếu một trong các dịch vụ ngừng hoạt động chính xác, bạn không nhất thiết phải khởi động lại ...

    Làm thế nào để Hủy bỏ Website của bạn từ một Blacklist - núm vú

    Làm thế nào để Hủy bỏ Website của bạn từ một Blacklist - núm vú

    Tên miền hoặc miền địa chỉ IP của bạn bị liệt vào danh sách đen khi phát hiện thư rác. Nếu trang web của bạn đã bị cấm, có thể đó không phải là lỗi của bạn - đặc biệt nếu bạn đang ở trên một máy chủ chia sẻ. Có thể một trang web khác trên máy chủ đã cố tình gửi spam. Nó cũng là ...

    Cách Quản lý Trình Quản lý Máy chủ Web của bạn Hàng đợi Thư - núm vú

    Cách Quản lý Trình Quản lý Máy chủ Web của bạn Hàng đợi Thư - núm vú

    Với quyền truy cập vào phụ trợ của máy chủ của bạn, bạn cũng có thể truy cập vào một số chức năng của Trình quản lý Máy chủ lưu trữ Web trước đây không có sẵn cho bạn. Cuộn xuống trình đơn bên tay trái của WHM để tìm phần được gọi là Thư gần cuối. Trong phần này, có những lựa chọn có thể hữu ích cho bạn nếu ...