Hướng dẫn chỉnh CSS cơ bản

Mình sẽ hướng dẫn các bạn CSS và HTML cơ bản, để các bạn có thể tha hồ chỉnh sửa website 1 cách chủ động và bài bản thay vì mò mẫm.

CSS là đoạn mã, là 1 ngôn ngữ web, kết hợp với mã nguồn HTML của web làm nên giao diện trang web

Khi các bạn nhấn Ctrl+U bạn sẽ nhìn thấy mã nguồn của trang web rất lằng nhằng

VD 1 đoạn mã HTML cơ bản

<a id="link_google_1" class="link_google" href="http://google.com">Google</a>

Thì kết quả hiển thị trên web là

 Google

Giải thích:

- a

là thẻ liên kết, cho phép người xem click vào là ra liên kết muốn trỏ đến, ngoài ra nó còn cho phép Google tìm thấy liên kết đích. Ngoài thẻ a ra thì google không thể tìm thấy trang đích nếu không có sitemap.xml

1 thẻ a bắt đầu bằng <a> và kết thúc bằng </a>

Những gì trong 1 thẻ trên đều có liên kết, bạn có thể đặt trong thẻ a ảnh, chữ, đoạn văn ... ( riêng flash không được, vì vậy muốn gắn link vào flash thì phải gắn ở trong phần mềm làm flash )

- id="link_google_1"

link_google_1 là số index thẻ a này, hiểu nôm na như số CMT của bạn, trong web có nhiều liên kết và mỗi liên kết hay 1 phần tử html chỉ có 1 số id nhất định, nên việc copy mã nguồn có ID là sai

- class="link_google"

link_google là class của thẻ a này ( dịch ra tiếng Việt là "giai cấp", hoặc "lớp", mình vẫn sẽ dùng từ class )

- hreft là liên kết đến, khi click vào thẻ a này thì website sẽ chuyển hướng đến liên kết đó

- Trong thẻ a chứa từ Google là phần hiển thị trên web

Thực hành

Các bạn vào "bố cục chức năng, kéo thả 1 box HTML 1 vào vị trí nào đó trên web để thử, nhấn vào hình bút chì hoặc vào "Chức năng khác->cấu hình khung mã HTML", sau đó dán mã này vào box html1 và lưu vào, từ giờ mình sẽ thực hành với box này.

Dán mã sau vào box HTML1

<a id="link_google_1" class="link_google" href="http://google.com">Google</a>

Quay lại website, refresh ta đã thấy chữ Google xuất hiện, ấn vào sẽ thấy web mình chuyển sang trang Google

In đậm chữ Google

Thêm đoạn chữ đỏ vào mã trên

<a id="link_google_1" class="link_google" href="http://google.com" style="font-weight:bold">Google</a>

Cho chữ to lên, in đậm, mầu đỏ

<a id="link_google_1" class="link_google" href="http://google.com" style="font-weight:bold;font-size:20px;color:red">Google</a>

Cơ bản là thế, cách thuộc tính các bạn có thể tìm trên google, mình sẽ liệt kê các thuộc tính cơ bản cho các bạn dùng

Vậy id, class để làm gì

Các bạn xóa đoạn mã trên đi thay bằng đoạn sau

<a id="link_google_1" class="link_google" href="http://google.com">Google</a>

<style>
#link_google_1{font-weight:bold;font-size:20px;}
.link_google{color:red}
</style>

Lưu lại, kết quả nhận được tương tự

Phần "Giao diện, tự nhập CSS dùng như nào"

Các bạn vào "Giao diện->tự nhập css", bật nó lên  và dán đoạn sau vào

#link_google_1{font-weight:bold;font-size:20px;}
.link_google{color:red}

Quay lại box HTML1, chỉ giữ lại mã

<a id="link_google_1" class="link_google" href="http://google.com">Google</a>

Refresh web, kết quả không khác gì

Như vậy phần tự nhập CSS là để dùng nhập các thuộc tính CSS của trang web cho bạn nào "biết"

Khi nào dùng Id, khi nào dùng class

Id mạnh khi dùng với javascript ( sẽ bàn sau ), còn lại để giao diện 1 web đa phần lập trình viên dùng class, vì class có tác dụng với toàn bộ các thẻ được gắn class đó

VD.link_google{color:red}

Sẽ cho toàn bộ phần tử trên web với class="link_google" có mầu đỏ

Thẻ mẹ con

VD sau đây là 1 thẻ a được nằm trong thẻ div ( khối )

<div class="link_google"><a href="http://google.com">Google</a></div>

Thẻ div là cấp mẹ của thẻ a, muốn thẻ a có mầu đỏ thì CSS sẽ được viết là

.link_google a{color:red}

Nghĩa là mọi thẻ a, nằm trong class link_google sẽ có mầu đỏ

Áp dụng để đổi mầu chữ "Mua hàng" trong webmienphi

Dùng Firefox mở website của bạn ra, nhắp phải vào nút mua hàng, chọn Thăm dò phần tử, bạn sẽ thấy bên khung trái hiện lên

<div class="nutdathang">

    <input class="nut_dat_hang_10" type="button" onclick="gianhang_dathang(10,605,1)" value="Mua hàng"></input>

</div>

Đây là HTML của nút mua hàng, muốn nút mua hàng có mầu đỏ, in đậm bạn thử đưa đoạn mã sau vào phần tự nhập CSS

.nutdathang input{color:red;font-weight:bold}

( đang hoàn thiện )

Sao không tiếp tục Admin...mọi người đang trong chờ Admin đó.

Nhân tiện nói về code, mình đang mò code ẩn nội dung một phần website, đối với các bài viết dài, ẩn đi để trông có vẻ gọn và load nhanh hơn.

<DIV class="smallfont" style="MARGIN-BOTTOM: 2px"><BR>
<DIV style="MARGIN: 5px 20px 20px">
<DIV
class=smallfont style="MARGIN-BOTTOM: 2px"><B>Nội
dung</B>: <INPUT style="PADDING-RIGHT: 0px; PADDING-LEFT:
0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 60px;
PADDING-TOP: 0px" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'Ẩn'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Hiện'; }" type=button
value=Hiện> </DIV>
<DIV>
<DIV style="DISPLAY: none">
<DIV
align=center><IMG alt=""
src="link ảnh"
border=0></DIV>

Trong code trên, chổ in đậm là nội dung cần ẩn, tuy nhiên, mình không tìm được thẻ đóng đoạn code này. Mình đặt code này trong  bài viết và nó ẩn tất cả nội dung từ chổ đặt code đến hết bài. Trong khi mình chỉ muốn ẩn 1 đoạn nhất định nào đó.

Nhờ Admin và mọi người giúp với.

Topic rất hay. Cơ mà bị bỏ đói rồi. Tiếc quá.

Đồ chơi trẻ em | do choi tre em

Không thấy Admin cập nhật nữa nhỉ

http://cuacuondandung.com

Tiếp tục nữa đi mình đang chờ đó 

Công nhận là CSS giúp giải quyết được nhiều vấn đề ghê. ACE nào có những CSS hay tổng hợp lại trong topic này luôn nha

cảm giác như làm web trên webmienphi k cần phải có kỹ năng thiết kế web mà vẫn có web hay để sài ấy ae nhỉ
Mình đang sử dụng diễn đàn của webmienphi nhưng rất phát triển http://raovat.tuoitrevn.net/

Bài viết hay quá 

<a id="link_google_1" class="link_google" href="http://thanhlylaaptopcu.com">laptop cũ giá rẻ</a>

thử cái xem nào

du lịch na hang tuyên quang giá rẻ

Mình mới học thiết kế web, đang mò các tính năng thì gặp topic này để tự chỉnh web nhưng topic lại dừng.

thank admin top pic hay quá thank ad .. sub chéo nào anh ơi ... http://maichedidongdanang.net http://icflowers.vnn.mn/

thank admin top pic hay quá thank ad .. sub chéo nào anh ơi ... http://maichedidongdanang.net http://icflowers.vnn.mn/