Introduction to CSS
Cascading Style Sheets (abbreviated as CSS) is a cascading style sheet style sheet Language, used to describe HTML or XML (including SVG,MathML,XHTML CSS describes how elements on screen, paper, audio and other media should be rendered.
CSS is mainly used in HTML pages:
- Text content: font, size, alignment, etc.
- The shape of the picture: width and height, border style, margin, etc.
- Layout and appearance display style of the layout.
HTML is responsible for structure rendering and CSS for style.
CSS Syntax Specification
CSS rules consist of two main components: a selector and one or more declarations.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* selector: { key: value; ...} */ p { color: red; } div { font-size: xx-large; } </style> </head> <body> <p> Test CSS. </p> <div> Hello. </div> </body> </html>
- CSS can be written in the <style>tag in <head>, with /* */ for in-block comments.
- The selector specifies a CSS-style HTML tag with curly brackets that specify the specific style of the object.
- Attributes and attribute values are expressed as key-value pairs, separated by, and ended by.
CSS Base Selector
CSS selectors can be divided into:
- Basic selector: consists of a single tag.
- tag chooser
- Class selector
- id selector
- Wildcard Selector
- compound selector
tag chooser
Select all the labels of a certain type and refer to the code above.
Class selector
Used to select one or more tags, indicated by.
<head> <style> /* selector: { key: value; ...} */ .content { color: red; } .intro { font-size: xx-large; } </style> </head> <body> <p class="content intro"> Test CSS. </p> <div class="intro"> Hello. </div> </body>
Be careful:
- Use-Split Between Class List Words
- A tag can be multiple classes at the same time, with spaces separating the class names, such as class="video-desc report-wrap-module report-scroll-module"
- Use plain English naming classes whenever possible
Use Class Selector to Draw Box
<head> <style> .box { width: 100px; height: 100px; } .red-box { background-color: red; } .green-box { background-color: green; } </style> </head> <body> <div class="box red-box"> </div> <div class="box green-box"> </div> <div class="box red-box"> </div> </body>
id selector
Used to select the only HTML element with a specific id, expressed in #
- Class selectors are primarily used to select styles
- The id selector is used to select the only element on the page and is often used with JS
<head> <style> #hello { font-size: xx-small; color: pink; } </style> </head> <body> <div id="hello"> Hello </div> </body>
Wildcard Selector
CSS uses * to represent all elements in the selection page, including <html>, <body>, and so on.
For example, clear the inside and outside margins of all element labels:
<style> * { margin: 0; padding: 0; } </style>
CSS Set Font
CSS font properties can be used to define fonts, sizes, thickness, text styles (italics), and so on.
Typeface
The property font-family defines the font.Note:
- Various fonts, separated
- If the font has spaces, quotation marks are required
<style> p { font-family: Arial, Helvetica, sans-serif, 'Microsoft YaHei'; } </style>
font size
The property font-size defines the font size.Note:
- PX (pixel) is the most common unit
- Chrome default font size is 16px, different browsers may have different default font sizes, try to write the font size clearly
- Declaring a body's font changes the size of the entire page's text
- Title labels such as <h1> need to be set separately
<style> /* selector: { key: value; ...} */ body { font-size: 20px; } h1 { /* body Font size settings in are not valid for <h>labels and need to be set separately */ font-size: 20px; } </style>
Font thickness
The property font-weight defines the size of the font. font-weight reference
<style> body { font-weight: 900; } </style>
The default value is normal, no bold, bold bold. You can also use values from 100 to 900, where 400 equals normal and 700 equals bold.
Font Style (Italic)
The property font-style defines whether the font is skewed, normal is normal, italic is skewed.
- italic is rarely used in actual development, and normal is more often used to change the text used to label <em>to not tilt.
<style> em { font-sytle: normal; } p { font-style: italic; } </style>
Font Composite Properties
<style> p { /* font: font-style font-weight font-size/line-height font-family */ font:italic 900 30px/10px Arial, Helvetica, sans-serif; } </style>
Be careful:
- Must be written in strict order, with spaces separating attributes
- Some attributes can be omitted (default), but the font-size and font-family attributes must be preserved or the font attribute will not work
CSS Text Properties
text color
The attribute color defines the color of the text.
<style> div { color: red; } </style>
Representation | Attribute Value |
---|---|
Predefined color values | color:red; |
Hexadecimal | color: #ff0000; |
RGB | color: rgb(255, 0, 0); Or color: rgb(100%, 0%, 0%); |
align text
The attribute text-align sets the horizontal alignment of text within an element. Default left, right, center alignment.
<style> h1 { /* The essence is to center the text horizontally in the h1 box */ /* h1 Label box or exclusive line */ text-align: center; } </style>
Decorative Text
<style> a { /* Ununderline <a>Label by default */ text-decoration: none; } </style>
Attribute Value | describe |
---|---|
none | By default, no decorative lines (most commonly used) |
underline | Underline, <a>Label with underline |
overline | Underline (not commonly used) |
line-through | Strikeout (not commonly used) |
text-indent
Units can be either pixel px or relative size em, which is the size of a text in the current element.
<head> <style> p { text-indent: 2em; } </style> </head> <body> <p>How are you</p> <div>How are you</div> <div>qweqwe</div> </body>
Line spacing
A line of text is divided into upper spacing, text height, and lower spacing. If font-size and line-height are set as follows, the upper spacing is 5px, the text height is 16px, and the lower spacing is 5px.
- If the font-size and line-height values are the same, the upper and lower spacing values are 0
- To achieve the effect of vertically centering text, you can make the values of line spacing and height equal, that is, heights and line-height s equal
<style> div { font-size: 16px; line-height: 26px; } </style>
Introduction of CSS
Inline style sheet (inline)
- Writing CSS styles in sytle properties
- The quotation marks should conform to the CSS specification, that is, key: value; Format of
<div style="font-size: xx-large; color: greenyellow;">How are you? How are you?</div> <div>qweqwe</div>
The results are as follows:
Internal stylesheet (embedded)
This is the way you've always used it before, putting your CSS code in a separate <style>tag and writing it inside your HTML file.
- Ideally, it can be placed anywhere in an HTML document, but it is typically placed in the <head>tag
External Style Sheet
- Create a new.CSS and put all your CSS code in it (no <styel>tags are required)
- Introduce a.css file in an HTML page using the <link>tag.
<link href="style/style.css" rel="sytlesheet">
CSS Composite Selector
A composite selector is a combination of two or more basic selectors in different ways.
Descendant Selectors
- Space Separated
- The second element can be either a son or a descendant, for example, the <a>tag below is the grandchild of the <ol>tag, and still works
- The last change is the style of the selected descendant element
- Two elements can be any base selector
ol li { color: blue; } ol a { color: red; }
<ol> <li>ol Of li</li> <li>ol Of li</li> <li><a href="#">test</a> ol's li</li> </ol>
Child selectors
- Only son elements can be selected
- Use > Separate
.nav>a { text-decoration: none; color: red; }
<div class="nav"> <a href="#"> son </a> <p><a href="#"> grandson </a></p> </div>
Only son is now red and not underlined.
Union selector
Select multiple sets of labels to define the same style.
- Use, separate
- Recommend writing vertically
- You can use any form of selector
ul>li, div a { color: royalblue; }
<ul> <li>ul Of li</li> <li>ul Of li</li> <li>ul Of li</li> </ul> <div class="nav"> <a href="#"> son </a> <p><a href="#"> grandson </a></p> </div>
Pseudo Class Selector
- Use: to indicate
Linked pseudo class selector
Note to write in order:
/* Unvisited Links */ a:link { color: #333; text-decoration: none; } /* Links Visited */ a:visited { color: orange; text-decoration: underline; } /* Links hovered by mouse */ a:hover { color: red; text-decoration: underline; } /* Mouse is pressing links that are not loosened */ a:active { color: green; text-decoration: underline; }
focus pseudo class selector
Select the form element that gets the focus (cursor). Generally speaking, <input>label gets the cursor.
input:focus { background-color: red; color: gray; }
CSS Element Display Mode
HTML elements can be divided into block elements and in-line elements.
Block Element
<div>is the most typical block element, and the common ones are: <h1>~<h6>, <p>, <ul>, <ol>, <li>, etc.
- Exclusive Line
- Height, width, outside margin, inside margin can be controlled
- The default width is 100% of the container (parent width), for example <div>The default is the width of the entire page because it inherits from <body>
- Is a container and box that can contain block or inline elements
Be careful:
- Elements of a text class cannot be placed at the block level
- For example, block-level elements cannot be placed inside <p> and <h1>~<h6>.
In-line (inline) elements
<span> is the most typical inline element, and the common ones are <a>, <strong>, <b>, <em>, <ins>, etc. The main features are:
- A row can show multiple, with a gap in the middle, for example, between two
- Setting width and height directly is invalid
- The default width is the width of its own content
- Inline elements can only hold text or other inline elements
Be careful:
- No more <a>labels can be placed inside <a>labels
- Block-level elements can be placed inside <a>tags, but it is safer to switch to block-level mode for <a>tags
Special Elements
Some special elements, such as <img>, <input>, <td>, etc., have the characteristics of both block elements and in-line elements. Some data refer to them as in-line block elements. Its main features are:
- On the same line as the adjacent inline element (or inline block element) (inline element characteristics)
- The default width is the width of the content itself (in-line element characteristics)
- Height, row height, outer margin, and inner margin can be controlled (block level element characteristics)
Display Mode Conversion
Use scenarios: Increase the trigger range by, for example, converting <a> to block-level elements.
- Convert to block element: display: block;
- Convert to in-line element: display: inline;
- Convert to an inline block element: display: inline-block;
<a href="https://Www.baidu.com "class=" search ">Baidu</a>
.search { background-color:skyblue; text-decoration: none; display: inline-block; /* Convert to inline block element */ height: 30px; width: 100px; }
The display effect is as follows:
Background of CSS
background color
The default background-color value is transparent, which is transparent.
div { background-color: pink; }
Background picture
Back-image is typically used for:
- Decorative icon, logo, etc.
- Larger Background Picture
div { height: 300px; width: 300px; background-image: url(images/logo.png); }
Background picture tiling
Background pictures are tiled by default. You can set the value of background-repeat to no-repeat, repeat-x, repeat-y to make background pictures not tiled, tiled, tiled horizontally only, tiled vertically only.
Background Picture Location
Modify the position of the picture in the background:
div { height: 300px; width: 300px; background-image: url(images/logo.png); background-position: 10px 10px; }
Parameter representations: x-coordinate and y-coordinate, which can use location nouns or exact units.
parameter values | Explain |
---|---|
Location Noun | Vertical with top |
Precise units | Floating Point Number + Unit Flag or Percentage |
Location Noun
If it is a positional noun,
- If there are two positional nouns, such as background-position: left top;, Then the order of the two values does not matter, and the effect is the same as top left
- If there is only one positional noun, such as background-position: left;, Then the default second value is center
Precise units
If it is an exact unit,
- If there are two numbers, it must be the first x-coordinate and the second y-coordinate
- If there is only one number, it must be an x-coordinate with the y-axis vertically centered
Mixed Units
If it is a mixed unit, it must be the first x-axis and the second y-axis, for example background-position: center 10px; Refers to a horizontal center with a Y-axis offset of 10 pixels.
Background Image Fixing
Set the background-attachment value to scroll or fixed to scroll or fix the background image as the page scrolls.
background-attachment: fixed;
Compound Writing
The compound writing of background has no prescribed order. Generally speaking, it is written in the following order:
.logo { height: 300px; width: 300px; background: pink url(images/logo.png) no-repeat scroll center left; }
- Composite writing is more recommended in real-world development
CSS3 Background Color Translucent Effect
Only valid for background colors.
background: rgba(1, 1, 1, 0.3)
The last parameter is alpha transparency, with 1 indicating opacity.
Three features of CSS
Cascade
Conflicts occur when the same selector sets the same property, and the style that follows overrides the other styles. For example, in the code below, Test will show pink.
<div>Test</div>
div { color: skyblue; } div { color: pink; }
Inheritance
Child tags inherit certain styles of parent tags:
- Mainly text-related styles, such as (text-, font-, line-start properties, and color properties)
For example, the font style was previously set in the <body>tag, and the <body>style is inherited directly if the subtag has no associated style.
Inheritance of row height
- Row heights can follow or not (in multiples)
- When the row height representing the multiple is inherited, the row height of the child element is: font-size of the current child element multiplied by the row height multiple
<body> <p>I am p</p> <div>I am div</div> <ul> <li>I am li</li> <li>I am li</li> <li>I am li</li> </ul> </body>
body { font: 14px/1.5 monospace; } div { font-size: 18px; } li { font-size: 20px; }
The <p>label, <div>label, and <li>label all inherit the row height of the <body>label, while the <p>label row height is 14px*1.5=21px, <div>label row height is 27px, and <li>label row height is 30px.
priority
When an element is selected by multiple selectors, priority is generated.
- Same selector, cascading
- Different selectors, executed according to selector weight
selector | weight |
---|---|
Inheritance or * | (0, 0, 0, 0) |
element selector | (0, 0, 0, 1) |
Class selector, pseudo class selector | (0, 0, 1, 0) |
id selector | (0, 1, 0, 0) |
Inline style="" | (1, 0, 0, 0) |
! important | Infinity |
<body> <div>i am div</div> <p>I am p</p> <p class="test">I am p</p> <p class="test" id="demo">I am p</p> <p class="test" id="demo2" style="color: black;">I am p</p> <p class="test" id="demo3" style="color: black;">I am p</p> </body>
body { color: red; } p { color: skyblue; } .test { color: yellow; } #demo3{ color: pink!important; } #demo, #demo2, #demo3 { color: green; }
Label colors from top to bottom are: red, blue, yellow, green, black, pink.
Priority considerations
- The 4-digit number of priority does not produce rounding, which is understood to mean that the class selector is always larger than the element selector
- Judge priority from left to right, and continue to judge next if the current number of digits is the same
- Child elements inherit weights of (0, 0, 0, 0), regardless of the parent element's weight.
- Since the browser has some default styles, such as <a>label blue, underlined style, <h1>label font and bold style, it is not possible to override the default style at this time because the inherited weight is (0, 0, 0, 0), and it must be a selector with weights above (0, 0, 0, 1)
Overlay of weights
Composite selectors produce overlays of weights, such as:
- div ul li weights are (0, 0, 0, 1)
- The.nav ul li weight is (0, 0, 1, 2)
- a:hover weight is (0, 0, 1, 1)
- The.nav a weight is (0, 0, 1, 1)