CSS2 Basics
infrastructural
synopsis
[Full name]Cascading Style Sheetsa.k.a.Cascading Style Sheets
- tiered: layer by layerscrawlgo up
- a meter (measuring sth): Lists
- type: e.g. text size, color, element width, etc.
CSS describes how elements should be rendered on screens, paper, audio, and other media.
language type
markup language, for the HTML structure landscaping styles to achieveSeparation of semantics and effectsBetter beautification of web pages and optimization of web page structure
Acting on HTML
In-line styles (not recommended）
grammatical：
<! --written in the style in the tag-->
<body>
<h1 style="color:skyblue;"> title</h1>
</body>
Drawbacks:
- High workload and inefficiencies
- The html and css are too coupled, and css does very little to separate html structure from style
Internal Style
grammatical：
<head>
<meta charset="UTF-8">
<title>Internal Style</title>
<style>
h1{
color: skyblue;
}
h2{
color: greenyellow;
}
</style>
</head>
<body>
vantage：
- Structure and style have been initially separated and the code is ready to be taken
drawbacks：
- Needs to be copied to anotherhtmlfile to enable style reuse, which is time-consuming
[!NOTE]
When writing CSS styles in the beginning, you can use internal styles without having to open a .css file to give structure styles.
Later on, when you get good at it, you can use it.External StyleWrite in.cssPapers
External Style
grammatical：
<! --HTML file-->
<head>
<meta charset="UTF-8">
<title> external style sheet</title>
<link rel="stylesheet" href=". /CSS/">
<! --head write link to link to external stylesheets -- >!
<! --rel:relationship href:source -->!
</head>.
/*CSS file*/
h1{
color: skyblue;
}
h2{
color: gray; }
}
The most commonly used way, and almost always used in practice, is to use external stylesheets.
vantage：
- (coll.) fail (a student)First rendering through the browserAfterward, CSS styling is performed as a result of the separation from the .html file(computing) cacheThe next rendering can beImprove access speed
Prioritization of styles
sequences：
Inline Styles > Internal Styles = External Styles
attention
- Following the "latecomer to the top" principle
- It's the equivalent of graffiti. If you apply a second coat, the first one will be invisible.
grammatical standard
framework：
| picker | Find the element you want to change the style of |
|---|---|
| declaration block | One or more statements(Declaration: [Attribute name: Attribute value;]) |
h2{
color: gray;
}
coding style
| hairstyle | corresponds English -ity, -ism, -ization |
|---|---|
| be in full swinghairstyle | Recommended at the time of developmentEasy maintenance and commissioning |
| tersehairstyle | Recommendations when the project goes live can beReduce file sizein order toSave Network Trafficat the same timeMake opening web pages faster |
CSS Selector
Base Selector
wildcard selector
corresponds English -ity, -ism, -ization：
decide upon a candidatepossessHTML elements (useful when clearing styles)
* {
color: red;
}
element selector
corresponds English -ity, -ism, -ization：
Uniform setup for a certain element does not allow for differentiation of the same type
tag name {
Attribute name: attribute value;
}
class selector
corresponds English -ity, -ism, -ization：
Assign styles that can be categorized by themselves by using the value of the class attribute in the element.
The attribute value of the class attribute in an element can have multiple values, separated by spaces
Attribute values for class attributes should be letters + numbers as much as possible, concatenated with - to avoid pure numbers
/* Suppose there is an element h1 whose class attribute has an attribute value of skyblue */
.skyblue {
color: skyblue;
}
ID Selector
corresponds English -ity, -ism, -ization：
The unique element is selected by the attribute value of the id attribute (where the rationale is that different elements, idThe attribute values of the properties must be different）
/* Suppose there is an element h1 whose id attribute has an attribute value of special */
#special {
color: skyblue;
}
Compound Selector
intersection selector
corresponds English -ity, -ism, -ization：
Selecting an element that meets more than one condition at the same time
selector 1 select 2 select 3 {
color: skyblue;
}
/* e.g. That is, p-tags whose class attribute has a value of blue (double filtering) */
[!NOTE]
- There are tag names that must be written in front
- It is not possible to have two element selectors at the same time
union selector
corresponds English -ity, -ism, -ization：
Selecting the element corresponding to multiple selectors
h2,
h3.
p {
font-size: large;
}
/*
selector1.
selector2.
selector3 {
Attribute name: The value of the attribute;
}
*/
- generalwrite vertically
- Collective declarations, which can reduce the size of a stylesheet
Relationships between HTML elements
- parent element
- sub-element
- Ancestral elements (dads are considered ancestors)
- Descendant elements (sons are considered descendants)
- The Brotherhood Element
Knowledge base for later selectors such as descendant selectors
descendant selector (id, class is fine)
corresponds English -ity, -ism, -ization：
Selects a descendant of the specified element that meets the requirements.
<style>
ul li {
color: skyblue;
color: skyblue; font-size: large;
}
</style>
<ul>.
<li>l</li> <li>l</li> <ul>
<li>o</li> <li>o</li>
<li>v</li> <li>l</li>
<li>e</li> <li>o</li>
<li>.
<a href="#">love</a>
</li> <a href="#">love</a>
<li>.
<ul>.
<li>1</li> <! --This can also be checked-->
</ul>
</li>.
</ul>
[!TIP]
- Final selection of descendants, excluding ancestors
- Must conform to html nesting requirements (Can be found across generations）
- Children and grandchildren and so on can be taken care of at the same time.
child selector
corresponds English -ity, -ism, -ization：
Selects the child elements of the specified element that meet the requirements
option 1> option 2> option 3 {
color: skyblue;
}
/*
The selector can find elements without starting at the outermost point
*/
Brother Selector
corresponds English -ity, -ism, -ization：
Neighboring sibling elements that match the condition after the specified element is selected
categorization：
| categorization | grammatical | corresponds English -ity, -ism, -ization |
|---|---|---|
| neighbor | Option 1 + Option 2 | Looking down to the same generation.firstIf it is option 2, the style is given |
| common (use) | Option 1~Option 2 | Look down for the passband, and if it's option 2, give the style, which can beThere's more than one. |
<style>
ul+ol {
color: skyblue;
}
p+h2 {
color: yellow;
}
h2~h3 {
color: aquamarine;
font-size: large;
}
</style>
<body>
<div>
<ul>
<li>love</li>
<li>like</li>
</ul>
<ol>
<li>long</li>
<li>lonely</li>
</ol>
<p>paragrah</p>
<h3>title333</h3>
<h2>title2</h2>
<h3>title3</h3>
<h3>title33</h3>
</body>
property picker
corresponds English -ity, -ism, -ization：
decide upon a candidateattribute valueElements that meet certain requirements
/* The first way to write it, selecting elements with the same attribute */
[title] {
color: skyblue;
}
/* The second way to write this is to select elements that have the same attribute and the same value */
[title = "1"] {
color: aquamarine;
}
/* The third way to write this is to select elements that have the same attributes and the same value at the beginning of the attribute */
[title^="a"] {
color: yellow; }
}
/* The fourth way to write this is to select elements that have the same attribute and the same value at the end of the attribute */ [title^="a"] { color: yellow; }
[title$="e"] {
font-size: larger; }
}
/* The fifth way to write this is to select elements that have the same attribute and have a partial value in the attribute value */
[title*="1"] {
color: brown; }
}
pseudo-class selector
conceptual analysis：
Not really a class class, but a state of the element
categorization：
| dynamic pseudo-class | opinion | structural pseudo-class | opinion |
|---|---|---|---|
| link (hyperlink unique) | Not yet connected | first-child | First child |
| visted (hyperlink unique) | connected | last-child | The last child. |
| hover | mouse hover | nth-child（n） | nth child |
| active | Element activation (press the mouse without releasing it) | first-of-type | First child of the same type |
| focus | Getting focus (form elements) | last-of-type | The last child of his kind. |
| nth-of-type（n） | nth child of the same type | ||
Structural Pseudo-class Complement
1.With respect to n in parentheses
- 0 or no write-in: choose nothing
- n: check all (hardly ever)
- 1~positive infinity: check the corresponding serial number
- 2n or even: the serial number of the selection is an even number
- 2n+1 or odd: the selected serial number is an odd number
- -n+3: check the first three
Principle: an + b
2.The details:
alikelit. choose a first wife and then a son (idiom); fig. to act first and foremost according to one's personal wishesThat is, takeFirst son, grandson... (at the same time)
(for) instance：
div p:first-child
It means.Find the first son in the div, grandson... Is it a p, style it if it is
p:first-child
It means.Find the first son in body, grandson... Is it a p, if it is, give it style
Negation of pseudo-classes
corresponds English -ity, -ism, -ization：
Excluding elements that satisfy the conditions in the parentheses
grammatical：
:not(selector)
p:not(:first-child) {
color: skyblue;
}
UI pseudo-class
categorization：
| what | opinion |
|---|---|
| checked | Checked Checkboxes or Radio Boxes |
| enable | Available form elements |
| disabled | Unavailable form elements |
/* Checked is the checked checkbox and radio box */
input:checked {
width: 100px;
height: 100px.
}
/* Checked is the disabled input element */
input:disabled {
background-color: gray; }
}
/* The available input elements are selected */
input:enabled {
background-color: skyblue; }
}
Target pseudo-classes (understand)
corresponds English -ity, -ism, -ization：
Selects the specified anchor element
/* Selects the element pointed to by the anchor */
div:target{
background-color: gray;
}
Language pseudo-classes (understanding)
corresponds English -ity, -ism, -ization：
Selection of elements according to the specified language
div:lang(en) {
color: skyblue;
}
pseudo-element selector
corresponds English -ity, -ism, -ization：
Select some special positions in the element (In the element）
categorization：
| what | opinion |
|---|---|
| first-letter | The first text |
| first-line | First line of text |
| selection | mouse-over (computing) |
| placeholder | Prompt text (in the input box) |
| before | Creating child elements at the very beginning |
| after | The last position creates the child element |
/* Selects the first text in the element */
div::first-letter {
color:skyblue;
}
/* The first line of text in the selected element */
div::first-line {
color: gray; }
}
/* Selected is the mouse-selected text */
div::selection {
color: red; background-color: gainsboro; }
background-color: gainsboro;
}
/* The selection is the hint text in the input element */
input::placeholder {
color:skyblue; }
}
/* Create a child element at the beginning of the p element */
p::before {
content:"¥";
}
/* At the end of the p element, create a child element */
p::after {
content: "millions"; }
}
[!WARNING]
first-letter cap (a poem)first-linecontent ifOccurrence of overlapping use，first-letterStyles usedwould coverfirst-linepattern
selector priority
Principles:
- pass (a bill or inspection etc)weightsto distinguish which style has the highest priority
- Row stylesrespond in singing!importantAppearance is not a matter of who has more or less weight.
Detailed presentation：
Weighted Syntax:(a, b, c) {a,b,c are numbers}
| a | ID |
|---|---|
| b | Classes, Pseudo-classes, Properties |
| c | Element, for element |
How weights are compared
Compare them one by one.When the a-ratio comes out, the weights come out.，If not, go on down to let b make the comparison, and so on
[!IMPORTANT]
!important > in-line styles > everything weighted
! Important less thananxiousUse may not be carried out, as this practice wouldMaking the details of the handover of work problematic，
Even if used.It also needs to be deleted after that.，Find the reason why you can't make the style change in a weighted way and fix it
Shortcut:
Simply place theMouse over selectorOn the other hand, it is possible toweightingNo need to calculate
The previous explanation was to understand the principles of the weighting calculations involved, not just the surface calculations