Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    Code

    Uploaded by

    Dương Nữ Quỳnh Giang
    Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Code

    Uploaded by

    Dương Nữ Quỳnh Giang
    5 views10 pages
    Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)

    Original Title

    code - Copy

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    5 views10 pages

    Code

    Uploaded by

    Dương Nữ Quỳnh Giang
    Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)Buổi 3 Từ khóa (1)

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 10

    <!

    DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Test CSS</title>

    <style>

    body {

    font-family: Verdana, "Minion Web", Helvetica, sans-serif;

    font-size: 1em;

    text-align: justify;

    <head>

    <link rel="stylesheet" type="text/css“ href="style1.css">

    </head>

    h1 { text-align: center; font-family: Arial; }

    h2 { color: #440000;

    text-align: center;

    font-family: Arial Black, Arial, Helvetica;

    <head>

    <style>

    tagName {property: value;}

    </style>

    </head>

    <head>

    <style type="text/css">

    hr { color: sienna; }

    p { margin-left: 20px; }

    body {background-image:url("images/back40.gif");}

    </style>

    </head>

    <p style="color: sienna; margin-left: 20px;">

    This is a paragraph
    </p>

    <style>

    p{text-align: center; color: red;}

    .center {text-align: center; color: red;}

    h1, h2, p {text-align: center; color: red;}

    /* unvisited link */

    a:link {

    color: #FF0000;

    /* visited link */

    a:visited {

    color: #00FF00;

    /* mouse over link */

    a:hover {

    color: #FF00FF;

    /* selected link */

    a:active {

    color: #0000FF;

    a:hover { color: red; }

    p:first-line { text-transform: uppercase; }

    .title:before { content: "»"; }

    .title:after { content: "«"; }

    p a {text-decoration: underline}

    p * {color: black}

    #p1 {background-color:rgba(255, 0, 0, 0.3);}/*red with opacity*/

    #p2 {background-color:rgba(0, 255, 0, 0.3);}/*green with opacity*/

    #p3 {background-color: rgba(0, 0, 255, 0.3);}/*blue with opacity*/

    Selector{

    Property: value !important;

    }
    <style>

    div {

    font-family: Arial;

    font-size: 16px !important;

    .specialText {

    font-size: 18px;

    </style>

    <div class="specialText"> This is special text.

    </div>

    <style>

    #heading {color: orange; }

    .heading {color: red; }

    h1 {color: blue; }

    </style>

    <h1 class="heading" id="heading">Hello World!!</h1>

    <style>

    P { font-style : normal; }

    TH { font-style : italic; }

    H1 { font-style: oblique;}

    H2 { font-style: oblique 10deg;}

    </style>

    <p class="wavy">Here's some text with wavy red underline!</p>

    <p class="both">This text has lines both above and below it.</p>

    <style>

    .wavy {

    text-decoration-line: underline;

    text-decoration-style: wavy;

    text-decoration-color: red; }

    .both { text-decoration-line: underline overline; }

    </style>
    <img class="a" src=”https://image.slidesdocs.com/responsive-images/background/dog-
    made-of-pixel-squares-powerpoint-background_6a449a7038__459_258.jpg" alt="hinh"
    >image with a default alignment.<br>

    <img class="b" src="https://image.slidesdocs.com/responsive-images/background/dog-


    made-of-pixel-squares-powerpoint-background_6a449a7038__459_258.jpg" alt="hinh"
    >image with a text-top alignment.<br>

    <img class="c" src="https://image.slidesdocs.com/responsive-images/background/dog-


    made-of-pixel-squares-powerpoint-background_6a449a7038__459_258.jpg" alt="hinh"
    >image with a text-bottom alignment.

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

    volutpat.</p>

    <style>

    p { text-indent: 5em; background: powderblue; }

    </style>

    <style>

    H2 {background-image:url(Bluedrop.gif);}

    </style>

    <style>

    div {

    border: 1px solid black;

    background-color: lightblue;

    padding-top: 50px;

    padding-right: 30px;

    padding-bottom: 50px;

    padding-left: 80px;

    </style>

    </head>

    <body>

    <div>

    This is a div element with a border, background color, and padding applied.

    </div>
    </body>

    <style>

    h1 { border: 5px solid red;}

    h2 { border: 4px dotted blue;}

    div{ border: double;}

    </style>

    <style>

    .div1 {

    float: left;

    padding: 10px;

    border: 3px solid #73AD21;

    .div2 {

    padding: 10px;

    border: 3px solid red;

    .div3 {

    float: left;

    padding: 10px;

    border: 3px solid #73AD21;

    .div4 {

    padding: 10px;

    border: 3px solid red;

    clear: left;

    </style>

    <div class=”parent”>

    <div class=”box” id=”one”>One</div>

    <div class=”box” id=”two”>Two</div>

    <div class=”box” id=”three”>Three</div>

    <div class=”box” id=”four”>Four</div>


    </div>

    <article class="container">

    <span>First</span>

    <span>Second</span>

    <span>Third</span>

    </article>

    <article class="container">

    <span>First</span>

    <span>Second</span>

    <span>Third</span>

    </article>

    <style>

    article span {

    background-color: black;

    color: white;

    margin: 1px;

    article, span {

    padding: 10px;

    border-radius: 7px;

    article, div {

    margin: 20px;

    </style>

    <style>

    table {

    border-collapse: collapse;

    width: 100%;

    th, td {

    text-align: left;

    padding: 8px;
    }

    tr:nth-child(even) {

    background-color: #f2f2f2;

    </style>

    </head>

    <body>

    <table>

    <thead>

    <tr>

    <th>First name</th>

    <th>Last name</th>

    <th>Points</th>

    </tr>

    </thead>

    <tbody>

    <tr>

    <td>Peter</td>

    <td>Griffin</td>

    <td>$100</td>

    </tr>

    <tr>

    <td>Lois</td>

    <td>Griffin</td>

    <td>$150</td>

    </tr>

    <tr>

    <td>Joe</td>

    <td>Swanson</td>

    <td>$300</td>

    </tr>

    <style>

    table {

    border-collapse: collapse;
    width: 100%;

    th, td {

    text-align: left;

    padding: 8px;

    tr:hover {background-color: yellow;}

    </style>

    </tbody>

    </table>

    </body>

    <style>

    html {

    scrollbar-face-color: #FF0000;

    scrollbar-shadow-color: #0000FF;

    scrollbar-highlight-color: #00FF00;

    scrollbar-3dlight-color: #FF00FF;

    scrollbar-darkshadow-color: #00FFFF;

    scrollbar-track-color: #FFFF00;

    scrollbar-arrow-color: #000000;

    </style>

    </head>

    <body>

    <h1>Custom Scrollbar Example</h1>

    <p>Scroll down to see the custom scrollbar in action.</p>

    <div style="height: 20px;">

    <!-- Nội dung dài để kích hoạt thanh cuộn -->

    </div>

    <style>

    .b1 { border-style: none; }

    .b2 { border-style: hidden; }

    .b3 { border-style: dotted; }


    .b4 { border-style: dashed; }

    .b5 { border-style: solid; }

    .b6 { border-style: double; }

    .b7 { border-style: groove; }

    .b8 { border-style: ridge; }

    .b9 { border-style: inset; }

    .b10 { border-style: outset; }

    </style>

    </body>

    <style>

    #example1 {

    background: url(img_tree.gif) left top no-repeat,

    url(img_flwr.gif) right bottom no-repeat,

    url(paper.gif) left top repeat;

    background-size: 50px, 130px, auto;

    </style>

    You might also like