Loading post navigation ...
 
 

Pro page

9
Nhận xét

18 đọan code CSS ngắn - Rất có ích cho việc chỉnh sửa code CSS của template

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

18 CSS Short Hands
[FD's BlOg] - Bài viết sẽ giới thiệu cho các bạn 18 lệnh cơ bản của CSS, giúp bạn dễ dàng hơn trong việc thiết kế và chỉnh sửa blog(web) của mình.




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:

#yourtab {
margin:20px;
}

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

#yourtab {
margin:20px auto;
}

- với lệnh trên, lề tráiphả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ị:

#yourtab {
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:

#yourtab {
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:

#yourtab {
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:

#yourtab {
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:

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


4. Lệnh font:

#yourtab {
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)

#yourtab {
border-width:2px; // độ rộng đường bao
border-style: solid; // kiểu
border-color: #4096EE; // màu
}

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

#yourtab {
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

#yourtab {
color: #FFFFFF;
}
#yourtab {
color: #FFF;
}
#yourtab {
color: #fff;
}
#yourtab {
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

#yourtab {
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ả :



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

#your_div {
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:

#your_div{
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). xem ví dụ bên dưới để rõ:

hình gốc:


hình miêu tả việc clip


☼ Bên dưới là 3 lệnh code CSS3 (lưu ý. CSS3 chỉ hỗ trợ trên Firefox, safariand, và Chrome)

16. Bo góc:

.rounded_corner {
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:400px;
height:100px;
background-color:#000;
}

ảnh minh họa:


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

.your_shadow {
width:400px;
height:200px;
background-color:#000;
-webkit-box-shadow: 5px 5px 2px #ccc;
}

ảnh minh họa:


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;
}

ảnh minh họa:


nguồn : webhostingsearch

Chúc các bạn thành công.


Enter your mail address:

9

Khách (ẩn danh)

khi post bài có hình trong wordpress mình muốn mỗi lần post nó tự động resize đúng với khung bài viết thì làm thế nào vậy bạn? ~x(

fandung

Trong worldpress mình ko rành. Nhưng đại khái bạn có thể tạo 1 thẻ img riêng cho bài viết , và quy định độ rộng cho nó, như thế nó sẽ tự động bằng với độ rộng của bài viết.

Nhớ là phải là 1 thẻ img riêng, nếu không tất cả các hình khác cũng bị như thế thì chết.

Có thể làm theo 2 cách sau:
- 1 dùng thẳng class của bài viết, ví dụ như bên dưới :

.post img {
...
...
width:500px;
}

- cách 2 là tạo 1 class riêng :

.resize img {
width:500px;
}

rồi khi post bài bạn thêm thẻ div như bên dưới :
<div class="resize">

{phần bài viết}

</div>

- Lưu ý là nếu làm như vậy thì các hình trong bài viết dều có kích thước bằng nhau, dùng lớn hay nhỏ.

Khách (ẩn danh)

chào , bạn có thể chỉ cho mình đoạn css giúp blog nằm ở giửa và canh đều 2 bên .cảm ơn

trần miu

@meopro : bạn vô style.css của themes bạn và thêm đoạn code:
img {
max-width:500px;//chiều dài hình lớn nhất
max-height:400px;//chiều rộng hình lớn nhất
}
chú ý:
ví dụ khung bài viết(body j đó) của bạn là 600 thì bạn chỉnh max-width cho phù hợp có thể nhỏ hơn tùy bạn

trần miu

@hùng nói : bạn có thẻ thêm code này trước thẻ </b:skin>
/* body */
body {
background:$bgcolor url(http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/09/27/03/58901254039078.jpg) repeat-x top;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;//center là căn giữa
}

Khách (ẩn danh)

Nếu mình muốn canh đều lề hai bên thì làm sao hả bạn T.T

Wuynie

code nào để mình chỉnh sửa hình nền hả a ? của e nó ghi vậy thì sửa sao ?

Wuynie

""

Wuynie

đại khái là code màu, ko fải code hình thì mình làm ntn ạ ? với lại fần fía dưới post thì ko có mã bodybackground nên e ko biết làm thế nào nữa, cả fần post body e cũng ko sửa lại thành hình được.


fần post nó chỉ ghi như vậy thoi

/* Posts
-----------------------------------------------*/
h2.date-header {
font: $postdatefont;
color:$postdatetextcolor;
text-align:center;
}
.post {
margin-bottom:35px;
padding:25px 0 35px;
background:url(http://dl10.glitter-graphics.net/pub/634/634040abjwva3v6o.gif) repeat-x left top;
}
h3.entry-title {
padding:2px 0 4px;
font: $posttitlefont;
color:$posttitletextcolor;
line-height:1em;
text-align:center;
border:2px solid #F778A1;
background:url(https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTPuI-1vsWQnCtGmfhkmid0oPySu5uP-0zhq_IUiBN-i-Kni6XQAg)
}
h3.entry-title a, h3.entry-titlea:visited, h3.entry-title strong {
color:$posttitletextcolor;
text-decoration:none;
}
h3.entry-title strong, h3.entry-title a:hover {
color:$posttitletextcolor;
text-decoration:none;
}
.post-body{
margin: 15px 0 20px;
line-height:1.6em;
}
.post blockquote {
font: $blockquotefont;
color: $blockquotecolor;
line-height:1.4em;
padding:0px 20px 0px 6px;
border-left:3px solid $blockquotecolor;
letter-spacing:-1px;
margin:3px 0 3px 20px;
}
.post-body ul, .post-body ol{
padding: 5px 10px 5px 30px;
}
.post-body ul li{
padding: 1px 0;
list-style-type: disc;
}
.post-body ol li{
padding: 1px 0;
list-style-type: decimal;
}
.jump-link{
display:inline;
}
.post-footer {
margin: .75em 0;
font: $postfooterfont;
color:$postfootertextcolor;
line-height: 0.5em;
}
.comment-link {
margin-left: .6em;
}
.post img {
border:0px solid #FFF8C6 ;
}
.tr-caption-container img {
border: none;
padding: 0;
}



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home