CSS style sheet
1, Overview
1. What is CSS?
Cascading style sheets, customizing the display style of html elements and beautifying the page are very important for the construction of front-end pages
2. Why use CSS
(1) CSS refers to cascading style sheets
(2) Styles define how HTML elements are displayed
(3) Styles are usually stored in style sheets
(4) Adding styles to HTML is to solve the problem of separating content from presentation
111
(5) External style sheets can greatly improve work efficiency
(6) External style sheets are usually stored in CSS files
(7) Multiple style definitions can be cascaded into one
HTML tags were originally designed to define document content. By using tags such as < H1 >, < p >, < Table >, the original intention of HTML is to express information such as "this is the title", "this is the paragraph" and "this is the table". At the same time, the document layout is completed by the browser without any formatting labels.
# p table h1 is just to tell the browser what label it is, not to express what it looks like # If you want to set the label content style, you should use css to customize it # Why use CSS? 1. To beautify the interface, add styles to the labels 2. use css You can separate content from presentation
3. Learning objectives
Familiar with and skilled in using common css style attributes, with basic page beautification ability.
2, First acquaintance with CSS
1. First CSS Style
<head>
<title>CSS style sheet</title>
<style type="text/css">
p{
color: white; /* Font color */
font-size: 25px; /* font size */
background-color: gray; /* background color */
width: 650px; /* width */
}
</style>
</head>
<body>
<p>The spark of talent often bursts on the grindstone of diligence.</p>
</body>
2. How to insert a style sheet
When you read a style sheet, the browser formats the HTML document based on it. There are three ways to insert style sheets into HTML documents:
-
External style sheet
<link href="css/index.css" rel="stylesheet" type="text/css" />
-
Internal style sheet (inside the < head > tab)
<style type="text/css"> </style>
-
Inline style (inside HTML elements)
<p style="color: white;"> study HTML It's so simple </p>
Priority of style sheet: inline > internal > external > Default
# There are three ways to introduce CSS styles: 1. Create a new external style.css File in head Label use link To introduce 2. Internal style in head Label, add a style label 3. inline style -In line style is added in the start label style attribute # Priority: inline style > internal style > external style > default style (default style) # Coupling: inline style > internal style > external style # Weak coupling or strong coupling? Weak coupling
3. Basic grammar
CSS syntax consists of three parts: selector, attribute and value:
body{ background-color:red; }
Note: semicolons are used between multiple styles; separate.
3, Selector type
1. Element selector
p{ color:white; background-color:gray;}
# When using the element selector, all elements in the page will be set to a certain style
Supplement: div and span elements
- Div is a block level element: < div > tags can divide documents into independent and different parts. It can be used as a strict organization tool and is not associated with it in any format.
<div> The spark of talent often bursts on the grindstone of diligence. </div><div> As long as you are willing to learn, you will be able to learn.</div>
- The span tag is used to combine inline elements in a document.
<div> As long as you like<span style="color: red;font-weight: bold;">study</span>，You will be able to learn.</div>
# 1. div label: div The tag has no meaning except that it is a block level element Block level elements occupy a single row eg: p,hr,br,table,ul,ol,dl,li ... Function: often used div To do the layout of the page, you can divide a website into many div，every last div Inside, you can add many sub tags # 2. span tag: span tag has no other meaning except that it is an in-line element. In-line elements do not monopolize a line and will not wrap automatically. eg: a, img, font, input, button, b, i, u, del, sub, sup Function: it is often used to modify the style of some text in a line of text, rather than the style of a whole line of text
2. Class selector
Class selectors can specify specific styles for HTML elements marked with specific class attributes. It can be used to distinguish different HTML elements.
Class selector with "." To define
HTML:
<div class="div_1"> The spark of talent often bursts on the grindstone of diligence. </div><div class="div_2"> As long as you are willing to learn, you will be able to learn.</div><div class="div_3 div_4"> <!-- Two values --> The more you learn, the higher your value.</div>
CSS:
<style type="text/css"> .div_1 {color: red;} .div_2 {color: blue;} .div_3 {color: green;}</style>
# Class selector: set a uniform style for the labels of a class (with the same class attribute)
3. id selector
The id selector can specify a specific style for HTML elements marked with a specific id.
The id selector is defined with "#".
HTML:
<div id="div_1"> The spark of talent often bursts on the grindstone of diligence. </div><div id="div_2"> As long as you are willing to learn, you will be able to learn.</div>
CSS:
<style type="text/css"> #div_1 { color: red; } #div_2 { color: blue; }</style>
# Difference between id selector and class selector 1 The class selector sets the style for a certain class of elements, and there are more elements to be used. 2 id selector sets a style for an element and acts as an element 3 The class attribute value of the class selector can be repeated, but the id value cannot be repeated. Note: the value of the id attribute cannot start with a number
4. Derived selector
The derived selector allows you to determine the style of a label according to the context of the document. For example, you want the font of the p tag under div to be blue:
HTML:
<div> <p>The spark of talent often bursts on the grindstone of diligence.</p> </div><p> As long as you are willing to learn, you will be able to learn.</p>
CSS:
div p{ color: blue; }
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-i6gi3nft-1644507712066) (C: \ users \ admin ~ 1 \ appdata \ local \ temp \ 1530771277016. PNG)]
Descendant selector - descendant selector
5. Selector inheritance
According to CSS, child elements inherit attributes from parent elements:
HTML:
<div> <p>The spark of talent often bursts on the grindstone of diligence.</p> <b>As long as you are willing to learn, you will be able to learn.</b></div>
CSS:
div { color: blue;}
# After the style of the parent label is set, the child label will inherit the style of the parent label
6. Selector combination
Set the same style for multiple elements at the same time:
h1,h2,h3,h4,h5,h6 { color: green; }
div.div_1 div tag and class attribute is div_ one
7. Pseudo class selector
[the external chain picture transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-5al18zrn-1644507712068) (CSS. Assets / 156563805600. PNG)]
4, Background style
1. Background color
You can use the background color attribute to set the background color for the element.
HTML:
<div> The spark of talent often bursts on the grindstone of diligence</div>
CSS:
div{background-color: gray; color: white;}
2. Background image
2.1 setting background image
To put an image into the background, you need to use the background image attribute.
body{ background-image: url('lyf.jpg') }
2.2 background repetition
The background repeat property sets whether and how the background image is repeated.
- Repeat: repeat
- No repeat: no repeat
- repeat-x: repeat horizontally
- repeat-y: repeat vertically
div{ background-image: url('lyf.jpg'); background-repeat: no-repeat; }
2.3 background positioning
To use the background position attribute to change the position of the image in the background.
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
div{ background-image: url('ym.jpg'); background-repeat: no-repeat; background-position: center; height: 600px; width: 600px; background-color: lightgray;}
You can also use percentages to set the position of the image:
background-position: 0% 10%;
Or use pixel values to set:
background-position: 50px 50px;
2.4 prevent the background image from scrolling with the page
background-attachment: fixed;
5, Text style
CSS text properties define the appearance of the text.
Through text attributes, you can change the color and character spacing of the text, align the text, decorate the text, indent the text, and so on.
1. Text color
Use the attribute color to specify the text color, and its attribute value is CSS color.
CSS color table (RBG stands for red, green and blue respectively)
| Representation representation | explain | give an example |
|---|---|---|
| Color name | Assign colors by English words | red,green,blue |
| HEX | The color is expressed in hexadecimal in the form of #RRGGBB or #RGB | ff0000 (same as #f00), #00ff00 (same as #0f0), #0000ff (same as #00f) |
| RGB | The color is represented by three numbers not greater than 255 in the form of rgb(r,g,b) | rgb(255,0,0),rgb(0,255,0),rgb(0,0,255) |
| RGBA | An extension in the form of RGB. The value range of the fourth number is 0 ~ 1, which means transparency, and 0 means complete transparency | rgba(0,0,0,0.6) indicates translucent black |
2. Text indent
CSS provides a text indent attribute, which can easily indent text.
Three values can be used for indentation:
- EM length unit, generally 1em = 16px
- px pixel
- %Percentage
div{ text-indent: 5em; background-color: lightgray;}
3. Horizontal alignment
Text align is a basic attribute that affects the alignment of text lines in an element.
- left align
- Center center
- Right align right
HTML:
<ol> <li class="li_1">The spark of talent often bursts on the grindstone of diligence</li> <li class="li_2">The spark of talent often bursts on the grindstone of diligence</li> <li class="li_3">The spark of talent often bursts on the grindstone of diligence</li></ol>
CSS:
li.li_1 { text-align: left; }li.li_2 { text-align: center; }li.li_3 { text-align: right ; }
4. Text decoration
The text decoration attribute specifies the decoration added to the text, such as underline, underline, strikeout, etc.
- none no decoration
- Underline underline
- Underline
- Line through
Remove underline and color from links:
HTML:
<a href="http://www.baidu. Com "> Baidu once, you will know</a>
CSS:
a { text-decoration: none; color: black;}
Add underline, strikeout and overline:
HTML:
<p> <span class="s1">The spark of talent often bursts on the grindstone of diligence</span> <span class="s2">The spark of talent often bursts on the grindstone of diligence</span> <span class="s3">The spark of talent often bursts on the grindstone of diligence</span></p>
CSS:
p .s1{ text-decoration: underline; }p .s2{ text-decoration: line-through; }p .s3{ text-decoration: overline; }
5. Row spacing
<p> Buddha said, looking back on the past five hundred years, I can only pass by this life. How much do I have to expect in this life in order to meet you again?<br> Time tosses and turns, but I can't get out of the thousands of turns I met with you. A note of heart language blooms in the reincarnation of Acacia. Let the flowers bloom and fall, waiting for you, in the depths of the world of mortals.<br> Mind is like lotus, who can understand? To be alone and drink all the solitude is just to meet the person who knows in the most beautiful years. Even if this waiting is destined to be a practice about fate.</p>
p{line-height: 130px;}
6, Font style
1. Specify font
Specified font: font family
p {font-family: sans-serif;}
2. Font size
Font size set font size:
p{ font-size: 100px; }
3. Font thickness
Font weight sets the weight of the font.
- normal defaults. Defines the standard character.
Bold defines bold characters.
bolder defines thicker characters.
lighter defines finer characters. - 100-900 defines characters from thick to thin. 400 is equivalent to normal and 700 is equivalent to bold.
p{ font-weight: 700; }
4. Font style abbreviation
p{ font: bolder 50px sans-serif; }
# Supplement: 1 List style < UL > < li > Beijing < / Li > < li > Shanghai < / Li > < li > Guangzhou < / Li > < / UL > < style > Li {/ * list style type: lower roman; * / list style type: none; / * remove style - dots * /} < / style >
7, Box model
1. Overview
CSS box model specifies how element boxes handle element content, inner margins, borders, and outer margins.
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-VXOIcxUR-1644507712069)(CSS.assets/1566219791141.png)]
- The innermost part of the element box is the actual content, and the inner margin directly surrounds the content.
- The edge of the inner margin is the border.
- Outside the border is the outer margin.
2. Inner margin
The inner margin of the element is between the border and the content area. The simplest property that controls this area is the padding property.
2.1 padding attribute
p{padding:30px;width: 200px;height: 200px;background-color: lightgray;}
The inner margin of each side can be set in the order of top, right, bottom and left. Different units or percentage values can be used for each side:
p{padding:30px 0px 60px 0px;}
2.2 unilateral inner margin
- padding-top
- padding-right
- padding-bottom
- padding-left
# Inner margin: padding1 Function: set the distance between content and border 2 Effect: after setting the inner margin, the box will be enlarged
3. Border
The border of an element is one or more lines around the content and inner margin of the element.
3.1 border style
- Dotted dotted border
- dashed dotted line
- Double double line
- Solid solid line
p{ width: 200px; height: 200px; border-style: dotted dashed double solid;}
You can also set the single border style:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
3.2 border width
You can specify the width of the border through the border width attribute.
p{ width: 200px; height: 200px; border-style: dotted dashed double solid; border-width: 5px;}
3.3 border color
p{ width: 200px; height: 200px; border-style: dotted dashed double solid; border-width: 5px; border-color: red; /* Set border color */}
3.4 frame abbreviation
p{ width: 200px; height: 200px; border: solid red 5px;}
4. Outer margin
The blank area surrounding the element border is the outer margin. Setting the outer margin creates extra "white space" outside the element.
The easiest way to set the margin is to use the margin property, which accepts any length unit, percentage value, or even negative value.
4.1 margin attribute
<div> <p> Buddha said, looking back on the past five hundred years, I can only pass by this life. How much do I have to expect in this life in order to meet you again? </p></div>
<style type="text/css"> div{width: 800px;height: 300px;background-color: lightgray;margin:0 auto;} p{ width: 500px; height: 200px; background-color: lightcoral; margin:30px 0 0 50px;}</style>
4.2 unilateral outer margin attribute
- margin-top
- margin-right
- margin-bottom
- margin-left
# Outer margin: margin1 Function: set the distance between Boxes 2 Effect: there is a certain distance between the borders of the two boxes
8, CSS positioning
1. Positioning overview
# CSS positioning and floating understanding: 1 CSS provides some attributes for positioning and floating. Using these attributes, you can establish a column layout, overlap one part of the layout with another, and complete tasks that usually need to use multiple tables for many years. 2. The basic idea of positioning is very simple. It allows you to define the position of the element box relative to its normal position, or relative to the parent element, another element and even the browser window itself. Obviously, this function is very powerful and surprising. 3 CSS has three basic positioning mechanisms: normal flow, floating and absolute positioning. Unless otherwise specified, all boxes are positioned in the normal flow. Block level boxes are arranged one by one from top to bottom
2. Relative positioning
# 1. Relative positioning: position: relative positioning is offset from its original position. You need to set its top left right bottom to offset
3. Absolute positioning
# Absolute positioning: position: absolute the element box set to absolute positioning will be completely deleted from the document flow and offset relative to the browser window or the parent element with relative positioning
4. Fixed positioning
5. Float
1. A floating box can be moved left or right until its outer edge touches the border containing the box or another floating box. two. Since the floating box is not in the normal flow of the document, the block box in the normal flow of the document behaves as if the floating box does not exist.# reference resources: https://www.w3school.com.cn/css/css_positioning_floating.asp