/ / Html & Css / Comment (0)

Các thuộc tính trong css

Ở bài trước mình đã giới thiệu tổng quan về css là gì,các bạn cũng đã có những khái niệm ban đầu về css rồi. Hôm nay mình sẽ giới thiệu các thuộc tính quan trọng trong css

1. Css selector

+ Đây chính là phần rất quan trọng,lựa chọn các phần tử html mà chúng ta muốn style css cho nó.Để làm được phần này thì các bạn lên xem qua bài các thuộc tính trong html , dựa vào các tên thẻ hoặc các thuộc tính của thẻ html để chúng ta có thể lựa chọn phần tử theo ý muốn.

– Lựa chọn theo tên thẻ html , cú pháp:

/* ten_the_html{ mã css}*/
p {color:red}

– Lựa chọn theo id hoặc class của thẻ html, cú pháp:

/*với class : .ten_class{ mã css}*/
p.text{color:red}
.test{color:blue}

/*với id: #ten_id{ mã css}*/
p#text{color:red}
#test{color:blue}

– Các bạn thấy selector trong css rất đơn giản phải không nào,chúng ta có thể lựa chọn trực tiếp 1 thẻ html hoặc lựa chọn qua class hoặc id của thẻ html,với class ta sử dụng dâu “.” còn với id ta chỉ việc sử dụng dấu “#”.Ngoài ra css còn hỗ trợ chúng ta lựa chọn nâng cao thông qua thuộc tính của thẻ html.


a[href]{ color:blue; } /*thẻ a có thuộc tính href sẽ có màu xanh*/

a[href=“hocphp.info”]{color:red; } /*thẻ a có thuộc tính href="hocphp.info" sẽ có màu đỏ*/

2. Chú thích trong css

– Để viết các chú thích trong css chúng ta sử dụng khối lệnh sau:

/* Nội dung chú thích theo từng dòng*/

/*
 * Nội dung chú thích theo nhiều dòng
 * Chú thích 1
 * Chú thích 2
 *

3. Css backgroud

– background: Tùy chỉnh màu nền cho khối chứa văn bản


div{background-color:#000000} /* thẻ div có màu nền là màu đen*/

div{

background: url('background.png') ; /* thẻ div có hình nền là ảnh background.png */

}

 

4. Css text

– Text Color : Tùy chỉnh màu sắc cho văn bản,nội dung

body {color:black;} /*Màu chữ trong thẻ body có màu đen*/
a{color:red;} /*Màu chữ trong thẻ a có màu đỏ*/

– Text Alignment: Căn chỉnh văn bản

h1 {text-align:center;} /*Căn chỉnh thẻ h1 => chữ nằm ở giữa*/
p.date {text-align:right;} /*Căn chỉnh thẻ p có class là data => chữ nằm sang phải*/
p#main {text-align:justify;} /*Căn chỉnh thẻ p có id là main=> chữ căn chỉnh đều hay bên,thường sử dụng trong các bài viết*/

– Text Decoration: Tùy chỉnh trang trí cho đoạn văn bản

a {text-decoration:none;}/*Thẻ a không có dấu gặp chân,mặc định thẻ a sẽ có dấu gạch chân ở dưới*/
p {text-decoration:line-through; /* thẻ p sẽ sẽ bị gạch ở giữa, thường sử dụng cho những sản phẩm có mức giảm giá*/
a {text-decoration:underline;}/* thẻ a sẽ có dấu gạch chân ở dưới - Mặc định */

-Text Transformation: Chuyển đổi kiểu chữ hoa hoặc chữ thường, hoặc chữ hoa chữ cái đầu tiên trong văn bản

p {text-transform:uppercase;} /* viết hoa nội dung bên trong các thẻ p */
p {text-transform:lowercase;} /* viết thường  nội dung bên trong các thẻ p*/
p {text-transform:capitalize;} /* viết hoa các chữ cái đầu tiên của các thẻ p*/

5. CSS Font

– Font Family: Kiểu font chữ

Lưu ý: Nếu tên font chữ nhiều hơn một từ, nó phải được trong dấu ngoặc kép, như: “Times New Roman”.

p{font-family:"Times New Roman", Times, serif;}

– Font Style: Định dạng kiểu chữ thường hoặc chữ in nghiêng…

p.normal {font-style:normal;} /*Các thẻ p có class là normal sẽ có chữ thường*/
p.italic {font-style:italic;} /*các thẻ p có class là italic  sẽ bị in nghiêng */

– Font Size: Định dạng cỡ chữ

p {font-size:11px;} /* các thẻ p có cỡ chữ là 11px */

– Font Weight: Định dạng kiểu chữ đậm

p{font-weight:bold;} /*các thẻ p sẽ có chữ đậm */

6. Css border

– Border Style: Định dạng viền của khungnội dung

div#border
{
border-top-style:dotted; /* viền phía trên cùng là nét đứt */
border-right-style:solid; /* viền phía bên phải là nét liền */
border-bottom-style: dotted; /* viền ở cuối là nét đứt */
border-left-style: solid; /* viền ở phía bên trái là nét liền */
}

Hoặc ta có thể viết tắt đoạn code trên như sau:

div#border{border-style:dotted solid;}  /* viền ở trên và dưới là nét đứt,viền trái phải là nét liền */

Khi chạy đoạn code trên ta sẽ hiển thị lên trình duyệt như sau:

Nội dung bên trong thẻ div có id là border

 

1 ví dụ nữa về border,tạo viền màu đỏ cho thẻ div có id là border,và bề dầy của viền là 5px

div#border{border:5px solid red;} /* viền 4 xung quanh có màu đỏ và bề dày của viền là 5px

Khi chạy đoạn mã css trên thì các thẻ div có id là border sẽ hiển thị như sau:

Nội dung bên trong thẻ div có id là border

7. Css display

– Tùy chỉnh hiển thị cho các thẻ HTML

p.hide{display:none} /* ẩn các thẻ p có class là hide*/
span {display:inline;} /* tất cả các thẻ span sẽ hiển thị trên cùng dòng - mặc định của thẻ span là hiển thị trên cùng dòng*/
div {display:block;} /* tất cả các thẻ div sẽ hiển thị theo dạng khối,mỗi thẻ div hiển thị trên 1 dòng  - mặc định của thẻ div hiển thị dạng block*/
Display inline,display block trong css

Display inline,display block trong css

7. Css Float

– Là một thuộc tính CSS dùng để cố định một thành phần web về bên trái hay bên phải.Các bố cục website hiện nay rất hay sử dụng thuộc tính float để có thể định vị trí của 1 khối dữ liệu nào đó.
– Đây là 1 thuộc rất quan trọng nó được sử dụng nhiều cho công việc làm bố cục dàn trang web.

– Cú pháp:

{
float: Giá trị
}

– Các giá trị ở đây có thể là:

+ Left : Dịch chuyển phần tử về phía bên trái

+ Right: dịch chuển phần tử về phía bên phải

+ None: bình thường

Thuộc tính float trong css

Thuộc tính float trong css

– Khung dữ liệu được sử dụng float left sẽ dồn toàn bộ khung đó về phía bên trái,nếu còn khoảng trống ở phía bên phải thì các dữ liệu ở dưới sẽ bị dồn lên trên.Tương tự với khung dữ liệu sử dụng float right.

div.left{
width:300px; height:50px; float:left; background:red;color:red;
}
div.right{
width:400px; height:50px; float:right; background:blue;color:blue;
}

Với đoạn mã css trên thì ta sẽ hiển thị lên trình duyệt như sau:

Thẻ div có class là left
Thẻ div có class là right

 

8. Css Clear

– Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là clear.Đây là thuộc tính cho phép các phần tử không được float.Với ví dụ ở trên các bạn thấy là khi 1 phần tử được float left hoặc right thì những dữ liệu ở dưới sẽ bị tràn lên trên khoảng trống nếu còn.Trong 1 số trường hợp người ta cần dùng tới thuộc tính này để chống tràn dữ liệu để tránh tình trạng vỡ khung giao diện.

– Cú pháp :

{
clear: Giá trị
}

– Các giá trị có thể là:

+ Left: Bên trái của thành phần không được float.

+ Right: Bên phải của thành phần không được float.

+ Both: Bên trái và phải của thành phần không được float.

– Ví dụ:

+ Mã html:

<div class='wrap'>
   <div class='left'></div>
   <p>Nội dung trong văn bản 1</p>
   <p class='clear_left'>Nội dung trong văn bản 2</p>
</div>

+ Mã css:

div.wrap{
   width:600px;
   border:2px solid red;
   height: 80px;
}
div.left{
width:300px; height:50px; float:left; background:red;color:red;
}

Hiển thị trên trình duyệt khi chưa sử dụng clear:

Nội dung trong văn bản 1

Nội dung trong văn bản 2

Giờ ta thử thêm 1 đoạn css sử dụng clear xem thế nào nhé:

p.clear_left{
   clear:left;
}

Và hiển thị lên trình duyệt sau khi sử dụng clear:

Nội dung trong văn bản 1

Nội dung trong văn bản 2

==> Các bạn thấy rõ sự khác biết phải không nào,khi sử dụng thuộc tính clear thì dữ liệu của thẻ <p class=”clear_left”>
đã không thể dồn lên khoảng trống phía trên được nữa

9. Css margin và padding

Thuộc tính margin:

– Thuộc tính margin là thuộc tính thêm vào khoảng không gian phía bên ngoài của thành phần

– Cú pháp:

margin-top:giá trị; /* tạo ra khoảng không gian phía ngoài bên trên của phần từ */
margin-bottom:giá trị; /* tạo ra khoảng không gian phía ngoài bên dưới của phần từ */
margin-left:giá trị; /* tạo ra khoảng không gian phía ngoài bên trái của phần từ */
margin-right:giá trị; /* tạo ra khoảng không gian phía ngoài bên phải của phần từ */

Hoặc có thể viết tắt như sau:

margin:<giá trị margin-top> | <giá trị margin-right> | <giá trị margin-bottom> | <giá trị margin-left>

Hoặc có thể viết tắt như sau:

margin:<giá trị margin-top và margin-bottom> | <giá trị margin-right và margin-left>

Các giá trị ở đây đơn vị có thể là px, em, %, …

– Ví dụ:

margin: 10px 20px; /* Tạo ra khoảng khoảng trống phía ngoài trên và phía dưới là 10px,trái và phải là 20px */

Thuộc tính padding:
– Đây là thuộc tính tạo ra khoảng không gian phía bên trong của thành phần
– Cú pháp và cách viết thì giống như sử dụng trong margin, các bạn chỉ việc thay margin thành padding là được
Cú pháp:

padding-top:giá trị; /* tạo ra khoảng không gian phía trong bên trên của phần từ */
padding-bottom:giá trị; /* tạo ra khoảng không gian phía trong bên dưới của phần từ */
padding-left:giá trị; /* tạo ra khoảng không gian phía trong bên trái của phần từ */
padding-right:giá trị; /* tạo ra khoảng không gian phía trong bên phải của phần từ */

Ví dụ:

padding: 10px 20px; /* Tạo ra khoảng khoảng trống phía trong bên trên và phía trong dưới là 10px,trái và phải là 20px */

Phần lý thuyết cho các thuộc tính này có vẻ hơi trừu tượng phải không nào.Các bạn có thể xem ảnh minh họa phía dưới để có thể hình dung dễ hơn cho các thuộc tính này:

Thuộc tính margin và padding trong css

Thuộc tính margin và padding trong css

– Trong bài này mình đã giới thiệu cho các bạn các thuộc tính quan trọng nhất trong css.Ngoài ra css còn rất nhiều thuộc tính khác trong quá trình thiết kế website chắc chắn bạn sẽ được làm quen với nhiều thuộc tính và mã màu trong css.Các bạn có thể tìm hiểu thêm các thuộc tính mới trong css3 của bài tiếp theo nhé.



31/08/2014
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL