CSS

1, Mở đầu về CSS

Nói cho dễ hiểu thì wap/web có đẹp ,có chuyên nghiệp hay không là nhờ CSS .

Công nghệ CSS được đề cập đầu tiên bởi W3C vào năm 1996. Theo định nghĩa của W3C (Wide Web Consortium) CSS (từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng) là một ngôn ngữ giúp người thiết kế web có thể add kiểu vào tài liệu web(như kiểu font chữ, màu sắc, khoảng cách vv..).

Bạn có thể tạo ra kiểu một lần nhưng có thể dùng lại nhiều lần trong các tài liệu web tiếp theo.

Ví dụ như nếu bạn muốn hiển thị một bức ảnh trong web với màu khung màu xanh, đường viền bức ảnh là đường kẻ liền thì bạn có thể định nghĩa khung đó thành một kiểu, giả dụ đặt tên là "frame" đi.

Và sau đó khi bạn muốn các khung ảnh khác cũng có kiểu dáng như vậy thì bạn chỉ việc gọi kiểu mà bạn đã định nghĩa để sử dụng lại lần nữa . Cụ thể ở đây là gọi kiểu "frame" và gọi thế nào thì sẽ ở phần sau.

CSS không phải là một ngôn ngữ lập trình tới thời điểm này (theo mình được biết).

2,Tạo CSS tổng quát

Đây là phần tổng quát để các bạn nắm được sơ qua về CSS để hiểu rõ hơn thì nên xem các phần sau ha.

Làm việc nào .phần này mình sẽ nói sơ qua vì cũng dễ hiểu thôi biết chút về html là được công việc bắt đầu .

Phần đầu:

body {

font-family : Comic Sans MS, Bold, Helvetica, sans-serif;

margin : 0 0 0 0 ;

font-weight : normal;

font-size : small;

background-color : black;

color : #FF8C00;

} 

a {

text-decoration : none;

color : red;

}

Đây là phần quyết định toàn trang sẽ như thế nào nha.

Phân tích ra sẽ đơn giản hơn nhiều toàn kiến thức html thôi ak

font-weight : normal;

font-size : small;

dòng này là kiểu chữ

background-color : black;

màu của trang ở đây là màu đen black mình viết thế cho dễ hiểu các bạn có thể sử dụng mã màu.

a {

text-decoration : none;

color : red;

}

đây là màu của link liên kết màu đỏ hì.

Cơ bản là thế hãy sáng tạo thêm bằng trí tưởng tượng của mình nha.

*Lớp class:

.footer {

color : white;

background-color : #333;

text-align : center;

font-weight : bold;

padding : 2px;

}

Lớp (class)

Nó cũng tương tự như phần đầu chỉ khác là nó để tạo nên các khung ,hiệu ứng được quy định sẵn thôi 

tên class này là footer:

Khác với phần đầu là ở đây quy định sẵn kíck thước

padding : 2px;

ví dụ thế

Save hai phần lại tạo một file dạng **.css

ví dụ style.css

Mã nguồn[chọn]

body {

font-family : Comic Sans MS, Bold, Helvetica, sans-serif;

margin : 0 0 0 0 ;

font-weight : normal;

font-size : small;

background-color : black;

color : #FF8C00;

} 

a {

text-decoration : none;

color : red;

}

.footer {

color : white;

background-color : #333;

text-align : center;

font-weight : bold;

padding : 2px;

}

Như thế đã có một file CSS sẵn sàng cho sử dụng với một lớp footer ,nhưng chẵng ai sử dụng CSS mà chỉ dùng một lớp duy nhất hãy sáng tạo thêm các lớp đẹp hơn ha .

Cụ thể về phần này ở những bài viết ,dưới mình sẽ giới thiệu kỷ hơn về cú pháp ,phần tử ,...

Còn sử dụng thế nào bài sau mình sẽ giải thích.

3, Cú pháp CSS

Sau khi hiểu là nắm bắt được một số đặc tính của CSS chúng ta tiếp tục đi tìm hiểu về cú pháp và cách khai báo của các thẻ CSSCú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value).selector {property: value}Nếu nhãn của bạn có nhiều từ bạn nên đặt nhãn của bạn vào trong dấu nháy kép p {font-family:"sans serif"}Trong trường hợp thẻ chọn của bạn nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;).

p {text-align:center;color:red}Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt.p { text-align: center; color: black; font-family: arial}

4, Các lệnh thường gặp trong CSS

Đối với một Web Designer không biết về CSS thì quả thực sẽ là một thiệt thòi rất lớn, nếu không muốn nói là kém. Vậy bài viết này sẽ trang bị cho các bạn những kiến thức cơ bản cần và đủ là thiết kế một temp cho website hoàn chỉnh.

- Việc đầu tiên các bạn cần phải quan tâm đối với CSS đó chính là sự tương thích với các trình duyệt web. Trên thế giới hiện nay có rất nhiều trình duyệt khác nhau, nhưng có lẽ được tin dùng nhất chính là Mozila Firefox và Internet Explorer (trình duyệt của window). Vì vậy mà viết các đoạn mã CSS sao cho tất cả các trình duyệt đều hiểu được không phải là dễ, nhưng cũng không phải là quá khó như các bạn tưởng tượng.

1. Lệnh Margin:

- ta sẽ bắt đầu với lệnh căn lề margins.

a. Căn lề cho cả 4 cạnh:

.ClassName {

margin:20px;

}

b. Căn lề dùng lệnh auto:

.ClassName {

margin:20px auto;

}

- với lệnh trên, lề trái và phải sẽ tự động được căn giữa, còn lề trên và dưới sẽ được căn lề là 20px.

c. lệnh Margins với 3 giá trị:

.ClassName {

margin:20px auto 50px;

}

- với lệnh này lề trên căn lề 20px, lề trái&phải sẽ được tự động căn giữa, lề dưới căn lề 50px.

2. Lệnh Padding:

- Các lệnh căn lề với padding:

.ClassName {

padding-top:10px; // căn lề trên

padding-right:20px; // căn lề phải

padding-bottom:30px; // căn lề dưới

padding-left:40px; // căn lề trái}

- Để dễ dàng hơn ta có thể viết:

.ClassName {

padding:10px 20px 30px 40px;

}

- Như vậy cấu trúc lênh sẽ là : padding : top right bottom left;

Ta thấy 2 lệnh trên đều là căn lề, vậy chúng có gì khác nhau, chúng ta sẽ nói thêm về điều này:

+ margin : khi dùng lệnh này để căn lề thì kích thước của khung nội dung của bạn sẽ được giữ nguyên.

+ padding: với việc căn lề bằng lệnh padding thì kích thước của khung nội dung sẽ bị thay đổi.

Lấy ví dụ: khung nội dung của bạn có độ rộng 100px, khi dùng lệnh căn lề trái padding-left:30px; thì khung sẽ bị dịch sang phải 30px, và khi đó độ rộng của khung sẽ được cộng thêm vào là 30px, tức là 130px. Đó chính là mấu chốt khiến các bạn mới làm quen thường bị xảy ra hiện tượng xô lệch do khi dùng padding vì chúng ta padding bao nhiêu thì sẽ + thêm vào chiều rông cũ bấy nhiêu để tạo thành một chiều rộng mới.

3. Background:

- các thuộc tính cơ bản của lệnh như bên dưới:

.ClassName {

background-color: transparent; // làm trong nền trong suốt

background-image: url('image.jpg'); // ảnh nền

background-repeat: no-repeat; // thuộc tính lặp lại

background-position: top right; // vị trí nền

background-attachment: scroll; // nền trượt

}

- ví dụ như bạn muốn tạo ảnh nền trong suốt, nằm trên cùng bên phải, không lặp lại, và di chuyển theo chuột, ta sẽ có lệnh như bên dưới:

.ClassName {

background: transparent url('image.jpg') no-repeat top right scroll;

}

4. Lệnh font:

.ClassName {

font-variant:small-caps;

font-weight:bold;

font-size:1em;line-height:1.4em;

font-family:Georgia, serif;

}

5. Lệnh cho list (ul):

ul {

list-style-type:decimal-leading-zero;

list-style-position:inside;

list-style-image: none; // sử dụng ảnh, nếu muốn sử dụng ảnh cho list, bạn chỉ việc thay none bằng url('link ảnh')

}

- để đơn giản ta gộp các thuộc tính chung lại, như bên dưới:

ul {

list-style:decimal-leading-zero inside url('image.jpg');

}

6. lệnh Border (tạo đừơng viền - đường bao)

.ClassName {

border-width:2px; // độ rộng đường bao

border-style: solid; // kiểuborder-color: #4096EE; // màu

}

- đơn giản có thể viết

.ClassName {

border: 2px solid #4096EE; // trị màu : #4069EE có thể thay bằng rgb(64, 150, 238)

}

7. Outline (tương tự lệnh border)- ví dụ bên dưới là tạo đương viền cho ảnh

img {

outline-width: 5px;

outline-style:solid;

outline-color: #000000;

}

- đơn giản có thể viết

img {

border: outline: 5px solid #000000;

}

8. Lệnh màu :

- có thể sử dụng 1 trong các cách dưới đều được

.ClassName {

color: #FFFFFF;

}

.ClassName {

color: #FFF;

}

.ClassName {

color: #fff;

}

.ClassName {

color: rgb(255, 255, 255);

}

9. dùng dấu","để gộp chung các class khi có cùng thuộc tính:ví dụ như bên dưới:h1, h2, h3, h4, h5, h6 {

font-family:Helvetica, Verdana, sans-serif;

}

10. Cross browser transparency:

- thiết lập cho từng trình duyệt

.ClassName {

filter:alpha(opacity=50); // trình duyệt IE

-moz-opacity:0.5; // trình duyệt mozilla

-khtml-opacity: 0.5; // trình duyệt Safari

opacity: 0.5; // hầu hết các trình duyệt, nhưng IE thì không.

}

11. First-child selectors

- ví dụ bên dưới tạo màu chữ riêng cho lớp đầu tiên của footer (nằm trong thẻ<em>)(lệnh này mình không rành lắm)

.footer em:first-child {

color:#ccc;

}

12. First-letter (kí tự đầu tiên)p:

first-letter{

color:#ff0000;

font-size:60px;

}

- ví dụ ta có code sau :<p>This is an example usage of the first-letter property</p>

- kết quả :This is an example usage of the first-letter property

13. First-line- thiết lập thuộn tính cho dòng đầu tiên#p:

first-line {

color:#ff0000;

font-weight:bold;

}

- ví dụ: ta có code<p>This is an example usage of the first-line property. This is an example usage of the first-line property.</p>

- kết quả :This is an example usage of the first-line property. This is an example usage of the first-line property.

14. Độ cao tối thiểu

.ClassName {

min-height:200px;

}- code trên không hỗ trợ cho IE, để hiển thị trên IE, bạn tham khảo code bên dưới:

.ClassName{

min-height:200px;

height:auto !important;

height:200px;

}

15. Thuộc tính clip (hiển thị một phần)- ví dụ ta có code bên dưới:

img {

clip:rect(50px 218px 155px 82px);

}với code này, ảnh sẽ được clip phía trên 50px, bottom là 218px (tính từ trên xuống), right là 155px (tính từ trái qua), left là 82px (cũng tính từ trái qua). 

16. Bo góc:

.rounded_corner {

-moz-border-radius:10px;

-webkit-border-radius:10px;

width:400px;

height:100px;

background-color:#000;

}

17. Drop shadow (tạo bóng đổ)

.your_shadow {width:400px;

height:200px;

background-color:#000;

-webkit-box-shadow: 5px 5px 2px #ccc;

}

18. Resize

.resize{

min-width:200px;

min-height:200px;

max-width:500px;

max-height:400px;

resize:both;

background-color:#ccc;

border:2px solid #666;

overflow:auto;

}

Trên đây là những cơ bản về CSS, hy vọng sau khi làm quen các bạn sẽ cảm thấy thích thú.

5, Vấn đề với văn bản trong CSS

Thuộc tính CSS text cho phép bạn hoàn toàn có thể quản lí được các thuộc tính của văn bản, bạn có thể quản lí được sự ẩn hiện của nó, thay đổi màu sắc, tăng hoặc giảm khoảng cách giữa các ký tự trong một đoạn, căn chỉnh việc dóng hàng (align),...Các thuộc tính của text mà CSS hỗ trợ

Đặt màu cho một đoạn văn bản

Để đặt màu cho một đoạn văn bản chúng ta có thể dùng thuộc tính: color: #mã màu;

p {

color: #333333;

}

Đặt màu nền cho đoạn văn bản.Bạn có thể đặt màu nền (background) cho đoạn văn bản bằng thuộc tính background-color: #mã màu;

p {

background-color: #FFFF00;

}

Căn chỉnh khoảng cách giữa các ký tự.Khoảng cách giữa các ký tự trong một đoạn văn bản có thể được tăng hoặc giảm bởi thuộc tính letter-spacing: khoảng cách;

h3 {

letter-spacing: 2em;

}

h1 {

letter-spacing: -3em;

}

Căn chỉnh khoảng cách giữa các dòng.

Thuộc tính line-height: khoảng cách; sẽ giúp bạn căn chỉnh khoảng cách giữa các dòng trong một đoạn văn bản.

p {

line-height: 150%; // line-height: 15px;

}

Dóng hàng

Để gióng hàng cho một đoạn văn bản chúng ta sẽ dùng thuộc tính text-align: vị trí;

p {

text-align: left; /* left | center | right */

}

Trang hoàng thêm cho đoạn văn bản.

Một đường gạch chân hoặc đường gạch ngang dòng văn bản sẽ làm cho đoạn văn bản của bạn thêm sinh động. Để tô điểm thêm cho đoạn văn bản chúng ta sẽ dùng thuộc tính text-decoration: thuộc tính;

h3 {

text-decoration: underline; /* Gạch chân */

}

h2 {

text-decoration: line-through; /* Gạch ngang */

}

h1 {

text-decoration: overline; /* kẻ trên */

}

Chỉnh vị trí của đoạn văn bản (indent).Thuộc tính text-indent: vị trí; sẽ căn chỉnh vị trí của dòng văn bản theo chiều ngang.

h1 {

text-indent: -2000px; /* text-indent: 30px; */

}

Điều kiển các ký tự trong một đoạn văn bản.

Bạn có thể điều khiển toàn bộ đoạn văn bản là chữ hoa hay chữ thường bởi thuộc tính text-transform: kiểu chữ;

p.uppercase {

text-tranform: uppercase;

}

p.lowercase {

text-tranform: lowercase;

}

p.capitalize {

text-tranform: capitalize;

}

Đặt hướng cho đoạn văn bản.Hướng của đoạn văn bản có thể từ trái qua phải hay từ phải qua trái chúng ta có thể điều khiển bởi thuộc tính direction: hướng;

div.rtl {

direction: rtl; /* Right to left */

}

div.ltr {

direction: ltr; /* Left to right */

}

Tăng khoảng cách giữa các từ.Khoảng cách giữa các từ có thể được tăng bởi thuộc tính word-spacing: khoảng cách; word-spacing: 30px;Làm mất tác dụng của đường bao của một thẻ HTML.Để làm mất tác dụng đường bao của một thẻ HTML chúng ta dùng thuộc tính white-space: giá trị;

p {

white-space: nowrap;

}

Thuộc tính white-space sẽ làm cho toàn bộ đoạn văn bản ở trên một dòng.

6, Baner cố định góc phải màn hình

Mã CSS:

Mã nguồn[chọn]:

.bottombar{

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

background-color : #FF0000;

bottom : 0;

color : #fff000;

font-size : 1.5em;

position : fixed;

z-index : 999;

}

.bottombar:hover{

filter:alpha(opacity=90);

-moz-opacity:0.9;

-khtml-opacity: 0.9;

opacity: 0.9;

}

Mã HTML:

Trích dẫn

<div> <b>Your text here</b> </div>

Sau đó bạn có thể tô điểm thẻ div để nó màu mè hơn!

7, Áp dụng CSS trên site - Sử dụng CSS

Bạn đã có một file CSS của bạn, bây giờ công việc tiếp theo là làm thế nào để chèn những đoạn CSS của bạn vào trong trang, Và xem chúng hoạt động như thế nào. Trong phần này chúng ta sẽ đi tìm hiểu chi tiết về cách chèn một đoạn style trong trang HTML hay liên kết tới một file CSS viết sẵn.Khi trình duyệt đọc đến CSS, thì toàn bộ Website sẽ được định dạng theo các thuộc tính đã được khai báo trong phần CSS. Có ba cách cho phép chúng ta chèn định dạng CSS vào trong Website.

1. CSS được khai báo trong file riêng.Toàn bộ mã CSS được chứa trong file riêng có phần mở rộng .css là một ý tưởng được dùng khi một file CSS sẽ được áp dụng cho nhiều trang khác nhau. Bạn có thể thay đổi cách hiển thị của toàn bộ site mà chỉ cần thay đổi một file CSS. Trong cách này thì file CSS sẽ được chèn vào văn bản HTML thông qua thẻ<link>...</link>. Ta có cú pháp như sau:

<html>

<head>

<linktype="text/css"href="http://yenhung.xtgem.com/style.css"/>

</head>

<body> </body>

</html>

Trình duyệt sẽ đọc toàn bộ các định dạng được quy định trong file mystyle.css và định dạng cho văn bản HTML.File CSS có thể được soạn thảo bằng một số trình duyệt khác nhau. Trong file không được chứa mã HTML, khi ghi lại chúng ta bắt buộc phải ghi lại với phần mở rộng là .css. Giả sử chúng trong file mystyle.css ở trên chứa đoạn mã sau:

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

Không bao giờ sử dụng khoảng trắng trong nhãn, giả sử rằng nếu bạn dùng margin-left: 20 px; thay cho margin-left: 20px; thì IE6 sẽ hiểu còn các trình duyệt như Firefox, Opera sẽ không hiểu.

-CHÚ Ý :Cách này là thông dụng và nhiều người sử dụng nhất.

Nếu bạn nào muốn sử dụng CSS của mình thì cứ dán đoạn mã trên lên đầu wap ,web là được.

2. Chèn CSS trong tài liệu HTMLChèn thẳng CSs trong tài liệu được áp dụng trong trường hợp những định dạng CSS này chỉ giành riêng cho tài liệu HTML đó. Khi bạn chèn trực tiếp thì đoạn mã của bạn phải đặt trong thẻ<style>và đặt trong phần<head>.

<head>

<style>

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

</style>

</head>

Có một số trình duyệt cũ sẽ không hiểu thẻ<style>, nó sẽ bỏ qua thẻ này. Tuy nhiên thì nội dung trong thẻ<style>vẫn hiển thị ra trang HTML. Vì vậy mà chúng ta sẽ phải dùng định dạng chú thích trong HTML để chứa phần nội dung của thẻ<style>.

<head>

<style>

<!--hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

-->

</style>

</head>

3. Chèn trực tiếp vào thẻ của HTML(inline style)

Inline style được sử dụng nhiều trong trường hợp một thẻ HTML nào đó cần có style riêng cho nó.Inline style được áp dụng cho chính thẻ HTML đó, cách này sẽ có độ ưu tiên lớn nhất so với hai cách trên. Dưới đây là một ví dụ mà chúng ta dùng Inline style

<p>This is a paragraph</p>

4. Nhiều Stylesheet

Trong trường hợp mà có một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với nhau. Giả sử như sau:h1, h2, h3 {

margin-left: 10px; font-size: 150%; ...

}

Giống đoạn mã trên thì cả ba thẻ h1, h2, h3 đều có cùng 3 thuộc tính như trên.

*Coi như đã xong phần đầu bây giời sử dụng các lớp ra sao uh?

Mã nguồn[chọn]

<div>Ví dụ văn bản</div>

thẻ div tìm hiểu thêm ở HTML ha.

Và trong cặp DIV này có thể chèn vô số thứ

Mã nguồn[chọn]

<div><a>Quay về trang chủ</a></div>

nhưng ví dụ vẫn chỉ là ví dụ thử làm các bạn sẽ thấy .

Kết thúc phần này ha!