HTML&CSS - Xi-Yuer

CSS Basics#

Single Line Text Overflow#

.overflow-example {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Multi-line Text Overflow#

.multiline-overflow-example {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Specify the number of lines to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Modify Scrollbar Style#

/* Width and height */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Thumb */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* Thumb hover style */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
/* Thumb color */
::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* Track background color */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

Tag Selector#

Select elements by tag name
Pros: Quickly set styles for all tags of the same type
Cons: Cannot apply different styles, can only select all tags

h1 {
  color: #ccc;
}

Class Selector#

Select elements by class name

.container {
  color: pink;
}

ID Selector#

Select elements by element ID attribute

#md {
  font-weight: 600;
}

Universal Selector#

Select all elements on the page
Used to clear padding and margin

* {
  padding: 0;
  margin: 0;
}

Adjacent Selector#

Select the next sibling node of all specified elements

<h1>h1-2</h1>
<p>p0 is selected</p>
<div class="container">
  <h1 class="good">h1</h1>
  <p>p1 is selected</p>
  <p>p2</p>
</div>

h1 + p {
  text-decoration: underline;
}

Descendant Selector#

Select among all descendant nodes

ul li {
  color: blue;
}

Child Selector#

Select only among direct children

div > a {
  color: green;
}

Union Selector#

h1,
h2,
h3 {
  text-align: center;
}

Intersection Selector#

/* p elements with class "good" */
p.good {
  color: yellow;
}

Pseudo-class Selector#

Select elements based on their state or position in the DOM structure

Dynamic Pseudo-class Selector#

Declare in this order
a:link initial style of a link
a:visited style of a visited link
a:hover style when cursor hovers over a link
a:active style when a link is being clicked

:focus used to select form elements that have focus, generally used for form elements
input:focus
textarea:focus

Structural Pseudo-class Selector (C3)#

E
E
E(n)
E
E
E(n)

<div>
  <p>1</p>
  <span>span</span>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

/* Cannot select anything */
div > p:nth-child(2) {
  color: red;
}
/* Selects the 2nd p tag */
div > p:nth-of-type(2) {
  color: blue;
}

Attribute Selector#

E[att]
E[att="val"]
E[att^="val"]
E[att$="val"]

Pseudo-element Selector#

Pseudo-element selectors use CSS to create new tag elements without the need for HTML tags, simplifying the HTML structure
before and after create inline elements that cannot be found in the DOM tree, hence they are pseudo-elements
Must have a content property

Pseudo-element Font Icon#

p::before {
  content: '\e91e';
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
}

Pseudo-element Clear Float#

1. Extra Tag Method (Fence Method)
Add a block-level tag (such as div) after the floated element and set clear: both
<div style="clear:both"></div>

2. Parent Element Adds Overflow, set its property value to hidden, auto, or scroll

3. Parent Adds after Pseudo-element
.clearfix:after {
  content: ""; Must have content property
  display: block; Block-level element
  height: 0; Do not display this element
  clear: both; Core code to clear float
  visibility: hidden; Do not display this element
}
.clearfix { /* IE6, 7 specific */
  *zoom: 1;
}

4. Parent Element Adds Double Pseudo-elements
.clearfix:before,.clearfix:after {
  content:"";
  display:table; Convert to block-level element and display in a row
} .
clearfix:after {
  clear:both;
} .
clearfix {
  *zoom:1;
}