SQL - TẠO VÀ QUẢN LÍ CSDL

SQL - TẠO VÀ QUẢN LÍ CSDL

I. Lý thuyết.
1. Các cơ sở dữ liệu được SQL hỗ trợ.
- SQL Server hỗ trợ ba loại cơ sở dữ liệu:
+ Cơ sở dữ liệu hệ thống: Được tạo bởi SQL Server. Các cơ sở dữ liệu này được sử dụng để lưu thông tin về SQL Server. Ngoài ra, các cơ sở dữ liệu này còn được sử dụng để quản lí người dùng.
+ Cơ sở dữ liệu người dùng định nghĩa: Người sử dụng SQL Server có thể tạo các cơ sở dữ liệu người dùng định nghĩa. Mục đích các cơ sở dữ liệu này là để lưu dữ liệu của người sử dụng.
- Để tạo một cơ sở dữ liệu người dùng, các thông tin sau được yêu cầu:
+ Tên của sơ sở dữ liệu.
+ Người sở hữu hoặc người tạo cơ sở dữ liệu.
+ Kích thước của cơ sở dữ liệu.
+ Các tập tin và nhóm các tập tin được sử dụng để lưu trữ cơ sở dữ liệu.
Cú Pháp:

CREATE DATABASE database_name

[ ON
[ PRIMARY ] [ <filespec> [ ,....n ]
[ , <filegroup> [ ,...n ] } ]
]
[ COLLATE collation_name ]
]
[;]

- Cách chỉnh sửa một cơ sở dữ liệu:
Cú Pháp:

ALTER DATABASE database_name
{
<add_or_modify_files>
| <add_or_modify_filegroups>
| <set_database_options>
| MODIFY NAME = new_database_name
| COLLATE collation_name
} [;]

- Thay đổi người sở hữu database:
Cú Pháp:

EXECUTE sp_changedbowner [@loginame=]'login';

+ Cơ sở dữ liệu mẫu: SQL Server cung cấp các cơ sở dữ liệu mẫu để người sử dụng làm việc với SQL Server. Một cơ sở dữ liệu mẫu được giới thiệu trong SQL Server là AdventureWorks.
- Các cơ sở dữ liệu hệ thống gồm có:
+ master: Lữu trữ các tất cả các thông tin ở mức hệ thống của một nhân bản SQL Server.
+ msdb: Được sử dụng bởi SQL Server Agent để nhắc nhở các công tác thực hiện theo lịch biểu và các công việc khác.

+ model: Được sử dụng như cơ sở sữ liệu mẫu cho tất cả các cơ sở dữ liệu được tạo ra trong một nhân bản cụ thể của SQL Server.
+ resource: Là cơ sở dữ liệu chỉ đọc. Nó gồm các đối tượng hệ thống được gộp vào trong SQL Server.
+ tempdb: Lữu dữ các đối được tạm và các tập kết quả trung gian.
- Người dùng không được phép cập nhập thông tin trực tiếp vào các đối tượng cơ sở dữ liệu hệ thống.
- Người sử dụng có thể sử dụng các công cụ quản trị để quản trị hệ thống và quản lý tất cả các đối tượng cơ sở dữ liệu. Gồm có:
+ SQL Server Management Studio.
+ SQL Server Management Objects (SMO): Giao diện lập trình ứng dụng với các đối tượng quản lý SQL Server.
+ Transact-SQL scrip and stored procedures: sử dụng các thủ tục lưu trữ hệ thống và các phát biểu ngôn ngữ truy vẫn dữ liệu Transact-SQL.
2. Tập tin và nhóm tập tin.
- Các tập tin:
+ Là một đơn vị lưu trữ vật lý.
+ Có chứa các đối tượng CSDL.
+ Có một file logic và file vật lý.
- Nhóm tập tin:
+ Bao gồm nhiều tập tin được nhóm lại để thực hiện và quản lý một cách tốt hơn.
+ Một nhóm tập tin logic có thể chứa nhiều tập tin vật lý.
+ Trong mỗi nhóm tập tin gồm có nhiều tập tin liên quan với nhau và được lưu trong đối tượng của CSDL.
+ Nhóm tập tin có thể được tạo khi cơ sở dữ liệu hoặc thêm vào cơ sở dữ liệu đã có.
+ Một tập tin không thể là thành viên của nhiều hơn 1 nhóm tập tin lại cùng thời điểm.
+ Các tập tin không thể di chuyển đến các nhóm tập tin khác nhau khi các tập tin được thêm vào trong CSDL.
+ Nhóm tập tin có thể chỉ chứa các file dữ liệu và không có các file giao dịch.
- FILE_ID: Hàm trả về số ID của tập tin theo tên tập tin luận lý trong cơ sở dữ liệu hiện tại.
- FILE_NAME: Hàm trả về tên luận lý của tập tin theo số ID của tập tin cho trước.
- Ghi viết giao dịch: Nó ghi lại tất cả các quá trình hoạt động của CSDL. Các mẫu tin ghi viết được sử dụng để phục hồi trở lại các thay đổi.

- Xóa bỏ một CSDL:
Cú Pháp:

DROP DATABASE { database_name }

- Tạo một bản chụp CSDL:

Cú Pháp:

CREATE DATABASE database_snapshot_name
ON
{
NAME = logical_file_name,
FILENAME = 'ó_file_name'
} [ ,...n ]
AS SNAPSHOT OF source_database_name
[;]

II. Code cơ bản của bài học.

JAVASCRIPT IF,FOR LOOP, WHILE LOOP

JAVASCRIPT IF,FOR LOOP, WHILE LOOP

Javascript là một ngôn ngữ thông dịch, chương trình nguồn của nó được nhúng hoặc tích hợp vào tập tin HTML. Khi trang web được tải trong
trình duyệt hỗ trợ javascript, Trình duyệt sẽ thông dịch và thực hiện các lệnh Javascipt.


Khai báo biến
Cú pháp

var tênbiến;

Từ khóa var dùng để khai báo biến
Tên biến phải bắt đầu bặc ký tự(in thường hoặc in hoa) hoặc dấu gạch dưới(_). Tên biến không được trùng với các từ khóa.
Bảng các từ khóa trong Javascript

Trong Javascript, bạn có thể gán giá trị ngay khi khai báo
Gán giá trị

 var tênbiến = giátrị;

hoặc gán giá trị sau khi khai báo

 var tênbiến;
 tênbiến = giátrị;

Về cơ bản, có 3 kiểu giá trị mà bạn có thể sử dụng:
Số: Javascript không phân biệt kiểu số nguyên và số thập phân. Vì thế bạn có thể khai báo hoặc so sánh chúng. VD:50, 11.5,…
Chuỗi: Luôn phải đặt trong dấu ngoặc “” hoặc ”. VD: “Đây là một chuỗi!”.
Boolean: giá trị true hoặc false.
Ngoài ra biến cũng có thể được gán cho giá trị Null


IF ELSE TRONG JAVASCRIPT

Cấu trúc này tương tự như cấu trúc if…else tuy nhiên nó cho phép kiểm tra chính xác điều kiện để thực hiện các lệnh. Với cấu trúc này, người lập trình có thể tạo ra từ 2 cho đến nhiều nhánh kiểm tra điều kiện khác nhau.

Cú pháp

if(điều kiện){
code;} else if(điều kiện){
code;} else if(điều kiện){
code;}

VÒNG LẶP WHILE TRONG JAVASCRIPT

Cú pháp

while(điều kiện){

code;}

Vòng lặp while kiểm tra điều kiện ở ngay đầu vòng lặp, nó được thực hiện trước mỗi lần lặp. Nếu ngay từ đầu điều kiện đã không được đáp ứng, vòng lặp sẽ không được thực hiện.

VÒNG LẶP FOR TRONG JAVASCRIPT

Cú pháp

for(;;){
code;}
giống vòng lặp while

VÒNG LẶP DO...WHILE TRONG JAVASCRIPT
Cú pháp

do{

code;} while(điều kiện);

Vòng lặp do…while có chức năng tương tự như vòng lặp while. Chỉ khác một điều, đó là các khối lệnh sẽ được thực thi sau đó mới được kiểm tra điều kiện. Điều này đồng nghĩa với việc, các khối lệnh sẽ được thực thi ít nhất là 1 lần cho dù điều kiện trả về sai.

DESIGN FORM THEO MẪU

Link bài kêt quả tại ĐÂY
hoặc: https://bca001421836e318f942daad33b99f2d19905a3a.googledrive.com/host/0B2auljPt4_56fi1MdDJqM1ZKbE9saUtWV2VpeWRVY2JTSGlxcUg1NTE0SDZrSWRZcmR1RGM/form/


*Các câu lệnh dc viết trong thẻ: <form></form>
khi ta chèn 1 cái action bên trong thẻ form đầu
VD: <form action=''></form>
action này sẽ thực hiện hành động đưa ta tới 1 trang web nào đó mà chúng ta muốn
Câu lệnh: placeholder giúp chúng ta hiển thì gợi ý của form mà chúng ta ghi trong trường hợp người dùng k biết nên điền ntn vào đó.
Trong thẻ form chúng ta bằng đầu khai báo từ <input /> , trong thẻ input ta bắt đầu khai báo từ type,
type này tùy trường hợp mà tùy chỉnh
ví dụ: ô đầu tiên chúng ta muốn người dùng nhập tên thì ta sẽ để type là text( type="text")
còn ô thứ 2 ta muốn người dùng nhập email thì ta để type là email( type="email")
Mục đích của những cái này để làm gì?
Chúng dùng để mã hóa nội dung của thẻ đó, ví dụ bạn để type="email" thì nếu bạn viết khác định dạng email thì khi ấn submit nó báo lỗi ngay và bắt nhập lại.
Cuối cùng khi ta thực hiện xong các thẻ trong form mà muốn tạo 1 ô gửi đi hoặc là đăng nhập.... thì ta dùng type="submit"
code html:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <link rel="stylesheet" href="css.css" type="text/css">
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>        
        <form action=""> 
            <h1>Before you may cross the bridge, you must answer these questions </h1>
            What,is your Name?  <br><input type="text" id="txtfullname" title="full name" placeholder="first last"/></br></br>            
            What,is your email address? <br><input type="email" id="txtemail" title="email address" placeholder="email address"/></br></br>
            Email address again? <br><input type="email" id="txtaddress" title="email address" placeholder="confirm email address"/></br></br>
            What, is your phone number of your favorite pizza place? <br><input type="tel" id="txtphone" title="email address" placeholder="+84 xxx xxx xxx"/></br></br>
            What, is your date of birth? <br><input type="date" id="txtdateofbirth" title="email address" placeholder="dd/mm/yyyy"/></br></br>
            What, is your age <br><input type="number" id="txtage" title="email address" placeholder="age"/></br></br>
            What, is your favorite color? <br><input type="color" id="txtecolor" title="email address"/></br></br>
            What, is your kind favorite chocolate? <br><input type="text" id="txtkindchocolate" title="email address"/></br></br>
            What, is your part number of a 3/4" philips head machine screw?  <br><input type="number" id="txtepartnumber" title="email address" placeholder="favorite website"/></br></br>
            What, is airspeed velocity of an unladen swallow? (m/s) <br><input type="range" id="txtairspeed" title="email address"/></br></br>
            <input type="submit" id="input" value="cross the bridge"/>                    
        </form>
    </body>
    
</html>

code css:

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 1, 2015, 2:15:54 PM
    Author     : Panda
*/

body{
    height: 1000px;
    width: 1000px;
    background-color: #eeeeee;
}
#txtfullname,#txtaddress,#txtage,#txtairspeed,#txtdateofbirth,#txtecolor,#txtemail,#txtepartnumber,#txtkindchocolate,#txtphone{
    width: 900px;
    border: 1px solid #8cb38d;
    border-radius: 5px;
}
#input{
    width: 900px;
    height: 30px;
    background-color: #3477b0;
    color: white;
    border-radius: 5px;
}

The sound of the sea

đây là site đầu tiên và cùng là bài tập về nhà

ấn vào ĐÂY để xem site

nếu không được thì coppy link sau: 

https://bca001421836e318f942daad33b99f2d19905a3a-www.googledrive.com/host/0B2auljPt4_56fi1MdDJqM1ZKbE9saUtWV2VpeWRVY2JTSGlxcUg1NTE0SDZrSWRZcmR1RGM/the%20sound%20of%20the%20sea/

code HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <link type="text/css" rel="stylesheet" href="css.css"/>
    <head>
        <title>sum mờ vơ cây sần :v :v</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="main"> 
            <div id="banner_top"><img src="images/logo.png"/></div>
            <div id="menu_top">
                <div>
                    <a href="#" class="menutop"><li><strong>TRANG CHỦ</strong></li></a>
                    <a href="#" class="menutop"><li><strong>THÔNG TIN</strong></li></a>
                    <a href="#" class="menutop"><li><strong>XEM PHÒNG</strong></li></a>
                    <a href="#" class="menutop"><li><strong>DRIVE SITE</strong></li></a>
                    <a href="#" class="menutop"><li><strong>ẨM THỰC</strong></li></a>
                    <a href="#" class="menutop"><li><strong>TIN MỚI</strong></li></a>
                    <a href="#" class="menutop"><li><strong>LIÊN HỆ</strong></li></a>
                </div>
            </div>
            <div id="banner_mid"></div>
            <div id="content_banner">
                <a href="#"><li style="color:#316e6a; font-size: 25px;">HÃY CÙNG THƯỞNG THỨC MÙA HÈ VỚI CHÚNG TÔI!</li></a>
                <li style="color: #664738; font-size: 20px;"> <br>Site này là bài tập do cô Thi <u> BẮT</u> làm... ~(^.^)~ lúc đầu thấy khó lắm... cơ mà làm được 1 luc sau làm xong xuôi thấy cũng dễ nên tính ra không có gì khiến mệt mỏi kekekekeee</li>
                <li style="color: #664738; font-size: 20px;"> <br>Còn cái nữa là bản mẫu bằng tiếng anh cơ mà không thích tiếng anh nên làm tiếng việt cho nó dễ hiểu... :v :v :v </li>
            </div>
            <div id="content_first">
                
                    <a href="#"><li style="color:#316e6a; font-size: 18px;">BLOG MỚI NHẤT</li></a>
                    <li>____________________________________________________________________________</li>
                    <a href="#"><li style="color: #664738"><br><strong>Người Chiến Thắng Cuộc Thi Bikini 2015</strong></li></a>
                    <li style="color: #664738"><br>Từ Tú Bằng...một thí sinh tới từ Yên Bái đã xuất sắc giành được giải quán quân cuộc thi <br>bikini năm nay...xin chúc mừng anh...</li>
                    <li>____________________________________________________________________________</li>
                    <a href="#"><li style="color: #664738"><br><strong>10 Điểm Lặn Nổi Tiếng</strong></li></a>
                    <li style="color: #664738"><br>Wc, nhà tắm, phòng tắm nữ, phòng tắm nam, đôi khi chỉ là vũng nước mưa ngoài đường<br> cũng trở thành địa điểm lặn vô cùng lí thú...</li>
                    <li>____________________________________________________________________________</li>
            </div>
            <a href="#"><div id="img_first"> </div></a>
            <a href="#"><div id="img_second"></div></a>
            <div id="content_second">
                <a href="#"><li style="color:#316e6a; font-size: 18px;">GIẤY CHỨNG NHẬN</li></a>
                <li style="color: #664738"><br>"Sau nhiều năm công tác và kinh doanh trên lĩnh vực nhà nghỉ dưỡng... chúng tôi tự hào rằng chúng tôi không có cái gì để khoe với các bạn cả... đó là điều mà tôi tâm đắc nhất"</li>
                <a href="https://www.facebook.com/100004129663905/"><p style="color:#316e6a; text-align: right;"><br>.<br>Tổng Giám Đốc Điều Hành: PTN...</p></a>
            </div>
            <a href="#"><div id="img_third"></div></a>
            <div id="menu_bot">                
                <a href="#" class="menubot"><li>TRANG CHỦ</li></a>
                <a href="#" class="menubot"><li>THÔNG TIN</li></a>
                <a href="#" class="menubot"><li>XEM PHÒNG</li></a>
                <a href="#" class="menubot"><li>DRIVE SITE</li></a>
                <a href="#" class="menubot"><li>ẨM THỰC</li></a>
                <a href="#" class="menubot"><li>TIN MỚI</li></a>
                <a href="#" class="menubot"><li>LIÊN HỆ</li></a>
                <a href="http://www.google.com/" class="icon1"><li><img src="images/iconG2.png"/></li></a>
                <a href="http://twitter.com/" class="icon2"><li><img src="images/icontw2.png"/></li></a>
                <a href="http://www.facebook.com/" class="icon3"><li><img src="images/iconFB2.png"/></li></a>
                <a href="http://yahoo.com/" class="icon4"><li><img src="images/iconP2.png"/></li></a>
                
            </div>
            <div id="title_bot"><p>2015 By Phương Thế Ngọc</p></div>
        </div>
</html>

code css:

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Mar 23, 2015, 1:40:45 PM
    Author     : Panda
*/
body{
    background-image: url(images/bg-pattern.jpg);
    background-size: 980px 1490px;
}
/*a:link { 
text-decoration: none; 
color: white;
} 
a:visited { 
text-decoration: none; 
color: white;
} 
a:hover { 
text-decoration: none; 
color: wheat;
} 
a:active { 
text-decoration: none; 
} */
#main{    
    width:1000px;
    height: 1470px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}    
#banner_top{
    height: 150px;
    width: 940px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
#menu_top{
    height: 50px;
    width: 940px;    
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-image: url(images/bg-navigation.png);
    border: 1px solid #41968b;
}
.menutop{    
    font-family: calibri;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 30px;
    padding-right: 0px;
    height: 33px;
    width: 102.2px;    
    border: 1px solid #41968b; 
    float: left;
    padding-top: 15px;    
    text-align: center; 
    cursor: pointer;
}
.menutop:link{
    color: white;
}
.menutop:visited{
   color: white;
}
.menutop:hover{
    background-image: url(images/bg-menu.png);
   color: wheat;
}
div li{
    list-style: none;
    float: left;
}

#banner_mid{
    height: 430px;
    width: 935px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border:5px solid white;
    background-image: url(images/sea-sound.jpg);
    background-size: 935px 430px;    
}

#content_banner{
    height: 190px;
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

#content_first{
    height: 275px;
    width: 615px;  
    margin-left: 29px;    
    float: left;
    background-color: white;
    padding-top: 15px;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 0px;
    text-align: left;
}
#img_first{ 
    height: 140px;
    width: 280px;  
    margin-right: 29px;   
    float: right;
    background-image: url(images/rooms.png);
}
#img_first:hover{
    background-image: url(images/first-class.jpg);
    background-size: 280px 140px;
}
#img_second{ 
    height: 140px;
    width: 280px;  
    margin-right: 29px;
    margin-top: 10px;
    margin-bottom: 10px;   
    float: right;  
    background-image: url(images/dive-site.png);
}
#img_second:hover{
    background-image: url(images/reef1.jpg);
    background-size: 280px 140px;
}
#content_second{
    height: 125px;
    width: 615px;  
    margin-top: 10px;
    margin-left: 29px;   
    float: left;  
    background-color: white;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 0px;
}
#img_third{ 
    height: 140px;
    width: 280px;  
    margin-right: 29px;
    margin-bottom: 10px; 
    float: right;  
    background-image: url(images/food.png);
}
#img_third:hover{
    background-image: url(images/seafoods.jpg);
    background-size: 280px 140px;
}
#menu_bot{
    height: 50px;
    width: 940px;  
    margin-left: 29px;   
    float: left;   
    background-image: url(images/icons.png);     
    
}
.menubot{
    font-size: 11.5px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    height: 35px;
    width: 70px; 
    padding-left: 10px; 
    float: left;   
    text-align:center;
    padding-top: 20px;
}
.menubot:link{
    color: wheat;
}
.menubot:visited{
   color: #594334;
}
.menubot:hover{
   color: white;
}
.menubot:active{
   color: wheat;
}
.icon1,.icon2,.icon3,.icon4{
    height: 30px;
    width: 30px;
    float: right;
    margin-right: 10px;
    margin-top: 15px;
}
.icon1:hover{
    background-image: url(images/iconG1.png);
    background-repeat: no-repeat;
}
.icon2:hover{
    background-image: url(images/icontw1.png);
    background-repeat: no-repeat;
}
.icon3:hover{
    background-image: url(images/iconFB1.png);
    background-repeat: no-repeat;
}
.icon4:hover{
    background-image: url(images/iconP1.png);
    background-repeat: no-repeat;
}

#title_bot{
    height: 50px;
    width: 940px;  
    margin-top: 0px;
    margin-left: 29px;   
    float: left;
    padding-top: 35px;    
    text-align: center;  
}

kết quả

BWS: Task 4: CSS CLASSES AND IDS, CSS ELEMENT POSITIONING

I lý thuyết
CSS CLASSES AND IDS
Đặt id Cho đối tượng HTML
ID nằm trong thể mở của tag HTML với cú pháp: id=”Ten”
<div id="bcdonline">
... Nội Dung ...
</div>
Style với ID:
Sau khi đã đặt tên cho đối tượng bạn sẽ khai báo các style cho đối tượng với id đó bằng các như sau:
#bcdonline{
các thuộc tính định dạng style;
}
Với các khai báo dấu “#” ở trước sau đó đến id và các thuộc tính định dạng css. Như vậy là tất cả id nào có tên là bcdonline sẽ có hiệu lực còn lại tất cả đầu không.
Người ta thường dùng id cho các đối tượng nào là duy nhất trong trang web. Ví dụ bạn chỉ có một banner thì trong div banner bạn cho cái id=”banner” và style cho nó là xong.
Sự khác biệt giữa ID và Class:
Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất.
Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần.
Class thì không phân biệt hoa thường khi đặt tên class còn ID thì phân biệt chứ hoa chứ thường.
ID bạn chỉ đặt 1 ID cho một đối tượng còn Class bạn đặt được nhiều Class cho một đối tương.
<div id="ten"></div>
<div class="class1 class2 class3 class4"></div>
Vài điều lưu ý khi sử dụng ID và Class trong CSS
Về đặt tên với ID: Không nên đặt số đầu tiên ví dụ: id=”8abc” vì đặt thế sẽ không hoạt động trên Firefox.
Class rất dễ bị làm dụng với cấu trúc thông thoáng của nó, bạn nên vạch ra một sơ đồ và viết style phù hợp giữa ID và Class sao cho cấu trúc của bạn đơn giản dễ quản lý, và trình duyệt dễ đọc
Bạn có thể đặt style như sau để dễ dàng quản lý:
<p class="abc"></p>
<span class="def"></span>
//style
p.abc{
style;
}
span.def{
style;
}
CSS ELEMENT POSITIONING
Cú pháp:
position: value;

Value:
static
relative
absolute
fixed

Static
Định vị với giá trị static là cách mặc định mà một phần tử sẽ xuất hiện trong tài liệu (X)HTMl của bạn. Kể cả khi bạn không khai báo position cho phần tử thì mặc định nó vẫn có giá trị static.
position: static;

Relative
Định vị một phần tử với vị trí tương đối và sau đó bạn có thể tùy chỉnh lại vị trí của nó với các thuộc tính left, right, top, bottom.

position: relative;

Absolute
Định vị một phần tử tách biệt hẳn so với tài liệu (X)HTMl của bạn. Nếu như một phần tử được định vị với giá trị là absolute được đặt trong một phần tử khác được định vị với giá trị khác static, nó sẽ được định vị tại top left của phần tử cha, nếu không, nó sẽ được định vị tại top left của cửa sổ trình duyệt

position: absolute;

Fixed
Định vị một phần tử với giá trị fixed gần giống với giá trị absolute, trừ việc nó sẽ luôn được căn chỉnh với cửa sổ trình duyệt.

position: fixed;

Tạo file ,nhập đoạn code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float và clear</title>
</head>
<style type="text/css">
div {
width:200px;
height:200px;
}
.relative {
position:relative;
background-color:#666;
}
.absolute {
width:50px;
height:50px;
position:absolute;
background-color:#0F0;
}
.fixed {
position:fixed;
background-color:#F00;
}
</style>
<body>
<div class="relative">
<div class="absolute">
</div>
</div>
<div class="fixed">
</div>
</body>
</html>

Css căn bản 1

CSS dùng để trang tri giao dien
Css có 3 loại
1. Inline css
*Viết Các thuộc tính quy định trong attribute style
-Ví dụ:
<h2 style="color: red;">heading</h2>
*Nhược Điểm:
-Không có khả năng lưu
viết code nhiều
khi chỉ muốn thay đổi đúng 1 thẻ html, thì sử dụng inline css
2. Embbed
Viết luôn CSS trong phần head của file html
phajm vi sử dụng trong 1 file html


3. external css
CSS đc viết ra 1 file riêng
có thể sử dụng trong nhiều file html trong cùng website
Muốn sử dụng lại css thì đưa link liên kêt, ví dụ
<link href="newcss.css" type="text/css" rel="stylesheet" />trong đó:
href là địa chỉ file css( thay đổi tùy vào website)
type="text/css" loại dự liệu là text và css(giữ nguyên)
rel="stylesheet" loại áp dụng là thẻ quy định đặc điểm( giữ nguyên)

Tóm lại: CSS giúp ta có thể giải quyết màu, font chứ , cỡ chữ... 1 cách nhanh chóng và ngắn gọn mà ko cần phải viết nhiều thẻ 1 lúc

Cách sử dụng bên tab css dó là ghi tên của dòng lệnh mà ta muốn thay đổi text và thêm {} vào. Các giai đoạn thay đổi sẽ dc đưa vào giữa {} và phải thêm dấu; để kết thúc dòng lệnh
ví dụ:
h1{
color:red;

Mở đầu về HTML và CSS

Mở đầu về HTML và CSS

-Mọi trang web mà bạn nhìn thấy đều đc viết trên một loại ngôn ngữ gọi là HTML(ngôn ngữ đánh dấu siêu văn bản)
- HTML có thể ví như 1 bộ xương cho mọi cấu trúc trang web
- Chúng ta dùng HTML để thêm vào các loại văn bản, tiêu đề , hình ảnh hay 1 liên kết nào đó
-Html đc cấu thành từ các thẻ <> tags
CSS: ngôn ngữ quy định , định dạng kiểu : màu sắc
Tài liệu html ( trang web ) sẽ bắt đầu và kết thúc <html> …</html>
-Trong file HTML có 2 phần là phần head và body. Phần head để đưa ra thong tin về file như kiểu tiêu đề . Phần body thì bạn thêm vào các nội dung như văn bản, ảnh hay links
- Chúng ta có thể dùng <p></p> để đóng mở 1 đoạn văn ngắn
- Dùng <a href=”url”></a> để thêm 1 đường link nào đó
- Dùng <img src=”url” /> để thêm ảnh
- Để tạo cho hình ảnh 1 đường link ta sẽ lồng đoạn code chèn ảnh trong code link . ví dụ như
<a href=”url”>

      <img src=”url” />
</a>