Hãy đưa ra một ví dụ về biểu định kiểu - tạo một tệp phong cách.css và viết các phong cách:

body ( họ phông chữ: Arial, Verdana, Sans-serif; /* Họ phông chữ */ cỡ chữ: 12pt; /* Cỡ chữ chính theo điểm */ màu nền: #f0f0f0; /* Màu nền trang web * / color: #000000; /* Màu nội dung văn bản */ ) h1 ( color: #a52a2a; /* Màu tiêu đề */ cỡ chữ: 24pt; /* Cỡ chữ theo điểm */ họ phông chữ: Georgia, Times, serif ; /* Họ phông chữ */ font-weight: normal; /* Kiểu văn bản thông thường */ )

Ở đây chúng tôi đã đặt kiểu cho nội dung trang và cho tiêu đề

. Bạn cũng có thể đặt các kiểu cụ thể cho bất kỳ thành phần trang nào khác trên trang web của mình.

Bây giờ hãy kết nối style sheet của chúng ta với trang web:

Xin chào thế giới!

Đây là trang đầu tiên của tôi có kiểu CSS

Vì vậy chúng tôi đã tìm ra nó CSS là gì,Để làm gì công nghệ nàyđã sử dụng, đã học cách kết nối các phong cách với trang web. Bài học này là một dạng giới thiệu về các biểu định kiểu xếp tầng. Trong các bài học khác chúng ta sẽ nói về công nghệ CSS chi tiết hơn.

Phần này của trang web hoàn toàn dành cho hai ngôn ngữ để tạo trang web, đó là HTML và CSS. Tại đây bạn có thể học ngôn ngữ từng bước, học mọi thứ từ những điều cơ bản cho đến những thời điểm khó khăn nhất.

Phần này được xây dựng trên nguyên tắc nghiên cứu từng bước nội dung nên trước mỗi tựa đề bài học về HTML và CSS đều có số tương ứng. số seri bài học. Điều này là tự nhiên nếu bạn muốn học mọi thứ từ những điều cơ bản nhất và không khiến đầu óc mình trở nên lộn xộn. Nếu bạn đã biết đôi điều về ngôn ngữ HTML và CSS thì bạn cũng có thể tìm thấy ở đây những kiến ​​thức bạn còn thiếu hoặc đào sâu hơn những gì bạn đã học.

Phần này chứa các bài học về tiêu chuẩn ngôn ngữ HTML5 và CSS3, tương ứng, nếu có bất kỳ phiên bản mới hơn nào của các ngôn ngữ này, chúng cũng sẽ được phản ánh trong các bài học mới trong phần này và bạn chắc chắn sẽ tìm ra.

Có lẽ mỗi người đã từng tạo một trang web ít nhất một lần trong đời chắc chắn đã nghe nói về sự kết hợp như html và css, tôi có thể tự tin nói rằng nếu bạn muốn tự làm trang web thì bạn không thể làm gì nếu không có kiến ​​thức về những điều này. hai điều.

Sau khi bạn đã nhận được khái niệm chung Rõ ràng có một hình ảnh mơ hồ trong đầu bạn về html là gì và tôi nghĩ điều này không có gì đáng ngạc nhiên. Đã đến lúc chuyển thẳng sang thực hành và tạo tài liệu HTML đầu tiên của bạn.

Như trong ngôn ngữ html và CSS có những đặc điểm, quy tắc và cấu trúc riêng. Trong bài học này tôi sẽ cho bạn biết về các khái niệm cơ bản ngôn ngữ CSS, về cấu trúc, thiết bị của nó và chúng tôi sẽ cùng bạn thực hiện phần đầu tiên bảng CSS style và tìm hiểu cách kết nối biểu định kiểu với tài liệu html.

Bộ chọn trong CSS là nền tảng của ngôn ngữ và việc học cũng như hiểu chúng là rất quan trọng, vì vậy trong bài học này tôi sẽ cho bạn biết thêm về một số loại bộ chọn khác và mô tả khả năng của chúng.

Rất điểm quan trọng Khi tạo một trang web, bạn cần phải làm việc với văn bản và như bạn hiểu, bạn cũng cần có khả năng làm việc với văn bản trong html và biết có những thẻ nào cũng như cách sử dụng chúng.

Sau khi bạn đã tìm ra mọi thứ thẻ htmlĐể làm việc với văn bản, giờ là lúc chuyển trực tiếp sang CSS làm việc với văn bản, điều này sẽ mở rộng đáng kể kiến ​​thức và khả năng của bạn.

Trong CSS số tiền khổng lồ tất cả các loại thuộc tính ngoại hình thuận tiện và thay đổi chất lượng và chúng tôi tiếp tục nghiên cứu công việc CSS với văn bản và trong bài học này chúng ta sẽ đi sâu vào chủ đề làm việc với văn bản và xem xét các thuộc tính mới của văn bản.

Làm việc với hình ảnh khi tạo từ một trang web, một trong những điểm mấu chốt, cả khi tạo thiết kế cũng như khi chỉ đơn giản bố trí hoặc viết bất kỳ tài liệu nào cho trang web của bạn.

CSS mở rộng đáng kể khả năng làm việc với bất kỳ đối tượng html nào; trong bài học này tôi muốn cho bạn biết chi tiết về các tham số có thể áp dụng cho hình ảnh.

Xin chào các độc giả thân mến của dự án Anatomy of Business. Quản trị viên web Alexander đồng hành cùng bạn! Trong bài viết trước, chúng ta đã xem xét các kiểu CSS là gì và tầm quan trọng của chúng trong lập trình WEB.

Rõ ràng là nếu các kiểu CSS có tác động đáng kể đến việc hiển thị tệp HTML thì chúng phải được kết nối bằng cách nào đó. Hôm nay chúng ta sẽ xem xét bốn cách chính để kết nối phong cách CSS với HTML.

Chúng ta đừng trì hoãn vấn đề hộp dài và hãy bắt đầu!

Bao gồm một tệp CSS riêng biệt!

Một trong những tiện lợi nhất và những cách đơn giản kết nối các kiểu đang kết nối một tệp riêng biệt với các kiểu. Để làm điều này bạn cần sử dụng soạn thảo văn bản notepad++ (hoặc bất kỳ tệp nào khác) tạo một tệp có phần mở rộng .css và đặt nó vào cùng thư mục với tệp mà chúng tôi muốn đặt nó.

Sau đó, trong tệp HTML giữa các thẻ đăng đoạn mã sau:

Bây giờ chúng ta hãy xem điều này có nghĩa là gì:

Link # dịch từ tiếng Anh có nghĩa là “liên kết”. Bằng cách này, chúng tôi hiển thị cho trình duyệt những gì chúng tôi sẽ làm tiếp theo chúng ta sẽ nói chuyện về liên kết. rel= # với thuộc tính này, chúng tôi hiển thị cách tệp CSS liên quan đến tệp HTML. "biểu định kiểu" # cụ thể là tệp CSS là biểu định kiểu xếp tầng. type="text/css" # ở đây mọi thứ đều đơn giản: đây là dấu hiệu cho thấy tệp được ghi bằng định dạng văn bản và có phần mở rộng .css href="style.css" # đây là liên kết đến một tệp có kiểu CSS.

Theo tôi, đây là cách ưa thích nhất để đưa các kiểu CSS vào.

Chúng tôi viết kiểu trực tiếp trong tệp HTML (phương pháp đầu tiên)

Cách tiếp theo để chỉ định kiểu CSS là viết chúng trực tiếp vào tài liệu HTML. Nó trông như thế này:

Nếu chúng ta xem tài liệu HTML này sẽ được hiển thị như thế nào trong trình duyệt, chúng ta sẽ thấy rằng văn bản giữa các thẻ chuyển sang màu đỏ. Và bằng cách sử dụng thuộc tính style, chúng ta nói rằng tiếp theo chúng ta có các tham số kiểu hiển thị. Màu sắc là một bộ chọn chịu trách nhiệm về màu sắc. Màu đỏ là giá trị của bộ chọn này. Bằng cách này chúng ta có thể làm nổi bật một loại nhất định hiển thị một số phần riêng lẻ của văn bản.

Đặt các biểu định kiểu xếp tầng bên trong HTML (phương pháp thứ hai)

Một cách khác để bao gồm các kiểu CSS là đặt bảng xếp tầng bên trong chính nó tập tin HTML. Theo tôi, phương pháp này không phải là thuận tiện nhất, vì sử dụng nó, việc phân tích mã trang web trở nên không thuận tiện lắm. Để bắt đầu viết kiểu CSS, bạn chỉ cần chèn thẻ vào file HTML . Trong thực tế nó trông như thế này:

Đây là một ví dụ: hiển thị các kiểu CSS trong tài liệu HTML

Xin lưu ý rằng bên trong thẻ chúng tôi cũng viết mã theo Quy tắc CSS sử dụng niềng răng. Trong các bài viết tiếp theo tôi sẽ nói chi tiết hơn về các quy tắc cú pháp trong CSS.

Kết nối nhiều tệp CSS với một tài liệu HTML.

Quy tắc HTML cho phép đưa nhiều tệp CSS cùng một lúc. Nhiều quản trị viên web sử dụng cách này: họ tạo các tệp CSS riêng cho văn bản và hình ảnh. Hoặc tập tin riêng biệt cho đầu trang, chân trang và nội dung chính của trang. Hãy cùng tìm hiểu cách thực hiện điều này.

Chúng tôi đang tạo một số tệp kiểu CSS. Đặt tên của chúng là style-1.css và style-2.css. Chúng tôi đặt nó, như trong phương pháp số một, trong cùng thư mục với tệp HTML.

Đây là một ví dụ: hiển thị các kiểu CSS trong tài liệu HTML

Mọi thứ đều tương tự như phương pháp đầu tiên, chỉ ở trong trường hợp này chúng tôi cung cấp liên kết đến hai tập tin cùng một lúc.

Liên kết file CSS bên trong tới một file cùng loại.

Ngoại trừ tất cả mọi người ở trên các phương pháp được liệt kê, có một cách cho phép bạn liên kết với nhiều người khác trong một tệp CSS!

Điều này được thực hiện như sau:
Trước tiên, chúng tôi cần kết nối ít nhất một tệp CSS với mã của bạn theo cách tương tự.

Thứ hai, nhập đoạn mã sau vào tệp đã được kết nối:

@import url("style-2.css");

Dòng này kết nối với tập tin của chúng tôi tập tin bổ sung CSS. Nếu bạn có bất kỳ khó khăn nào với kết nối CSS, bạn có thể hỏi họ trong phần bình luận.
Như chúng ta đã học ở hai bài trước, Công nghệ CSS là công cụ mạnh mẽ nhất, điều mà mọi quản trị viên web nên nắm vững! Để cải thiện khả năng tiếp thu tài liệu, tôi quyết định thêm video đào tạo + bài kiểm tra vào cuối mỗi bài học để củng cố thông tin nhận được.

Kiểm tra cố định vật liệu:

Chúng ta cần đưa tệp CSS vào bằng cách đặt liên kết tới tệp đó trong tệp HTML. Phương pháp nào sau đây là đúng?

Tùy chọn 1:

Tùy chọn 2:

Tùy chọn 3:

Lựa chọn 4:

Chúng tôi có thể đặt các tầng CSS trực tiếp vào tệp HTML không?