Học thiết kế web cơ bản: hoc-html-css

Càng nhiều thiết bị, càng nhiều độ phân giải khác nhau và sự phổ biến của các thiết bị như iPhone, iPad và các smartphone có thể chuyển chế độ xem nội dung trang web theo chiều ngang hay chiều dọc một cách dễ dàng.

Khi thiết kế cho cả màn hình nằm ngang và màn hình dọc, chúng ta phải tính đến hàng trăm kích thước màn hình khác nhau. Ta có thể nhóm một số kích thước lại với nhau và thiết kế cho từng nhóm một và thiết kế riêng cho từng nhóm này nếu cần thiết. Bên cạnh đó bạn cũng phải biết rằng khá nhiều người dùng không bao giờ mở trình duyệt màn hình maximizeThiết kế giao diện với responsive

Bố trí linh hoạt (flexible layout)

Một vài năm trước, khi flexible layout (Tạm dịch là bố trí linh hoạt) còn là thứ gì đó xa xỉ đối với website. Flexible trong thiết kế là số lượng cột và nội dung. Ảnh có thể dễ dàng làm “vỡ” cấu trúc trang website. Việc thiết kế trên một khoảng kích thước tính bằng pixel khiến người thiết kế lúng túng khi trang web chuyển giữa các kích thước khung hình khác nhau.

Hình ảnh cần phải được tự động điều chỉnh và không được phép làm vỡ cấu trúc website, vì chúng ta không làm một sản phẩm dùng để in ấn. Trang web trên được thiết kế bằng cách sử dụng cách bố trí thông minh ở chiều ngang, chiều dọc và tự động điều chỉnh kích thước hình ảnh, nội dung phù hợp với màn hình hiển thị.

Xem thêm ...

Thứ Năm, 18 tháng 6, 2015

Thuộc tính @fontface trong css3

Đăng bởi Nặc danh20:38hoc-html-cssKhông có bình luận

Hướng dẫn thuộc tính @fontface trong css3 tài liệu css

Cấu trúc

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

Thuộc tính của font trong css3:

Thuộc tính	giá trị	Ví dụ	Mô tả
font-family	tên	font-family: myFont;	Xác định tên cho font chữ.
font-style	normal italic oblique	font-style: italic;	Xác định loại cho font chữ.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	font-weight: bold;	Xác định font đậm hay không.
src	url(đường dẫn font)	src: url(files/vcouri.ttf);	Xác định đường dẫn font chữ được load.
unicode-range	phạm vi unicode	unicode-range: U+0020-U+007e;	Xác định phạm vi của các ký tự unicode được hỗ trợ.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	font-stretch: condensed;	Xác định văn bản rộng hơn hay hẹp hơn. (Thuộc tính này vẫn chưa được hỗ trợ bởi trình duyệt).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Su dung font trong css3</p>
<p class="addFont">Su dung font trong css3</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Su dung font trong css3

CSS viết:

@font-face {
    font-family: 'myFont';
    src: url('vcouri-webfont.ttf');
}

p.addFont {
    font-family: 'myFont';
}

Hiển thị trình duyệt khi có CSS:

Su dung font trong css3

Sử dụng cách sau đây để các trình duyệt đều hiển thị tốt, CSS viết:

@font-face {
    font-family: 'myFont';
    src: url('vcouri-webfont.eot');
    src: url('vcouri-webfont.eot?#iefix'), /* IE4+ */
         url('vcouri-webfont.woff') format('woff'),
         url('vcouri-webfont.ttf') format('truetype'), /* font chuan */
         url('vcouri-webfont.svg#vni-courinormal') format('svg'); /* iphone, ipad*/
}

p.addFont {
    font-family: 'myFont';
}

Hiển thị trình duyệt khi có CSS:

Su dung font trong css3

học thiết kế web ở Hà Nội

Học thiết kế đồ họa

Xem thêm ...

Thứ Năm, 11 tháng 6, 2015

Tài liệu hướng dẫn học css - thuộc tính opacity trong css

Đăng bởi Nặc danh21:45hoc-html-cssKhông có bình luận

Tài liệu hướng dẫn học css - thuộc tính opacity trong css

opacity có các giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
opacity	giá trị	opacity: 0.3;	Độ trong suốt của thành phần phụ thuộc vào giá trị.
opacity	inherit	opacity: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<div class="opaPr"
<p class="below">Thành phần dưới</p>
<p class="above">Thành phần trên</p>
</div>
</body>
</html>

CSS viết:

div.opaPr {
    position: relative;
}

p.below {
    background: #ccff00;
    height: 100px;
    width: 100px;
}

p.above {
    background: #cc0000;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
}

Hiển thị trình duyệt khi chưa có opacity:

Thành phần dưới

Thành phần trên

Thêm thuộc tính opacity vào trong "thành phần trên":

div.opaPr {
    position: relative;
}

p.below {
    background: #ccff00;
    height: 100px;
    width: 100px;
}

p.above {
    background: #cc0000;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    opacity: 0.6;
}

Hiển thị trình duyệt khi có opacity:

Thành phần dưới

Thành phần trên

Đào tạo lái xe ô tô tại Hà Nội
Cho thuê xe tự lái giá rẻ tại Hà Nội

Xem thêm ...

Thuộc tính của box trong css3

Đăng bởi Nặc danh21:12hoc-html-cssKhông có bình luận

Thuộc tính của box trong css3: tài liệu học css

Thuộc tính	giá trị	ví dụ	Mô tả
box-align	start	box-align: start;	Thành phần sẽ nằm về phía trên cùng của thành phần bao ngoài.
	end	box-align: end;	Thành phần sẽ nằm về phía dưới cùng của thành phần bao ngoài.
	center	box-align: center;	Thành phần sẽ nằm giữa thành phần bao ngoài (theo chiều thẳng đứng).
	baseline	box-align: baseline;	Thành phần sẽ nằm theo đường cơ bản (baseline), giá trị được áp dụng đối với các box theo chiều ngang (box-orient: horizontal).
	stretch	box-align: stretch;	Thành phần sẽ được nới rộng để phù hợp với thành phần bao ngoài.
box-direction	normal	box-direction: normal;	Hiển thị thành phần từ trên xuống dưới hay từ trái sang phải, đây là dạng mặc định.
	reverse	box-direction: reverse;	Hiển thị thành phần từ dưới lên trên hay từ phải sang trái.
	inherit	box-direction: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
box-flex	Số nguyên	box-flet: 2;	Ưu tiên linh hoạt theo các thành phần khác.
box-flex	inherit	box-flet: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
box-ordinal-group	Số nguyên	box-ordinal-group: 1;	Cho biết thứ tự ưu tiên của các thành phần.
box-ordinal-group	inherit	box-ordinal-group: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
box-orient	block-axis	box-orient: block-axis;	Định dạng thành phần dọc theo khối trục.
	horizontal	box-orient: horizontal;	Định dạng thành phần từ trái sang phải theo chiều ngang.
	inline-axis	box-orient: inline-axis;	Định dạng thành phần theo trục nội tuyến.
	vertical	box-orient: vertical;	Định dạng thành phần từ trên xuống dưới theo chiều dọc.
	inherit	box-orient: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
box-pack	center	box-pack: center;	Đối với box hướng bình thường cạnh trái của thành phần được được chia đều cho cả hai phía.
	end	box-pack: end;	Đối với box hướng bình thường cạnh phải của thành phần được đặc mép bên phải, ngược lại cạnh trái của thành phần sẽ được đặt mép bên trái.
	justify	box-pack: justify;	Không gian mở rộng sẽ được chia đều giữa các thành phần.
	start	box-pack: start;	Đối với box hướng bình thường cạnh trái của thành phần được đặc mép bên trái, ngược lại cạnh phải của thành phần sẽ được đặt mép bên phải.
box-sizing	content-box	box-sizing: content-box;	Thuộc tính height và width chỉ có nội dung, không bao gồm padding, border và margin.
	border-box	box-sizing: border-box;	Thuộc tính height và width sẽ bao gồm padding và border, nhưng không gồm margin.
	inherit	box-sizing: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
box-shadow	đơn vị (ngang)	box-shadow: 10px 10px;	Đây là thuộc tính bắt buộc, định vị trí bóng nằm ngang cho thành phần, có thể dùng số âm.
	đơn vị (dọc)	box-shadow: 10px 10px;	Đây là thuộc tính bắt buộc, định vị trí bóng nằm dọc cho thành phần, có thể dùng số âm.
	đơn vị (độ mờ)	box-shadow: 10px 10px 10px;	Định khoảng cách mờ cho bóng.
	đơn vị (độ lan rộng)	box-shadow: 10px 10px 10px10px;	Tăng hoặc giảm độ lan rộng cho bóng.
	mã màu	box-shadow: 10px 10px#cc0000;	Màu sắc cho bóng.
	inset	box-shadow: 10px 10px #cc0000 inset;	Thay đổi bóng từ ngoài tối vào trong sáng.

Ví dụ

Xem thêm ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>box shadow</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

box shadow

CSS viết:

p {
    background: #cc0000;
    height: 50px;
    -moz-box-shadow: 5px 10px 5px #000;
    -webkit-box-shadow: 5px 10px 5px #000;
    box-shadow: 5px 10px 5px #000;
}

Hiển t

Xem thêm ...

Thuộc tính background gradient

Đăng bởi Nặc danh20:57hoc-html-cssKhông có bình luận

Hướng dẫn làm web đẹp với các thuộc tính css - tài liệu css

Bảng giá trị vị-trí dành cho trình duyệt

Giá trị vị-trí		hiển thị
-moz-, -o-, -ms-	-webkit-	hiển thị
bottom	left bottom,left top right bottom,right top
top	left top,left bottom right top,right bottom
left	left top,right top left bottom,right bottom
right	righ top,left top right bottom,left bottom
left bottom	left bottom,right top
left top	left top,right bottom
right bottom	right bottom,left top
right top	right top,left bottom

CIRCLE

Cấu trúc

div {
        background: -moz-radial-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
        background: -o-radial-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
        background: -ms-radial-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
        background: -webkit-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
}

Trong đó:

vị-trí: được xác định theo bảng giá trị bên dưới.
kích-thước: được xác định theo bảng giá trị bên dưới
mã-màu: giá trị màu, tham khảo.
n: độ tràn màu (hay độ trộn lẫn), giá trị tính theo %.

Bảng giá trị vị-trí và kích-thước

Giá trị		hiển thị
vị-trí	kích-thước	hiển thị
top left	closest-side
	closest-corner
	farthest-side
	farthest-corner
top center	closest-side
	closest-corner
	farthest-side
	farthest-corner
top right	closest-side
	closest-corner
	farthest-side
	farthest-corner
center left	closest-side
	closest-corner
	farthest-side
	farthest-corner
center center	closest-side
	closest-corner
	farthest-side
	farthest-corner
Center right	closest-side
	closest-corner
	farthest-side
	farthest-corner
bottom left	closest-side
	closest-corner
	farthest-side
	farthest-corner
bottom center	closest-side
	closest-corner
	farthest-side
	farthest-corner
bottom right	closest-side
	closest-corner
	farthest-side
	farthest-corner

ELLIPSE

Cấu trúc

div {
        background: -moz-radial-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
        background: -o-radial-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
        background: -ms-radial-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
        background: -webkit-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
}

Trong đó:

vị-trí: được xác định theo bảng giá trị bên dưới.
kích-thước: được xác định theo bảng giá trị bên dưới
mã-màu: giá trị màu, tham khảo.
n: độ tràn màu (hay độ trộn lẫn), giá trị tính theo %.

Bảng giá trị vị-trí và kích-thước

Giá trị		hiển thị
vị-trí	kích-thước	hiển thị
top left	closest-side
	closest-corner
	farthest-side
	farthest-corner
top center	closest-side
	closest-corner
	farthest-side
	farthest-corner
top right	closest-side
	closest-corner
	farthest-side
	farthest-corner
center left	closest-side
	closest-corner
	farthest-side
	farthest-corner
center center	closest-side
	closest-corner
	farthest-side
	farthest-corner
Center right	closest-side
	closest-corner
	farthest-side
	farthest-corner
bottom left	closest-side
	closest-corner
	farthest-side
	farthest-corner
bottom center	closest-side
	closest-corner
	farthest-side
	farthest-corner
bottom right	closest-side
	closest-corner
	farthest-side
	farthest-corner

Ví dụ

Xem thêm ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Background gradient</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Background gradient

Background gradient dạng linear, CSS viết:

div {
        background-color: #cc0000;
        background: -moz-linear-gradient(bottom, #cc0000 30%, #330000 70%);
        background: -o-linear-gradient(bottom, #cc0000 30%, #330000 70%);
        background: -ms-linear-gradient(bottom, #cc0000 30%, #330000 70%);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
        height: 300px;
        width: 300px;
}

Hiển thị trình duyệt khi có CSS:

Background gradient

Đào tạo làm web tại Hà Nôi
Đào tạo lái xe tại Hà Nội

Xem thêm ...

Thứ Ba, 5 tháng 4, 2016

1. Cú pháp CSS:

Thứ Hai, 21 tháng 3, 2016

1. Khái niệm thiết kế giao diện web với responsive

2. Một số kĩ thuật trong thiết kê responsive

Độ phân giải màn hình

Thứ Năm, 18 tháng 6, 2015

Cấu trúc

Thuộc tính của font trong css3:

Ví dụ

HTML viết:

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

Hiển thị trình duyệt khi có CSS:

Sử dụng cách sau đây để các trình duyệt đều hiển thị tốt, CSS viết:

Hiển thị trình duyệt khi có CSS:

Thứ Năm, 11 tháng 6, 2015

Ví dụ

HTML viết:

CSS viết:

Hiển thị trình duyệt khi chưa có opacity:

Thêm thuộc tính opacity vào trong "thành phần trên":

Hiển thị trình duyệt khi có opacity:

Thuộc tính của box trong css3: tài liệu học css

Ví dụ

HTML viết:

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

Hiển t

CIRCLE

ELLIPSE

Ví dụ

HTML viết:

Hiển thị trình duyệt khi chưa có CSS:

Background gradient dạng linear, CSS viết:

Hiển thị trình duyệt khi có CSS:

Học thiết kế website

Facebook

Bài đăng phổ biến

Quảng cáo

Giới thiệu

Khóa học thiết kế và lập trình