Zein

selector {
    property: value;
}

/* Tag selector: This CSS rule will apply to all h1 elements in the HTML document, making the text color of these h1 elements blue and the font size 24 pixels */
h1 {
    color: blue;
    font-size: 24px;
}

/* Class selector */
/* <div class="block1"> turns red </div> */
.block1 {
    color: red;
}

/* ID selector */
/* <p id="id1"> turns red </p> */
#id1 {
    color: red;
}

/* Universal selector: Clears the margin and padding of all element tags */
* {
   margin: 0;
   padding: 0;
}

/* Attribute selector */
/* Starting from css2 */
[attribute] { property: value; } /* Matches all elements with the attribute */
[attribute="value"] { property: value; } /**/
[attribute^="value"] { property: value; } /* Matches all elements whose attribute value starts with "value" */
[attribute|="value"] { property: value; } /* Matches elements whose attribute value is "value" or starts with "value-" */
/* css3 */
[attribute$="value"] { property: value; } /* Matches all elements whose attribute value ends with "value" */
[attribute*="value"] { property: value; } /* Matches all elements whose attribute value contains the string "value" */
[attribute~="value"] { property: value; } /* Matches elements whose attribute value contains the word "value" */

p, b, i, span { /* Select all <p>, <b>, <i>, <span> elements and set their color to red; */
    color: red;
}

div.class { /* Both a div tag and a class */
    color: red;
}

p b { /* Selects all <b> elements within <p> elements, regardless of how deeply <b> is nested within <p> */
    color: red;
}

ul > li {
    border: 1px solid red;
}

p + b { /* Selects the first <b> element immediately following a <p> element */
    color: red;
}

p ~ b { /* Selects all <b> elements that are located after a <p> element, not necessarily immediately following, as long as they are at the same level in the DOM tree */
    color: red;
}

<p>strick</p>
<input type="text" placeholder="Please enter"/>
p::first-letter {
  font-size: 200%;
}
p::first-line {
  font-weight: bold;
}
input::placeholder {
  color: red;
}
p::selection {
  color: red;
}

p::before {
  content: "I "<!--can be an image url('./smiley.gif');-->
}
p::after {
  content: " Strick"
}

<p style="color:red;font-size:50px;">hello world</p>

<style type="text/css">
  p {
    color: blue;
    font-size: 40px;
  }
</style>
<p>This is a piece of text</p>

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

@charset "utf-8";
p {
    color: green;
    font-size: 30px;
}

color: green !important;

<p style="color:red;">This is <b>HTML5</b></p> <!--<b> element inherits the style of <p> element-->

<p>This is <b>HTML5</b></p>
<style type="text/css">
  p {
    border: 1px solid red; /* border is a non-inherited style */
  }
  b {
    border: inherit;
  }
</style>

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

<img />、<input />、<td>

span { /* Convert to block element */
  display: block;
}

div { /* Convert to inline element */
  display: inline;
}

div { /* Convert to inline-block element */
  display: inline-block;
}

div { display: none; /* Hide the element and do not occupy space */
}

div {
  background-color: purple;

  width: 200px; height: 200px;
  min-width: 100px;
  min-height: 100px;
  max-width: 300px;
  max-height: 300px;

  resize: both;
  overflow: auto; /* Combine with this to create a draggable size graphic */

/*  -webkit-box-sizing: border-box; */  /* Safari and Chrome */
/*  -moz-box-sizing: border-box;  */   /* Firefox */
/*  -ms-box-sizing: border-box;   */   /* IE */
  box-sizing: border-box;         /* Standard */
  padding: 10px; border: 5px solid red;
}

div {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

div {
  padding: 10px 10px 10px 10px;
}

div {
  padding: 10px 20px; /* Top and bottom, left and right */
}

div {
  padding: 10px;
}

div {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

div {
  margin: 10px 10px 10px 10px;
}

div {
  margin: 10px 20px;
}

div {
  margin: 10px;
}

/* Center the box */
div {
  margin: 0 auto;
}

/* Center the box horizontally */
div {
  margin-right: auto;
  margin-left: auto;
}

div {
  overflow: auto;
}

div { visibility: hidden;
}

#a { /* Floating element to the left */
  background: gray;
  float: left;
  clear: none;
}

#c { /* Floating element to the right */
  background: navy;
  float: right;
  clear: both;
}

#c { /* Disable floating */
  background: navy;
  float: none;
}

header { /* Absolute positioning: with the top left corner of the window document as the origin (0,0) */
  position: absolute; top: 100px; left: 100px;
}

header { /* Window reference positioning: will scroll with the scrollbar, achieving a relative stationary effect */
  position: fixed; top: 100px; left: 100px;
}

/* Positioning relative to a certain element: does not remove from the document flow layer */
body { /* Set the reference point of the parent element to relative, and do not set coordinates */
  position: relative;
}
header { /* If the parent element has set a reference point, the absolute positioning of the child element will be based on it */
  position: absolute; top: 0px; left: 0px;
}

header {
  z-index: 100;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table border="0">
        <tr>
            <td colspan="2" class="header">Header</td>
        </tr>
        <tr>
            <td class="aside">Aside</td>
            <td class="section">Section</td>
        </tr>
        <tr>
            <td colspan="2" class="footer">Footer</td>
        </tr>
    </table>
</body>
</html>

/* Basic page styles */
body {
    margin: 0;
}

/* Fluid layout table styles */
table {
    margin: 0 auto;
    width: 100%;  /* Set table width to 100% to adapt to window width */
    border-spacing: 0;
}

/* Header styles */
.header {
    height: 120px;
    background-color: #2714d1;
    text-align: center;
    font-size: 24px;
}

/* Aside styles */
.aside {
    width: 20%; /* Set width to 20% */
    height: 500px;
    background-color: #2e53d0;
    padding: 10px;
    box-sizing: border-box;
}

/* Main content area styles */
.section {
    width: 80%;  /* Set width to 80% */
    height: 500px;
    background-color: #4eb776;
    padding: 10px;
    box-sizing: border-box;
}

/* Footer styles */
.footer {
    height: 120px;
    background-color: #f2f2f2;
    text-align: center;
    font-size: 18px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float Layout - Fluid Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="clearfix">
  <header>header</header>
  <aside>aside</aside>
  <section>section</section>
  <footer>footer</footer>
</body>
</html>

/* Set the body width to auto, so the page width adjusts automatically based on the viewport */
body {
    width: 100%;
    margin: 0;
    color: white;
    background-color: #333;
}

header {
    height: 120px;
    background-color: #444;
    text-align: center;
    padding-top: 40px;
    font-size: 24px;
}

aside {
    width: 20%;
    height: 500px;
    float: left;
    background-color: #555;
    padding: 10px;
    box-sizing: border-box;
}

section {
    width: 80%;
    height: 500px;
    float: left;
    background-color: #666;
    padding: 10px;
    box-sizing: border-box;
}

footer {
    height: 120px;
    clear: both;
    background-color: #444;
    text-align: center;
    padding-top: 40px;
    font-size: 20px;
}

.clearfix::before, /* Add clearfix class to any parent box that needs to adapt height */
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after { /* Add a child box inside the parent box to clear floats, the purpose is to expand the parent box that has no specified height */
  clear: both;
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Positioning Layout Example</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .container {
            position: relative;
            height: 100%;
            background-color: #f0f0f0;
        }

        .box {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        /* Position the first box: 50px from the top left corner of the container */
        .box1 {
            top: 50px;
            left: 50px;
        }

        /* Position the second box: 50px from the bottom right corner of the container */
        .box2 {
            bottom: 50px;
            right: 50px;
        }

        /* Position the third box: center of the container */
        .box3 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>

</body>
</html>

div {
  column-width: 200px;
  column-count: 4;
  column-gap: 100px;
  column-rule: 2px dashed gray;
  column-span: all;
}

div {
  columns: auto 4;
  column-gap: 100px;
  column-rule: 2px dashed gray;
  column-span: all;
}

<div class="flex-container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Third paragraph</p>
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  /*align-content: ;*/
  align-items: center;
}

/*.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  /*align-content: ;*/
}*/

/* Occupies 5 parts, appearing in the order 231 */
p:nth-child(1) { /* Occupies 1 part of the container space */
    flex: 1; /* Main axis width ratio 1:3:1 */
    order: 2;
    align-self: center; /* Center the first child box */
}

p:nth-child(2) {
    flex: 3;
    order: 3;
}

p:nth-child(3) {
    flex: 1;
    order: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Homepage</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>Welcome to My Personal Homepage</h1>
        </header>
        <nav class="navigation">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">My Projects</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
        </nav>
        <section class="main-content">
            <article class="bio">
                <h2>Personal Introduction</h2>
                <p>I am a web developer who loves programming and technological innovation.</p>
            </article>
            <article class="projects">
                <h2>My Projects</h2>
                <ul>
                    <li>Project 1</li>
                    <li>Project 2</li>
                    <li>Project 3</li>
                </ul>
            </article>
            <article class="contact">
                <h2>Contact Information</h2>
                <p>Email: [email protected]</p>
            </article>
        </section>
        <footer class="footer">
            <p>© 2024 My Personal Homepage</p>
        </footer>
    </div>
</body>
</html>

/* Set basic page styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Core container, using flexbox layout */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
.header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Navigation bar, arranged horizontally, allows wrapping */
.navigation {
    display: flex;
    flex-flow: row wrap; /* Allow wrapping */
    justify-content: center; /* Center alignment */
    background-color: #333;
}

.navigation ul {
    list-style: none;
    display: flex;
    padding: 10px;
}

.navigation li {
    margin: 0 15px;
}

.navigation a {
    color: white;
    text-decoration: none;
}

/* Main content area, using flexbox layout */
.main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Evenly distribute child elements */
    padding: 20px;
    gap: 20px;
}

/* Personal introduction area */
.bio {
    flex: 1 1 300px; /* Set as a flexible box */
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

.projects {
    flex: 2 1 400px; /* Set flexible ratio */
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
}

.contact {
    flex: 1 1 300px; /* Set as a flexible box */
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
}

/* Footer */
.footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

/* Adjust layout order */
.projects {
    order: -1; /* Make "My Projects" appear before "Personal Introduction" */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navigation {
        flex-direction: column;
    }
    .main-content {
        flex-direction: column;
    }
}

// Clear default styles
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div span {
  vertical-align: -200px;
  box-shadow: 5px 4px 10px 2px gray; /* Shadow */
  /* box-shadow: 5px 4px 10px 2px gray inset; */ /* Inner shadow */
  outline: 10px double red; /* Add an outline to the box */
  cursor: move;
}

body { font-size: 50px; } /* Set the font size of the parent element */
@font-face { font-family: abc; src: url('BrushScriptStd.otf'); } /* Server provides abc font file */
body {
  font-style: ;
  font-weight: ;
  font-variant: ;
  font-size: smaller; /* Set relative font size to parent element */
  font-family: 楷体, 微软雅黑, 宋体; /* Sometimes for compatibility with many browsers' systems, several backup fonts can be provided */
  /* font: italic bold normal smaller 楷体; /* Provide values in the above order */
  color: red;
  opacity: 0.5;
}

p {
  text-decoration: underline;
  text-transform: uppercase;
  text-shadow: 5px 5px 3px black;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 4px;
  word-spacing: 14px;
  line-height: 200%;
  word-wrap: break-word;
  text-indent: 2rem;
  vertical-align: super;
}

<div>Chinese</div>
div {
  height: 40px;
  line-height: 40px;
}

div { /* Just set a certain edge with a prefix */
  border-width: 2px;
  border-style: solid;
  border-color: red;

  border-radius: 10px 20px 30px 40px;

  border-image-source: url(border.png);
  border-image-slice: 27; /* Just right for 4 images */
  /* border-image-slice: 0 fill; */
  border-image-width: 81px;
  border-image-outset: 20px;
  border-image-repeat: round;
}

div {
  border: 2px solid red;
  border-radius: 10px;
  /* border-top: */
  /* border-middle: */
  /* border-left: */
  /* border-right: */
  border-image: url(border.png) 27/27px round;
}

div {
  background-color: silver;
  background-image: url(loading.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top left; /* 20px 20px; */
  background-size: auto;
  background-origin: content-box;
  background-clip: padding-box;
}

div {
  width: 400px;
  height: 300px;
  border: 10px dashed red;
  padding: 50px;
  background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;
}