- CSS introduction
- Introduce CSS style sheet method
- CSS selector
- CSS common properties
CSS introduction:
- The full name of CSS is (Cascading Style Sheet) Cascading Style Sheet;
- Cascade: Cascade is to set the same style for an element multiple times
Features:
1) Rich style definition
- CSS provides a rich document style appearance, and the ability to set text and background properties;
- Allows to create a border for any element, as well as the distance between the element border and other elements, and the distance between the element border and the content of the element;
- Allows you to freely change the capitalization, modification, and other page effects of the text.
2) Easy to use and modify
- CSS can define styles in the style attribute of HTML elements
- It can be defined in the header part of the HTML document
- The style declaration can be in a special CSS file, and all style declarations can be stored uniformly for unified management.
3) Multi-page application
- The CSS style sheet can be stored separately in a CSS file, so that we can use the same CSS style sheet in multiple pages.
4) Page compression :
- The reuse of CSS style sheets reduces the size of the page and reduces the download time.
Introduce the css style sheet method:
1) Inline style
- Use the tag's style attribute directly
style=" width:100px; height:100px; background-color:#F00;”
2) Embedded style
- Use the
<style></style>mark, write the style inside the<style>mark <style>Mark to specify the type attribute as text/css
3) Link style (external link style)
- Write CSS into a separate file, note that the file extension of the file is .css
- Use tags to introduce css files in HTML documents
- The tag needs to specify two attributes: type and rel
Example:
< link type=“text/css” rel=“stylesheet” href=“sy.css" />
CSS selector
1) Wildcard selector
- Select object: all labels
- grammar:
* {
font-family: "宋体";
}
2) Type (marker) selector
- Select object: use tag name as selector
- grammar:
p {
font-size: "8";
}
3) ID selector
- Selection object: the element corresponding to the id name
- grammar:
＃idname {
…
}
4) Class selector
- Select objects: elements with such names
- grammar:
.classname {
…
}
5) Include selector
- Selection object: elements contained by nested tags
- grammar:
选择符a 选择符b {
…
}
CSS commonly used properties:
1) CSS fonts and text styles
- font-family: Set the font type of the text;
- font-size: Set the font size of the text;
- font-style: Set the font style of the text;
- font-weight: Specifies the thickness of the font;
- color: set the color of the text
- letter-spacing: Set character spacing
- line-height: set the text line height
- text-align: Set the alignment of the text
2) CSS border and background related properties
- border: set all border properties;
- border-width: Set the width of the four borders;
- border-color: Set the color of the four borders;
- background: set all background attributes;
- background-color: set the background color of the element;
- background-image: set the background image of the element;
3) CSS list and table related attributes
- list-style: set all list attributes in one statement;
- list-style-image: Set the image as a list item mark;
- list-style-position: Set the placement position of the list item marker;
- list-style-type: set the type of list item mark;
- border-collapse: Set whether to merge the table borders into a single border;
- border-spacing: Set the distance separating the cell borders;
- caption-side: Set the position of the table title, the default is above;
- empty-cells: Set whether to display empty cells in the table;
At the end of the article, I will share with you some basic html and css interview questions. If you like this article, you can like and pay attention! There are more html, css, JavaScript, Vue related interview questions, click here to share for free.
1. What is the difference between link and @import?
2. How to understand label semantics and what are its benefits?
3. What are the CSS selectors and how to calculate the priority?
4. What are some examples of inline elements and block-level elements?
5. Write the html structure of ul, ol, dl three lists?
6. What is the difference between src and href?