Thực đơn
trang chủInternet

CSS cơ bản. Khái niệm cơ bản về CSS trong ba phút - dễ dàng và dễ tiếp cận đối với mọi người. Thay đổi màu trang

Nếu bạn quan tâm đến chủ đề tạo trang web thì chắc hẳn bạn đã hơn một lần nghe nói về CSS (Cascading Style Sheets). Bạn thậm chí có thể đã cố gắng học công nghệ này vì kỹ năng CSS là nền tảng thiết yếu trong nghệ thuật tạo trang web. Cascading Style Sheets là một trong bộ ba công nghệ mà mọi nhà phát triển web nên nắm vững (cùng với HTML và JavaScript).

Về vấn đề này, với bài đăng này, tôi đang bắt đầu một loạt bài xuất bản về CSS. Tôi đã cố gắng soạn các bài học theo cách mà ngay cả một người hoàn toàn không biết gì về phát triển web cũng có thể học được công nghệ tuyệt vời này.

Tuy nhiên, tôi tin rằng những người thiết kế bố cục có kinh nghiệm hơn sẽ tìm thấy nhiều điều mới mẻ và hữu ích trong những bài học này. Tôi cũng khuyên bạn nên đăng ký nhận thông tin cập nhật để không bỏ lỡ việc phát hành các bài học mới.

Đọc thêm về Cascading Style Sheet (CSS) là gì và nó được sử dụng để làm gì bên dưới.

Phiên bản video:

CSS là gì?

Như bạn đã biết, khi tạo một trang web, chúng ta hình thành nội dung của nó bằng ngôn ngữ đánh dấu siêu văn bản - HTML (Ngôn ngữ đánh dấu siêu văn bản). Bằng cách sử dụng nó, chúng tôi tạo các khối điều hướng và lấp đầy trang web bằng nội dung văn bản, âm thanh/video. Nói chung, chúng tôi tạo ra cấu trúc của trang web.

Sau khi hình thành nội dung của trang web, ở giai đoạn tiếp theo, chúng ta chuyển sang giai đoạn thiết kế diện mạo của nó sao cho đẹp và dễ chịu. Và cũng để nó trông đẹp trên các độ phân giải màn hình khác nhau. Đây chính xác là lý do tại sao chúng tôi sử dụng các biểu định kiểu xếp tầng CSS.

Điều này có nghĩa là để học và sử dụng CSS hiệu quả, bạn cần biết những điều cơ bản về HTML. Nếu không có điều này, việc hiểu các biểu định kiểu xếp tầng sẽ không có ý nghĩa thực tế. Nếu bạn vẫn chưa quen với những điều cơ bản về ngôn ngữ siêu văn bản, hãy xem qua ngôn ngữ của tôi.

Một ví dụ tốt

Nói một cách hình tượng, việc tạo trang web có thể được so sánh với việc vẽ. Trước khi bắt đầu khéo léo thao tác với cọ và canvas, chúng ta nên quyết định chính xác những gì sẽ được khắc họa trong bức tranh của mình. Hãy tưởng tượng rằng chúng ta quyết định vẽ một phong cảnh trong đó một con chim sẽ được khắc họa trên nền cây cối và núi non. Có thể nói rằng ở giai đoạn này chúng ta đã xác định được chính nội dung của bức tranh.


Tình huống tương tự xảy ra với HTML, nơi chúng ta tạo nên nội dung của một trang web.


Trang web trên HTML đơn giản, không có CSS
Cùng một trang web với các biểu định kiểu được kết nối

Để rõ ràng hơn, hãy truy cập một số trang web, ví dụ: facebook.com. Bước tiếp theo là cài đặt tiện ích mở rộng trình duyệt có tên WEbDeveloper. Tôi đã cài đặt nó, nhưng tất cả những gì bạn phải làm là nhập cụm từ WEbDeveloper vào công cụ tìm kiếm, nhấp vào liên kết và nhấp vào nút “Cài đặt” trong cửa sổ mở ra.

Tôi đã cài đặt và điều khiển tiện ích mở rộng này bằng biểu tượng bánh răng ở phần trên bên phải màn hình. Tôi đề nghị trên faceboook.com bạn nên tắt biểu định kiểu và chỉ xem nội dung. Để thực hiện việc này, chúng ta đi tới phần CSS và nhấp vào Tắt tất cả kiểu. Kiểu dáng bị vô hiệu hóa và chúng tôi thấy nội dung của trang web này trông kém hấp dẫn như thế nào nếu không có thiết kế.


Xuất hiện mạng xã hội không có tệp CSS được kết nối

Tức là bây giờ chúng ta thấy một trang web chỉ sử dụng HTML đơn thuần. Để kích hoạt các tệp css của trang này, chúng tôi quay lại WEbDeveloper và bỏ chọn Tắt tất cả kiểu.

Style sheet được kết nối lại và chúng ta có thể xem nội dung của trang web cùng với thiết kế.


Xã hội mạng với các tệp CSS được kết nối

CSS hoạt động như thế nào?

Tất cả các quy tắc thiết kế trang web được lưu trữ trong một tệp có phần mở rộng css, tệp này sẽ được tải lên trang web thông qua thẻ .

Trong khi tải trang html, thông qua thẻ Tệp CSS cũng được tải, sau đó trình duyệt bắt đầu xử lý tệp đó và trang web được hiển thị theo các quy tắc được chỉ định trong tệp này. Nó mô tả các thuộc tính hiển thị của các thành phần trang web.

Ví dụ: thông qua bộ chọn "p", chúng tôi chỉ định loại, kích thước và màu sắc của phông chữ trong đoạn văn. Để định cấu hình phông chữ tiêu đề cấp đầu tiên, chúng tôi sử dụng bộ chọn "h1".

Tôi nghĩ nguyên lý hoạt động chung khá đơn giản và dễ hiểu nên chúng ta sẽ không đi vào chi tiết. Nếu một số khoảnh khắc khiến bạn gặp khó khăn thì không sao cả, trong các bài học tiếp theo, trong thực tế, mọi thứ sẽ rất dễ dàng và dễ hiểu.

Tại sao nên học CSS?

Tôi không nghĩ rằng ngày nay bạn có thể tìm thấy ít nhất một trang web “tốt” mà không cần sử dụng CSS. Công nghệ này đã được chứng minh rất tốt và ngày nay rất khó để tưởng tượng bố cục của một trang web mà không sử dụng các biểu định kiểu xếp tầng.

Với bản cập nhật này, nhiều thẻ HTML 4 không còn được sử dụng nữa. Về cơ bản, đây là những thẻ chịu trách nhiệm thiết kế các trang web. Và không có gì đáng ngạc nhiên ở đây, bởi vì các thuộc tính CSS hiện chịu trách nhiệm cho việc này. Nếu bạn đã biết kiến ​​thức cơ bản về HTML, bước hợp lý tiếp theo là học CSS. Đây là giai đoạn mà bạn không thể bỏ qua nếu muốn học cách bố trí website. Hơn nữa, nó sẽ không mất nhiều thời gian.

Ưu điểm của CSS

  • Với việc sử dụng các kiểu CSS, mã HTML được giảm đáng kể. Đôi khi vài lần. Điều này có tác động tích cực đến tốc độ tải của trang web, từ đó tạo điều kiện thuận lợi cho việc quảng cáo trang web trên các công cụ tìm kiếm;
  • Khi cập nhật thiết kế trang web của bạn, bạn không cần phải chỉnh sửa từng thẻ riêng biệt trên tất cả các trang web nữa. Chỉ cần thay đổi một vài dòng trong biểu định kiểu là đủ;
  • CSS mở ra nhiều khả năng cho bạn trong việc thiết kế và bố cục trang web của bạn;
  • Không cần sử dụng thẻ kế thừa. Nhiều công cụ tìm kiếm không thích chúng và việc sử dụng các thẻ lỗi thời được coi là hành vi xấu;
  • Sử dụng CSS bạn theo kịp thời đại.

Cách học CSS cơ bản nhanh chóng

Trong việc học CSS, cũng như trong lập trình nói chung, việc thực hành đóng một vai trò quan trọng. Bạn càng luyện tập thường xuyên thì bạn sẽ càng tiến bộ hơn.

Xin chào các bạn thân mến! Trong bài học này bạn sẽ tìm hiểu nó là gì CSS, nó cần thiết để làm gì và sử dụng nó như thế nào cho đúng. Đây là bài học cơ bản trong loạt bài “Dành cho những đứa trẻ nhỏ”, trong đó tôi sẽ cố gắng giải thích bằng ngôn ngữ dễ hiểu nhất những kiến ​​thức cơ bản về tạo kiểu tài liệu bằng CSS - Cascading Style Sheets ( C leo thang S phong cách S hehe).

Mát mẻ

nói lắp

Phần 1: Khái niệm cơ bản về CSS

Bài học này là sự tiếp nối hợp lý của bài học "Cơ bản về HTML cho người mới bắt đầu", trong đó tôi đã giải thích chi tiết ngôn ngữ đánh dấu HTML là gì, cách hoạt động và hoạt động, các thẻ cơ bản và quy tắc bố cục. Trong bài học này, chúng ta sẽ đề cập đến kiểu dáng của tài liệu được tạo bằng ngôn ngữ đánh dấu, tức là. đưa ra một hình dạng nhất định, một màu sắc, trình tự, kích thước nhất định của các thành phần và văn bản khác nhau trên trang, chúng tôi sẽ xem xét các kỹ thuật hiệu quả nhất để làm việc với các biểu định kiểu xếp tầng. Khi bạn hiểu những điều cơ bản, bạn có thể tự tạo kiểu cho các tài liệu HTML một cách chính xác và hiệu quả.

Xin lưu ý rằng trong hướng dẫn này, chúng tôi sẽ chỉ xem xét CSS trong bối cảnh sử dụng với các tài liệu HTML trong trình duyệt web. Bạn cũng có thể tạo kiểu cho các tài liệu khác bằng các ngôn ngữ đánh dấu khác nhau bằng CSS. Ví dụ: tạo kiểu XML trong các ứng dụng Android, SVG hoặc các Môi trường máy tính để bàn khác nhau trong các hệ điều hành giống Unix.

Nói chung, CSS là một ngôn ngữ hình thức khá cơ bản được phát minh để mô tả hình thức của tài liệu. Điều này cho thấy rằng nó khá đơn giản và bao gồm các cấu trúc nguyên thủy ban đầu không quá khó nghiên cứu. Điều khó khăn nhất không phải là cú pháp, không phải các quy tắc viết cấu trúc, mà là số lượng lớn các thuộc tính CSS cần ghi nhớ để thực hiện nhiều tác vụ khác nhau. May mắn thay, tất cả các quy tắc đều bằng tiếng Anh với tải ngữ nghĩa tương ứng. Một bản dịch đơn giản sang ngôn ngữ của chúng tôi sẽ đưa ra ý tưởng về tác dụng của quy tắc này và ngược lại - khi dịch những gì chúng tôi muốn đạt được với một thuộc tính nhất định sang tiếng Anh, có khả năng cao là chúng tôi sẽ nhận được thuộc tính chính xác. Điều này giúp việc ghi nhớ các quy tắc CSS một cách trực quan dễ dàng hơn nhiều. Ví dụ, nếu bạn cần thiết lập màu nền chỉ cần dịch sang tiếng Anh là đủ, kết quả là chúng ta có được màu nền(các từ riêng lẻ trong CSS được viết bằng dấu gạch nối).

1.1 Sử dụng CSS trong tài liệu HTML

CSS khá dễ sử dụng trong các tài liệu HTML. Nó có thể:


Như tôi đã nói trước đó, CSS có cú pháp khá đơn giản. Hãy phá vỡ nó.


Các quy tắc quảng cáo đơn giản đến mức có thể mô tả chúng trong một câu. Đầu tiên nó được viết bộ chọn trong đó chọn một thành phần cụ thể trên trang, sau dấu ngoặc nhọnđược viết của cải với giá trị sau dấu hai chấm và bản thân các thuộc tính được tách biệt với nhau dấu chấm phẩy. Đây là tất cả.

Đơn giản phải không?

Điều khó khăn nhất khi khai báo CSS là bộ chọn. Bạn có thể tìm hiểu thêm về cách các bộ chọn được hình thành và cách chúng được sử dụng trong bài học Tất cả các bộ chọn CSS trong một bài học - đây là một chủ đề rất quan trọng, vì tất cả sự kỳ diệu của việc chọn các thành phần trên một trang đều được tiết lộ ở đây. không thất bại cho tất cả người mới bắt đầu.

Tóm tắt Bộ chọn CSS- (từ chữ lựa chọn- select) là cấu trúc mà mỗi khối quảng cáo bắt đầu và dùng để chọn một phần tử hoặc nhiều phần tử cùng loại trên trang để tạo kiểu thêm. Thông thường một cái nhất định được sử dụng làm bộ chọn Lớp họcđánh dấu, ví dụ:

//HTML:

//CSS: .my-class ( màu nền: #999; )

Ở đây bộ chọn là lớp my-class của thẻ div, nhận thiết kế cần thiết trong tệp CSS. Trong trường hợp này, màu nền là màu xám. Theo đó, nếu có một số thẻ trên trang (không chỉ div) cùng với lớp lớp học của tôi, tất cả các thành phần này sẽ có cùng một thiết kế - nền xám màu #999.

1.3 Xếp tầng, kế thừa và ưu tiên

Nguyên tắc xếp tầng không khó hiểu. Hãy xem một ví dụ:

//HTML

Xa, xa đằng sau dãy núi chữ quê hương.
Xa, vượt xa những ngọn núi từ.
//CSS .parent .children ( color: #666; ) .parent ( đệm: 10px; color: #999; )

Từ ví dụ này, chúng ta thấy rằng một tầng được viết bằng CSS, trong đó lớp .cha mẹđến trước, sau đó lớp con được chỉ định cách nhau bằng dấu cách .những đứa trẻ, chỉ chịu trách nhiệm tạo kiểu cho phần tử con. Thẻ con phải được lồng trong thẻ có lớp .cha mẹ. Nếu trong tài liệu HTML chúng ta thêm thẻ .những đứa trẻ từ thẻ div với lớp .cha mẹ, nó sẽ mất thiết kế, vì tầng sẽ không hoạt động nữa, kết cấu bị hỏng.

Chúng ta nhận được gì từ ví dụ của mình? Thẻ có lớp .children sẽ nhận được màu văn bản #666, vì nó có tầng dài hơn và .parent sẽ có màu #999. Lớp cha sẽ có phần đệm 10px, trong khi lớp con sẽ không có phần đệm này, vì thuộc tính phần đệm không áp dụng cho các phần tử con. Tuy nhiên, nếu chúng ta loại bỏ màu sắc: #666; tại bộ chọn .parent .children, khi đó văn bản của nó sẽ được tô màu theo màu của cha mẹ màu: #999;


Xếp tầng và kế thừa cho phép bạn tạo kiểu cho các phần tử cụ thể trên một trang và ưu tiên kiểu nào được áp dụng. Chúng ta hãy nhìn vào thứ bậc ưu tiên.

  1. Các thuộc tính có cấu trúc ở cuối khai báo có mức độ ưu tiên cao nhất !quan trọng. Không quan trọng bộ chọn có kiểu lồng nhau như thế nào, kiểu được sử dụng như thế nào - nội tuyến hoặc bằng cách kết nối một tệp bên ngoài, chúng sẽ có mức độ ưu tiên cao nhất. Tôi thực sự khuyên bạn không nên sử dụng !quan trọng khi tạo kiểu, vì trong quá trình hỗ trợ hoặc thậm chí trong quá trình phát triển sau này, chắc chắn sẽ nảy sinh sự nhầm lẫn, điều này chỉ có thể được cứu bằng cách tái cấu trúc các kiểu. Như thực tế cho thấy, Luôn có cách để không sử dụng!quan trọng.
    Ví dụ về việc sử dụng!important: .my-class ( Background-color: #999!important; )
  2. Ưu tiên quan trọng nhất tiếp theo được dành cho kiểu nội tuyến, được viết trong chính thẻ thông qua thuộc tính phong cách mà chúng ta đã xem xét trước đó:
  3. Các kiểu được chỉ định trong thẻ kiểu trong chính tài liệu có mức độ ưu tiên thấp hơn;
  4. Các kiểu được kết nối với tài liệu dưới dạng tệp CSS bên ngoài thông qua thẻ thậm chí còn có mức độ ưu tiên thấp hơn.
  5. Ưu tiên thấp nhất, bên cạnh các kiểu trình duyệt tiêu chuẩn, là kiểu của bộ chọn cha trước các kiểu con, ví dụ:
    //HTML

    Xa, vượt xa những ngọn núi từ.

    //CSS .my-class ( lề: 10px; ) sẽ có mức độ ưu tiên thấp hơn cho trẻ P hơn: .my-class p (margin: 15px; ) Thẻ kết quả

    Nằm trong thẻ có class.my-class sẽ nhận được giá trị của thuộc tính lề: 15px.

Cũng cần lưu ý rằng số lượng lớp hoặc mã định danh, cũng như sự hiện diện của các lớp giả và cấu trúc bổ sung trong bộ chọn, sẽ làm tăng mức độ ưu tiên cho việc tạo kiểu:

My-class.class-2 ( lề: 10px; ) sẽ được ưu tiên hơn: .my-class ( lề: 15px; )

Vân vân. theo một chuỗi logic.

Cuối cùng, liên quan đến mức độ ưu tiên, điều quan trọng cần lưu ý là các kiểu xuất hiện trong các khai báo tiếp theo ở phía dưới tài liệu cũng có mức độ ưu tiên cao nhất. Ví dụ:

My-class ( lề: 10px; ) sẽ có mức độ ưu tiên thấp hơn so với cùng một bộ chọn đứng sau nó: .my-class ( lề: 15px; )

Do đó, bộ chọn cuối cùng trong luồng tài liệu sẽ nhận được lề giá trị thuộc tính: 15px, vì nó có mức độ ưu tiên cao nhất. Tuy nhiên, nếu bộ chọn của khai báo đầu tiên dài hơn thì giá trị thuộc tính của nó chắc chắn sẽ chiếm ưu thế.

Về việc thừa kế, mọi thứ đều đơn giản. Tất cả các phần tử con kế thừa một số thuộc tính của phần tử cha. Bạn sẽ phải tìm ra những đặc tính nào được kế thừa trong quá trình nghiên cứu các đặc tính khác nhau và áp dụng chúng vào thực tế. Ví dụ: màu văn bản luôn được trẻ em kế thừa, nhưng phần đệm thì không.

Phần 2. Thuộc tính CSS

Tôi nghĩ rằng không có ích gì khi liệt kê tất cả các thuộc tính CSS, vì có rất nhiều thuộc tính CSS và sẽ thực tế hơn nếu tham khảo thư mục của tất cả các thuộc tính CSS. Tôi khuyên bạn nên nghiên cứu các thuộc tính CSS trong tài liệu tham khảo HTMLBook.

Tuy nhiên, chúng ta hãy xem 10 thuộc tính CSS được sử dụng nhiều nhất trong bố cục. Tôi lấy 10 tệp CSS lớn từ các dự án của mình và sắp xếp các thuộc tính theo tần suất sử dụng.

Thuộc tính CSS

Tần suất sử dụng

Sự miêu tả
màu sắc 960 lần Màu văn bản phần tử:
màu nền 755 lần Màu nền của phần tử:
cỡ chữ 524 lần Cỡ chữ:
độ mờ đục 435 lần Mức độ minh bạch của phần tử:
phần đệm 372 lần Kích thước lề bên trong phần tử:
chiều rộng 356 lần Chiều rộng của phần tử khối, không bao gồm đường viền và lề:
lề 311 lần Lề phần tử:
chiều cao 305 lần Chiều cao của phần tử khối, không bao gồm đường viền và lề:
độ dày phông chữ 280 lần Trọng lượng phông chữ:
căn chỉnh văn bản 245 lần Căn chỉnh văn bản theo chiều ngang:

Phần 3: Truy vấn phương tiện

Truy vấn phương tiện trong CSS là cơ sở để tạo bố cục đáp ứng, cho phép bạn tạo kiểu cho các phần tử tùy thuộc vào kích thước của màn hình hoặc thiết bị mà trang web được hiển thị. Về mặt kỹ thuật Truy vấn phương tiện là một biểu thức Boolean đơn giản có thể đúng hoặc sai. Các điều kiện cho biểu thức như vậy là thông số của thiết bị hiển thị trang web hoặc kích thước màn hình tính bằng pixel.

Trong hướng dẫn này, chúng ta sẽ xem xét các khả năng cơ bản của truy vấn phương tiện, cần thiết cho bố cục trang web thích ứng và thực tế hữu ích.

Truy vấn phương tiện được viết trong chính tệp kiểu hoặc trong phần nội dung của tài liệu (thẻ kiểu) và bắt đầu bằng một khai báo quy tắc @phương tiện truyền thông. Cấu trúc của truy vấn phương tiện khá đơn giản:


Điều kiện có thể là một thiết bị - tất cả (tất cả các thiết bị), màn hình, máy in, TV, v.v. hoặc các chức năng đa phương tiện đặt tham số thiết bị hoặc độ phân giải màn hình mà tài liệu được hiển thị.

Các chức năng đa phương tiện được sử dụng phổ biến nhất xác định độ phân giải màn hình tối đa và tối thiểu của thiết bị:


Dưới đây là những thiết bị có độ phân giải màn hình tối đa 480px hoặcđộ phân giải tối thiểu 320px sẽ hiển thị văn bản thẻ với class.my-class chuyển sang màu xám. Tôi đưa ra điều kiện này làm ví dụ; nó gần như vô dụng. Thông thường, bạn chỉ cần chỉ định độ phân giải tối đa hoặc chỉ mức tối thiểu mà thuộc tính sẽ được áp dụng.

Trong số những thứ khác, như chúng ta thấy từ ví dụ, các hàm có thể chứa các điều kiện Và, không không) Và chỉ (Dành cho các trình duyệt cũ hơn không hỗ trợ truy vấn phương tiện). Không có toán tử logic hoặc (HOẶC), vai trò của nó được thực hiện bởi dấu phẩy. Các chức năng truyền thông, như chúng ta thấy, được đặt trong dấu ngoặc đơn thông thường.

Việc đặt các thuộc tính trong truy vấn phương tiện không có bất kỳ mức độ ưu tiên nào, do đó, sẽ hợp lý hơn nếu đặt truy vấn phương tiện ở cuối tài liệu CSS hoặc tải bằng thẻ liên kết tệp CSS bên ngoài với các truy vấn phương tiện sau khi tải các kiểu trang web chính để ghi đè chính xác kiểu sau ở các độ phân giải khác nhau hoặc trên các thiết bị khác nhau.

  1. Thử sử dụng chỉ các tệp CSS được bao gồm bên ngoài. Chỉ sử dụng kiểu dáng bên trong nếu nó cần thiết cho hoạt động chính xác của trang web;
  2. Cố gắng cách điệu chỉ các lớp học. Không tạo kiểu cho số nhận dạng (đặt bằng id="hash" và viết bằng #hash). Cố gắng cách điệu các thẻ mà không có lớp học ít hơn. Ví dụ: nếu bạn tạo kiểu cho thẻ h3 và sau đó chuyên gia SEO quyết định rằng tiêu đề đó không phù hợp thì div thông thường phải có cùng thuộc tính với lớp tiêu đề và được hiển thị theo cùng một cách. Ngoài ra, bạn có thể tạo các thẻ HTML trùng lặp thành các lớp, ví dụ: .h1, .h2, .h3, .footer, .header, .aside và tạo kiểu cho chúng phù hợp;
  3. Cố gắng tạo kiểu cho các phần tử một cách độc lập nhất có thể, giảm chuỗi xếp tầng thành một khối để có ít sự phụ thuộc hơn vào các phần tử gốc. Điều này là cần thiết để tái sử dụng hiệu quả nhất các khối trên trang và sửa đổi chúng ở những vị trí khác trong bố cục. Nhưng không có sự cuồng tín. Bạn không nên chỉ định các lớp riêng biệt cho từng thẻ trong một khối trừ khi nó được sử dụng độc lập. Nếu bạn di chuyển khối đến một vị trí khác trên trang, nó vẫn xuất hiện và độc lập với khối mẹ của nó. Sử dụng một số phương pháp đặt tên lớp sẽ giúp bạn điều này. Không quan trọng đó là phương pháp BEM hay phương pháp được phát triển dựa trên kinh nghiệm cá nhân của bạn hay các quy tắc đơn giản do tôi đề xuất - điều này tốt hơn việc đặt tên các lớp một cách ngẫu nhiên và xây dựng các chuỗi lớp dài và phi logic;
  4. Cố gắng đặt tên cho các lớp thẻ dựa trên chức năng mà khối thực hiện chứ không phải nội dung nó sẽ chứa. Ví dụ: nếu bạn có một phần có các bài đánh giá ở dạng băng chuyền, bạn không nên đặt tên cho bộ chọn bằng các từ đánh giá, otzivy vân vân. Tốt hơn là nên gọi băng chuyền một lần, nếu bạn định hiển thị một mục băng chuyền trên mỗi trang. Trong tương lai, có lẽ bạn sẽ sử dụng băng chuyền này không chỉ để hiển thị các bài đánh giá mà còn sử dụng mã này, chẳng hạn để hiển thị danh sách các đồng nghiệp trong công ty. Trong trường hợp này, tên lớp đánh giá sẽ có phần không phù hợp;
  5. Sử dụng bộ tiền xử lý CSS, không có gì phức tạp về nó. Sự lựa chọn của tôi đã rơi vào bộ tiền xử lý Sass trong một thời gian khá lâu và tôi khuyên bạn nên sử dụng nó. Chúng tôi có một hướng dẫn hay, trong đó tôi cho bạn biết cách sử dụng bộ tiền xử lý dễ dàng như thế nào và nó đơn giản hóa cuộc sống của bạn như thế nào: ;
  6. Sử dụng đặt lại hoặc chuẩn hóa kiểu mặc định của trình duyệt, mang lại kiểu tiêu chuẩn cho mẫu số chung trên tất cả các trình duyệt. Tôi sử dụng nó trong các dự án của tôi Chuẩn hóa.css, là một phần của khung CSS Bootstrap;
  7. Khi bạn cảm thấy mình đang làm quá nhiều công việc lặp đi lặp lại trong quá trình bố cục, hãy chuyển sang sử dụng một số khung CSS hoặc phát triển khung CSS của riêng bạn với các phần tử được sử dụng thường xuyên nhất, điều này sẽ tăng tốc công việc của bạn. Tôi chỉ sử dụng ở nơi làm việc Lưới khởi động không có thiết kế kiểu cách của các nút, bảng điều khiển và các yếu tố khác. Điều này là khá đủ để làm việc hiệu quả. Khả năng thích ứng mặc định của lưới Bootstrap cũng rất thú vị;
  8. Hãy tự mình thử nghiệm các thuộc tính. Hãy mở sách tham khảo CSS và dùng thử. Đây là cách duy nhất để tích lũy kinh nghiệm, ghi nhớ thuộc tính nào làm gì và đưa việc viết kiểu tài liệu trở nên tự động.

Mọi người quan tâm đến công nghệ WEB đều đã nghe nói về công nghệ như CSS. Và họ có thể muốn biết những điều cơ bản về CSS để có thể thay đổi kiểu trang web hoặc trang của mình hoặc đơn giản là có thể đọc và hiểu các tệp CSS. Hôm nay chúng ta sẽ tìm hiểu những điều cơ bản về CSS.

Đầu tiên, hãy tìm hiểu CSS là gì. Như bạn đã biết HTML là một ngôn ngữ đánh dấu siêu văn bản. Và CSS lại là ngôn ngữ thiết kế trực quan cho chính cách đánh dấu này.

CSS (Cascading Style Sheets) - Cascading Style Sheets. HTML có các công cụ thiết kế trực quan riêng, nhưng về nhiều mặt, chúng kém hơn so với khả năng của CSS và ngay cả khi bạn có nhiều trang, hãy tưởng tượng, bạn đột nhiên muốn thay đổi màu của tất cả các tiêu đề, bạn sẽ phải thực hiện thay đổi đối với tất cả các tệp HTML và việc này được thực hiện bằng CSS trong một dòng. Tôi nghĩ chỉ cần lập luận này là đủ để bắt đầu học CSS.

Nhân tiện, CSS không chỉ được sử dụng để thiết kế trực quan các trang được đánh dấu bằng HTML mà còn cho các trang được viết bằng ngôn ngữ đánh dấu XHTML và cũng rất tuyệt vời để thiết kế các tài liệu XML.

Vì bạn và tôi chỉ là người mới bắt đầu nên chúng ta sẽ bắt đầu với những điều cơ bản và trong tương lai chúng ta sẽ đi sâu hơn vào công nghệ này, vì CSS là một thứ khá mạnh mẽ và đơn giản là không thể đưa mọi thứ vào một bài viết, vì vậy chúng ta sẽ chia việc nghiên cứu CSS thành nhiều bài học, dần dần đi sâu vào các biểu định kiểu xếp tầng này.

Chà, hãy chuyển sang thực hành và chúng ta sẽ bắt đầu với cú pháp đơn giản. Nó trông giống như thế này:

Phần tử thiết kế(thuộc tính:giá trị; )

Một phần tử thiết kế thường được gọi là bộ chọn, nhưng để đơn giản, tôi đã chỉ ra nó như vậy.

Để làm rõ cú pháp, đây là một ví dụ đơn giản:

P (màu: đỏ; )

  • p là thẻ đoạn văn;
  • màu sắc là một thuộc tính, tức là trong trường hợp của chúng tôi đó là màu sắc;
  • màu đỏ là giá trị, trong trường hợp của chúng tôi là màu đỏ.

Và kết quả là văn bản của bạn trong tất cả các đoạn văn sẽ chuyển sang màu đỏ.

Bây giờ chúng ta đã sắp xếp được cú pháp một chút, hãy chuyển sang phần chúng ta viết tất cả những điều này, tức là. kết nối CSS với tài liệu HTML của chúng tôi.

Các cách để bao gồm CSS

1. Trực tiếp trong chính thành phần tài liệu bằng cách sử dụng thuộc tính style, ví dụ: nếu bạn dịch ví dụ trên sang chính tài liệu đó và mô tả nó trong chính thành phần đó, nó sẽ trông như thế này:

Ví dụ

Phương pháp này không thuận tiện vì một lần nữa, nếu bạn có nhiều tài liệu, bạn sẽ phải thay đổi chúng trong tất cả các tài liệu này và trong từng thành phần.

2. Một cách thuận tiện hơn một chút là sử dụng CSS khi biểu định kiểu được mô tả trong chính tài liệu. Phần đầu sử dụng phần tử kiểu, mô tả chính biểu định kiểu đó. Ví dụ: hãy sử dụng lại ví dụ trên nhưng sử dụng phương pháp này:

Ví dụ

Kết quả sẽ giống như trên. Phương pháp này đôi khi được sử dụng nhưng vẫn không lý tưởng.

3. Phương pháp thứ ba là nhập tài liệu CSS, tôi hiếm khi thấy phương pháp này được sử dụng, có thể không ai sử dụng nhưng bạn cần biết về nó. Ở đây, biểu định kiểu đã được mô tả trong một tài liệu riêng.

Ví dụ

css-file.css là một tệp CSS chứa biểu định kiểu được mô tả, nếu nó nằm trong một thư mục khác thì bạn cần ghi đường dẫn đến tệp này.

4. Cách phổ biến nhất để sử dụng biểu định kiểu xếp tầng là đưa tệp CSS vào tài liệu của bạn. Hầu như tất cả mọi người đều sử dụng phương pháp này vì nó thuận tiện nhất. CSS được kết nối bằng thẻ liên kết trong phần tử head.

Ví dụ

css-file.css là một tệp trong đó biểu định kiểu được mô tả; một lần nữa, nếu tệp nằm trong một thư mục khác với vị trí của tài liệu thì bạn cần phải ghi đường dẫn đến nó.

Các loại bộ chọn trong CSS

Vì vậy, chúng tôi đã sắp xếp kết nối CSS, bây giờ hãy chuyển sang bộ chọn, tức là. cách tìm kiếm các thành phần tương tự này trong tài liệu của bạn, nói cách khác, nếu bạn không cần tất cả các đoạn văn có màu đỏ như trong ví dụ trên, nhưng chẳng hạn, một số đoạn văn có màu đen, trong khi những đoạn khác có màu đỏ. Trên thực tế, có chín loại, nhưng hiện tại chúng ta sẽ xem xét những loại phổ biến nhất.

Với bộ chọn phần tử ( thẻ) chúng tôi đã đáp ứng các ví dụ trên, áp dụng cho tất cả các thẻ:

P (màu: đỏ; )

p – đây là bộ chọn phần tử; có thể có hầu hết mọi thẻ tài liệu HTML, chẳng hạn như body, div, table, tr, td, h1 và nhiều thẻ khác.

Theo tôi, loại bộ chọn phổ biến nhất đang sử dụng các lớp và mã định danh. Nói cách khác, khi đánh dấu tài liệu của bạn, bạn đánh dấu các thành phần tài liệu bằng mã định danh ( là duy nhất trong toàn bộ tài liệu) hoặc mang chúng đến cùng lớp ( nó có thể được lặp lại trong tài liệu). Để làm rõ hơn, hãy đưa ra một ví dụ trong đó chúng ta sẽ có hai đoạn văn, một đoạn văn có màu đỏ và đoạn còn lại có màu đen.

Văn bản CSS sẽ như thế này:

#idred ( màu: đỏ; ) .black ( màu: đen; )

Văn bản của tài liệu sẽ như thế này:

Ví dụ về đoạn màu đỏ

Ví dụ đoạn văn màu đen

Để thực hành, hãy kết nối biểu định kiểu xếp tầng với tài liệu của bạn theo bất kỳ cách nào.

Có thể bạn đã nhận ra rằng mã định danh trong CSS được biểu thị bằng ký hiệu # (#idred) và các lớp được biểu thị bằng dấu chấm và tên lớp (.black).

Trong tài liệu HTML, chúng được chỉ định bằng cách sử dụng các thẻ thích hợp: id cho mã định danh và lớp cho các lớp.

Ngoài ra còn có các bộ chọn thuộc tính, ví dụ: nếu bạn muốn một liên kết cụ thể được hiển thị ở dạng bạn cần, trong khi tất cả các liên kết khác không thay đổi thì bạn có thể sử dụng bộ chọn thuộc tính.

văn bản CSS:

Văn bản tài liệu HTML:

Bây giờ chúng ta hãy xem xét một loại bộ chọn phổ biến khác: bộ chọn con cháu. Nói cách khác, bạn chỉ ra rằng phần tử, mã định danh hoặc lớp này có các phần tử con này, tức là nó nằm trong phần tử này hoặc phần tử khác, ví dụ, có một hoặc một id hoặc lớp khác. Ví dụ:

văn bản CSS:

P ( màu: đỏ; ) div p ( màu: xanh lá cây; )

Văn bản tài liệu HTML:

Ví dụ về đoạn màu đỏ

Ví dụ về đoạn văn có phần tử div con

Ở đây bạn có thể thấy đoạn văn nằm trong phần tử div đã chuyển sang màu xanh lục và tất cả các đoạn văn không nằm trong phần tử div sẽ chuyển sang màu đỏ.

Cần lưu ý rằng con cháu cần được chọn từ phải sang trái, ví dụ đầu tiên chúng ta có con cháu (div), sau đó phần tử mong muốn (p) mới xuất hiện.

Như bạn có thể thấy, hôm nay chúng ta chỉ sử dụng hai thuộc tính: cỡ chữ và màu sắc. Trên thực tế, có rất nhiều thuộc tính đó, vì vậy tôi nghĩ hôm nay thế là đủ rồi, trong các bài học tiếp theo chúng ta sẽ tiếp tục xem xét các thuộc tính khác và hơn thế nữa! Trong thời gian chờ đợi, tôi khuyên bạn nên đọc một cuốn sách về CSS dành cho người mới bắt đầu, cuốn sách này mô tả chi tiết hơn tất cả các tính năng của CSS và cách sử dụng chúng trong thực tế.

Tôi hy vọng bạn đã bắt đầu hiểu ít nhất một chút bản chất của những điều này. CSS bảng định kiểu xếp tầng. Sẽ có nhiều bài học khó khăn hơn trong tương lai! Để đảm bảo rằng CSS là một thứ rất thú vị, đây là một ví dụ về một trang web ẩm thực, trong đó menu chính chỉ được triển khai bằng HTML và CSS mà không có bất kỳ tập lệnh java nào. Tôi hy vọng chúng ta cũng sẽ học cách làm điều này trong tương lai.

Công nghệ CSSđược sử dụng chủ yếu bởi các nhà thiết kế vì họ là những người tạo ra thiết kế trang web. Tuy nhiên, thật sai lầm khi tin rằng các quản trị viên web CSS không cần biết. Chỉ cần nhớ lại ít nhất một ví dụ từ phần mô tả của phần trên là đủ. Ngoài tính di động của trang web, biểu định kiểu cho phép bạn tạo nhiều giải pháp thiết kế cổ điển khác nhau (ví dụ: menu thả xuống). Và cùng với chúng cho phép bạn tạo động trang HTML (DHTML), vẻ đẹp và sự tiện lợi của chúng đôi khi thật đáng kinh ngạc.

Tất nhiên, để tạo ra được những thứ như vậy bạn cần phải làm quen với Khái niệm cơ bản về CSS. Và danh mục này của trang web sẽ giúp bạn thực hiện việc này một cách nhanh chóng và hiệu quả nhất có thể.

Hoàn thành khóa học về Bố cục trang web, HTML, CSS và trang web:

Sau khi đọc các bài viết về CSS cơ bản, bạn sẽ học:

1) Cú pháp CSS.

2) Phương pháp và mức độ ưu tiên của nhiệm vụ kiểu CSS.

3) Các loại bộ chọn trong CSS.

4) CSS Hack trình duyệt.

5) Quy tắc viết CSS.

6) Cách tạo chú giải công cụ trên CSS.

7) Cách thay đổi hình thức của chữ cái đầu tiên thông qua CSS.

8) Cách đặt loại con trỏ qua CSS.

9) Cách thay đổi hình thức con trỏ khi di chuột bằng cách sử dụng CSS.

10) Cách tạo menu con trên CSS.

11) Về việc thay thế tài sản chiều rộng tối thiểu V. IE6.

12) Về tính hợp lệ CSS.

13) Cách đặt màu của các liên kết đã truy cập.

14) Cách thụt lề một đoạn văn bằng cách sử dụng CSS.

15) Cách làm tròn các góc CSS.

16) Cách đưa hình ảnh của bạn vào thay vì điểm đánh dấu danh sách CSS.

17) Cách làm nền cho một bức tranh.

18) Cách làm tối nền trên CSS.

19) Bộ chọn con trong CSS.

20) Đơn vị đo lường nào có sẵn trong CSS.

21) Cách tạo cửa sổ bật lên với tính năng làm mờ.

22) Cách tạo nền động.

23) Cách tạo trường văn bản đẹp.

24) Cách thay đổi hình ảnh khi bạn di con trỏ chuột lên nó.

25) Các phần tử giả trong CSS.

26) Nó là gì CSS sprite.

27) Cách nhấn footer (chân trang) xuống dưới cùng thông qua CSS.

28) Cách ngăn chặn việc thay đổi kích thước vùng văn bản bởi vì CSS.

29) Cách vẽ hình tam giác qua CSS.

30) Cách xử lý một sự kiện nhấp chuột bởi vì CSS.

31) Cách đặt con trỏ qua CSS.

32) Cách tạo menu thả ngang trên CSS.

33) Cách sử dụng phông chữ không chuẩn trên trang web.

34) Cách thay đổi hình nền của nút radio thông qua CSS.

35) Tôi có thể sử dụng được không CSS3.

36) Cách tạo bóng trên CSS.

37) Cách đặt thuộc tính đệm lót di động Và không gian ô TRÊN CSS.

38) Cách làm div có chiều cao 100%.

39) Về khả năng tương thích chỉ số z và người chơi Youtube.

40) Tại sao sử dụng lại không tốt -moz, -bệnh đa xơ cứng, -webkit và các tài sản khác.

41) Có đáng sử dụng không Đặt lại CSS.

42) Cách căn chỉnh điểm đánh dấu danh sách theo chiều dọc.

43) Cách tạo một phiên bản có thể in được.

44) Cách tạo độ trong suốt của nhiều trình duyệt trên CSS.

45) Nó là gì sửa lỗi rõ ràng.

46) Cách hủy một phần trôi nổi.

47) Cách tạo bố cục hai cột với chiều cao cột bằng nhau.

48) Bố cục thích ứng là gì.

49) Truy vấn phương tiện trong CSS.

50) Nó là gì ít hơn.

51) Cách thực hiện Hiệu ứng góc con chó trong CSS.

52) Cách thực hiện chân trang trang web "dính" đáp ứng.

53) Cách sử dụng API phông chữ của Google.

54) Cách sử dụng dịch vụ Dụng cụ sống.

55) Cách cho phép hoặc vô hiệu hóa lựa chọn văn bản TRÊN CSS.

56) Cách thay đổi giao diện của một phần tử thành tiêu chuẩn bằng cách sử dụng thuộc tính vẻ bề ngoài V. CSS.

57) Tại sao cần thiết Thuộc tính ngắt trang bên trong V. CSS.

58) Làm thế nào khối chiều rộng có thể thay đổi căn giữa TRÊN CSS.

59) Cách thực hiện hình tam giác trong CSS thuần túy.

60) Dịch vụ bởi tạo hình tam giác CSS.

61) Cách đẩy footer xuống cuối trang(định vị).

62) Cách đẩy footer xuống cuối trang(phương pháp bảng).

63) Học tập Sass. Cài đặt và cấu hình.

64) Cách ẩn một phần tử trên một trang TRÊN CSS.

65) Học tập Sass. Khái niệm cơ bản.

66) Khi nào nên sử dụng đặt lại.css Và chuẩn hóa.css.

67) Dịch vụ hình ảnh với sự mạnh mẽ API.

68) Cách thực hiện Hiệu ứng phóng to hình ảnh CSS.

69) gấu túi- tổng hợp nhanh hỗn xược các tập tin.

70) Cách thêm bộ lọc ảnh bằng CSS.

71) Học tập Sass. Cá mút đá.

72) Học tập Sass. Các hoạt động toán học.

73) Hoạt hình biểu tượng menu trong Sass.

74) Học tập Sass. Chức năng.

75) Nó là gì vậy PostCSS.

76) Cách cài đặt và cấu hình PostCSS.

77) Cách thực hiện khả năng đánh giá về CSS.

78) Học tập Sass. Phong cách viết mã.

79) Học tập Sass. Mở rộng bộ chọn gốc.

80) 10 hữu ích Hỗn hợp SASS.

81) Cách thực hiện Giới thiệu phong cách Star Wars bằng CSS.

82) Khởi động 4. Giới thiệu.

83) Khởi động 4. Cài đặt.

84) Khởi động 4. Khởi động lại.

85) Khởi động 4. Vùng chứa và các điểm chính.

86) Khởi động 4. Hệ thống lưới điện.

87) Khởi động 4. Thuộc tính linh hoạt của lưới.

88) 5 đổi mới nào sẽ xuất hiện trong CSS4.

89) Khởi động 4. Jumbotron là gì?

90) Khởi động 4. Tiện ích và kiểu chữ.

91) Khởi động 4. Thành phần thẻ

92) Sự khác biệt giữa lớp học Và nhận dạng sử dụng thẻ làm ví dụ div.

93) Yếu tố không thành công thiết kế web, không nên sử dụng.

94) Khởi động 4. Cửa sổ phương thức.

95) Ồ sự ưu tiên Và di sản V. CSS về thực hành

96) Cách bố trí bố cục PSD bằng cách sử dụng Lưới khởi động. Phần 1.

97) Cách bố trí bố cục PSD bằng cách sử dụng Lưới khởi động. Phần 2.

98) Cách sử dụng các phần tử giả sau và trước trong CSS.

99) Về tính năng chiều rộng và chiều cao khối trong CSS.

100) Các phần tử giả sau và lớp giả con cuối cùng.

101) Cách hiển thị một trang web trên nhiều thiết bị khác nhau.

102) Bố cục trên lưới Khởi động(phần 1)

103) Bố cục trên lưới Khởi động(phần 2)

104) Bố cục trên lưới Khởi động(phần 3)

105) Bố cục trên lưới Khởi động(phần 4)

Trở lại năm 2011, khi tôi đang học lớp 8, giáo viên khoa học máy tính và giáo viên chủ nhiệm của tôi đã kết hợp 4 game thủ đam mê, trong đó có bạn thật sự. Cô ấy đã tập hợp chúng tôi lại để dạy chúng tôi cách tạo trang web và đó là lần đầu tiên tôi làm quen với cả hai và những điều cơ bản về CSS mà bạn sẽ tìm hiểu ngay bây giờ.

CSS (Cascading Style Sheets, dịch là “cascading style sheet”) là ngôn ngữ dùng để kiểm soát sự xuất hiện của tài liệu HTML (các trang web). Những gì bạn nhìn thấy hàng ngày trong cửa sổ trình duyệt được tạo bởi các biểu định kiểu xếp tầng: màu nền của các thành phần trang web khác nhau được đặt bởi các thuộc tính CSS đặc biệt; văn bản được viết bằng phông chữ nào được chỉ định bởi các thuộc tính CSS đặc biệt; mọi thứ bạn thấy bây giờ khi đọc hướng dẫn này đều được thiết lập bởi các thuộc tính CSS.

Tôi sẽ nói ngay với bạn rằng bài học sẽ chỉ có những phong cách cơ bản nhất dành cho người mới bắt đầu. Hôm nay sẽ không có buổi tập nào, tôi muốn thảo luận vấn đề này trong một bài riêng.

Bộ chọn CSS

Một biểu định kiểu CSS bao gồm các quy tắc kiểu và các quy tắc lần lượt bao gồm hai thành phần:

  1. Bộ chọn;
  2. Khối quảng cáo.

Khối khai báo bao gồm: một thuộc tính và giá trị của thuộc tính, nhưng sẽ nói thêm về điều đó sau.

Bây giờ chúng ta hãy xem xét kỹ hơn về bộ chọn. Có một số loại:

  • Bộ chọn thẻ. Bộ chọn là thẻ HTML mà quy tắc kiểu sẽ được áp dụng; div(chiều rộng:100px; chiều cao:100px)
  • Bộ chọn lớp. Bộ chọn là lớp phần tử được chỉ định trong tài liệu HTML. Một dấu chấm được đặt trước tên lớp; .block(chiều rộng:100px; chiều cao:100px)
  • Bộ chọn ID. Bộ chọn là ID phần tử được chỉ định trong tài liệu HTML. Tên định danh được đặt trước bởi dấu thăng (#). #block(chiều rộng:100px; chiều cao:100px)

Trên thực tế, còn rất nhiều bộ chọn khác, nhưng chúng tôi sẽ không đi sâu hơn vì cơ sở của tất cả các bộ chọn khác là những bộ chọn được liệt kê ở trên.

Tôi sẽ không nói về việc thiết kế các quy tắc CSS; hình ảnh trên sẽ cho bạn biết mọi thứ.

Tất cả các quy tắc kiểu CSS đều có trong tệp style.css. Tìm nó.

Thuộc tính và giá trị CSS

Một quy tắc CSS có thể chỉ định một số thuộc tính và giá trị của chúng. Chúng được liệt kê bằng dấu chấm phẩy (;):

Khối(chiều rộng:100px; chiều cao:100px; nền:#fff)

Để làm cho thông tin dễ nhận biết hơn, tôi sẽ liệt kê các thuộc tính theo mục đích của chúng, nghĩa là đối với nền - riêng biệt, đối với văn bản - riêng biệt, v.v.

Hãy bắt đầu với nền.

Lý lịch

Có một số thuộc tính để kiểm soát nền của một trang web hoặc một thành phần riêng lẻ.

lý lịch– thuộc tính chính của nền, trong đó bạn có thể thiết lập tối đa năm đặc điểm (giá trị): màu sắc, hình ảnh, nền có cuộn hay không cùng với thao tác cuộn (cuộn), kiểm soát sự lặp lại của hình nền, vị trí ban đầu của hình nền. Tất cả những đặc điểm này cũng chịu trách nhiệm cho các thuộc tính riêng lẻ, được liệt kê dưới đây;

lý lịch: địa chỉ( hình ảnh/hand.png ) lặp lại-y #fc0; /* Màu nền, đường dẫn ảnh nền, lặp lại nền dọc */
  • hình nền– đặt hình nền của trang web hoặc thành phần. Giá trị: url (đường dẫn tới tệp) | không có (hủy hình nền) | kế thừa (kế thừa giá trị cha). Ví dụ: hình ảnh nền: url(images/hand.png);
  • Bối cảnh Lặp lại– kiểm soát sự lặp lại của hình nền của một trang web hoặc thành phần. Giá trị:
    • không lặp lại (không lặp lại hình nền);
    • lặp lại (lặp lại hình ảnh);
    • lặp lại-x (lặp lại hình ảnh theo chiều ngang);
    • lặp lại-y (lặp lại hình ảnh theo chiều dọc);
    • kế thừa (kế thừa hình ảnh gốc). backround-repeat: không lặp lại;
  • vị trí nền- kiểm soát vị trí của hình nền. Giá trị:
    • trái (trái);
    • đúng đúng);
    • trung tâm (trung tâm);
    • hàng đầu (lên);
    • phía dưới (xuống). vị trí nền: trái;
  • màu nền– kiểm soát màu nền của một trang web hoặc một phần tử riêng lẻ. Giá trị: Giá trị mã của một màu cụ thể. Bạn có thể tìm thấy nó bằng các dịch vụ trực tuyến đặc biệt (ColorScheme). màu nền: #fff; /*Màu nền trắng*/

Thuộc tính CSS chính đầu tiên đã được thảo luận.

Nét chữ

Có một số thuộc tính để kiểm soát sự xuất hiện của văn bản cũng như nền.

  • nét chữ– thuộc tính chính của phông chữ. Có thể kết hợp nhiều đặc điểm;
  • cỡ chữ- cỡ chữ. Được chỉ định theo tỷ lệ phần trăm, pixel (phổ biến hơn), điểm (pt); cỡ chữ: 14px;
  • độ dày phông chữ- độ dày của phông chữ. Giá trị:
    • đậm – nửa đậm;
    • phong cách bình thường – bình thường. độ dày phông chữ: đậm;
  • họ phông chữ– cho biết họ phông chữ. Giá trị là tên của họ phông chữ; họ phông chữ: Tác động;
  • kiểu phông chữ– Thuộc tính này chỉ định kiểu phông chữ. Giá trị: bình thường (kiểu thông thường) và in nghiêng (nghiêng); kiểu chữ: in nghiêng;

Thuộc tính văn bản

Một trong những điều cơ bản của CSS là quản lý các thuộc tính của văn bản: căn chỉnh, màu sắc, chiều cao dòng, khoảng cách giữa các chữ cái.

  • căn chỉnh văn bản- căn chỉnh văn bản theo chiều ngang. Giá trị: căn đều (chiều rộng), center (giữa), left (cạnh trái), right (cạnh phải) text-align: left;
  • màu sắc- văn bản màu. Giá trị mã của màu được sử dụng làm giá trị, bạn cũng có thể sử dụng các giá trị văn bản tiếng Anh (đỏ, trắng, đen): màu đỏ;
  • chiều cao giữa các dòng- chiều cao giữa các dòng. Làm giá trị, bạn có thể sử dụng cả pixel (px) và tỷ lệ phần trăm (%), cũng như hệ số nhân đặc biệt (khoảng cách 1,5 - một dòng rưỡi) chiều cao dòng: 1,5;
  • khoảng cách chữ- khoảng cách giữa các ký tự. Giá trị có thể được đặt bằng pixel và khoảng cách chữ cái bình thường (khoảng cách bình thường): 3px;

Căn chỉnh phần tử

Bạn có thể căn chỉnh bất kỳ thành phần trang web nào sang phải hoặc trái bằng cách sử dụng một thuộc tính kiểu - trôi nổi. Giá trị: left (căn lề trái), right (căn lề phải).

Phao: trái;

Đóng khung phần tử

Sử dụng thuộc tính style “ ranh giới” bạn có thể đặt khung và đường viền hiển thị. Bạn có thể chỉ định một số giá trị: độ dày đường viền (px, %), màu đường viền (giá trị mã màu), kiểu đường viền. Các giá trị kiểu đường viền xác định diện mạo của nó:

Bạn cũng có thể đặt đường viền cho từng mặt của phần tử bằng các thuộc tính sau:

  • viền dưới– đường viền dưới cùng của phần tử;
  • đường viền trên cùng– đường viền trên của phần tử;
  • biên giới bên phải– đường viền bên phải của phần tử;
  • biên giới bên trái– đường viền ở phía bên trái của phần tử.

Các giá trị ở trên được đặt hoàn toàn giống như đối với thuộc tính chính.

Đường viền: 1px liền khối #000;

Thụt lề

Lề giữa các phần tử được chỉ định bởi thuộc tính “margin”.

  • lề– thiết lập mức thụt lề của phần tử ở mỗi bên. Có thể chứa nhiều giá trị được chỉ định bằng pixel hoặc phần trăm; lề: 5px (lề trên) 5px (lề phải) 5px (lề dưới) 5px (lề trái);
  • lề trái- vết lõm ở phía bên trái;
  • lề phải- vết lõm ở phía bên phải;
  • lề trên– thụt lề trên cùng;
  • lề dưới– thụt lề phía dưới.

Lề xung quanh một phần tử

Lề xung quanh một phần tử được đặt bởi “ phần đệm“. Nó được chỉ định giống như lề và có các thuộc tính đặt lề ở một bên: phần đệm bên trái, đệm-phải, phần đệm trên cùng, phần đệm dưới cùng.

Phần đệm: 10px 10px 10px 10px;

Kích thước mục

Bạn có thể đặt chiều cao và chiều rộng của một phần tử bằng cách sử dụng thuộc tính “width” và “height”. Các giá trị là giá trị số tính bằng pixel hoặc phần trăm. Bạn cũng có thể đặt giá trị tối đa và tối thiểu có thể cho chiều rộng và chiều cao của một phần tử bằng cách sử dụng các thuộc tính: max-width, min-width, max-height, min-height.

Chiều rộng: 100px; chiều cao: 200px;

Như vậy là chúng ta đã đề cập đến những điều cơ bản về CSS. Bản thân tôi chỉ biết những gì tôi liệt kê ở trên nên đừng phán xét khắt khe.

Như bạn có thể thấy, với sự trợ giúp của các biểu định kiểu CSS xếp tầng, bạn có thể làm bất cứ điều gì bạn muốn với các thành phần trang web và đây không phải là tất cả các thuộc tính, có rất nhiều thuộc tính trong số đó. Nếu bạn muốn nghiên cứu các thuộc tính CSS chi tiết hơn, hãy sử dụng sách tham khảo từ HTMLbook.

Tôi hy vọng rằng tôi đã dành vài giờ để viết tài liệu này không phải là vô ích.

Ngày mai chúng ta sẽ thực hành trên trình soạn thảo Notepad++, hãy chuẩn bị sẵn sàng.

Cho đến ngày mai!

bài báo trước
Bài viết tiếp theo