/ / Html & Css / Comment (0)

Các thuộc tính css3

Trong bài tổng quan về css và các thuộc tính trong css chúng ta đã nắm được cách sử dụng cũng như ý nghĩa các thuộc tính quan trọng trong css2.Dựa vào những thuộc tính đó ta hoàn toàn đã có thể tự xâu dựng giao diện 1 website ở mức độ đơn giản.Và những năm gần đây khi css3 ra đời đã làm cho css mạnh lên rất nhiều.Trong css3 này hỗ trợ nhiều thuộc tính rất hay mà không css2 không thể có.Có nhiều hiệu ứng tưởng chừng phải nhờ tới photoshop hoặc các hiệu ứng jquery thì trong css3 cũng có thể làm được.Những hiệu ứng bo tròn,đổ bóng,làm hình chuyển động,làm cho phần từ mờ ảo…thật tuyệt với phải không các bạn.Vậy chúng ta hãy mau tìm hiểu các thuộc tính mới trong css3 thôi

Ưu điềm khi sử dụng css3:

– CSS3 cung cấp rất nhiều cách thức mới để tạo ra những hiệu ứng khác nhau cho thiết kế của bạn.Có nhiều thuộc tính và hiệu ứng đẹp khi thiết kế giao diện

Nhược điểm khi sử dụng css3:

– Có 1 số trình duyệt hoặc phiên bản của trình duyệt không hỗ trợ các thuộc tính trong css3 lên khi sử dụng các thuộc tính các bạn cần hiểu rõ thuộc tính đang sử dụng có hiển thị được trên trình duyệt bạn muốn không.Nhưng hầu hết các trình duyệt hiện tại đều có thể hiển thị tốt nhiều thuộc tính trong css3

Thuộc tính border-radius

– Trong bài học về thuộc tính border của css2 thì các bạn thấy đây là thuộc tính tạo ra các đường viền cho khung chứa dữ liệu.Còn thuộc tính border radius trong css3 dùng để định dạng các dạng bo góc của border

Cấu trúc:

tag {

border: bề-dày kiểu mã-màu;

border-radius: giá trị;

-moz-border-radius: giá trị;

-webkit-border-radius: giá trị;

-ms-border-radius: giá trị;

-o-border-radius: giá trị;

}

Chú thích:

-moz: hỗtrợchofirefox.
-webkit: Google Chrome và Safari.
-ms: hỗtrợcho Internet Explorer.
-o: hỗ trợ cho Opera.
– các giá trị có thể là px, em ,%…

Ví dụ:
Mã html :

<p class="border-radius">Nội dung của của thẻ p được định dạng border-radius </p>

Mã css:

p .border-radius{
border: 5px solid #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}

Và trên trình duyệt sẽ hiển thị như phía dưới:

Nội dung của của thẻ p được định dạng border-radius

– Các bạn thấy thẻ <p> của chúng ta đã bị bo tròn 4 goc với bề dày là 5px và màu của viền là màu đen (mã màu #000000).Phía trên là cách viết tắt của mình cho cả 4 góc của thẻ <p>.Ngoài ra các bạn có thể định dạng cho từng góc của thẻ html thông qua ảnh minh họa phía dưới:

css3 border radius css3 border radius

– Các bạn thấy nó có rất nhiều tùy chọn cho chúng ta phải không nào,dựa vào những thuộc tính này chúng ta có thể tạo ra các hình tròn,elip
Ví dụ:

div.hinh_tron
{
width: 100px; height: 100px;
border: 5px solid #000000;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}

Và kết quả hiển thị lên trình duyệt sẽ là hình tròn:

 

Thuộc tính box-shadow

– Bạn đã từng thấy website nào có những khung chứa dữ liệu mà khung đó được đổ bóng chưa?thuộc tính box-shadow hoàn toàn có thể giúp bạn thực hiện điều đó
– Cấu trúc đổ bóng theo: trục x, trục y, độ mờ và màu

box-shadow: <đổ theo chiều ngang> <đổ bóng theo chiều dọc> <độ mờ> <màu của đổ bóng>

Ví dụ:
Mã html:

<div class="box_shadow"></div>

Mã css:

div.box_shadow{
   background: #cccccc;
    border: 5px solid red;
    height: 100px;
    width: 100px;
}

Và kết quả nếu chưa sử dụng thuộc tính box-shadow:

Và giờ chúng ta cho thêm thuộc tính box-shadow vào xem kết quả thế nào nhé

div.box_shadow{
   background: #cccccc;
    border: 5px solid red;
    height: 100px;
    width: 100px;
    box-shadow: 10px 15px;
    -moz-box-shadow: 10px 15px;
    -webkit-box-shadow: 10px 15px;
    -o-box-shadow: 10px 15px;
    -ms-box-shadow: 10px 15px;
}

Kết quả

Đó chính là thuộc tính làm đổ bóng 1 box dữ liệu nào đó,ngoài ra chúng ta có thể tùy chỉnh đồ mờ của bóng đổ ra bằng cách thêm giá trị vào vị trí thứ 3

div.box_shadow{
   background: #cccccc;
    border: 5px solid red;
    height: 100px;
    width: 100px;
    box-shadow: 10px 15px 10px;
    -moz-box-shadow: 10px 15px 10px;
    -webkit-box-shadow: 10px 15px 10px;
    -o-box-shadow: 10px 15px 10px;
    -ms-box-shadow: 10px 15px 10px;
}

Kết quả

– Các bạn đã thấy box được đổ bóng nhưng bóng lại mờ ảo đi.
– Ngoài ra chúng ta còn có thể tùy chỉnh màu sắc của box đổ bóng,ví dụ:

div.box_shadow{
   background: #cccccc;
    border: 5px solid red;
    height: 100px;
    width: 100px;
    box-shadow: 10px 15px 10px blue;
    -moz-box-shadow: 10px 15px 10px blue;
    -webkit-box-shadow: 10px 15px 10px blue;
    -o-box-shadow: 10px 15px 10px blue;
    -ms-box-shadow: 10px 15px 10px blue;
}

Kết quả

– Ngoài ra các bạn còn có thể thay đổi đổ bóng từ ngoài vào trong bằng cách thêm vào tùy chọn inset :

div.box_shadow{
   background: #cccccc;
    border: 5px solid red;
    height: 100px;
    width: 100px;
    box-shadow: 10px 15px 10px blue inset;
    -moz-box-shadow: 10px 15px 10px blue inset;
    -webkit-box-shadow: 10px 15px 10px blue inset;
    -o-box-shadow: 10px 15px 10px blue inset;
    -ms-box-shadow: 10px 15px 10px blue inset;
}

Kết quả

– Đây là 1 thuộc tính có rất nhiều cách tùy chỉnh thật tuyệt vời phải không nào.Các bạn có thể thay đổi các giá trị tăng giảm hoặc giá trị âm để hiểu rõ hơn về thuộc tính này nhé.

Thuộc tính text-shadow

– Các bạn đã được biết thuộc tính box-shadow là đổ bóng 1 box chứa dữ liệu nào đó, còn thuộc tính text-shadow là thuộc tính đổ bóng chữ
– Các viết và cấu trúc giống như box-shadow
– Cấu trúc đổ bóng theo: trục x, trục y, độ mờ và màu

text-shadow: <đổ theo chiều ngang> <đổ bóng theo chiều dọc> <độ mờ> <màu của đổ bóng>

Ví dụ:

p.shadow{
color: red;
font-weight: bold;
text-shadow: 0 0 3px blue;
}

<
Kết quả:

Bài học các thuộc tính css3 tại hocphp.info

Thuộc tính opacity

Thuộc tính opacity hiển thị cấp độ trong suốt cho thành phần.

Cấu trúc :

tag{
opacity: giá trị
}

– Các giá trị ở đây có thể từ 0 cho tới 1,độ trong suốt của thành phần phụ thuộc vào giá trị này.Nếu giá trị là 0 thì thành phần mờ hẳn và không thể nhìn thấy,còn nếu giá trị là 1 thì thành phần sẽ hiển thị rõ nét không bị mờ.
Ví dụ:

Mã html:

<div id="wrap">
   <div id="content"></div>
</div>

Mã css:

div#wrap{
width:500px;
height:100px;
background:red
}
div#content{
width:100px;
height:50px;
background:blue;
color: #fff;
}

Kết quả khi chưa sử dụng thuộc tính opacity:

Nội dung

– Các bạn thấy như hình trên thì hình màu xanh sẽ nằm trên hình màu đỏ và phần màu đỏ bị che khuất bởi màu xanh
Và giờ chúng ta thử thêm thuộc tính opacity xem thế nào nhé:

div#content{
width:100px;
height:50px;
background:blue;
opacity:0.5;
color: #fff;
}
Nội dung sử dụng opacity

– Các bạn thấy hình màu xanh vẫn nằm trên hình màu đỏ nhưng chúng ta có cảm giác hình màu xanh bị mờ đi và có thể thấy phần màu đỏ bị che khuất phía dưới.Các bạn có thể xem ảnh minh họa phía dưới để phần nào hiểu rõ hơn về thuộc tính này:

Thuộc tính opacity trong css3

Thuộc tính opacity trong css3

Thuộc tính font-face

– Như các bạn đã được biết để thay đổi font chữ hiển thị trên website bạn chỉ cần sử dụng thuộc tính font-family trong css nhưng có 1 điều đó là font chữ đó phải được cài đặt trên máy khách hàng điều này thật bất tiện phải không.Để có thể hiển thị font chữ riêng của mình trên tất cả các máy tính thì bạn có thể sử dụng thuộc tính font-face,đây là 1 thuộc tính cho phép ta tự khai báo thêm 1 loại font chữ cho website và bạn phải chắc chắn là có sẵn font chữ đó để upload lên website nhé.

– Cấu trúc:

@font-face { thuộc tính: giát rị; }

Ví dụ:


@font-face {

font-family: 'myFont';

src: url('webfont.ttf');

}

p.font{

font-family: 'myFont';

}

– Ở ví dụ trên các bạn thấy dòng font-family: ‘myFont’;đây chính là dòng khai báo tên font chữ mà các bạn muốn đặt,còn dòng src: url(‘webfont.ttf’); đây chính là dòng khai báo đường dẫn tới file font chữ của bạn trên website.Chỉ cần 2 dòng thông báo trên là chúng ta đã có thể sử dụng font chữ này theo ý muốn trong trang web.Lúc này mình đang định dạng cho tất cả các thẻ <p class=”font”> sẽ sử dụng font chữ có tên myFont mà mình khai báo ở trên.Các bạn thấy thật dễ sử dụng phải không nào,vậy là giờ các bạn đã có thể sử dụng font chữ theo ý muốn của mình rồi.

Thuộctính word-wrap

Thuộc tính word-wrap sẽ làm cho những từ dà ixuống hàng mà không làm vỡ layout.Ví dụ bạn có 1 box chứa dữ liệu nhỏ mà trong đó chứa 1 đoạn text khá dài viết liền nhau (ví dụ email) như vậy đoạn text này có thể nằm tràn ra khung này,để giải quyết vấn đề chúng ta cần sử dụng thuộc tính word-wrap này,hãy cùng mình đi luôn vào 1 ví dụ để thấy rõ hơn nhé.

Cú pháp CSS:

word-wrap:break-word;

Mình có đoạn mã html sau:

<div class="word_wrap">hoangvantuyencnt@gmail.com</div>

và đoạn css chưa sử dụng word-wrap:

div.word_wrap{
width:100px;
border:2px solid red;
padding:10px;
}

Kết quả:

hoangvantuyencnt@gmail.com

-Các bạn thấy đoạn text bị tràn ra khỏi box chứa phải không nào,giờ chúng ta thử sử dụng thuộc tính word-wrap xem nhé:

div.word_wrap{
width:100px;
border:2px solid red;
padding:10px;
word-wrap:break-word;
}

Kết quả:

hoangvantuyencnt@gmail.com

Kết thúc bài học: Qua bài này mình đã giới thiệu cho các bạn những thuộc tính quan trọng trong css3,ngoài ra còn rất nhiều thuộc tính khác các bạn có thể xem thêm tại đây.Cho tới bài học này là các bạn đã có thể tự làm 1 giao diện website tĩnh theo ý mình rồi.Sang những bài học tiếp theo chúng ta sẽ bắt đầu sang tìm hiểu về javascript và jquery 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