Thứ Năm, 5 tháng 7, 2012

Tạo Trang Đănng Nhâp Và Đăng Ký Bằng PHP - MySQL

Posted by Unknown Thứ Năm, tháng 7 05, 2012, under | No comments

Vấn đề là chúng ta có 1 trang Web, có một số nội dung ( thao tác ) mà khách không được xem, chỉ có thành viên ( đã đăng ký và đăng nhập ) mới đươc xem . Ta sẽ  làm sao ? Demo sau sẽ giúp bạn hiểu thêm về vấn đề đó.
Các bước thực hiện :

1. Tạo 1 CSDL là "dangky" ,trong database "dangky" tạo table là "members" , table " members" có 4 cột: id ,uername, password, email .
Hình minh họa:

2.Tạo file"mysql.php", file này có chức năng là kết nối CSDL vói MySQL, nội dung file như sau:

<?php
$_host = "127.0.0.1"; // mặc định là localhost
$db_name = "dangky"; // do bạn tạo ra trong MySQL
$login_username = "root"; // mặ đinh, có thể thay đổi
$login_password = ""; // mặc định, có thể thay đổi 
@mysql_connect("{$_host}", "{$login_username}", "{$login_password}") or die("Không thể kết nối database");
@mysql_select_db("{$db_name}") or die("Không thể chọn database");
?>


3. Tạo file "index.html", file này chứa Link liên kết đến trang muốn xem nội dung (see.php), nội dung file như sau:

<html>
<head>
<title>Trang Chủ</title>
</head>
<body>
<br> Chào mừng bạn đến với CôĐơnOnline! <br/>
<br> Phần nội dung muốn xem <br/>
 <a href="see.php"> Nhấp vào để xem nội dung </a>
</body>
</html>

4. Tạo file "see.php", file này có chức nay là : nếu user đã đăng nhập thì hiện tên đăng nhập, cho xem nội dung của trang, 1 nút thoát chứa liên kết đến trang thoát  khỏi tài khoản đã đăng nhập(logout.php), nếu chưa đăng nhập thị đưa ra thông báo và có liên kết đến trang đăng đă nhập (login.php).Nội dung file như sau:


<?php
require_once("mysql.php"); 
@session_start();
if ( isset($_SESSION['user_id']) )

 $user_id = intval($_SESSION['user_id']);
 $sql_query = @mysql_query("SELECT * FROM members WHERE id='{$user_id}'");
$member = @mysql_fetch_array( $sql_query ); 
echo "Bạn đang đăng nhập với tài khoản : " .$member['username'] ."<br/>";
echo" Bạn được quyền xem nội dung trang này" . "<br/>";
print " <a href='logout.php'> thoát </a>";
}
else{ 
echo "Bạn chưa đăng nhập! <a href='login.php'>Nhấp vào đây để đăng nhập</a> ";
 }
?> 


5. Tạo file "logout.php", file này có nhiệm vụ là thoát khỏi tài khoản đã đăng nhập và trả về Trang Chủ (index.html). Nội dung file:


<?php
session_start();
if (isset($_SESSION['user_id'])) {
unset($_SESSION['user_id']);
}
// trở về trang login
header('Location: index.html');
exit;
?>

6. Tạo file "login.php", file này có nhiệm vụ thực hiện chức năng đăng nhập, nếu trùng khớp CSDL thì chuyển user đến trang xem nội dung (see.php), nếu sai yêu cầu user nhập lại hoặc nhấp vào liên kết "Tạo tài khoản" để đưa đến trang tạo tài khoản (register.php). Nộ dung file "login.php" như sau:


<?php
// Tải file mysql.php lên
require_once("mysql.php");
if ( isset($_POST['ok']) )
{
// Dùng hàm addslashes() để tránh SQL injection, dùng hàm md5() để mã hóa password
$username = addslashes( $_POST['username'] );
$password = md5( addslashes( $_POST['password'] ) );
// Lấy thông tin của username đã nhập trong table members
$sql_query = @mysql_query("SELECT id, username, password FROM members WHERE username='{$username}'");
$member = @mysql_fetch_array( $sql_query );
// Nếu username này không tồn tại thì....
if ( @mysql_num_rows( $sql_query ) <= 0 )
{
print "Tên truy nhập không tồn tại. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
}
// Nếu username này tồn tại thì tiếp tục kiểm tra mật khẩu
if ( $password != $member['password'] )
{
print "Nhập sai mật khẩu. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
}
// Khởi động phiên làm việc (session)
@session_start();
$_SESSION['user_id'] = $member['id'];
// Thông báo đăng nhập thành công
print "Bạn đã đăng nhập với tài khoản {$member['username']} thành công. <br/> 
 <a href='see.php'>Nhấp vào đây để xem nội dung </a>";
}
else if(isset($_POST['create'])) {
header("location:register.php"); 
exit;
} else {
// Form đăng nhập
print <<<EOF
<form action="" method="POST">
Tên truy nhập: <input type="text" name="username" value=""> <br/>
Mật khẩu: <input type="password" name="password" value=""> <br/>
<input type="submit" name="ok" value="Đăng nhập">
<input type="submit" name="create" value="Tạo Tài Khoản">
</form>
EOF;
}


?> 


7. Tạo file "register.php",file này có nhiệm vụ kiểm tra user nhập liệu, nếu đúng và đầy đủ thông tin thì thông báo tạo thành công và liên kết đến trang đăng nhập (login.php), ngược lại yêu cầu user kiểm tra lại thông tin nhập . Nội dung file "register.php" như sau:


<?php
// Tải file mysql.php lên
require_once("mysql.php");
if ( isset($_POST['ok']) )
{
// Dùng hàm addslashes() để tránh SQL injection, dùng hàm md5() để mã hóa password
$username = addslashes( $_POST['username'] );
$password = md5( addslashes( $_POST['password'] ) );
$verify_password = md5( addslashes( $_POST['verify_password'] ) );
$email = addslashes( $_POST['email'] );
// Kiểm tra 4 thông tin, nếu có bất kỳ thông tin chưa điền thì sẽ báo lỗi
if ( ! $username || ! $password || ! $verify_password || ! $email )
{
print "Xin vui lòng nhập đầy đủ các thông tin. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
}
// Kiểm tra mật khẩu, bắt buộc mật khẩu nhập lúc đầu và mật khẩu lúc sau phải trùng nhau
if ( $password != $verify_password )
{
print "Mật khẩu không giống nhau, bạn hãy nhập lại mật khẩu. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
}
// Tiến hành tạo tài khoản
@mysql_query("INSERT INTO members (username, password, email) VALUES ('{$username}', '{$password}', '{$email}')");
// Thông báo hoàn tất việc tạo tài khoản
print "Tài khoản {$username} đã được tạo. <a href='login.php'>Nhấp vào đây để đăng nhập</a>";
}
else
{
// Form đăng ký
print <<<EOF
<form action="register.php" method="POST">
Tên truy nhập:     <input type="text" name="username" value=""> <br/>
Mật khẩu:          <input type="password" name="password" value=""> <br/>
Xác nhận mật khẩu: <input type="password" name="verify_password" value=""> <br/>
Địa chỉ E-mail:    <input type="text" name="email" value=""> <br/>
                  <input type="submit" name="ok" value="Đăng ký tài khoản"> <br/>      
</form>
EOF;
}
?> 


8. Chạy Demo:



Thứ Tư, 4 tháng 7, 2012

Tạo Trang Login Bằng PHP - MySQL Dùng Session Và Cookie

Posted by Unknown Thứ Tư, tháng 7 04, 2012, under |

Vấn đề là ta muốn tạo khung đăng nhập có chức năng ghi nhớ (remember), khi check vào thì lần truy cập kế đến  trình duyệt sẽ đưa ta tới trang tài khoản đã đăng nhập sẵn.
Các bước thực hiện:
1. Tạo CSDL  "login" và bảng DL "user" bằng MySQL , table "user" có các cột sau: ID là 1, username là admin, password là 123456 ( như bài phái trên ):
Hình minh họa:

2. Tạo file "check_login.php" , file này đưa ra bảng nhập liệu : username và password, mục "Remember", nút "Login" , "Cancel" . Chức năng kiểm tra việc nhập liệu, nế nhập đầy đủ  nó so sánh số liệu với CSDL, nếu khớp với CSDL thi chuyển đến trang thông báo  "confirm.php", nội dung trang "check_login,php" như sau :


<?php
session_start();
$_SESSION['db_is_logged_in'] = false;
$remember=false;
if(isset($_POST['ok'])){
  if(($_POST['username'] == NULL)&&($_POST['password'] == NULL)) {  
//echo "Ban khong nhap vao Username va Password " ."<br>";
 header("location:check_login.php"); 
  } else if($_POST['username'] == NULL){  
  // echo " Ban chua nhap Usernam " ."<br>";
    header("location:check_login.php"); 
  } else if($_POST['password'] == NULL){  
         //echo " Ban chua nhap Password" ."<br>";
  header("location:check_login.php"); 
                   if (isset($_POST['remember'])) { 
                               setcookie('NhapTen', $_SESSION['username'], time()+60*60*24*100, "/");
              $_COOKIE['NhapTen'];
                               setcookie('NhapMK', $_SESSION['passwork'], time()+60*60*24*100, "/");
               $_COOKIE['NhapMK'];
                 }            

                   } else {
                   $u=$_POST['username'];
$p=$_POST['password'];     
  $conn=mysql_connect("127.0.0.1","root","") or die("can't connect this database"); 
  mysql_select_db("login",$conn);
$sql="select * from user where username='".$u."' and password='".$p."'";
$query=mysql_query($sql); 
if(mysql_num_rows($query)==0) {
   //echo " Ban nhap usernae va password khong dung " ."<br>";
header("location:check_login.php");    
} else {      
              $row=mysql_fetch_array($query);      
      $_SESSION['db_is_logged_in'] = true;  
      $_SESSION['username'] = $row["username"];
      $_SESSION['id'] = $row["ID"]; 
      $_SESSION['password'] = $row["password"];
    if (isset($_POST['remember'])) { 
$_SESSION['remember']=true;
setcookie("remember", $_SESSION['remember'],time()+60*60*24*100);
  $_COOKIE["remember"];
                          setcookie("NhapTen", $_SESSION['username'], time()+60*60*24*100, "/");
  $_COOKIE["NhapTen"];
  setcookie("NhapMK", $_SESSION['password'], time()+60*60*24*100, "/");
$_COOKIE["NhapMK"];    
}
header("location:confirm.php"); // kiem tra dung, khong check
exit;
     }
    }
} else if(isset($_COOKIE["remember"])) {
header("location:management.php");
}

?>
<html>
<head>
</head>
<body>
<form action='' method='POST'>
Username: <input type='text' name='username' value='NhapTen' /> <br />
Password: <input type='password' name='password' value ='NhapMK'  /> <br />
 <input type="checkbox" name="remember" /> Ghi nhớ <br/>
<input type='submit' name='ok' value='Login' />
<input type="reset" name = 'cancel' value = 'Cancel' /> 
</form>
</body> 
</html



3. Tạo file "confirm.php", có nhiệm vụ thông báo việc đăng nhập thành công, chứa link đưa đến trang "management.php, nội dung file"confirm.php" như sau:

<html>
<head> 
</head> 
<body> 
Dang Nhap Thanh Cong
<br/>
Click : <a href="management.php"> Quan ly tai khoan </a>
</body> 
</html>

4. Tạo file "management.php", fiel này có nhiệm vụ : chứa thông tin tài khoản, link "loguot", nội dung file như sau:


<?php
session_start();
echo" TRANG QUAN LY TAI KHOAN <br/>";
if( ($_SESSION['db_is_logged_in'] == true)||(isset($_COOKIE['NhapMK'])))
echo "Ten cua ban la:<b>".$_SESSION["username"]."</br>";
if(isset($_COOKIE["remember"])){
echo " Ban da  check  vao nut Remember " . "</br>" ;
echo " De thoat khoi tai khoan chon nut Unremember " . "<br>";
} else {
echo " Ban khong co Check Remember " . "</br>" ;
echo " De thoat khoi tai khan hay chon nut Loguot hay Unremember "  . "<br>" ;
}
?>
<html>
<head> 
</head> 
<body>
<br />
<br/>
Click : <a href="remove.php">Unremember </a>
<br> </br>
Clich: <a href="logout.php">  Logout </a>
<br> </br>
</body> 
</html>


5. Tạo file "remove.php", file này thực hiện chứ năng xóa "session" ,"cookie", khi ta đăng nhập mà có "check" vào ô "Ghi nhớ" ( Remember) ,thoát khổi tài khoản và trả về trang "check_login.php", nội dung file :


<?php
session_start();
$_POST['remember']=false;
setcookie("remember",$_POST['remember'],time()- 60*60*24*100);
setcookie("NhapTen",$_SESSION['username'],time()-60*60*24*100);
setcookie("NhapMK",$_SESSION['password'],time()-60*60*24*100);
header("location:check_login.php");
exit
?>


6. Tạo file "logout.php", file này có chức năng "logout", trả về trang "check_login.php" khi ta đăng nhập mà không chọn chức năng ghi nhớ, nội dung file :


<?php
session_start();
if (isset($_SESSION['db_is_logged_in'])) {
unset($_SESSION['db_is_logged_in']);
}
// trở về trang login
header('Location: check_login.php');
?>


7. Demo:
Hình minh họa trang "check_login.php":

Hình minh họa trang "confirm.php":

Hình minh họa trang"managment.php"(không check ):

Hình minh họa trang"managment.php" (có check):




Tạo Trang Login Đơn Giản Bằng PHP - MySSQL

Posted by Unknown Thứ Tư, tháng 7 04, 2012, under | No comments

1. Tạo CSDL trong MySQL:

mysql>create database project;
mysql>use project; 
mysql>create table user(
id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
password CHAR(50) NOT NULL,
level CHAR(1) NOT NULL,
PRIMARY KEY(id)); 
mysql>insert into user(id,username,password,level) values (1,'admin','123456',2);

2. Tạo file "login.html" có nội dung như sau:
<html>
<head>
</head>
<body>
<form action='login.php' method='GET'>
Username: <input type='text' name='username' size='25' /><br />
Password: <input type='password' name='password' size='25' /><br />
<input type='submit' name='ok' value='Dang Nhap' />
</form>
</body>
</html>
3.Tạo file "login.php" có nội dung như sau:

<html>
<head>
</head> 
<body> 
<?phpif(isset($_GET['ok'])){$u=$p=""; 
if($_GET['username'] == NULL) { 
echo "Ban Chua Nhap UserName <br/>"; 
} else {
$u=$_GET['username'];

if($_GET['password'] == NULL) {
echo "Ban Chua Nhap Password <br />"; 
} else {
$p=$_GET['password']; 

if($u && $p) {
$conn=mysql_connect("127.0.0.1","root","") or die("can't connect this database");  mysql_select_db("project",$conn);
$sql="select * from user where username='".$u."' and password='".$p."'"; $query=mysql_query($sql); 
if(mysql_num_rows($query) == 0) { // Nhap sai quay lai trang login header("location:login.html"); 
} else { 
$row=mysql_fetch_array($query); 
session_start(); $_SESSION['userid'] = $row["id"]; 
$_SESSION['level'] = $row["level"]; 
header("location:successful.html"); 



?> 
</body> 
</html>
4. Tạo file "successful.html" như sau:

<html>
<head> 
</head> 
<body> 
Login Successful 
</body> 
</html>
5. Chạy Demo để kiểm tra kết quả :
Hình minh họa tràn "login" file login.html :

Hình minh họa không nhập DL:

Hình minh họa nhập thiếu(password) :

Hình minh họa nhập sai ( password ) :


Hình minh họa nhập đúng :


Thứ Hai, 2 tháng 7, 2012

CSS - Tạo Khung Bo Tròn

Posted by Unknown Thứ Hai, tháng 7 02, 2012, under | No comments

Vấn đè là ta muốn tạo một khung cho văn bản hay khung ảnh mà gốc của khung không phải là gốc vuông mà là gốc bo tròn  ( góc vuông bi cắt xén đi phần chốt nhọn ) thì ta làm sao ? CSS sau sẽ giúp bạn làm điều đó .
Demo:
<html>
<head>
<style type="text/css">
div#conner {
margin: 0 2%;background:blue;/* mau nay phri giong mau duoi*/
}
b.rtop, b.rbottom {
display:block;background:#FFF;/* mau nay khong thay doi*/
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;

background:blue;/* mau nay phai giong mau tren*/
}
b.r1 {
margin: 0 5px /* le trai +phai = 0, tren +duoi =5 */
}
b.r2 {
margin: 0 3px
}
b.r3 {

margin: 0 2px
}
b.r4 {

margin: 0 1px
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;height: 2px
}
</style>
</head>


<body>
<div id="conner" align="center">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<h4> Noi de viet cai khi kho gi do </h4>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>

</body>
</html>
Hình minh họa:



CSS - Phóng To Ảnh Khi Rê Chuột Lên

Posted by Unknown Thứ Hai, tháng 7 02, 2012, under | 1 comment

Vấn đề là ta có bức ảnh khi đưa lên Web ta jumb lại với kích thướt nhỏ, làm sao khi user muốn xem kích thướt thật của ảnh, ta dùng CSS để trả lại kích thướt thật khi rê chuột lên ảnh.
Demo:
<html>
<head>
<style type='text/css'>
.img-thumbnail{
position: relative;
z-index: 0;
}
.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -100px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.img-thumbnail span img{
border-width: 0;
padding: 2px;
}
.img-thumbnail:hover span{
visibility: visible;
top: -75x;/* thay doi chi so de anh hien o vi tri mong muon*/
left:-1px;/* thay doi chi so de anh hien o vi tri mong muon*/
}
</style>
</head>
<body>
<a class="img-thumbnail" href="#">
<img src="thiennhien.jpg" border="0" height="100" width="110"/>
<span>
<img src="thiennhien.jpg"/>
</span>
</a>
</body>
</html>

Hình minh họa khi chưa re chuột:

Hình minh họa khi rê chuột :




CSS - Tạo Hiệu Ứng Khi Trỏ Chuột

Posted by Unknown Thứ Hai, tháng 7 02, 2012, under | No comments

Giả sử ta muốn cho  Pro một chút khi chuột rê vào một liên kết thì ta dung code CSS sau :
Demo:
<html>
<head>
<style type="text/css">
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>
<body>
<p><b><a href="index.html" target="_blank">Trang Chu </a></b></p>/* co the thay doi dia chi lien ket .. */
</body>
</html>
Hình minh họa khi chưa trỏ chuột vào:

Hình minh họa khi trỏ chuột vào :


Demo: mở rộng code trên
<html>
<head>
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>
Demo: mở rộng code trên .
<html>
<head>
<style type="text/css">
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="" target="_blank">This is a link</a>
</body>
</html>


Chủ Nhật, 1 tháng 7, 2012

CSS - Tạo Khung Nhập Văn Bản Có Màu

Posted by Unknown Chủ Nhật, tháng 7 01, 2012, under | No comments

Thông thường khung nhập liệu  của '' form " có nền là màu trắng, h ta muốn nó có màu ( cải lương tí nha! )thì ta làm sao? Dùng CSS .
Demo:
<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow; /* mau hop van ban,  ban co the thay doi thanh mau khac, hoac 1 anh .. */
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Nhap" size="30">
Lastname:<input type="text" name="Name" value="Nhap" size="30">
<input type="button" value="Submit">
</form>
</body>
</html>
Hình minh họa:


CSS - Tạo Nút Bấm Di Chuyển

Posted by Unknown Chủ Nhật, tháng 7 01, 2012, under | No comments

Ta thường thấy 1 số trang Web có các nút  mà khi nhấp chuột vào sẽ di chuyển đến trang chi định nào đó. Chẳn hạn nút "Home " có ảnh là hình ngôi nhà, nút " Next" có hình mui tên sang phải, nút "Prew" có hình mũi tên sang trái, nút "Center" có hình tròn ... . Để làm được vấn đề đó, ta phải có hình ảnh ( biểu tượng) của nút ( dùng chương trình photoshop để tạo chẳn hạn ), dùng code CSS để tạo tác vụ nhấp chuột,  sau cùng là chọn vị trí đặt nút đó.
Demo:
<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
*/ ban thay the anh 
img_navsprites_hover.gif bang anh khac  */

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
/* thay the anh 
img_navsprites_hover.gif  bang anh khac */

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
 
/* thay the anh  img_navsprites_hover.gif bang anh khac */
</style>
</head>

<body>/* chon vi tri thich hop de dat  ID sau */
<ul id="navlist"> 
/* thay doi 3 link sau bang link thich hop*/ 
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
Hình minh họa:




CSS - Viết Chữ Lên Ảnh Nền

Posted by Unknown Chủ Nhật, tháng 7 01, 2012, under | No comments

Ta có 1 ảnh  làm nền, h ta muốn ghi chữ lên đó thì ta làm sao ? CSS sẽ giúp bạn làm điều này.
Demo: giả sử ta có ảnh là "thiennhien.jpg" chèn ở 1 ví trí nào đó của trang Web, h ta ghi chú thích lên ảnh đó. 
Thưc hiện : tạo fiel "demo.html" có nội dung như sau:

<html>
<head>
<style type="text/css">
div.background
  {
  width:500px; /* width va height la kich thuot buoc anh */
  height:250px;
  background:url(thiennhien.jpg) repeat;/* anh muon nen */
  border:5px solid black;/* duong vien cho anh */
  }
div.transbox
  {
  width:150px;
  height:35px;
  margin:100px 200px;/* vi tri chu so phai tren, trai cua khung */
  background-color:#rrffbb;  /* mau khung nen van ban*/
  border:0px solid black; 
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:9px 9px;
  text-align:center;
  font-weight:bold;
  color:red;
  }
</style>
</head>


<body>
/* dat 3 the sau noi muon chen anh */
<div class="background">
<div class="transbox">
<p>Noi Dat  Van Ban </p>
</div>
</div>


</body>
</html>
Mở file"demo.html" bằng trình duyệt, ta có kết quả như hình sau:
Hình minh họa:

Demo : cải tiến từ code trên .
<html>
<head>
<style type="text/css">
div.background
{
width:500px; /* width va height la kich thuot buoc anh */
height:250px;
background:url(thiennhien.jpg) repeat;/* anh muon nen */
border:5px solid black;/* duong vien cho anh */
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-top:50px;/* co the thay doi px*/
margin-left:50px;/*co the thoi doi px*/
margin-right:50px;/* co the thoi doi px*/
background-color:#d0f0f6;/* co the thay doi mau cho phu hop*/
text-align:center;
padding:50px;/* co the thoi doi px */
}
</style>
</head>

<body>
/* dat 3 the sau noi muon chen anh */
<div class="background">
<div class="container">
<div class="center_div">
<p>Noi Dat Van Ban </p>
</div>
</div>
</div>

</body>
</html>
Hình minh họa : 



CSS

Posted by Unknown Chủ Nhật, tháng 7 01, 2012, under | No comments

Giới thiệu :
Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. [1] Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng cho XML, SVG, XUL. Các đặc điểm kỹ thuật của CSS được duy trì bởi World Wide Web Consortium (W3C). Thay vì đặt các thẻ qui định kiểu dáng cho văn bản HTML (hoặc XHTML) ngay trong nội dung của nó, bạn nên sử dụng CSS.

Ứng Dụng CSS:
CSS là một ứng dụng không thể thiếu đối với 1 trang Web , giống như một chiếc xem máy : đẻ chiếc xe đẹp ( new) thì cần phải có sơn , nếu xe xịn mà không có sơn thì trở thanh ... ,đối với 1 trang Web để nhìn bắt mắt  cho user thì trang Web ấy phải có màu, hiệu ứng ( CSS ,Photoshop, ..) ; để xe chạy được cần phải có đông cơ ,bộ phận trền động, còn đối với Web để thao tác được cần có PHP ,kết nối DL thì càn MySQL ..; 

Cách Dùng CSS:
Có 2 cách: nội và ngoại
Nội: là ta định nghĩa những thuộc tính CSS ở trong file "HTML".
Dùng thẻ:  Đầu tiên là khai báo sử dụng CSS " <style type="text/css" > ", kế đến là tên thẻ CSS "Tab_Name { ... }", phái trong dấu mở và đóng ngoặc nhọn " { ...} " là các định dạng CSS, cuối cùng là đóng thẻ " </style > ", tất cả các phần trên đạt trong phần " head" của trang "HTML". Để dùng được các định dạng này ở phần  thân "body" của trang "HTML" thì phải foij nó bằng cách " <Tab_Name> "  những phần tử cần định dạng " </Tab_Name> "
Cấu trúc:
<html>
<head>
<style type="text/css">
Tab_Name
{
code  CSS
}
}
</style>
</head>
<body>
</body>
</html>
Demo:Dùng CSS khai báo nội để : định dạng  màu xanh (blue) cho toàn bộ trang, 1 thẻ (h1) định dạng chữ màu trang, 1 thẻ (p) định dang kiểu chữ (Times New Roman) có kích thước (20px).
Thực hiện : tạo file demo.html, sau đó copy code sau past vào và save lại -> mở fiel demo.html bang trình duyệt.
<html>
<head>
<style type="text/css">
body
{
background-color:blue;
}
h1
{
color:white;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>

Hình minh họa:

Dùng ID: giống như trên ,chỉ thêm vào "#" trước " Tab_Name{ .. }", khi muốn dùng ta gọi như sau: <p id="Tab_Name" > Những phần tử cần định dạng  "</p>".
Cấu trúc:
<html>
<head>
<style type="text/css">
#Tab_Name
{
code  CSS
}
}
</style>
</head>
<body>
</body>
</html>
Demo : tạo fiel "demo.html" chứa nội dung như sau:
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World !</p>
<p id="para1"> Chao Ban !</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Mở file"demo.html" bằng trình duyệt, ta có kết quả như hình sau:
Hình Minh họa:



Dùng Class: giống như trên ,chỉ thêm vào "." trước " Tab_Name{ .. }" trước " Tab_Name{ .. }" , khi muốn dùng ta gọi như sau:  " <h1 class="Tab_Name" " > Những phần tử cần định dạng "</h1>".
Demo: tạo file "demo.html" có nội dung như sau:
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
Mở file "demo.html" bằng trình duyệt, ta được kết quả như hình sau:
Hình minh họa:

Dùng Class: giống như trên ,chỉ thêm vào "p." trước " Tab_Name{ .. }", khi muốn dùng ta gọi như sau: " <p class="Tab_Name" > " Những phần tử cần định dạng "</p>".
Demo: tạo file "demo.html" có nội dung như sau:
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>
Mở file "demo.html" bằng trình duyệt, ta có kết quả như hình sau:
Hình minh họa:


Ngoại : dùng định dạng " CSS " từ file riêng biệt với fiel " HTML " . File ".css" để cùng thư mục "HTML, nếu để khác thì chỉ ra đường dẫn nha ! Thường hay sử dụng cách này vì tính linh hoạt là nó dễ chỉnh sửa .
Cấu trúc :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Demo: tạo file "demo.css" và "demo.html", để cùng thư mục .
File "demo.css" :
body {
background-color: #FF0000;
text-align:center;
}
File "demo.html" :
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
<h1> Xin Chao Ban Den Voi Blog Cua CoDonOnline </h1>
</body>
</html>
Mở file "demo.html" bằng trình duyệt, ta có kết quả như hình sau:
Hình minh họa:


Đến đây tạm dừng phần CSS cơ bản ,những phần sau sẽ demo những ứng dụng !

Tham khảo thêm : w3schools


Xem Nhiều

Bài đăng phổ biến

Lưu trữ blog

Blog Archive