BrowserSync

Giải pháp website, App & CRM > Blog

Mục đích sử dụng là để browser tự động load lại trang khi có sự thay đổi file, ở đây là các file css, js, php. Developer sẽ không phải alt tab ra ngoài nhấn f5 nữa.

Cài đặt browsersync

npm install -g browser-sync

Setup file package.json

"sync": "browser-sync start --proxy \"carify-test.test\" --files \"style.css\"",

Trong đó:

— proxy là tên của website đang chạy trên local của mình, ví dụ như ở trên là carify-test.test

–files danh sách các file mà nếu thay đổi thì sẽ browsersync sẽ tự động load lại trang, ví dụ như ở trên là file style.css của theme. Có thể watch thêm file php và js, khai báo cách nhau bởi dấu phẩy: –files \”style.css, ./js/script.js, functions.php\”. Để watch tất cả các file thì thay tên file bằng dấu *: *.css, *.js, *.php

Cấu trúc thư mục

/var/www/domain.com: chứa toàn bộ website, trong đó có:

  • file wp-config.php
  • Thư mục public chứa bộ cài WordPress. Config Apache trỏ document root về thư mục này. Các file trong thư mục này sẽ chạy, còn các file ngoài thư mục này sẽ không truy xuất được qua trình duyệt.
    • Thư mục con content thay cho thư mục wp-content cũ. Dùng cho các plugin cần ghi dữ liệu vào đây.
    • Thư mục con modules chứa các plugins.
    • Thư mục con templates chứa các themes.
    • Thư mục con media chứa các file uploads.
  • Thư mục mu-plugins chứa các mã chạy cho site chung (luôn luôn bật).
  • Xóa các file license.txt, readme.html

File permission

Để tất cả các thư mục thuộc sở hữu của root.

Đặt chmod 755 cho thư mục, 644 cho file.

Đặt chmod 777 cho thư mục media.

Đặt chmod 444 cho file wp-config.php để chống sửa.

File wp-config.php

  1. Generate secret key
  2. Đổi prefix database
  3. Tắt debug
// Security: moving folders
define('WP_CONTENT_DIR', __DIR__ . '/public/content');
define('WP_CONTENT_URL', '/content');
define('WP_PLUGIN_DIR', __DIR__ . '/public/modules');
define('WP_PLUGIN_URL', '/modules');
define('WPMU_PLUGIN_DIR', __DIR__ . '/mu-plugins');
define('WPMU_PLUGIN_URL', '/mu-plugins'); // Not use
define('WP_LANG_DIR', __DIR__ . '/languages');
define('UPLOADS', 'media');

// Security: disallow theme/plugin edit/install/update
define('DISALLOW_FILE_EDIT', true);
define('DISALLOW_FILE_MODS', true);

// Optimization
define('WP_POST_REVISIONS', false );
define('WP_MEMORY_LIMIT', '128M');
define('EMPTY_TRASH_DAYS', 0);
define('WP_ALLOW_REPAIR', false);

// Optimization: no cron
define('DISABLE_WP_CRON', true);

define('WP_DEBUG', false);
$table_prefix = 'no_default_';

Thư mục mu-plugins

Tạo file themes.php với nội dung sau để đăng ký thư mục chứa theme là public/templates:

<?php register_theme_directory( dirname( __DIR__ ). '/public/templates' );

Sửa đường dẫn

Vào https://interconnectit.com/products/search-and-replace-for-wordpress-databases/ điền mail, rồi vào mail down về, tải lên web, chạy web /domain/folder

Chuẩn viết code

Chuẩn viết code (tiếng Anh gọi là coding standards, coding style hoặc coding conventions) là các quy tắc nhằm đảm bảo những thành viên trong công ty cùng viết theo 1 kiểu để giúp mọi người đọc code của nhau dễ hơn và nhanh hơn.

Chúng ta sử dụng quy tắc của WordPress và chỉnh sửa đôi chút. Các chỉnh sửa được nói cụ thể ở phần dưới.

Các quy tắc nào không được nhắc đến ở đây thì mặc định hiểu là dùng theo chuẩn của WordPress.

Môt bộ quy tắc bao gồm:

  • Đặt tên biến, hằng, hàm, class, …
  • Khoảng trắng, tab
  • Khai báo và sử dụng biến
  • Comment
  • Độ dài tối đa mỗi dòng code, mỗi file, …
  • …

Khai báo mảng

WordPress bắt buộc dùng kiểu khai báo mảng dạng dài array(1, 2, 3), tuy nhiên, từ bản 5.4 trở đi, PHP hỗ trợ viết theo dạng ngắn [1, 2, 3]. Vì thế, bạn nên dùng dạng ngắn để code được ngắn gọn và cùng kiểu với JavaScript (nhờ đó dễ đọc hơn).

Hàm nặc danh và lời gọi hàm nhiều dòng

WordPress yêu cầu bắt buộc những viết hàm nặc danh và lời gọi hàm nhiều dòng phải xuống dòng, VD:

 

// Hàm nặc danh
add_action(
    'some_action',
    function ( $matches ) {
        echo 'Something';
    }
);

// Lời gọi hàm nhiều dòng
$args = wp_parse_args(
    $args,
    array(
        'key1' => 'value1',
        'key2' => 'value2',
    )
);

Tuy nhiên, việc xuống dòng này là không cần thiết và không bắt buộc. Bạn có thể viết:

 

// Hàm nặc danh
add_action( 'some_action', function () {
    echo 'Something';
} );

// Lời gọi hàm nhiều dòng
$args = wp_parse_args( $args, [
    'key1' => 'value1',
    'key2' => 'value2',
] );
Code language: PHP (php)

Thẻ PHP ngắn

WordPress bắt buộc phải viết đầy đủ thẻ PHP như sau:

<?php echo 'Some text'; ?>

Tuy nhiên, từ bản 5.4, PHP đã hỗ trợ viết thẻ PHP ngắn (và tính năng này luôn được bật). Nên bạn có thể dùng nó để cho câu lệnh gọn gàng hơn:

<?= 'Some text'; ?>

Bạn có thể bỏ luôn dấu chấm phẩy cuối câu lệnh:

<?= 'Some text' ?>

Đặt tên file và class

WordPress bắt buộc tất cả các class đều phải đặt tên dạng Ten_Class (viết hoa đầu các từ và phân cách bằng dấu gạch dưới), và tên file của class phải viết dạng class-ten-class.php (có tiền tố class- và các từ trong tên class viết thường, phân cách bằng dấu gạch ngang).

Tuy nhiên, cách làm này không tốt khi dùng Composer, vì Composer tuân theo cách viết của PSR. Khi làm việc với các plugin, theme lớn, chúng ta dùng Composer để load tự động các file, do đó chúng ta sẽ tuân thủ theo quy tắc đặt tên file và class của PSR, cụ thể:

  • Tên class: đặt theo dạng TenClass (viết hoa đầu các từ và viết liền các từ)
  • Tên file: đặt dạng TenClass.php (tên file trùng với tên class)

Ngoài ra, các file sẽ được đặt trong các thư mục tương ứng với namespace của chúng, VD class có tên đầy đủ là: \ALSearch\Shortcode\Field thì sẽ được đặt trong thư mục src\ShortCode với tên file là Field.php. Ở đây thư mục src được ánh xạ tới namespace ALSearch còn các phần tiếp theo trong tên class được ánh xạ tới các thư mục theo cùng phân cấp tương ứng.

Toán tử :?

WordPress không cho dùng toán tử :? ở dạng ngắn mà luôn yêu cầu viết đầy đủ:

 

$type = $type ? $type : 'select';

Tuy nhiên, từ bản 5.3, PHP đã cho phép viết ngắn lại để dễ đọc hơn, và công ty chúng ta cũng khuyến khích dùng cách viết này:

$type = $type ?: 'select';

Điều kiện Yoda

Khi viết điều kiện, WordPress yêu cầu chúng ta viết biến bên phải và các hằng, giá trị, lời gọi hàm bên trái:

 

if ( true === $the_force ) {
    $victorious = you_will( $be );
}

Mục đích là để đảm bảo kiểu dữ liệu (khi so sánh PHP sẽ ép kiểu) và tránh lỗi (VD bạn viết = thay vì viết ==). Tuy nhiên, cách viết này khiến code khó đọc và khó hiểu, nhất là với người mới. Vì thế công ty không bắt buộc kiểu viết này.

PHPCS

Công cụ để kiểm tra chuẩn viết code và sửa các lỗi về chuẩn viết code được khuyến cáo dùng là PHP CodeSniffer.

Cài đặt Composer

Trước hết bạn cần cài đặt Composer.

Khi chạy install composer chọn file php.exe ở trong xampp

Xóa dấu  ; ở trước extension=php_openssl.dll trong file php.ini

Thêm đường dẫn của php (E:\xampp\php) vào Path

Cài PHPCS

Bật cmd chạy lệnh:

 

composer global require dealerdirect/phpcodesniffer-composer-installer wp-coding-standards/wpcs phpcompatibility/phpcompatibility-wp

 

# Kiểm tra chuẩn viết code
phpcs --standard=WordPress /path/to/folder/

# Sửa các lỗi về chuẩn viết code
phpcbf --standard=WordPress /path/to/folder/

File cấu hình

Tham khảo file cấu hình.

Best Practices

Phần này mô tả các kỹ thuật giúp cho code được viết tối ưu hơn, dễ bảo trì hơn và dễ đọc hơn.

Viết code thống nhất

Viết cùng 1 kiểu trong 1 hàm, class hoặc file. Tránh viết các kiểu khác nhau cho các đoạn code tương tự.

VD viết sai:

<?php if ( $args['label'] ) : ?>
    <span class="als-field__label"><?php echo esc_html( $args['label'] ); ?></span>
<?php endif; ?>

<?php
if ( $args['prefix'] ) {
    echo '<span class="als-field__prefix">' . esc_html( $args['prefix'] ) . '</span>';
}

Đoạn code trên hiển thị label và prefix. Tuy cách hiển thị giống nhau, nhưng cách viết lại khác nhau. Cách viết đúng như sau:

if ( $args['label'] ) {
    echo '<span class="als-field__label">', esc_html( $args['label'] ), '</span>';
}
if ( $args['prefix'] ) {
    echo '<span class="als-field__prefix">', esc_html( $args['prefix'] ), '</span>';
}

Trả về sớm

Việc viết các khối điều kiện quá lớn khiến code rất khó đọc và khó theo dõi logic. Để khắc phục điều này, cần phải viết các khối điều kiện nhỏ lại. Một trong những kỹ thuật đó là trả về sớm sớm ngay khi có thể, tiếng Anh gọi là “early return”.

VD khi chưa tối ưu:

if ( 'none' !== $field['sanitize_callback'] ) {
    if ( is_callable( $field['sanitize_callback'] ) {
        $value = call_user_func( $field['sanitize_callback'], $value, $args );
    } else {
        // Đoạn code rất dài.
    }
}
return $value;

Cách viết dùng trả về sớm:

if ( 'none' === $field['sanitize_callback'] ) {
    return $value;
}
if ( is_callable( $field['sanitize_callback'] ) {
    return call_user_func( $field['sanitize_callback'], $value, $args );
}

// Đoạn code rất dài.

return $value;

Đặt giá trị mặc định

Đặt giá trị mặc định giúp chúng ta loại bỏ các câu điều kiện kiểm tra sự tồn tại của giá trị đó, qua đó giúp code đơn giản, dễ đọc hơn.

VD khi chưa tối ưu:

if ( isset( $args['prefix'] ) && $args['prefix'] !== '' ) {
    echo '<span class="als-field__prefix">', esc_html( $args['prefix'] ), '</span>';
}
if ( isset( $args['label'] ) && $args['label'] !== '' ) {
    echo '<span class="als-field__label">', esc_html( $args['label'] ), '</span>';
}
Code language: PHP (php)

Khi dùng giá trị mặc định:

$args = wp_parse_args( $args, [
    'prefix' => '',
    'label' => '',
] );

if ( $args['prefix'] ) {
    echo '<span class="als-field__prefix">', esc_html( $args['prefix'] ), '</span>';
}
if ( $args['label'] ) {
    echo '<span class="als-field__label">', esc_html( $args['label'] ), '</span>';
}

Output nhiều giá trị với echo

Khi cần output nhiều đoạn text, thường chúng ta viết dạng:

 

echo '<span class="als-field__prefix">' . esc_html( $args['prefix'] ) . '</span>';

Tuy nhiên, hàm echo cho phép chúng ta truyền nhiều tham số 1 lúc, và do đó hoạt động sẽ nhanh hơn:

 

echo '<span class="als-field__prefix">', esc_html( $args['prefix'] ), '</span>';

Khai báo muộn và khai báo khi cần thiết

Các biến được khai báo chỉ khi nào cần thiết. Khai báo ở đây bao gồm cả việc khởi tạo giá trị ban đầu. Và việc khai báo nên để muộn nhất có thể, tốt nhất là ngay trên đoạn code sử dụng biến đó.

VD về việc khai báo biến thừa:

 

$date = parent::get_date();
$format = ''; // Khai báo thừa, vì biến này được khai báo lại ở đoạn code dưới

if ( $meta ) {
    $format = 'Y-m-d';
    return date( $format, $date );
}

 

Code đúng:

$date = parent::get_date();

if ( $meta ) {
    $format = 'Y-m-d';
    return date( $format, $date );
}

VD về việc khai báo biến quá sớm, chưa dùng đến:

$format = 'Y-m-d';

// Đoạn code rất dài.

return date( $format, $date );

Biến $format chỉ nên khai báo ngay trước đoạn code dùng nó:

// Đoạn code rất dài.

$format = 'Y-m-d';
return date( $format, $date );

Backend

MySQL

Cài đặt và chạy MySQL Tuner để lấy các recommendation.

Query

Cài đặt Query Monitor để phát hiện các query trùng lặp, các query chậm.

Tối ưu các query theo hướng dẫn của 10up. Chú ý 3 điểm sau:

  • 'no_found_rows' => true : Nếu không cần found_posts
  • 'update_post_term_cache' => false : Nếu không cần get term, get category cho các bài viết
  • 'update_post_meta_cache' => false : Nếu query cần get post meta (bao gồm cả thumbnail)

Cache post meta và term meta: update_postmeta_cache và update_termmeta_cache trước để khi get term meta và get post meta không cần phải chạy lại các queries SQL.

Ví dụ: cache post thumbnail

 

$post_thumbnails = [];
foreach ( $query->posts as $recent_post ) {
    $post_thumbnails[] = get_post_meta( $recent_post->ID, '_thumbnail_id', true );
}
update_postmeta_cache( $post_thubmnails );

PHP Workers and WordPress: The Definitive Guide

Khác

Deactivate các plugins mà:

  • Update vào database mỗi khi load (VD: post views)
  • Tải nặng (VD: Redirection)
  • Không cần thiết

Frontend

Chỉnh lại rule .htaccess để cache các file tĩnh trên server.

Tắt Email Address Obfuscation trong CloudFlare.

Gom và inline CSS: dùng plugin Autoptimize

Dequeue hết các script và style không dùng (genericon, Facebook Like, … của Jetpack) hoặc lazyload nó dùng loadCSS.

Xử lý hình ảnh: Dùng CDN của WordPress.com: https://developer.wordpress.com/docs/photon/api/. Xử lý cho tất cả các chỗ insert được URL bằng tay.

Resize, tối ưu hình ảnh sau khi upload: tham khảo plugin Imsanity.

Preload các ảnh hero.

Lazyload hình ảnh: dùng lazy load của Autoptimize hoặc thư viện

Icon fonts: dùng loadCSS.

Tối ưu Google Fonts: tham khảo Meta Box và CSSWizardry.

Tối ưu video/iframe và các widget bên thứ 3: tham khảo Meta Box và bài này.

Cheatsheet để tối ưu các chỉ số Web Vitals.

1) Độ ưu tiên hiển thị là gì !?

– Độ ưu tiên hiển thị có thể tạm hiểu như một loại đơn vị đo lường dùng để quyết định việc “phần tử nào sẽ được hiển thị đè lên phần tử nào trong trường hợp các phần tử đó chồng chéo lên nhau do bị thiết lập nằm ở cùng một vị trí hoặc giao nhau.”

Ví dụ:

– Ta có một đoạn mã như bên dưới.

<!DOCTYPE html>
<html>
<head>
    <title>Tiêu đề của trang web</title>
    <style type="text/css">
        #red, #green, #blue{
            width:150px;
            height:150px;
            border-radius:50%;
            position:absolute;
        }
        #red{
            background-color:red;
            top:0px;
            left:0px;
        }
        #green{
            background-color:green;
            top:0px;
            left:75px;
        }
        #blue{
            background-color:blue;
            top:75px;
            left:37.5px;
        }
    </style>
</head>
<body>
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
</body>
</html>

– Ba phần tử #red #green #blue được thiết lập vị trí giao nhau, nên tại điểm giao nhau ba phần tử này bị chồng chéo lên nhau, trong đó:

  • Phần tử #blue được khai báo sau #green nên nó có độ ưu tiên hiển thị cao hơn #green
  • Phần tử #green được khai báo sau #red nên nó có độ ưu tiên hiển thị cao hơn #red

– Đó là lý do tại sao các bạn thấy phần tử #blue hiển thị đè lên phần tử #green, phần tử #green hiển thị đè lên phần tử #red, mà không phải theo một thứ tự khác.

2) Cách thiết lập độ ưu tiên hiển thị cho một phần tử HTML

– Sau khi xem xong ví dụ phía trên thì chắc các bạn cũng đã thấy “đối với các phần tử anh em bị thiết lập nằm ở cùng một vị trí (hoặc giao nhau) thì các phần tử được khai báo sau sẽ có độ ưu tiên hiển thị cao hơn các phần tử được khai báo trước, điều đó đồng nghĩa với việc các phần tử khai báo sau sẽ hiển thị đè lên các phần tử khai báo trước.”
– Vậy vấn đề đặt ra ở đây là: “Nếu muốn một phần tử được khai báo trước có độ ưu tiên hiển thị cao hơn phần tử được khai báo sau thì chúng ta phải làm như thế nào !?”

– Nếu muốn phần tử được khai báo trước có độ ưu tiên hiển thị cao hơn phần tử được khai báo sau thì chúng ta sử dụng thuộc tính z-index để thiết lập lại độ ưu tiên hiển thị cho phần tử được khai báo trước, sao cho độ ưu tiên hiển thị của nó lớn hơn các phần tử được khai báo sau.

– Cú pháp: z-index: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị.

  • auto: Để mặc định (tương đương với việc không thiết lập độ ưu tiên)
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
            width:200px;
            height:200px;
            background-color:green;
            position:absolute;
            z-index:auto;
        }
        #b{
            width:200px;
            height:200px;
            background-color:blue;
            position:absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <p>- Phần tử #a được thiết lập thuộc tính z-index với giá trị auto.</p>
    <p>=&gt; Suy ra độ ưu tiên hiển thị của phần tử #a là mặc định, mà mặc định thì phần tử #a có độ ưu tiên hiển thị thấp hơn phần tử #b (vì phần tử #a khai báo trước phần tử #b)</p>
    <p>=&gt; Điều đó đồng nghĩa với việc phần tử #a sẽ hiển thị bên dưới phần tử #b.</p>
    <div style="position:relative">
        <div id="a"></div>
        <div id="b"></div>
    </div>
</body>
</html>
  • number: Chỉ định độ ưu tiên hiển thị của phần tử dựa theo một số nguyên cụ thể, số nguyên này có thể là số âm hoặc số dương, số càng lớn thì độ ưu tiên hiển thị càng cao.
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
            width:200px;
            height:200px;
            background-color:green;
            position:absolute;
            z-index:10;
        }
        #b{
            width:200px;
            height:200px;
            background-color:blue;
            position:absolute;
            z-index:5;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <p>- Phần tử #a được thiết lập thuộc tính z-index với giá trị 10</p> 
    <p>- Phần tử #b được thiết lập thuộc tính z-index với giá trị 5</p>
    <p>=&gt; Suy ra độ ưu tiên hiển thị của phần tử #a lớn hơn độ ưu tiên hiển thị của phần tử #b.</p>
    <p>=&gt; Điều đó đồng nghĩa với việc phần tử #a sẽ hiển thị đè lên phần tử #b.</p>
    <div style="position:relative">
        <div id="a"></div>
        <div id="b"></div>
    </div>
</body>
</html>
    • Chỉ định độ ưu tiên hiển thị của phần tử dựa theo một số nguyên cụ thể, số nguyên này có thể là số âm hoặc số dương, số càng lớn thì độ ưu tiên hiển thị càng cao.
  • <!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
            width:200px;
            height:200px;
            background-color:green;
            position:absolute;
            z-index:10;
        }
        #b{
            width:200px;
            height:200px;
            background-color:blue;
            position:absolute;
            z-index:5;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <p>- Phần tử #a được thiết lập thuộc tính z-index với giá trị 10</p> 
    <p>- Phần tử #b được thiết lập thuộc tính z-index với giá trị 5</p>
    <p>=&gt; Suy ra độ ưu tiên hiển thị của phần tử #a lớn hơn độ ưu tiên hiển thị của phần tử #b.</p>
    <p>=&gt; Điều đó đồng nghĩa với việc phần tử #a sẽ hiển thị đè lên phần tử #b.</p>
    <div style="position:relative">
        <div id="a"></div>
        <div id="b"></div>
    </div>
</body>
</html>
    • Lưu ý: Chúng ta chỉ nên sử dụng số âm khi muốn thiết lập cho phần tử có độ ưu tiên hiển thị thấp hơn so với những phần tử không được thiết lập độ ưu tiên hiển thị (những phần tử không được thiết lập độ ưu tiên hiển thị thường có mức độ ưu tiên hiển thị tương đương với 0)
  • <!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:yellow;
            position:absolute;
            height:400px;
            width:500px;
            left:0px;
            top:0px;
            z-index:-1;
        }
    </style>
</head>
<body>
    <img src="https://dsmart.vn/wp-content/uploads/2020/01/banner1.png" height="200">
    <h2>(bạn hãy thử xóa thuộc tính z-index để thấy sự khác biệt)</h2>
    <div></div>
</body>
</html>
  • initial: Kế thừa giá trị thuộc tính z-index từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
            width:200px;
            height:200px;
            background-color:green;
            position:absolute;
            z-index:initial;
        }
        #b{
            width:200px;
            height:200px;
            background-color:blue;
            position:absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>
</html>
  • inherit: Kế thừa giá trị thuộc tính z-index từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #father{
            position:relative;
            z-index:10;
        }
        #a{
            width:200px;
            height:200px;
            background-color:green;
            position:absolute;
            z-index:inherit;
        }
        #b{
            width:200px;
            height:200px;
            background-color:blue;
            position:absolute;
            z-index:5;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <p>- Thuộc tính z-index của phần tử <u>#a</u> có giá trị là <u>inherit</u></p>
    <p>=&gt; Nó sẽ kế thừa giá trị thuộc tính z-index từ phần tử cha của nó là <u>#father</u></p>
    <p>=&gt; Cho nên giá trị thật sự của nó sẽ tương ứng với <u>10</u></p>
    <div id="father">
        <div id="a"></div>
        <div id="b"></div>
    </div>
</body>
</html>

1) Thuộc tính float trong CSS

– Chức năng của thuộc tính float là dùng để tùy chỉnh cách thức trôi nổi của một phần tử, nó có thể nhận một trong ba giá trị sau đây:

  • none: phần tử không trôi đi đâu cả (mặc định)
  • left: phần tử sẽ trôi sang trá
  • right: phần tử sẽ trôi sang phải

 

<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        img{
            float:right;
        }
    </style>
</head>
<body>
    <p><img src='https://dsmart.vn/wp-content/uploads/2022/10/word.png' style='width:100px'> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p>
</body>
</html>

– Khi một phần tử được thiết lập thuộc tính float (với giá trị left hoặc giá trị right) thì phần tử sẽ kiểm tra xem hàng phía trên có còn đủ khoảng trống chiều rộng để chứa nó hay không, nếu đủ thì phần tử sẽ trôi lên hàng trên (tùy vào giá trị left hoặc right mà nó sẽ trôi lên về phía bên trái hay bên phải)

– Lưu ý: Phần tử chỉ trôi lên khi thỏa hai điều kiện.
  • Hàng phía trên còn đủ khoảng trống để chứa nó.
  • Phần tử phía trước nó cũng được thiết lập thuộc tính float với giá trị left hoặc right.
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        #pink{
            width:55%;
            height:50px;
            background-color:pink;
        }
        #red{
            width:30%;
            height:50px;
            background-color:red;
            float:left;
        }
        #green{
            width:40%;
            height:50px;
            background-color:green;
            float:right;
        }
        #blue{
            width:20%;
            height:50px;
            background-color:blue;
            float:left;
        }
        #black{
            width:40%;
            height:50px;
            background-color:black;
            float:left;
        }
    </style>
</head>
<body>
    <div id="pink"></div>
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
    <div id="black"></div>
</body>
</html>

2) Thuộc tính clear trong CSS

– Khi một phần tử được thiết lập thuộc tính float (với giá trị left hoặc right) thì phần tử nằm ở phía sau nó mặc cho không có thiết lập thuộc tính float đi chăng nữa cũng sẽ bị ảnh hưởng.

Ví dụ:
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        #a{
            width:200px;
            height:100px;
            border:3px solid red;
            float:left;
        }
        #b{
            border:3px solid black;
        }
    </style>
</head>
<body>
    <p>- <u>GIẢI THÍCH</u>: Phần tử #b tuy không thiết lập thuộc tính float nhưng vẫn bị ảnh hưởng.</p>
    <div id="a">Hello 1</div>
    <div id="b">Hello 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</div>
</body>
</html>

– Từ đây, thuộc tính clear được sử dụng để tùy chỉnh việc phần tử có bị ảnh hưởng bởi sự trôi nổi của phần tử được thiết lập thuộc tính float nằm phía trước nó hay không.

– Thuộc tính clear có thể nhận một trong bốn giá trị sau đây:

  • none: bị ảnh hưởng bởi thuộc tính float từ phần tử phía trước nó
  • left: không bị ảnh hưởng bởi thuộc tính float (với giá trị left) từ phần tử phía trước nó
  • right: không bị ảnh hưởng bởi thuộc tính float (với giá trị right) từ phần tử phía trước nó
  • both: không bị ảnh hưởng bởi thuộc tính float từ phần tử phía trước nó
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        #a{
            width:200px;
            height:100px;
            border:3px solid red;
            float:left;
        }
        #b{
            border:3px solid black;
            clear:none;
        }
    </style>
</head>
<body>
    <div id="a">Hello 1</div>
    <div id="b">Hello 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</div>
</body>
</html>

3) Cách chống tràn phần tử

– Đặt vấn đề: Giả sử tôi có một phần tử #A và một phần tử #B. Trong đó, phần tử #A là cha của phần tử #B, nếu phần tử #B thiết lập thuộc tính float (với giá trị left hoặc right) trong khi phần tử #A không được thiết lập chiều cao cụ thể thì khi hiển thị lên màn hình, phần tử #B sẽ bị tràn ra khỏi phần tử #A (xem ví dụ)

– Để khắc phục vấn đề phía trên, chúng ta có hai cách giải quyết như sau:

Cách 1:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
            border:3px solid blue;
        }
        #b{
            width:300px;
            height:200px;
            background-color:green;
            float:left;
        }
    </style>
</head>
<body>
    <div id="a">
        <div id="b"></div>
        <div style="clear:both"></div>
    </div>
</body>
</html>

Cách 2:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
            border:3px solid blue;
        }
        #b{
            width:300px;
            height:200px;
            background-color:green;
            float:left;
        }
        #a::after{
            display:block;
            content:"";
            clear:both;
        }
    </style>
</head>
<body>
    <div id="a">
        <div id="b"></div>
    </div>
</body>
</html>

4) Tham khảo cách vận dụng thuộc tính float

– Thuộc tính float là thuộc tính rất thường được dùng trong việc thiết kế giao diện trang web. Tuy nhiên, nó cũng là một trong những thuộc tính khó sử dụng nhất, các bạn cần phải trải qua thật nhiều ví dụ thì mới có thể hiểu rõ được nguyên lý hoạt động của nó. Trong phần này, tôi sẽ làm một cái ví dụ, đó chính là “xây dựng một cái giao diện trang web đơn giản”, trong ví dụ có sử dụng đến thuộc tính float, các bạn nên tham khảo để rút thêm kinh nghiệm.

– Đối với những bạn còn hơi yếu, để xây dựng được một cái giao diện giống phía trên thì các bạn nên thực hiện theo hai bước như bên dưới để tập làm quen.

❏ Bước 1: Phân tích bố cục trang web.

– Từ cái giao diện phía trên thì ta phân tích được bốn thành phần chính như sau:

– Bên trong thành phần #main có thêm hai thành phần quan trọng nữa, đó chính là #side và #content.

– Dựa vào những gì đã phân tích thì tôi xây dựng được một cái cấu trúc HTML như sau:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
</head>
<body>
    <div id="header">
        <div>WEB CƠ BẢN</div>
        <div>(giới thiệu sơ qua trang web)</div>
    </div>
    <div id="menu">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
        </ul>
    </div>
    <div id="main">
        <div id="side">
            <p>Thông tin tác giả</p>
            <p>- Họ tên: . . . . . .</p>
            <p>- Ngày sinh: . . . . . .</p>
            <p>- Giới tính: . . . . . .</p>
            <p>- Địa chỉ: . . . . . .</p>
            <p><img src="https://dsmart.vn/wp-content/uploads/2020/01/banner1.png"></p>
        </div>
        <div id="content">
            <h2>Tiêu đề bài viết</h2>
            <p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p>
            <p>Ngày đăng: 02/03/2019</p>
        </div>
    </div>
    <div id="footer">Thông tin bản quyền</div>
</body>
</html>

❏ Bước 2: Định dạng cho các phần tử bên trong trang web

– Sau khi đã xây dựng xong cấu trúc HTML thì công việc tiếp theo đó chính là định dạng cho các phần tử bên trong trang web để chúng hiển thị giống với ý muốn của mình.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        body{
            margin:0px;
            font-family:Arial;
        }
        #header{
            background-color:#39e4c2;
            border:1px solid #39e4c2;
            padding:20px;
            text-align:center;
        }
        #header > div:nth-child(1){
            font-size:30px;
            margin-bottom:10px;
        }
        #menu ul{
            background-color:black;
            padding:0px;
            margin:0px;
        }
        #menu ul::after{         
            display:block;
            content:"";
            clear:both;
        }
        #menu ul li{
            float:left;
            list-style-type:none;
        }
        #menu ul li a{
            display:inline-block;
            text-decoration:none;
            padding:12px 20px;
            color:white;
        }
        #menu ul li a:hover{
            background-color:#ddd;
            color:black;
        }
        #main::after{         
            display:block;
            content:"";
            clear:both;
        }
        #main #side{
            box-sizing:border-box;
            padding:10px;
            float:left;
            width:30%;
        }
        #main #side img{
            width:100%;
        }
        #main #content{
            box-sizing:border-box;
            padding:10px;
            float:left;
            width:70%;
        }
        #main #content p:last-child{
            text-align:right;
        }
        #footer{
            background-color:#ddd;
            padding:15px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="header">
        <div>WEB CƠ BẢN</div>
        <div>(giới thiệu sơ qua trang web)</div>
    </div>
    <div id="menu">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
        </ul>
    </div>
    <div id="main">
        <div id="side">
            <p>Thông tin tác giả</p>
            <p>- Họ tên: . . . . . .</p>
            <p>- Ngày sinh: . . . . . .</p>
            <p>- Giới tính: . . . . . .</p>
            <p>- Địa chỉ: . . . . . .</p>
            <p><img src="https://dsmart.vn/wp-content/uploads/2020/01/banner1.png"></p>
        </div>
        <div id="content">
            <h2>Tiêu đề bài viết</h2>
            <p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p>
            <p>Ngày đăng: 02/03/2019</p>
        </div>
    </div>
    <div id="footer">Thông tin bản quyền</div>
</body>
</html>

 

1) Các trường hợp xảy ra đối với liên kết

– Thông thường thì một cái liên kết sẽ có thể gặp phải những trường hợp như sau:

  • :link: Trường hợp này xảy ra khi URL của liên kết chưa từng được người dùng viếng thăm.
  • :visited: Trường hợp này xảy ra khi URL của liên kết đã từng được người dùng viếng thăm.
  • :hover: Trường hợp này xảy ra khi cái liên kết đang bị người dùng dí con trỏ vào.
  • :active: Trường hợp này xảy ra khi cái liên kết đang bị người dùng nhấp vào.

2) Cách định dạng cho liên kết dựa theo trường hợp

– Để định dạng cho một cái liên kết dựa theo trường hợp xảy ra đối với nó thì khi xác định bộ chọn của cái liên kết, chúng ta cần phải ghép tên của trường hợp nằm ở ngay sát phía sau liên kết

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        a.hello:hover{
            color:red;
        }
    </style>
</head>
<body>
    <a href=".." class="hello">WEB CƠ BẢN</a>
</body>
</html>

– Lưu ý: Nếu một cái liên kết có nhiều bộ định dạng (cho các trường hợp khác nhau) thì các bạn nên sắp xếp các bộ định dạng đó theo trình tự (1) :link (2) :visited (3) :hover (4) :active

Ví dụ:

– Thiết lập “màu chữ” cho cái liên kết có class là hello.

  • Nó sẽ có màu xanh dương (khi URL của nó chưa từng được người dùng viếng thăm)
  • Nó sẽ có màu đỏ (khi URL của nó đã từng được người dùng viếng thăm)
  • Nó sẽ có màu xanh lá (khi người dùng dí con trỏ vào nó)
  • Nó sẽ có màu tím (khi người dùng nhấp vào nó)
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        a.hello:link{
            color:Blue;
        }
        a.hello:visited{
            color:Red;
        }
        a.hello:hover{
            color:SpringGreen;
        }
        a.hello:active{
            color:Violet;
        }
    </style>
</head>
<body>
    <a href="kdb32kbdk434" class="hello">WEB CƠ BẢN</a>
</body>
</html>

3) Cách tạo một cái nút liên kết

– Nếu xét về bản chất thì nút liên kết (link button) chỉ là một cái liên kết được định dạng giống với cái nút, nhằm giúp cho cái liên kết trở nên đẹp hơn, đa dạng hơn, . . . .

– Để tạo được một cái “nút liên kết” thì khi định dạng cho phần tử <a>, chúng ta cần phải sử dụng một số thuộc tính như: display, border, padding, color, . . . . kèm theo việc định dạng cho cái liên kết dựa theo từng trường hợp xảy ra đối với nó.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        a{       
            display:inline-block;
            border:1px solid #73AD21;
            background-color:#73AD21;
            padding:10px 12px;
            box-shadow:2px 2px 5px #6c6969;
            text-decoration:none;
            border-radius:3px;
            color:white;
        }
        a:hover{
            border:1px solid #90d331;
            background-color:#90d331;
        }
        a:active{
            border:1px solid #669f15;
            background-color:#669f15;
        }
    </style>
</head>
<body>
    <a href="..">NÚT LIÊN KẾT</a>
</body>
</html>

 

1) Chức năng của nhóm thuộc tính transition !?

– Chức năng của nhóm thuộc tính transition là dùng để thiết lập hiệu ứng “luân chuyển giá trị” cho một thuộc tính nào đó của phần tử (khi phần tử thay đổi từ trạng thái này sang trạng thái khác)

– Ví dụ như phần tử bên dưới, mặc định nó có chiều rộng là 400px, khi người dùng dí con trỏ vào thì chiều rộng sẽ tăng lên một cách “đột ngột” thành 600px. Tuy nhiên, với việc sử dụng nhóm thuộc tính transition thì chúng ta có thể thiết lập hiệu ứng luân chuyển giá trị cho thuộc tính width của phần tử, để chiều rộng của nó tăng lên từ từ, giúp người dùng cảm thấy mượt mà, thú vị hơn, . . . .

<style type="text/css">
	div{
		width:400px;
		color:white;
		font-size:20px;
		line-height:200px;
		text-align:center;
		background-color:#1f951f;
		transition-property:width;
		transition-duration:3s;
	}
	div:hover{width:600px;}
</style>
<div>BẠN HÃY THỬ DÍ CON TRỎ VÀO ĐÂY</div>

2) Danh sách các thuộc tính transition

– Dưới đây là danh sách các thuộc tính nằm trong nhóm transition.

  • transition-property: Thuộc tính này dùng để xác định “thuộc tính” mà các bạn muốn tạo hiệu ứng luân chuyển giá trị cho nó.
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:green;
            width:100px;
            height:100px;
            transition-property:width,background-color;
            transition-duration:4s;
        }
        div:hover{
            background-color:blue;
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
  • transition-duration: Thuộc tính này được dùng để thiết lập “thời lượng” của hiệu ứng luân chuyển giá trị.
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:green;
            width:100px;
            height:100px;
            transition-property:width;
            transition-duration:10s;
        }
        div:hover{
            background-color:blue;
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
    <p style="line-height:30px;font-size:18px;">- Khi các bạn dí con trỏ vào phần tử &lt;div&gt; nằm bên dưới thì hiệu ứng luân chuyển giá trị của thuộc tính width từ 100px lên 300px sẽ diễn ra trong vòng 10 giây.</p>
    <div></div>
</body>
</html>
  • transition-delay: Thuộc tính này dùng để thiết lập “khoảng thời gian phải chờ đợi” trước khi hiệu ứng luân chuyển giá trị được diễn ra.
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:green;
            width:100px;
            height:100px;
            transition-property:width;
            transition-duration:5s;
            transition-delay:2s;
        }
        div:hover{
            background-color:blue;
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
    <p style="line-height:30px;font-size:18px;">- Khi các bạn dí con trỏ vào phần tử &lt;div&gt; nằm bên dưới, phải đợi sau 2 giây thì hiệu ứng luân chuyển giá trị của thuộc tính width mới được diễn ra.</p>
    <div></div>
</body>
</html>
  • transition-timing-function: Thuộc tính này dùng để tùy chỉnh “tốc độ chuyển động” của hiệu ứng ở từng giai đoạn.
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:green;
            width:100px;
            height:50px;
            margin-bottom:10px;
            color:white;
            transition-property:width;
            transition-duration:10s;
        }
        div:hover{
            width:400px;
        }
    </style>
</head>
<body>
   <p>- Các bạn hãy thử dí con trỏ vào từng phần tử bên dưới để trải nghiệm tốc độ luân chuyển giá trị của hiệu ứng.</p>
   <div style="transition-timing-function:linear">linear</div>
   <div style="transition-timing-function:ease">ease</div>
   <div style="transition-timing-function:ease-in">ease-in</div>
   <div style="transition-timing-function:ease-out">ease-out</div>
   <div style="transition-timing-function:ease-in-out">ease-in-out</div>
</body>
</html>
  • transition: Thuộc tính này là cú pháp tổng quát dùng để thiết lập hiệu ứng luân chuyển giá trị cho thuộc tính của phần tử (thay vì phải kết hợp các thuộc tính transition riêng lẻ phía trên thì bây giờ chúng ta chỉ cần sử dụng mỗi thuộc tính này là đủ)

3) Điểm khác nhau giữa transition & animation

– Chức năng của nhóm thuộc tính transition & animation nhìn thoáng qua thì có vẻ hơi giống nhau, cả hai nhóm thuộc tính này đều tạo ra hiệu ứng chuyển động cho phần tử. Tuy nhiên, hiệu ứng chuyển động của nhóm thuộc tính transition thường chỉ xảy ra khi phần tử bị thay đổi trạng thái do sự tác động của người dùng (ví dụ như khi bị người dùng dí con trỏ vào, . . . .). Còn hiệu ứng chuyển động của nhóm thuộc tính animation thì đã được thiết kế theo một khuôn khổ sẵn, nó có thể chuyển động bất kỳ lúc nào mà không cần đến sự tác động của người dùng.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            background-color:green;
            width:50px;
            height:50px;
            transition:width 5s;
        }
        div:hover{
            width:400px;
        }
    </style>
</head>
<body>
   <div></div>
</body>
</html>

– Thông thường, khi chúng ta muốn thiết lập hiệu ứng chuyển động cho một phần tử nào đó thì về cơ bản chúng ta cần phải thực hiện hai công việc.

  • Công việc thứ nhất là tạo một cái @keyframes.
  • Công việc thứ hai là sử dụng các thuộc tính animation để áp dụng @keyframes lên phần tử.
Ví dụ:

– Ta có một đoạn mã như bên dưới.

<!DOCTYPE html>
<html>
<head>
    <title>Tiêu đề của trang web</title>
    <style type="text/css">
        #test{
            background-color:green;
            width:100px;
            height:100px;
            position:relative;
            left:0px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

– Màn hình trình duyệt sẽ hiển thị là.

– Bây giờ, ta muốn tạo hiệu ứng chuyển động cho phần tử #test.

(ta muốn nó di chuyển sang bên phải 500px rồi trở về vị trí cũ, tiếp tục lặp lại hành động này)

– Để làm được điều đó thì trước tiên tôi tạo một cái @keyframes có tên là move_right, nó sẽ cung cấp cho trình duyệt các thông tin như:

  • Ở thời điểm 0% (khi hiệu ứng chuyển động chưa diễn ra) phần tử sẽ nằm ở vị trí left 0px.
  • Ở thời điểm 100% (khi hiệu ứng chuyển động đã kết thúc) phần tử sẽ nằm ở vị trí left 500px.
@keyframes move_right{
    0%{
        left:0px;
    }
    100%{
        left:500px;
    }
}

– Sau khi đã xây dựng xong cái @keyframes, tôi sẽ sử dụng các thuộc tính animation để áp dụng cái @keyframes đó lên phần tử.

– Trong trường hợp này thì tôi sử dụng ba thuộc tính:

  • Thuộc tính animation-name dùng để xác định tên của cái @keyframes mà tôi muốn áp dụng lên phần tử.
  • Thuộc tính animation-duration dùng để xác định “thời lượng” của một chu kỳ hiệu ứng chuyển động (tôi thiết lập 3 giây)
  • Thuộc tính animation-iteration-count dùng để xác định “số lần lặp lại” một chu kỳ hiệu ứng chuyển động (tôi thiết lập giá trị infinite có nghĩa là không giới hạn số lần lặp lại
  1. animation-name:move_right;
  2. animation-duration:3s;
  3. animation-iteration-count:infinite;
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            background-color:green;
            width:100px;
            height:100px;
            position:relative;
            left:0px;
            animation-name:move_right;
            animation-duration:3s;
            animation-iteration-count:infinite;
        }
        @keyframes move_right{
            0%{left:0px;}
            100%{left:500px;}
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

1) Cách tạo một cái @keyframes

– @keyframes đóng vai trò giống như là một cái mô hình dùng để mô tả định dạng (style) của phần tử tại những thời điểm khác nhau trong quá trình diễn ra hiệu ứng chuyển động.

– Để tạo một cái @keyframes thì chúng ta sử dụng cú pháp như sau:

@keyframes tên-keyframes {
    thời điểm 1 {
        thuộc tính 1 : giá trị của thuộc tính ở thời điểm 1;
        thuộc tính 2 : giá trị của thuộc tính ở thời điểm 1;
        thuộc tính 3 : giá trị của thuộc tính ở thời điểm 1;
    }
    thời điểm 2 {
        thuộc tính 1 : giá trị của thuộc tính ở thời điểm 2;
        thuộc tính 2 : giá trị của thuộc tính ở thời điểm 2;
        thuộc tính 3 : giá trị của thuộc tính ở thời điểm 2;
    }
    thời điểm 3 {
        thuộc tính 1 : giá trị của thuộc tính ở thời điểm 3;
        thuộc tính 2 : giá trị của thuộc tính ở thời điểm 3;
        thuộc tính 3 : giá trị của thuộc tính ở thời điểm 3;
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            background-color:green;
            width:50px;
            height:50px;
            position:relative;
            top:0px;
            left:0px;
            animation-name:move;
            animation-duration:10s;
            animation-iteration-count:infinite;
        }
        @keyframes move{
            0%{
                top:0px;
                left:0px;
                background-color:blue;
            }
            10%{
                top:0px;
                left:400px;
                background-color:red;
            }
            40%{
                top:200px;
                left:400px;
                background-color:green;
            }
            100%{
                top:0px;
                left:0px;
                background-color:blue;
            }
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

 

1) Phân tích hiệu ứng chuyển động

– Trước khi tạo một cái @keyframes thì chúng ta cần phải hình thành ý tưởng, phân tích sơ qua coi cái “hiệu ứng chuyển động” mà mình muốn thiết lập cho phần tử sẽ diễn ra trông như thế nào.

– Ví dụ: Hình ảnh phía trên chính là sơ đồ minh họa về hiệu ứng chuyển động mà tôi muốn thiết lập cho phần tử.

    • Tôi muốn ban đầu (trạng thái 1) phần tử sẽ có màu xanh dương, nằm ở vị trí top 0px, left 0px.
    • Sau đó phần tử đổi thành màu đỏ, di chuyển dần dần sang bên phải đến vị trí top 0px, left 400px (trạng thái 2)

=> Từ (trạng thái 1) sang (trạng thái 2) sẽ chiếm 10% thời lượng của hiệu ứng chuyển động.

    • Tiếp theo phần tử sẽ đổi thành màu xanh lá cây, di chuyển dần dần xuống phía dưới đến vị trí top 200px, left 400px (trạng thái 3)

=> Từ (trạng thái 2) sang (trạng thái 3) sẽ chiếm 30% thời lượng của hiệu ứng chuyển động.

    • Cuối cùng phần tử đổi lại màu xanh dương, trở về (trạng thái 1) nằm ở vị trí top 0px, left 0px.

=> Từ (trạng thái 3) trở về (trạng thái 1) sẽ chiếm 60% thời lượng của hiệu ứng chuyển động.

 

2) Tạo @keyframes

– Sau khi đã phân tích sơ qua “hiệu ứng chuyển động” thì công việc tiếp theo đó chính là dựa vào những gì đã phân tích được để viết ra một cái @keyframes.

– Trước tiên tôi tạo một cái @keyframes có tên là move.

@keyframes move{

}

– Dựa vào những gì đã phân tích thì tôi xác định được 4 thời điểm:

✅ Thời điểm 0%, lúc này hiệu ứng chuyển động chưa diễn ra, phần tử ở trạng thái mặc định (trạng thái 1) có nền màu xanh dương, top 0px, left 0px.

@keyframes move{
    0%{
        top:0px;
        left:0px;
        background-color:blue;
    }
}

✅ Thời điểm 10%, đây là khi phần tử đã chuyển sang (trạng thái 2), lúc này phần tử có nền màu đỏ, top 0px, left 400px.

@keyframes move{
    0%{
        top:0px;
        left:0px;
        background-color:blue;
    }
    10%{
        top:0px;
        left:400px;
        background-color:red;
    }
}

✅ Thời điểm 40%, đây là khi phần tử đã chuyển sang (trạng thái 3), lúc này phần tử có nền màu xanh lá cây, top 200px, left 400px.

❓❓❓ Lý do mà tôi xác định được 40% là bởi vì trước đó phần tử đang ở thời điểm 10%, từ (trạng thái 2) sang (trạng thái 3) lại chiếm thêm 30% thời lượng của hiệu ứng chuyển động.

@keyframes move{
    0%{
        top:0px;
        left:0px;
        background-color:blue;
    }
    10%{
        top:0px;
        left:400px;
        background-color:red;
    }
    40%{
        top:200px;
        left:400px;
        background-color:green;
    }
}

✅ Thời điểm 100%, đây là khi phần tử quay trở về (trạng thái 1), có nền màu xanh dương, top 0px, left 0px.

❓❓❓ Lý do mà tôi xác định được 100% là bởi vì trước đó phần tử đang ở thời điểm 40%, từ (trạng thái 3) quay trở về (trạng thái 1) lại chiếm thêm 60% thời lượng của hiệu ứng chuyển động.

@keyframes move{
    0%{
        top:0px;
        left:0px;
        background-color:blue;
    }
    10%{
        top:0px;
        left:400px;
        background-color:red;
    }
    40%{
        top:200px;
        left:400px;
        background-color:green;
    }
    100%{
        top:0px;
        left:0px;
        background-color:blue;
    }
}

– Dưới đây là một số điều mà chúng ta cần phải lưu ý khi tạo @keyframes.

⛔ Đối với những hiệu ứng chuyển động làm thay đổi vị trí của phần tử thì chúng ta phải thiết lập cho phần tử thuộc tính position với một trong các giá trị là relative, absolute, fixed. Bởi vì nếu không thiết lập các giá trị này thì phần tử sẽ không thể di chuyển được.

⛔ Đối với những hiệu ứng chuyển động làm thay đổi kích thước của phần tử thì các bạn cần phải cân nhắc việc thiết lập thuộc tính position với giá trị absolute hoặc fixed cho phần tử. Bởi vì nếu không thiết lập một trong hai giá trị này thì khi phần tử thay đổi kích thước, nó sẽ làm ảnh hưởng đến vị trí của các phần tử xung quanh.

⛔ Tại mỗi mốc thời điểm, chúng ta nên khai báo đầy đủ những thuộc tính được nhắc đến trong hiệu ứng chuyển động (chẳng hạn như cái ví dụ minh họa phía trên, tại bốn mốc thời điểm 0% 10% 40% 100% tôi đều khai báo đầy đủ ba thuộc tính top, left, background-color)

⛔ Thời điểm 0% có thể thay thế bằng chữ from, thời điểm 100% có thể thay thế bằng chữ to.

2) Danh sách các thuộc tính animation

– Dưới đây là danh sách các thuộc tính nằm trong nhóm animation.

  • animation-name: Thuộc tính này dùng để xác định tên của cái @keyframes mà chúng ta muốn áp dụng lên phần tử để tạo hiệu ứng chuyển động.
  • animation-duration: Thuộc tính này dùng để thiết lập “thời lượng” của một chu kỳ hiệu ứng chuyển động.
  • animation-iteration-count: Thuộc tính này dùng để thiết lập “số lần lặp lại” một chu kỳ hiệu ứng chuyển động.
  • animation-delay: Thuộc tính này dùng để thiết lập “khoảng thời gian phải chờ đợi” trước khi hiệu ứng chuyển động được diễn ra.
  • animation-direction: Thuộc tính này dùng để “điều hướng” hiệu ứng chuyển động.
  • animation-fill-mode: Thuộc tính này dùng để chỉ định bộ định dạng (style) mà phần tử sẽ được áp dụng ở thời điểm trước khi hiệu ứng chuyển động diễn ra & sau khi hiệu ứng chuyển động kết thúc.
  • animation-play-state: Thuộc tính này dùng để tùy chỉnh việc tiếp tục hay tạm ngưng hiệu ứng chuyển động.
  • animation-timing-function: Thuộc tính này dùng để tùy chỉnh việc tiếp tục hay tạm ngưng hiệu ứng chuyển động.
  • animation: Thuộc tính này là cú pháp tổng quát dùng để thiết lập hiệu ứng chuyển động cho phần tử (thay vì phải kết hợp các thuộc tính animation riêng lẻ phía trên thì bây giờ chúng ta chỉ cần sử dụng mỗi thuộc tính này là đủ)

3) Cách áp dụng nhiều @keyframes lên một phần tử

– Trong các ví dụ minh họa ở trên, những cái hiệu ứng chuyển động do tôi tạo ra đều là hiệu ứng chuyển động thuộc loại đơn giản nhất. Sau này, tùy vào công việc mà các bạn sẽ phải tạo ra những cái hiệu ứng chuyển động phức tạp hơn rất nhiều, nếu chỉ sử dụng duy nhất một cái @keyframes thì sẽ không thể nào đáp ứng được yêu cầu, khi đó chúng ta cần phải áp dụng nhiều @keyframes lên phần tử.

– Để áp dụng nhiều @keyframes lên một phần tử thì khi thiết lập giá trị cho thuộc tính animation-name, chúng ta cần phải gán nhiều @keyframes & kèm theo một dấu phẩy nằm giữa mỗi hai @keyframes.

Ví dụ:

– Ta tạo hiệu ứng chuyển động cho phần tử #test bởi ba @keyframes: move, reSize, bgColor

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            background-color:green;
            width:50px;
            height:50px;
            position:relative;
            animation-name:move,reSize,bgColor;
            animation-duration:3s;
            animation-iteration-count:infinite;
        }
        @keyframes move{
            from{left:0px;}
            to{left:500px;}
        }
        @keyframes reSize{
            from{width:50px;height:50px;}
            to{width:100px;height:100px;}
        }
        @keyframes bgColor{
            from{background-color:green;}
            to{background-color:blue;}
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

– Lưu ý: Đối với những thuộc tính animation khác cũng tương tự như vậy, nếu các bạn muốn thiết lập nhiều giá trị để đáp ứng cho riêng từng cái @keyframes thì các bạn cần phải gán cho nó nhiều giá trị kèm theo một dấu phẩy nằm giữa mỗi hai giá trị.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            background-color:green;
            width:50px;
            height:50px;
            position:relative;
            animation-name:move,reSize,bgColor;
            animation-duration:3s;
            animation-iteration-count:infinite,2,infinite;
        }
        @keyframes move{
            from{left:0px;}
            to{left:500px;}
        }
        @keyframes reSize{
            from{width:50px;height:50px;}
            to{width:100px;height:100px;}
        }
        @keyframes bgColor{
            from{background-color:green;}
            to{background-color:blue;}
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

 

– Thiết lập vị trí cho phần tử có nghĩa là chỉ định nơi mà phần tử sẽ được hiển thị trên trang web.

– Để thiết lập vị trí cho một phần tử thì chúng ta cần phải biết cách sử dụng năm thuộc tính:

  1. position
  2. top
  3. right
  4. bottom
  5. left
– Trong đó, thuộc tính position có vai trò quan trọng nhất, nó dùng để xác định phương thức định vị phần tử, bốn thuộc tính còn lại dùng để xác định vị trí của phần tử sau khi chúng ta đã xác định phương thức định vị.\
– Có bốn loại phương thức định vị: static, relative, fixed, absolute.
– Tùy vào phương thức định vị mà khi chúng ta thiết lập giá trị cho các thuộc tính top, right, bottom, left thì phần tử sẽ hiển thị ở những vị trí khác nhau.
❏ Trong bài viết này, tôi sẽ làm sơ qua một vài cái ví dụ minh họa để giúp các bạn có thể hình dung ra cách thiết lập vị trí cho phần tử, cũng như là phân biệt được điểm khác nhau giữa bốn loại phương thức định vị (static, relative, fixed, absolute)

1) Phương thức định vị static

– Phương thức định vị static là phương thức định vị mặc định của hầu hết các phần tử.

– Đối với loại phương thức định vị static, phần tử sẽ xuất hiện ở vị trí mặc định dựa theo thứ tự khai báo, chúng ta không thể sử dụng các thuộc tính top, right, bottom, left để thiết lập lại vị trí cho phần tử.

Ví dụ:
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            border:1px solid blue;
            position:static;
            top:20px;
            right:20px;
            bottom:20px;
            left:20px;
        }
    </style>
</head>
<body>
    <h1>1) Tài liệu hướng dẫn học HTML</h1>
    <h1 id="test">2) Tài liệu hướng dẫn học CSS</h1>
    <h1>3) Tài liệu hướng dẫn học JavaScript</h1>
    <p style="font-size:20px;line-height:30px">- <u>GIẢI THÍCH</u>: Như các bạn đã thấy, đối với phương thức định vị static, chúng ta không thể sử dụng các thuộc tính top, right, bottom, left để thiết lập lại vị trí cho phần tử #test.</p>
</body>
</html>

2) Phương thức định vị relative

– Phương thức định vị relative cũng gần giống với phương thức định vị static, đó chính là phần tử sẽ xuất hiện ở vị trí mặc định dựa theo thứ tự khai báo. Tuy nhiên, đối với phương thức định vị relative thì chúng ta có thể sử dụng các thuộc tính top, right, bottom, left để thiết lập lại vị trí cho phần tử.

– Lưu ý: Đối với phương thức định vị relative, khi các bạn muốn thiết lập lại vị trí cho phần tử thì giữa hai thuộc tính top & bottom các bạn chỉ có thể sử dụng một thuộc tính, giữa hai thuộc tính left & right cũng tương tự như vậy.

  • Khi sử dụng thuộc tính top, nếu nó nhận giá trị dương thì phần tử sẽ di chuyển xuống dưới, nếu nó nhận giá trị âm thì phần tử sẽ di chuyển ngược lên trên.
  • Khi sử dụng thuộc tính left, nếu nó nhận giá trị dương thì phần tử sẽ di chuyển sang phải, nếu nó nhận giá trị âm thì phần tử sẽ di chuyển sang trái.
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            border:1px solid black;
            background-color:pink;
            position:relative;
            top:6px;
            left:17px;
        }
    </style>
</head>
<body>
    <h1>1) Tài liệu hướng dẫn học HTML</h1>
    <h1 id="test">2) Tài liệu hướng dẫn học CSS</h1>
    <h1>3) Tài liệu hướng dẫn học JavaScript</h1>
</body>
</html>

3) Phương thức định vị fixed

– Phương thức định vị fixed có thể xem là đặc biệt nhất trong bốn loại phương thức định vị, nó dùng để thiết lập phần tử nằm tại một vị trí cố định trên màn hình trình duyệt mặc cho người dùng có cuộn trang lên xuống hay trái phải.

– Đối với phương thức định vị fixed, khi chúng ta sử dụng các thuộc tính top, right, bottom, left để thiết lập vị trí cho phần tử thì vị trí của phần tử sẽ được xác định dựa theo khung trang web.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            border:1px solid black;
            background-color:yellow;
            padding:30px;
            font-size:20px;
            position:fixed;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body>
    <p>Tài liệu hướng dẫn học lập trình web 1</p>
    <p>Tài liệu hướng dẫn học lập trình web 2</p>
    <p>Tài liệu hướng dẫn học lập trình web 3</p>
    <p>Tài liệu hướng dẫn học lập trình web 4</p>
    <p>Tài liệu hướng dẫn học lập trình web 5</p>
    <div id="test">LẬP TRÌNH WEB</div>
    <p>Tài liệu hướng dẫn học lập trình web 6</p>
    <p>Tài liệu hướng dẫn học lập trình web 7</p>
    <p>Tài liệu hướng dẫn học lập trình web 8</p>
    <p>Tài liệu hướng dẫn học lập trình web 9</p>
    <p>Tài liệu hướng dẫn học lập trình web 10</p>
    <p>Tài liệu hướng dẫn học lập trình web 11</p>
    <p>Tài liệu hướng dẫn học lập trình web 12</p>
    <p>Tài liệu hướng dẫn học lập trình web 13</p>
    <p>Tài liệu hướng dẫn học lập trình web 14</p>
    <p>Tài liệu hướng dẫn học lập trình web 15</p>
    <p>Tài liệu hướng dẫn học lập trình web 16</p>
    <p>Tài liệu hướng dẫn học lập trình web 17</p>
    <p>Tài liệu hướng dẫn học lập trình web 18</p>
    <p>Tài liệu hướng dẫn học lập trình web 19</p>
    <p>Tài liệu hướng dẫn học lập trình web 20</p>
    <p>Tài liệu hướng dẫn học lập trình web 21</p>
    <p>Tài liệu hướng dẫn học lập trình web 22</p>
    <p>Tài liệu hướng dẫn học lập trình web 23</p>
    <p>Tài liệu hướng dẫn học lập trình web 24</p>
    <p>Tài liệu hướng dẫn học lập trình web 25</p>
    <p>Tài liệu hướng dẫn học lập trình web 26</p>
    <p>Tài liệu hướng dẫn học lập trình web 27</p>
    <p>Tài liệu hướng dẫn học lập trình web 28</p>
    <p>Tài liệu hướng dẫn học lập trình web 29</p>
    <p>Tài liệu hướng dẫn học lập trình web 30</p>
    <p>Tài liệu hướng dẫn học lập trình web 31</p>
    <p>Tài liệu hướng dẫn học lập trình web 32</p>
    <p>Tài liệu hướng dẫn học lập trình web 33</p>
    <p>Tài liệu hướng dẫn học lập trình web 34</p>
    <p>Tài liệu hướng dẫn học lập trình web 35</p>
    <p>Tài liệu hướng dẫn học lập trình web 36</p>
    <p>Tài liệu hướng dẫn học lập trình web 37</p>
    <p>Tài liệu hướng dẫn học lập trình web 38</p>
    <p>Tài liệu hướng dẫn học lập trình web 39</p>
    <p>Tài liệu hướng dẫn học lập trình web 40</p>
    <p>Tài liệu hướng dẫn học lập trình web 41</p>
    <p>Tài liệu hướng dẫn học lập trình web 42</p>
    <p>Tài liệu hướng dẫn học lập trình web 43</p>
    <p>Tài liệu hướng dẫn học lập trình web 44</p>
    <p>Tài liệu hướng dẫn học lập trình web 45</p>
    <p>Tài liệu hướng dẫn học lập trình web 46</p>
    <p>Tài liệu hướng dẫn học lập trình web 47</p>
    <p>Tài liệu hướng dẫn học lập trình web 48</p>
    <p>Tài liệu hướng dẫn học lập trình web 49</p>
    <p>Tài liệu hướng dẫn học lập trình web 50</p>
</body>
</html>

– Lưu ý: Đối với phương thức định vị fixed, nếu chúng ta không thiết lập chiều rộng cho phần tử mà lại sử dụng đồng thời hai thuộc tính left & right thì chiều rộng của phần tử sẽ bị kéo dài từ vị trí left cho đến vị trí right. Tương tự, nếu chúng ta không thiết lập chiều cao cho phần tử mà lại sử dụng đồng thời hai thuộc tính top & bottom thì chiều cao của phần tử sẽ bị kéo dài từ vị trí top cho đến vị trí bottom.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            border:1px solid black;
            background-color:yellow;
            position:fixed;
            top:50px;
            bottom:50px;
            left:100px;
            right:100px;
        }
    </style>
</head>
<body>
    <p>Tài liệu hướng dẫn học lập trình web 1</p>
    <p>Tài liệu hướng dẫn học lập trình web 2</p>
    <p>Tài liệu hướng dẫn học lập trình web 3</p>
    <p>Tài liệu hướng dẫn học lập trình web 4</p>
    <p>Tài liệu hướng dẫn học lập trình web 5</p>
    <div id="test">LẬP TRÌNH WEB</div>
    <p>Tài liệu hướng dẫn học lập trình web 6</p>
    <p>Tài liệu hướng dẫn học lập trình web 7</p>
    <p>Tài liệu hướng dẫn học lập trình web 8</p>
    <p>Tài liệu hướng dẫn học lập trình web 9</p>
    <p>Tài liệu hướng dẫn học lập trình web 10</p>
    <p>Tài liệu hướng dẫn học lập trình web 11</p>
    <p>Tài liệu hướng dẫn học lập trình web 12</p>
    <p>Tài liệu hướng dẫn học lập trình web 13</p>
    <p>Tài liệu hướng dẫn học lập trình web 14</p>
    <p>Tài liệu hướng dẫn học lập trình web 15</p>
    <p>Tài liệu hướng dẫn học lập trình web 16</p>
    <p>Tài liệu hướng dẫn học lập trình web 17</p>
    <p>Tài liệu hướng dẫn học lập trình web 18</p>
    <p>Tài liệu hướng dẫn học lập trình web 19</p>
    <p>Tài liệu hướng dẫn học lập trình web 20</p>
    <p>Tài liệu hướng dẫn học lập trình web 21</p>
    <p>Tài liệu hướng dẫn học lập trình web 22</p>
    <p>Tài liệu hướng dẫn học lập trình web 23</p>
    <p>Tài liệu hướng dẫn học lập trình web 24</p>
    <p>Tài liệu hướng dẫn học lập trình web 25</p>
    <p>Tài liệu hướng dẫn học lập trình web 26</p>
    <p>Tài liệu hướng dẫn học lập trình web 27</p>
    <p>Tài liệu hướng dẫn học lập trình web 28</p>
    <p>Tài liệu hướng dẫn học lập trình web 29</p>
    <p>Tài liệu hướng dẫn học lập trình web 30</p>
    <p>Tài liệu hướng dẫn học lập trình web 31</p>
    <p>Tài liệu hướng dẫn học lập trình web 32</p>
    <p>Tài liệu hướng dẫn học lập trình web 33</p>
    <p>Tài liệu hướng dẫn học lập trình web 34</p>
    <p>Tài liệu hướng dẫn học lập trình web 35</p>
    <p>Tài liệu hướng dẫn học lập trình web 36</p>
    <p>Tài liệu hướng dẫn học lập trình web 37</p>
    <p>Tài liệu hướng dẫn học lập trình web 38</p>
    <p>Tài liệu hướng dẫn học lập trình web 39</p>
    <p>Tài liệu hướng dẫn học lập trình web 40</p>
    <p>Tài liệu hướng dẫn học lập trình web 41</p>
    <p>Tài liệu hướng dẫn học lập trình web 42</p>
    <p>Tài liệu hướng dẫn học lập trình web 43</p>
    <p>Tài liệu hướng dẫn học lập trình web 44</p>
    <p>Tài liệu hướng dẫn học lập trình web 45</p>
    <p>Tài liệu hướng dẫn học lập trình web 46</p>
    <p>Tài liệu hướng dẫn học lập trình web 47</p>
    <p>Tài liệu hướng dẫn học lập trình web 48</p>
    <p>Tài liệu hướng dẫn học lập trình web 49</p>
    <p>Tài liệu hướng dẫn học lập trình web 50</p>
</body>

4) Phương thức định vị absolute

– Phương thức định vị absolute dùng để thiết lập vị trí cho một phần tử dựa theo vị trí của phần tử tổ tiên (được thiết lập thuộc tính position với một trong các giá trị: relative, fixed, absolute) nằm gần với nó nhất, nếu không có phần tử tổ tiên nào được thiết lập thuộc tính position với một trong ba giá trị trên thì vị trí của phần tử sẽ được xác định dựa theo khung trang web.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
           border:1px solid black;
           width:500px;
           height:200px;
           position:relative;
        }
        #test{
            border:1px solid black;
            background-color:yellow;
            position:absolute;
            bottom:23px;
            right:77px;
        }
    </style>
</head>
<body>
    <p>Tài liệu hướng dẫn học Lập Trình Web 01</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 02</p>
    <div id="a">
        <div id="test">Hello</div>
    </div>
    <p>Tài liệu hướng dẫn học Lập Trình Web 03</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 04</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 05</p>
</body>
</html>

– Tương tự với phương phức định vị fixed, nếu chúng ta không thiết lập chiều rộng cho phần tử mà lại sử dụng đồng thời hai thuộc tính left & right thì chiều rộng của phần tử sẽ bị kéo dài từ vị trí left cho đến vị trí right, nếu chúng ta không thiết lập chiều cao cho phần tử mà lại sử dụng đồng thời hai thuộc tính top & bottom thì chiều cao của phần tử sẽ bị kéo dài từ vị trí top cho đến vị trí bottom.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
           border:1px solid black;
           width:500px;
           height:200px;
           position:relative;
        }
        #test{
            border:1px solid black;
            background-color:yellow;
            position:absolute;
            top:10px;
            bottom:10px;
            left:50px;
            right:50px;
        }
    </style>
</head>
<body>
    <p>Tài liệu hướng dẫn học Lập Trình Web 01</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 02</p>
    <div id="a">
        <div id="test">Hello</div>
    </div>
    <p>Tài liệu hướng dẫn học Lập Trình Web 03</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 04</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 05</p>
</body>
</html>
MessengerZaloPhone
logo