Hướng dẫn what should i save a css file as? - tôi nên lưu tệp css dưới dạng gì?

Hôm nay chúng tôi sẽ viết và lưu tệp CSS đầu tiên của chúng tôi. Hãy bắt đầu bằng cách mở một chương trình chỉnh sửa văn bản. Nếu bạn đang ở trên PC Microsoft Windows, hãy mở chương trình có tên Notepad (giữ phím Windows trên bàn phím của bạn và nhấn R, sau đó nhập Notepad và nhấn Enter). Nếu bạn đang sử dụng máy tính Macintosh, hãy khởi chạy ứng dụng có tên là Tex Textedit (có thể tìm thấy trong thư mục ứng dụng của bạn).notepad and press enter). If you are using a Macintosh computer, launch the application named “TextEdit” (which can be found in your Apps folder).

Nội dung chính Show

Hãy để viết bit CSS đầu tiên của chúng tôi
Bước 1: Lưu tệp CSS
Liên kết tệp CSS với trang HTML
Liên kết hai tệp với nhau
Hãy tạo kiểu cho hai hộp đó
Hộp ưa thích mới của chúng tôi
Yay cho phong cách
Làm cách nào để tạo tệp CSS?
Giống như cách chúng tôi đã tạo một tệp văn bản riêng cho HTML, bạn sẽ tạo một tệp văn bản cho CSS. Nếu bạn cần hình ảnh cho quá trình này, vui lòng xem hướng dẫn đầu tiên. Dưới đây là các bước để tạo bảng kiểu CSS của bạn trong Notepad:
Khắc phục lề trang
Thay đổi phông chữ trên trang
Làm cho liên kết của bạn thú vị hơn
Tạo kiểu cho phần điều hướng
Định vị phần chính
Tạo kiểu cho đoạn văn của bạn
Vì tôi đã đặt phông chữ đoạn ở trên, tôi muốn cung cấp cho mỗi đoạn một "cú đá" thêm một chút để làm cho nó nổi bật hơn. Tôi đã làm điều này bằng cách đặt một đường viền lên đỉnh làm nổi bật đoạn văn không chỉ là hình ảnh.
Vì tôi đã đặt phông chữ đoạn ở trên, tôi muốn cung cấp cho mỗi đoạn một "cú đá" thêm một chút để làm cho nó nổi bật hơn. Tôi đã làm điều này bằng cách đặt một đường viền lên đỉnh làm nổi bật đoạn văn không chỉ là hình ảnh.
Tôi nên lưu CSS là gì?
Loại tệp cho CSS là gì?
Tôi nên đặt tệp CSS của mình ở đâu?
Làm cách nào để tạo tệp CSS?

Hãy để viết bit CSS đầu tiên của chúng tôi

Hãy để tưởng tượng chúng tôi có một trang web đơn giản với tiêu đề và chúng tôi muốn tiêu đề là màu cam và trung tâm được căn chỉnh. Thêm mã sau vào tài liệu văn bản trống mới của bạn:

h2 {
color: orange;
text-align: center;
}

Hy vọng, bạn nhớ mã này từ bài học trước của chúng tôi. Nhiệm vụ cho ngày hôm nay là lưu tệp CSS của chúng tôi và liên kết nó với trang HTML.

Bước 1: Lưu tệp CSS

Tạo một thư mục mới trên máy tính để bàn của bạn (hoặc một vị trí khác bạn thích) và đặt tên cho nó là CSS-TEST. Bây giờ, trở lại trong chương trình chỉnh sửa văn bản của bạn lưu tài liệu của bạn dưới dạng kiểu phong cách.css.CSS-Test. Now, back in your text editing program save your document as “style.css”.

Liên kết tệp CSS với trang HTML

Tệp CSS mới của chúng tôi là vô giá trị nếu chúng tôi không áp dụng nó cho một trang web. Hãy để tạo một trang HTML nhanh cho bài học này. Tạo một tệp trống mới trong Notepad (hoặc Textedit) và thêm mã sau:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>CSS-Test</title>
</head>
<body>

<h2>CSS-Test</h2>

<div id="box-one">
<p>This is box one.</p>
</div>

<div id="box-two">
<p>This is box two.</p>
</div>

</body>
</html>

Nếu bạn đã đọc một vài bài học HTML đầu tiên của tôi, thì mã này ít nhất là hơi quen thuộc. Tôi sẽ giải thích nó khi bài học tiếp tục; Hiện tại hãy lưu tài liệu này trong thư mục CSS-Test của chúng tôi và đặt tên cho nó là chỉ mục.htm.

Liên kết hai tệp với nhau

Chúng tôi vẫn cần nói với trình duyệt web để tải tệp của chúng tôi.CSS của chúng tôi khi trang Index index.htm được xem. Thêm mã sau vào chỉ mục.htm, trực tiếp trên thẻ đóng của chúng tôi:

<link rel="stylesheet" href="style.css">

Dòng mã này nói với trình duyệt của chúng tôi rằng chúng tôi muốn liên kết một bảng kiểu, rằng nó nằm trong cùng một thư mục với trang HTML của chúng tôi và nó có tên là Style Style.css.

Bây giờ, khi bạn xem trang Index index.htm trong một trình duyệt web, bạn sẽ thấy một tiêu đề màu cam ở giữa:

Hãy tạo kiểu cho hai hộp đó

Nếu bạn nhìn vào mã của trang HTML của chúng tôi, bạn sẽ thấy hai yếu tố. Chúng tôi đã thêm một thuộc tính HTML của ID ID, cho hai yếu tố này và gán cho chúng các giá trị của hộp Box-One và Box Box-Two. Chúng ta có thể sử dụng một yếu tố id id id để chọn và tạo kiểu cho CSS. Ví dụ, hãy để Lôi làm cho hộp đầu tiên màu xám và hộp thứ hai màu vàng. Thêm mã sau vào tệp CSS của bạn, ngay bên dưới quy tắc ban đầu của chúng tôi:

#box-one {
background-color: gray;
}

#box-two {
background-color: yellow;
padding: 10px;
}

Khi một phần tử có một ID ID, chúng ta có thể truy cập nó bằng bộ chọn CSS bằng cách đặt một dấu hiệu pound (#) trước giá trị ID ID của nó. Vì vậy, để chọn phần tử đầu tiên, chúng tôi chỉ cần gõ hộp##một và sau đó bắt đầu quy tắc CSS của chúng tôi.

Hộp ưa thích mới của chúng tôi

Khi bạn lưu tệp CSS của mình và làm mới trang HTML của chúng tôi trong trình duyệt web, bạn sẽ thấy một cái gì đó rất giống với điều này:

Yay cho phong cách

Nó có thể không đẹp, nhưng chúng tôi đã tạo kiểu cho trang HTML đầu tiên của chúng tôi với CSS! Hãy để tóm tắt lại kiến thức CSS của bạn cho đến nay. Bạn biết:

Cú pháp cơ bản của CSS (được đề cập trong bài học trước của chúng tôi)
Cách liên kết tệp CSS với trang HTML
Cách chọn các phần tử HTML nhất định và tạo kiểu cho chúng

Trong bài học tiếp theo của chúng tôi, chúng tôi sẽ tiếp tục tìm hiểu về các bộ chọn CSS và các cách khác nhau để nhắm mục tiêu các yếu tố cụ thể với CSS của bạn.

Nếu bạn thích xem các bài học video thay vì đọc các bài học bằng văn bản, hãy xem khóa học video 8 giờ của tôi và tham gia hơn 4.000 người khác đã học HTML, CSS và thiết kế đáp ứng cấp độ ủng hộ cấp độ.

Làm cách nào để tạo tệp CSS?

Làm thế nào để tạo một bảng kiểu bên ngoài CSS.

Bắt đầu với một tệp HTML chứa một bảng kiểu nhúng, chẳng hạn như bản này. ....File > New in Notepad to get an empty window
Tạo một tệp mới và lưu nó dưới dạng biểu định kiểu. ....File < Save As...
Di chuyển tất cả các quy tắc CSS từ tệp HTML sang bảng kiểu. ....
Xóa khối kiểu khỏi tệp HTML ..Save As Type:" to "All Files"
Tạo bảng kiểu CSSstyles.css" (leave off the quotes) and click Save

Giống như cách chúng tôi đã tạo một tệp văn bản riêng cho HTML, bạn sẽ tạo một tệp văn bản cho CSS. Nếu bạn cần hình ảnh cho quá trình này, vui lòng xem hướng dẫn đầu tiên. Dưới đây là các bước để tạo bảng kiểu CSS của bạn trong Notepad:

Chọn Tệp> Mới trong Notepad để có một cửa sổ trống

Lưu tệp dưới dạng CSS bằng cách nhấp vào Tệp

Khắc phục lề trang

Khi bạn đang viết XHTML cho các trình duyệt khác nhau, một điều bạn sẽ học là tất cả chúng dường như có tỷ suất lợi nhuận và quy tắc khác nhau cho cách chúng hiển thị mọi thứ. Cách tốt nhất để chắc chắn rằng trang web của bạn trông giống nhau trong hầu hết các trình duyệt là không cho phép những thứ như lề mặc định cho lựa chọn trình duyệt.

Chúng tôi thích bắt đầu các trang ở góc trên bên trái, không có phần đệm thêm hoặc lề xung quanh văn bản. Ngay cả khi chúng tôi sẽ đệm các nội dung, chúng tôi đặt lề thành 0 để chúng tôi bắt đầu với cùng một bảng trống. Để làm điều này, hãy thêm tài liệu sau vào Kiểu của bạn.CSS:

html,body {
margin: 0px;
padding: 0px;
border: 0px;
left: 0px;
top: 0px;
}

Thay đổi phông chữ trên trang

Phông chữ thường là điều đầu tiên mà bạn sẽ muốn thay đổi trên trang web. Phông chữ mặc định trên một trang web có thể xấu và thực sự tùy thuộc vào chính trình duyệt web, vì vậy nếu bạn không xác định phông chữ, bạn thực sự không biết trang của bạn sẽ trông như thế nào.

Thông thường, bạn sẽ thay đổi phông chữ trên các đoạn văn, hoặc đôi khi trên toàn bộ tài liệu. Đối với trang web này, chúng tôi sẽ xác định phông chữ ở cấp tiêu đề và đoạn văn. Thêm phần sau vào tài liệu Styles.css của bạn:

p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h2 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}

Chúng tôi bắt đầu với 1em làm kích thước cơ sở cho các đoạn văn và liệt kê các mục và sau đó được sử dụng để đặt kích thước cho các tiêu đề của tôi. Chúng tôi không mong đợi sử dụng tiêu đề sâu hơn H4, nhưng nếu bạn có kế hoạch, bạn cũng muốn tạo kiểu cho nó.

Làm cho liên kết của bạn thú vị hơn

Các màu mặc định cho các liên kết là màu xanh và màu tím cho các liên kết không được truy cập và truy cập tương ứng. Mặc dù đây là tiêu chuẩn, nhưng nó có thể không phù hợp với bảng màu của các trang của bạn, vì vậy hãy thay đổi nó. Trong tệp Styles.css của bạn, thêm các mục sau:

a:link {
font-family: Arial, Helvetica, sans-serif;
color: #FF9900;
text-decoration: underline;
}
a:visited {
color: #FFCC66;
}
a:hover {
background: #FFFFCC;
font-weight: bold;
}

Chúng tôi thiết lập ba kiểu liên kết, A: Liên kết là mặc định, A: Đã truy cập khi nó được truy cập, chúng tôi thay đổi màu sắc và A: Hover. Với A: Di chuột, chúng tôi có liên kết có màu nền và in đậm để nhấn mạnh đó là một liên kết cần được nhấp.

Tạo kiểu cho phần điều hướng

Vì chúng tôi đặt phần Điều hướng (ID = "NAV") trước trong HTML, hãy tạo kiểu trước. Chúng ta cần chỉ ra mức độ rộng của nó và đặt một lề rộng hơn ở phía bên phải để văn bản chính sẽ không chống lại nó. Chúng tôi cũng, đặt một biên giới xung quanh nó.

Thêm các CSS sau vào tài liệu Styles.css của bạn:

#nav {
width: 225px;
margin-right: 15px;
border: medium solid #000000;
}
#nav li {
list-style: none;
}
.footer {
font-size: .75em;
clear: both;
width: 100%;
text-align: center;
}

Thuộc tính kiểu danh sách thiết lập danh sách bên trong phần điều hướng để không có đạn hoặc số, và kiểu.

Định vị phần chính

Bằng cách định vị phần chính của bạn với định vị tuyệt đối, bạn có thể chắc chắn rằng nó sẽ ở lại chính xác nơi bạn muốn nó ở lại trên trang web của bạn. Chúng tôi đã làm cho nó rộng 800px để chứa các màn hình lớn hơn, nhưng nếu bạn có một màn hình nhỏ hơn, bạn có thể muốn làm cho nó hẹp hơn.

Đặt những thứ sau trong tài liệu Styles.css của bạn:

#main {
width: 800px;
top: 0px;
position: absolute;
left: 250px;
}

Tạo kiểu cho đoạn văn của bạn

Vì tôi đã đặt phông chữ đoạn ở trên, tôi muốn cung cấp cho mỗi đoạn một "cú đá" thêm một chút để làm cho nó nổi bật hơn. Tôi đã làm điều này bằng cách đặt một đường viền lên đỉnh làm nổi bật đoạn văn không chỉ là hình ảnh.

Đặt những thứ sau trong tài liệu Styles.css của bạn:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>CSS-Test</title>
</head>
<body>

<h2>CSS-Test</h2>

<div id="box-one">
<p>This is box one.</p>
</div>

<div id="box-two">
<p>This is box two.</p>
</div>

</body>
</html>

Tạo kiểu cho đoạn văn của bạn

Vì tôi đã đặt phông chữ đoạn ở trên, tôi muốn cung cấp cho mỗi đoạn một "cú đá" thêm một chút để làm cho nó nổi bật hơn. Tôi đã làm điều này bằng cách đặt một đường viền lên đỉnh làm nổi bật đoạn văn không chỉ là hình ảnh.

Chúng tôi quyết định làm điều đó như một lớp gọi là "topline" thay vì chỉ xác định tất cả các đoạn theo cách đó. Bằng cách này, nếu chúng ta quyết định chúng ta muốn có một đoạn văn mà không có dòng màu vàng trên cùng, chúng ta có thể chỉ cần rời khỏi lớp = "topline" trong thẻ đoạn văn và nó sẽ không có đường viền trên cùng.

Tạo kiểu cho hình ảnh

Đặt những thứ sau trong tài liệu Styles.css của bạn:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>CSS-Test</title>
</head>
<body>

<h2>CSS-Test</h2>

<div id="box-one">
<p>This is box one.</p>
</div>

<div id="box-two">
<p>This is box two.</p>
</div>

</body>
</html>

Tạo kiểu cho đoạn văn của bạn

Vì tôi đã đặt phông chữ đoạn ở trên, tôi muốn cung cấp cho mỗi đoạn một "cú đá" thêm một chút để làm cho nó nổi bật hơn. Tôi đã làm điều này bằng cách đặt một đường viền lên đỉnh làm nổi bật đoạn văn không chỉ là hình ảnh.

Tạo kiểu cho hình ảnh

Tôi nên lưu CSS là gì?

Bước 1: Lưu tệp CSS Tạo một thư mục mới trên máy tính để bàn của bạn (hoặc một vị trí khác bạn thích) và đặt tên cho nó CSS-TEST. Bây giờ, trở lại trong chương trình chỉnh sửa văn bản của bạn lưu tài liệu của bạn dưới dạng kiểu phong cách.css.style. css”.

Loại tệp cho CSS là gì?

CSS

Logo chính thức của phiên bản mới nhất, CSS 3
Tiện ích mở rộng tên tệp	.css
Loại định dạng	Ngôn ngữ bảng kiểu
Container cho	Quy tắc kiểu cho các phần tử HTML (thẻ)
Chứa bởi	Tài liệu HTML

CSS - Wikipediaen.wikipedia.org Wiki Wiki Cssnull

Tôi nên đặt tệp CSS của mình ở đâu?

Bạn có thể thêm CSS nội tuyến trong một thuộc tính kiểu để tạo kiểu một phần tử HTML duy nhất trên trang.Bạn có thể nhúng bảng kiểu nội bộ bằng cách thêm CSS vào phần đầu của tài liệu HTML của bạn.Hoặc bạn có thể liên kết đến một bảng kiểu bên ngoài sẽ chứa tất cả các CSS của bạn tách biệt với HTML của bạn.adding CSS to the head section of your HTML doc. Or you can link to an external stylesheet that will contain all your CSS separate from your HTML.