CSS trong HTML

  • Nguyễn Lê Điệp
  • 23-12-2016
  • 195
  • 0
  • 2
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    CSS được thêm vào trong HTML với 3 cách sau:

    - Sử dụng các thuộc tính style trong các phần tử HTML.
    - Sử dụng thẻ <style> trong thẻ <head> của HTML
    - Sử dụng file CSS để chèn vào trong thẻ <head> của HTML

    >> Để hiểu rõ hơn về CSS các bạn có thể xem thêm tại loạt bài hướng dẫn Học CSS

    CSS trong phần tử HTML

    Với cách sử dụng này thì chỉ có một phần tử HTML có chèn thuộc tính style của CSS sẽ chịu ảnh hường của style đó và các phần tử HTML còn lại sẽ không bị ảnh hưởng.
    Ở ví dụ bên dưới chúng ta sẽ chèn một thuộc tính style vào thẻ <p> và các phần tử trong thẻ <p> này sẽ chịu ảnh hưởng của thuộc tính style đó.

    <p style="color:red">Đoạn văn đã được tô đỏ</p>
    Xem ví dụ

    CSS trong thẻ head

    Ở phần CSS này dùng để định nghĩa style cho một trang đơn. Và các thẻ HTML giống nhau sẽ chịu ảnh hưởng bởi một style đã định trước. Với các định nghĩa này thì các thuộc tính style sẽ nằm trong thẻ <head>
    <!DOCTYPE html>
    <html>
    <head>
    	<style>
    		body{background-color: yellow;}
    		p{color: red;}
    		b{color: brown;}
    	</style>
    </head>
    <body>
    	<p>Đây là một đoạn văn</p>
    	<b>Đây là nội dung của thẻ b</b>
    </body>
    </html>
    Xem ví dụ

    CSS bên ngoài HTML

    Với cách định nghĩa này thì file CSS này được sử dụng để xác định style cho nhiều trang HTML và bạn có thể thay đổi style của trang thông qua tập tin CSS này.
    Để sử dụng được CSS bên ngoài bạn cần thêm một liên kết đến đến với file CSS trong thẻ <head> của trang HTML:

    <!DOCTYPE html>
    <html>
    <head>
    	<link rel="stylesheet" href="/home/tryit/css/style-hochtml.css">
    </head>
    <body>
    	<p>Đây là một đoạn văn</p>
    	<b>Đây là nội dung của thẻ b</b>
    </body>
    </html>
    Xem ví dụ

    Đối với một style được viết bên ngoài HTML thì bạn có thể soạn thảo bằng bất cứ trình soạn thảo văn bản nào bạn thích hoặc bạn có thể sử dụng phần mềm hỗ trợ soạn thảo style. Bạn nên nhớ trong style không chứa các phần tử HTML nào và nó được lưu lại với phần mở rộng là: .css. Ở dưới là một đoạn style được viết bên ngoài trang HTML và được lưu lại với tên style-hochtml.css
    body{
    	background-color: yellow;
    }
    p{
    	color: red;
    }
    b{
    	color: brown;
    }

    CSS font trong HTML

    CSS định nghĩa màu chữ với thuộc tính color, định dạng kiểu chữ với thuộc tính font-family và xác định kích thước chữ với thuộc tính font-size.

    <!DOCTYPE html>
    <html>
    <head>
    	<style>
    	h1{
    	    color: red;
    	    font-family: verdana;
    	    font-size: 30px;
    	}
    	p{
    	    color: blue;
    	    font-family: courier;
    	    font-size: 15px;
    	}
    	</style>
    </head>
    <body>
    	<h1>Đây là tiêu đề lớn</h1>
    	<p>Đây là một đoạn văn bản bình thường</p>
    </body>
    </html>
    Xem ví dụ

    CSS border trong HTML

    Với thuộc tính border trong CSS sẽ xác định khung viền cho văn bản nằm trong thẻ style có thuộc tính border
    p {
        border: 1px solid blue;
    }
    Xem ví dụ

    CSS padding trong HTML

    Với thuộc tính padding trong CSS nó sẽ giúp chúng ta tăng khoảng cách giữa các dòng bên trong dòng đó. Chúng ta có thể hiểu đơn giản là sẽ padding nó là một thuộc tính làm nống (đẩy) ra từ bên trong.
    p {
    	border: 1px solid blue;
    	padding: 40px;
    }
    Xem ví dụ

    CSS margin trong HTML

    Với thuộc tính này nó ngược lại với thuộc tính padding bên trên. Thuộc tính margin nó sẽ tăng khoảng cách từ các dòng với nhau ở vùng bên ngoài.
    p {
    	border: 1px solid blue;
    	margin: 40px;
    }
    Xem ví dụ

    CSS id trong HTML

    Để xác định style của một phần tử HTML cụ thể ta có thẻ xác định nó qua thuộc tính id. Với thuộc tính id là thuộc tính dùng để chỉ một điều gì đó là duy nhất vì vậy các id không thể trùng nhau.
    <!DOCTYPE html>
    <html>
    <head>
    	<style>
    		#idhtml {
    	    color: red;
    	}
    </style>
    </head>
    <body>
    	<p>Đoạn văn bản bình thường</p>
    	<p id="idhtml">Đoạn văn có sử dụng thuộc tính id</p>
    </body>
    </html>
    Xem ví dụ

    CSS class trong HTML

    Ngoài thuộc tính id là duy nhất thì trong HTML có một thuộc tính đó là thuộc tính class. Với thuộc tính class trong HTML ta có thể dùng chung có nghĩa là các phần tử trong HTML có thể dùng một class.
    <!DOCTYPE html>
    <html>
    <head>
    	<style>
    		.hochtml {
    	    color: red;
    	}
    </style>
    </head>
    <body>
    	<p>Đoạn văn bản bình thường</p>
    	<p class="hochtml">Đoạn văn có sử dụng thuộc tính class</p>
    	<p class="hochtml">Đoạn văn có sử dụng thuộc tính class</p>
    </body>
    </html>
    Xem ví dụ

    CSS được định nghĩa bên ngoài

    Đối với CSS được đĩnh nghĩa bên ngoài ta có thể liên kết tới địa chỉ của file CSS đó theo đường dẫn đầy đủ
    <link rel="stylesheet" href="http://kennis.vn/home/tryit/css/style-hochtml.css">
    Hoặc ta có thể liên kết tới địa chỉ file CSS theo đường dẫn rút gọn
    <link rel="stylesheet" href="/home/tryit/css/style-hochtml.css">

    Hai cách liên kết bên trên đều cho chúng ta một kết quả
    Xem kết quả
    Chúc các bạn học tốt!cool
    Từ khóa:

    CSS trong HTML

    CSS trong HTML

    CSS trong HTML

    CSS trong HTML
    CSS trong HTML
    2 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    322
    - Hôm qua:
    704
    - Tuần này:
    2.423
    - Tuần trước:
    4.456
    - Tháng này:
    17.046
    - Tháng trước:
    21.317
    - Năm này:
    109.735
    - Năm trước:
    17.373
    - Tổng cộng:
    127.108