Tạo Dao Diện WebServer Với CSS
Như ở bài 2 Mình đã Hưỡng dẫn cách tạo ra 1 trang web cơ bảnvới esp8266. ở bài này mình sẽ hưỡng dẫn các bạn tạo ra 1 mẫu dao diện mẫu Web
Server cho esp8266 từ HTML và CSS. Với dao diện mẫu này từ sau này trở đi mình
sẽ dùng dao diện mẫu này kèm với css mãu này để làm bài giảng, vậy nên bài này
mình sẽ làm rất kĩ. Để các bạn lấy mẫu này chỉnh sửa cho dễ nhá
 |
| Dao Diên Web Với CSS |
CSS Là Gì
CSS nó là một
ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được
tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML)
Phương thức hoạt động của
CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML,
tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần
thay đổi lên vùng chọn đó.
Cấu Trúc CSS
<style>
vùng chọn {
thuộc
tính: giá trị;
thuộc
tính: giá trị;
.....
}
</style>
Trong bài này Mình sẽ giới thiệu cho các bạn kỹ hơn về thẻ
div trong HTML, vì khi lam việc với css mình sẽ hay dùng tới thẻ div để tạo ra
các box model
Vậy Thẻ DIV Là Gì
Thẻ div Là Gì
Thẻ <div> là thẻ được sử dụng để tạo ra một khu vực kiểu block nào đó trên
một website, hay bạn có thể hiểu là gom nhóm tập hợp các phần tử trên website
vào một khu vực với thẻ <div>
 |
| Thẻ div Là Gì |
Thẻ div với class là ctn thẻ này là thẻ có vùng chọ là 1
class tên ctn, thẻ này chứ các thẻ con. Trong đó có 2 thẻ div với vùng chọn là
id có tên là ct trong thẻ div này chứa các câu lệnh.
Box Model là gì
Box Model là một kỹ
thuật cơ bản nhất trong CSS Layout và được sử dụng để bạn mô tả về khoảng cách
mà mỗi phần tử trên website được sở hữu, hay nói cách khác là kỹ thuật tinh chỉnh
khoảng cách hiển thị cho mỗi phần tử trên website.
Box Model trong CSS bao gồm 4 phần quan trọng đó là:
Margin: Khoảng cách tính từ
bên ngoài của phần tử.
Border: Đường viền của phần
tử.
Padding: Khoảng cách tính
từ bên trong của phần tử.
Content: Nội dung trong phần
tử.
 |
| Box Model Là Gì |
Ví Dụ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>LEPA Trợ Lý Học Tập</title>
<style>
.ctn{
background-color:#00ff00;
width:350px;
height:480px;
padding:25px;
border:10px solid black;
margin:20px;
text-align: right;
color: #ff0000;
}
</style>
</head>
<body>
<div class="ctn">
<p>Trợ Lý Học Tập</p>
</div>
</body>
</html>
Mở lên bằng Sublime Text
Với vùng chọn là class = “ctn” nên khái báo vùng chọn là lớp
class vào css phải có dấu chấm (.) trước tên vùng chọn
Trong vùng chọn có các thuộc tính và giá trị
background-color:#00ff00
là
thuộc tính đổ màu nền cho vùng chọn gồm content và Padding
width:350px
thiết
lập chiều rộng cho content
height:480px;
thiết
lập chiều cao cho content
padding:25px;
thiết
lập chiều rộng cho padding là 25px
border:10px
solid black thiết lập viền bằng 10px và có màu đen
margin:20px
thiết
lập margin là 20px
text-align:
right khai báo căn chỉnh cho chữ. Với giá trị là right, left,
center
color:
#ff0000 chọn màu cho chữ
 |
| KIểm Tra Box Model |
Chương Trinh Dao Diện WebServer Với CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>LEPA Trợ Lý Học Tập</title>
<script>
</script>
<style>
h3 {
text-align: center
}
.ctn, .ctn1, .ft{
width: 350px;
margin: 0 auto;
padding: 0.3rem;
background: #ffffff;
}
.ctn{
border: 1px solid #ddd;
}
.f-i{
padding: 8px;
width: 93%;
margin-bottom: 1rem
}
input[type=submit]{
width: 100%;
}
.button, input[type=submit]{
background: #69d2e7;
color: #ffffff;
padding: 10px;
border-radius: 10px;
}
.button:hover, input[type=submit]:hover{
background: #088A85;
}
.bc, .button {
display: inline-block;
margin: 0;
width: 40%;
}
#ct {
text-align: center;
}
.ft{
font-size: 75%;
color: #838383;
text-align: right;
}
</style>
</head>
<body>
<div class="ctn">
<h3>MAIN MENU</h3>
<div id=ct>
<div class="bc"><h1 id="L1">ON</h1></div>
<div class="bc"><h1 id="L2">OFF</h1></div>
</div>
<div id=ct>
<button onClick='FA("?Start=1")' class='button'>BUTTON 1</button>
<button onClick='FA("?Start=2")' class='button'>BUTTON 2</button>
</div>
</div>
<div class="ctn1">
<form action="/swifi">
<input type="submit" value="Configure Wifi">
</form>
<form action="/smqtt">
<input type="submit" value="Configure MQTT">
</form>
<form action="/ssms">
<input type="submit" value="Thông Tin">
</form>
</div>
<div class="ft">
<hr>
<p>© LEPA-Trợ Lý Học Tập</p>
</div>
</body>
</html>
Mở lên bằng Sublime Text
Giải thích chương trình
Để khái báo vùng chọn trong css.
Đối với class ta
dùng dấu chấm (.) trước tên vùng chọn
Đối với ID ta
dùng dấu thăng (#) trước tên vùng chọn
Trong body ta các các thẻ html chứ các class và id
Đối với class ta
có thẻ ctn ctn1 (container) và ft (footer)
.ctn, .ctn1, .ft{
width: 350px;
margin: 0 auto;
padding: 0.3rem;
background: #ffffff;
}
Đối với 3 lớp này ta dùng các thuộc tính chung gồm width: 350px. High k dc khai báo giúng
cho trang web tự động tăng chiều cao phụ thuộc vào nội dung bên trong.
ta để margin ở
giá trị auto lúc này trang web sẽ tự động căn chỉnh để cho phần nội dung và
giũa.
padding:
0.3rem tao khoảng cách giữa nội dung và viền cho dễ quan sát.
background:
#ffffff; màu nên trắng
.ctn{
border: 1px solid #ddd;
}
Đối với lớp ctn ta tạo cho nó 1 đường viền bao quanh 1px với
màu ddd
.ft{
font-size: 75%;
color: #838383;
text-align: right;
}
Lơp này với mục đích tạo ra chữ ở chân trang phía bên phải
và có màu hơi nhạt
.button, input[type=submit]{
background: #69d2e7;
color: #ffffff;
padding: 10px;
border-radius: 10px;
}
Đối class button và
thẻ input[type=submit] mục đích là tạo
ra 1 box model nút nhấn,
background:
#69d2e7 màu của nên box model
color:
#ffffff Màu của chữ
padding:
10px khoảng các từ viền
vào chữ bên trong
border-radius:
10px tạo đường bo góc cho box model
input[type=submit]{
width: 100%;
}
Tạo ra chiều dài của nút nhấn submit là 100% so chiều dài của
box model bao bọc bên ngoài
.bc, .button {
display: inline-block;
margin: 0;
width: 40%;
}
Đối với class bc và class button tạo ra với mục đích làm
cho các box model nằm trong box model này sẽ nằm trên một hàng
display: inline-block Hiển Thị Theo Kiểu Inline-Block. Kiểu
này sẽ cho hiển thì theo khối và nằm trên một hang
width: 40% chiều dài
của nút nhấn là 40% so với box model bên ngoài. Tùy thuộc vào bạn muốn hiện thì
bao nhiêu khối bên trong cùng nằm trên một hang thì mình chỉnh khích thước cho
phù hợp
#ct {
text-align: center;
}
Với ID là ct sẽ cho nội dung chữ sẽ căn giữa
.button:hover, input[type=submit]:hover{
background: #088A85;
}
Hover sẽ tạo
hiệu ứ khi rê chuột vào vị trí đó.
ỏ đây khi rê chuột vào button và submit sẽ tạo ra hiệu ứng
đổi màu nền
.f-i{
padding: 8px;
width: 93%;
margin-bottom: 1rem
}
Class f-I tạo ra với múc đich làm một box cho thẻ input
text để nhập giá trị vào
margin-bottom đặt lề
dưới cho 1 box
class f-I này sẽ được áp dụng trong 1 bài khác. Bài lấy dữ
liệu nhập vào từ trang web.
 |
| Mẫu Dao Diện Web Với CSS |
Qua phần 2 chúng ta sẽ áp dụng chương trình css vào ESP8266
phần tiếp theo hương dẫn tạo websever esp8266 với
css
Cảm ơn bạn đã theo dõi bài viết. bạn có thắc mắc hay góp ý hãy
để lại dưới bình luận mình sẽ phản hồi sớm
0 Nhận xét