You are here: Home / Archives for CSS

53 kỹ thuật CSS ko thể bỏ qua

February 28, 2009 By 3 Comments

CSS rất quan trọng khi chúng ta làm web. Và ngày càng được sử dụng nhiều hơn. CSS giúp cho việc thiết kế 1 trang web trở nên dễ dàng hơn, dễ dàng thay thế các file css bởi file khác và thay đổi giao diện của web. Có rất nhiều các developer bỏ thời gian để viết những bài viết về cSS và phát triển nhiều những kĩ thuật hữu ích để tiết kiệm thời gian. Dưới đây bạn sẽ tìm thấy 1 danh sách các kĩ thuật CSS mà ko thể bỏ qua. Nó thật sự cần thiết và làm cho công việc của bạn dễ dang hơn.

Dưới đây là 53 kĩ thuật CSS sẽ giúp bạn:

1. CSS Based Navigation

bg nav 53 kỹ thuật CSS ko thể bỏ qua

[Read more...]

button 53 kỹ thuật CSS ko thể bỏ qua
Filed Under: CSS, For Designers Tagged With: ,

Top 100 website cho Designer

February 28, 2009 By Leave a Comment

Dưới đây là danh sách 100 website mà Designer ko thể bỏ qua.

Fonts
arrow Top 100 website cho DesignerDafont

arrow Top 100 website cho DesignerTypenow

arrow Top 100 website cho DesignerNeatfonts

arrow Top 100 website cho DesignerFonts

arrow Top 100 website cho DesignerFontshop

arrow Top 100 website cho DesignerTypetester

arrow Top 100 website cho DesignerBetterfonts

 arrow Top 100 website cho DesignerVeer Types

arrow Top 100 website cho DesignerUrbanfonts

arrow Top 100 website cho DesignerCreamundo

arrow Top 100 website cho DesignerFree Fonts

arrow Top 100 website cho Designer1001 Free Fonts

arrow Top 100 website cho DesignerMy Fonts

arrow Top 100 website cho DesignerFontifier

arrow Top 100 website cho DesignerThinkingwithType

 arrow Top 100 website cho DesignerFontso

arrow Top 100 website cho DesignerBetter Fonts

arrow Top 100 website cho DesignerUrban Fonts

arrow Top 100 website cho DesignerFont Diner

arrow Top 100 website cho DesignerYouFont

arrow Top 100 website cho DesignerFonts by Theme

arrow Top 100 website cho DesignerFontlet

arrow Top 100 website cho DesignerFunny Fonts

[Read more...]

button Top 100 website cho Designer
Filed Under: CSS, For Designers Tagged With: ,

5 menu js hoặc css tuyệt vời cho bạn

February 27, 2009 By Leave a Comment

Website sẽ ko có giao diện tốt nếu ko có 1 menu đẹp. Phụ thuộc vào số lượng trang con mà bạn có thể chọn là Menu đơn hoặc Menu nhiều cấp. Menu có thể được tạo = javascript hoặc CSS tùy thuộc vào khả năng của bạn. Dưới đây là 5 dạng menu đẹp cho các bạn:

1.  Menu xổ xuống nhiều cấp bởi jQuery

1231751944 5 menu js hoặc css tuyệt vời cho bạn

Menu này thuần tùy sử dụng jquery và css. Nó có thể được cài đặt dễ dàng. Bạn không phải sử bất kì 1 file JS nào mà chỉ sắp xếp danh sách các thành phần trong menu và gắn cho nó tên lớp(class).
Xem demo và download

[Read more...]

button 5 menu js hoặc css tuyệt vời cho bạn
Filed Under: Ajax, CSS, Javascript, JQuery Tagged With: , , ,

10 mẫu form CSS đẹp

February 25, 2009 By Leave a Comment

Bạn là người thiết kế giao diện Web, bạn rất hay phải làm ra các Form tương tác với người dùng. Chắc chắn bạn không thể không dùng CSS để làm đẹp cho Form của mình. Trong bài viết này sẽ giới thiệu cho bạn 10 mẫu Form đẹp sử dụng CSS cho mọi người. Hi vọng nó có ích cho các bạn.

1. Semantic Horizontal Form

forms css 1 10 mẫu form CSS đẹp

This form is coded in a semantic way and the elements are positioned next to eachother except for the last fieldset which spans the full width of the form below the 3 top fieldsets. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable)

[Read more...]

button 10 mẫu form CSS đẹp
Filed Under: CSS, Web2.0 Tagged With: ,

25 giao diện tuyệt vời từ WordPress

February 16, 2009 By 1 Comment

WordPress là một dạng blog nổi tiếng trên thế giới. Nó thật sự đơn giản, dễ sử dụng và có nhiều plugin và giao diện miễn phí. Dưới đây là liệt kê 25 giao diện tự thiết kế mà bạn nên xem. Nó thật thú vị!

01.
015 25 giao diện tuyệt vời từ Wordpress

[Read more...]

button 25 giao diện tuyệt vời từ Wordpress
Filed Under: CSS, Wordpress Tagged With: ,

Làm việc với DOM bằng JavaScript.

December 5, 2008 By Leave a Comment

Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ đang làm việc, thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu.

Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, chúng ta cùng xét một ví dụ về một trang HTML đơn giản.

Quote:

<html>
<head>
<link rel=’stylesheet’ type=’text/css’ href=’hello.css’ />
<script type=’text/javascript’ src=’hello.js’></script>
</head>
<body>
<p id=’hello’>hello</p>
<div id=’empty’></div>
</body>

</html>


Ta đã thêm vào các tham chiếu đến các file hello.css (dùng Cascading Style Sheet) và một file chứa mã nguồnJavaScript là hello.js. Ở đây cũng đồng thời khai báo một thẻ <div> với một ID.

Còn đây là file hello.css chứa stylesheet để áp dụng cho các mục trong file HTML:

Quote:

.declared{
color: red;
font-family: arial;
font-weight: normal;
font-size: 16px;
}
.programmed{
color: blue;
font-family: helvetica;
font-weight: bold;
font-size: 10px;
}


Chúng ta định nghĩa hai style, để mô tả gốc của các nút DOM (tên của các style là tùy chọn). Các style này không dược dùng trong file HTML, nhưng chúng sẽ được áp dụng qua file JavaScript.

Quote:

window.onload=function(){
var hello=document.getElementById(’hello’);
hello.className=’declared’;
var empty=document.getElementById(’empty’);
addNode(empty,”reader of”);
addNode(empty,”Ajax in Action!”);
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
children[i].className=’programmed’;
}
empty.style.border=’solid green 2px’;
empty.style.width=”200px”;
}
function addNode(el,text){
var childEl=document.createElement(“div”);
el.appendChild(childEl);
var txtNode=document.createTextNode(text);
childEl.appendChild(txtNode);
}


Hàm window.onload() sẽ được gọi khi trang web được nạp. Tại thời điểm này, cấu trúc cây DOM sẽ được thiết lập.

button Làm việc với DOM bằng JavaScript.
Filed Under: CSS, Javascript Tagged With: ,

Cú pháp & thuộc tính CSS Style.

December 5, 2008 By Leave a Comment

Cú pháp cơ bản của CSS
Cú pháp của CSS gồm ba thành phấn:

* Thành phần lựa chọn (thường là một thẻ HTML) (Selector)
* Thuộc tính (Property)
* Giá trị (Value)

Thể hiện của cú pháp CSS

Code:

Selector {

Property1: Value1;

Property2: Value2;

}

Selector có thể là các thẻ/nhóm thẻ HTML, các lớp khai báo, hay bằng định danh duy nhất của phần tử.
Khi chèn các đoạn mã CSS vào trang web, trình duyệt sẽ hiển thị trang web theo cách CSS đã qui định cho nó, có ba cách để chèn CSS vào trang web.

a. External Style Sheet (sử dụng file CSS được định nghĩa thành trong file riêng)
Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ <LINK>. Thẻ <LINK> được đặt bên trong thẻ <HEAD>.

Code:

<head>

<link rel=”stylesheet” type=”text/css”

href=”mystyle.css” />

</head>

b. Internal Style Sheet (định nghĩa các style sheet ngay trong trang web)
Trong trường hợp mỗi trang web của sử dụng các định dạng khác nhau, dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet, sử dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>.

Code:

<head>

<style type=”text/css”>

hr {color: sienna}

p {margin-left: 20px}

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

</style>

</head>

c. Internal Style Sheet (style được qui định ngay trong mỗi thẻ HTML)
Đây là phương pháp kém hiệu quả nhất, không nên sử dụng phương pháp này vì đã làm mất các ưu điểm của CSS.

Code:

<p style=”color: sienna; margin-left: 20px”>

This is a paragraph

</p>

Các thuộc tính của CSS Style

Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu. Một phần text của một phần tử có thể được quy định theo các thuộc tính color, font size, độ đậm của phông, và kiểu chữ sử dụng. Có rất nhiều tùy chọn được áp dụng cho thuộc tính trên. Ví dụ để qui định cho một paragraph:

Code:

.robotic{

font-size: 14pt;

font-family: courier new, courier, monospace;

font-weight: bold;

color: gray;

}

ngocha85(Updatesofts.com)

button Cú pháp & thuộc tính CSS Style.
Filed Under: Ajax, CSS Tagged With: ,

Các công nghệ trong AJAX – CSS

December 5, 2008 By Leave a Comment

Từ bài này, chúng ta sẽ tìm hiểu các công nghệ trong AJAX và mối liên hệ giữa chúng.

AJAX là một tập hợp các công nghệ bổ sung lẫn nhau. JavaScript có vai trò chất keo kết dính các ứng dụng lại với nhau. Giao diện người dùng được tạo và tái nạp bằng cách dùng JavaScript để điều khiển Document Object Model, tạo và tổ chức biểu diễn dữ liệu cho người dùng, đồng thời xử lí các tương tác trên chuột và bàn phím.

Cascading Style Sheets (CSS) cung cấp một sự nhất quán trên cảm quan “look and feel” cho ứng dụng và khả năng thao tác mạnh mẽ với DOM. Đối tượng XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc một cách bất đồng bộ với server, đảm bảo việc gửi yêu cầu người dùng và tái nạp dữ liệu trong khi người dùng vẫn làm việc.

[Read more...]

button Các công nghệ trong AJAX CSS
Filed Under: Ajax, CSS Tagged With: ,

Những điều cần biết khi viết mã CSS

November 28, 2008 By Leave a Comment

Những điều cần tránh trong khi viết mã HTML và CSS nếu bạn muốn website của mình hiển thị tốt ở hầu hết các browser.

1. Không bao giờ sử dụng padding cho các đối tượng có độ rộng cố định (fixed width)

Đây là nguyên tắc cơ bản vì cách căn lề của Internet Explorer khác với các trình duyệt khác và cũng là 1 lỗi của trình duyệt này. Lỗi này được gọi là “Box Model Bug” hình dưới là một hình ảnh minh họa cho lỗi này.

Bạn có thể thấy rằng độ rộng của đối tượng “được” cộng thêm khi hiển thị ở IE nếu như có padding. Vậy đơn giản là không dùng padding cho các đối tượng có độ rộng cố định (fixed width).

[Read more...]

button Những điều cần biết khi viết mã CSS
Filed Under: CSS Tagged With:

Làm rõ thuật ngữ (Id) và (Class)

November 28, 2008 By Leave a Comment

Cũng có khá nhiều bạn hỏi tôi về việc làm sao để phân biệt được id và class. Khi nào dùng id, khi nào dùng class trong HTML và CSS. Trong bài viết này tôi xin giải thích kỹ hơn về hai thuật ngữ này và cách dùng chúng trong quá trình viết mã HTML.
1. Id.
Đầu tiên chúng ta sẽ đi tìm hiểu về thuật ngữ id
1.1 Id là gì?
id hay là index(chỉ số) được dùng để xác định một đối tượng duy nhất nào đó. Do đó trong một trang HTML của bạn mỗi đối tượng chỉ có duy nhất một id, nếu có 2 đối tượng trở lên có id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó của bạn không validate HTML.
[Read more...]

button Làm rõ thuật ngữ (Id) và (Class)
Filed Under: CSS Tagged With: ,

Menu dạng tab – Phần I.

November 28, 2008 By Leave a Comment

Trong chúng ta tôi giám chắc rằng không còn ít người vẫn còn mặc cảm với những menu dạng tab, không phải vì nó xấu mà luôn nghĩ rằng làm nó khó và cấu trúc của nó rất phức tạp. Chính bản thân tôi trước đây cũng như vậy. Nhưng thực ra có phải như vậy không? để trả lời câu hỏi đó bây giờ chúng ta cùng nhau thử Style cho một kiểu tab đơn giản để xem nó có thực sự khó như chúng ta vẫn thường nghĩ không?.

Trong menu dạng này bao giờ cũng gồm 2 phần, phần 1 để chứa các tab và phần thứ hai là phần để chứa nội dung của các tab. để có hình dung rõ hơn chúng ta sẽ xem hình ảnh minh họa dưới đây.

[Read more...]

button Menu dạng tab Phần I.
Filed Under: CSS Tagged With:

Căn bảng vào giữa màn hình.

November 28, 2008 By Leave a Comment

Bình thường thì bạn muốn đặt một table có chiều rộng cố định vào giữa màn hình thì bạn làm thế nào? có phải bạn đặt thuộc tính align=”center” vào trong thẻ <table>?. Nếu bạn làm như vậy thì bạn chỉ được kết quả đúng như ý bạn trên một số trình duyệt, còn một số trình duyệt sẽ không thể hiện kết quả như bạn muốn.

Sau đây tôi muốn giới thiệu với bạn một tips nhỏ trong CSS để đặt một table có kích thước cố định vào giữa trang.

Giả sử rằng bạn có một table như sau: <table class=”center”>. Nếu bây giờ bạn muốn đặt table đó vào giữa trang màn hình bạn chỉ việc đặt cho hai thuộc tính margin-left và margin-right của table có giá trị bằng auto.

Chúng ta có mã CSS như sau:

table.center {
width: 780px;
margin-left: auto;
margin-right: auto;
}

button Căn bảng vào giữa màn hình.
Filed Under: CSS Tagged With:

CSS padding

November 28, 2008 By Leave a Comment

CSS padding sẽ định nghĩa khoảng trống giữa mép của các phần tử tới các phần tử con hoặc nội dung bên trong. Chúng ta không thể gán giá trị âm cho thuộc tính này. Cũng giống như margin thuộc tính padding cũng tương ứng với 4 phía của phần tử.

Tương ứng với 4 phía của phần tử chúng ta có 4 thuộc tính padding tương ứng đó là:

  1. padding-top:
  2. padding-right:
  3. padding-bottom:
  4. padding-left:

Các giá trị có thể gán cho các thuộc tính này là : % hoặc length

Để viết cho gọn chúng ta cũng có thể viết thuộc tính padding dưới dạng shorthand.

div.padding {
padding: 5px 3px 2px 8px;
}

button CSS padding
Filed Under: CSS, Web2.0 Tagged With:

Các thuộc tính của margin

November 28, 2008 By 1 Comment

Thuộc tính margin sẽ định nghĩa khoảng trắng bao quanh một phần tử HTML. Nó có thể dùng giá trị âm để lồng nội dung vào với nhau. Tương ứng với 4 phía của một phần tử chúng ta có 4 thuộc tính tương ứng. Mặt khác để viết cho gọn chúng ta cũng có thể dùng cách viết giản lược để định nghĩa các giá trị cho thuộc tính margin.

Đối với các trình duyệt Netcape và IE thì giá trị mặc định của thuộc tính margin là 8px. Nhưng Opera thì không hỗ trợ như vậy. Để cho thống nhất chúng ta có thể đặt margin mặc định cho toàn bộ các phần tử.

Các giá trị mà thuộc tính margin có thể nhận được đó là: auto, length, %. Chúng ta đặt giá trị nào là tùy thích cộng với việc tương ứng tỉ lệ với các phần tử khác.

[Read more...]

button Các thuộc tính của margin
Filed Under: CSS Tagged With:

Đường viền và các thuộc tính của đường viền

November 28, 2008 By 1 Comment

Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho các thẻ HTML như <div>, <li>, <table>,…

Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là:

  1. border-color:
  2. border-width:
  3. border-style:

01Thuộc tính màu của đường viền

[Read more...]

button Đường viền và các thuộc tính của đường viền
Filed Under: CSS Tagged With:
« Older Posts