Danh Mục Bài Viết
Ok anh em, Bài đầu tiên trong chuỗi các bài viết liên quan đến chủ đề học nhanh Css cùng Minacode. Mình sẽ đề cập đến khái niệm Css là gì?. Cú pháp của nó và cách đơn giản nhất để chúng ta select một thẻ Html trong Css cũng như cách thêm nó vào file Html nhé! Nào let's go thôi.
CSS viết tắt của Cascading Style Sheets. Đây là ngôn ngữ giúp chúng ta có thể quyết định cách hiện thị nội dung của một trang web hay nói cách khác, Css giúp ta sắp xếp, trang trí và làm đẹp cho Html.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Học nhanh Css cùng Minacode</h1>
<p>Chào mừng các bạn.</p>
</body>
</html>
CSS đã giải quyết được một vấn đề rất lớn đó là giúp chúng ta tách bạch được việc style cho các thẻ Html ra một phần hay một file độc lập thay vì phải inline ngay trong nó. Chúng ta có thể Css cho nhiều trang Html chỉ với một file Css duy nhất.
h1 {
color: blue;
font-size: 12px;
}
Cách đơn giản nhất để chúng ta có thể select được một thẻ Html với Css đó là dựa trên tên, id, class của thẻ đó
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
.minacode-p {
text-align: center;
color: red;
}
#minacode-p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p class="minacode-p" id="minacode-p">minacode chào mừng các bạn.</p>
</body>
</html>Mình đã style cho thẻ p màu đỏ và căn giữa với 2 cách select với tên, id, class ở trên nhé! Mình sẽ đi sâu vào các cách chọn khác trong các bài viết sau để các bạn đỡ rối nhé!
Có ba cách để thêm Css vào Html:
Ví dụ mình có thẻ p như sau
<!DOCTYPE html>
<html>
<body>
<p>Chào mừng các bạn đến với Minacode.</p>
</body>
</html>Mình muốn style cho nó có màu đỏ sẽ có 3 cách:
1, CSS nội tuyến - Inline
<p style="color:red;">Chào mừng các bạn đến với Minacode.</p>2, CSS nội bộ -Internal
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>Chào mừng các bạn đến với Minacode.</p>
</body>
</html>
3, CSS bên ngoài - External
Mình sẽ tạo một file style.css
Và thêm đoạn code sau
p{
color:red;
}Và link file style.css vào bên trong cặp thẻ head của Html
<head>
<link rel="stylesheet" href="style.css">
</head>>>Còn tiếp>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
