CSS selector, CSS properties related

CSS selector

CSS attribute selector

Find tags by their attributes. Tags all have attributes.
<div class="c1" id="d1"></div>

The id value and class value are attributes that come with each tag. There is another type: custom attributes.
<div class="c1" id="d1" username='kevin' password='123'></div>
For username='kevin' password='123' attribute is the custom attribute of div tag

Grouping and nesting

Group

When multiple elements have the same style, we do not need to repeatedly set the style for each element. We can set the element style uniformly by using comma-separated group selectors between multiple selectors.

div,
p {
  color: red;
}

Nesting

Multiple selectors can be mixed and used, for example: all p tags inside the .c1 class set the font color to red.

.c1 p {
  color: red;
}

Pseudo-class selector

/* Unvisited links */
a:link {
  color: #FF0000
}

/* Move the mouse to the link */
a:hover {
  color: #FF00FF
}

/* selected link */
a:active {
  color: #0000FF
}

/* Visited links */
a:visited {
  color: #00FF00
}

/*Style when input input box gets focus*/
input:focus {
  outline: none;
  background-color: #eee;
}

Pseudo-element selector

first-letter

Commonly used to set special styles for initial letters:

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/* in each <p>Insert content before the element*/
p:before {
  content:"*";
  color:red;
}

after

/* in each <p>Insert content after the element*/
p:after {
  content:"[?]";
  color:blue;
}

Before and after are mostly used to clear floats. It can solve the problem of parent label collapse in floating!!!

Priority of selectors

Compare the priority of selectors
1. When the selectors are the same:
The closer you are to someone, the closer you are, the closer you will be.
2. When the selectors are different:
Inline selector >>> id selector >>> Class selector >>> Tag selector

CSS attribute related

Width and height

The width attribute sets the width of an element.
The height attribute sets the height of an element.
The width can only be set for block-level tags, and the width of inline tags is determined by the content.
By default, only block-level elements can set the length and width. Inline elements cannot be set. It is good to set it, but it has no effect.

Font properties

Text font

font-family can save multiple font names as a “fallback” system. If the browser doesn’t support the first font, it will try the next one. The browser will use the first value it recognizes.

body {
  font-family: "Microsoft Yahei", "Microsoft Yahei", "Arial", sans-serif
}

Font weight (thickness)

font-weight is used to set the font weight (thickness)

Value	Description
normal	Default, standard thickness
bold	Bold
bolder	thicker
lighter	thinner
100~900	Set the specific thickness, 400 is equivalent to normal, and 700 is equivalent to bold
inherit	Inherit the weight value of the parent element’s font

Text color

The color property is used to set the color of the text.
Color is most often specified via CSS:
● Hexadecimal value – eg: #FF0000
● An RGB value – e.g.: RGB(255,0,0)
● The name of the color – e.g.: red
There is also rgba(255,0,0,0.3). The fourth value is alpha, which specifies the transparency/opacity of the color. Its range is between 0.0 and 1.0.

Text attribute

Text alignment

The text-align attribute specifies the horizontal alignment of text within an element.

Value	Description
left	Align left Default value
right	Align right
center	center alignment
justify	Justify

Text decoration

The text-decoration attribute is used to add special effects to text.

Value	Description
none	default. Text that defines the standard.
underline	Defines a line under the text.
overline	Defines a line on text.
line-through	Defines a line through the text.
inherit	Inherits the value of the text-decoration attribute of the parent element.

First line indent

Indent the first line of a paragraph by 32 pixels:

p {
  text-indent: 32px;
}

Background properties

/*Background color*/
background-color: red;
/*Background picture*/
background-image: url('1.jpg');
/*
 background repeat
 repeat (default): the background image is tiled to fill the entire web page
 repeat-x: The background image is only tiled horizontally
 repeat-y: the background image is only tiled vertically
 no-repeat: The background image is not tiled
*/
background-repeat: no-repeat;
/*Background position*/
background-position: left top;
/*background-position: 200px 200px;*/

Abbreviation:

background:#336699 url('1.png') no-repeat left top;

Border

Border properties
● border-width
● border-style
● border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

Abbreviated as:

#i1 {
  border: 2px solid red;
}

Border style:

Value	Description
none	Rimless.
dotted	Dotted dashed border.
dashed	Rectangular dashed border.
solid	Solid border.

border-radius

Use this attribute to achieve the effect of rounded borders.

Set border-radius to half the length or height to get a circle.

display attribute

value	significance
display:”none”	The element exists in the HTML document, but is not displayed in the browser. Generally used with JavaScript code.
display:”block”	By default, it occupies the entire page width. If a specified width is set, the remaining part will be filled with margin.
display:”inline”	Displayed according to inline elements, setting the width, height, margin-top, margin-bottom and float attributes of the element at this time will have no effect.
display:”inline-block”	Make the element have the characteristics of both inline elements and block-level elements.

CSS box model

margin: Used to control the distance between elements; the most basic use of margin is to control the space around elements to achieve visual separation. Purpose.
padding: used to control the distance between the content and the border;
Border: A border around the padding and content.
Content(content): The content of the box, showing text and images.

margin margin

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

Order: top right, bottom left

Abbreviation:

.margin-test {
  margin: 5px 10px 15px 20px;
}

padding

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

Abbreviation:

.padding-test {
  padding: 5px 10px 15px 20px;
}

Order: top right bottom left

Common abbreviations for supplementary padding:

Provide one for four sides;
Provides two, the first is for up-down, the second is for left-right;
If three are provided, the first is for upper, the second is for left-right, and the third is for lower;
Provide four parameter values, which will be applied to the four sides in the order of top-right-bottom-left;

float

Two characteristics about floating:

A floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.
Because the floated box is not in the document’s normal flow, a block box in the document’s normal flow behaves as if the floated box does not exist.

Three values

left: float to the left

right: Float to the right

none: default value, no floating

clear

The clear attribute specifies which side of the element does not allow other floating elements.

Value	Description
left	Floating elements are not allowed on the left side.
right	Floating elements are not allowed on the right side.
both	Floating elements are not allowed on either the left or right side.
none	default value. Allows floated elements to appear on both sides.
inherit	Specifies that the value of the clear attribute should be inherited from the parent element.

Clear float

Side effects of clearing floats (parent label collapse issue)

There are three main ways:

Fixed height
Pseudo element removal method
overflow:hidden

Pseudo element removal method (more commonly used):

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}