CSS
- CSS： Cascading style sheets . It is mainly used to set HTML Text content in the page （ typeface 、 size 、 Alignment, etc ）、 The shape of the picture （ Wide and high 、 Border style 、 Margin, etc ） As well as the layout of the layout and other appearance display styles .
- CSS grammar ：CSS Instances are created by selectors , And one or more statements （ attribute ） Two parts . Each statement （ attribute ） There can be one or more values . Property and value are separated by colons .CSS The statement is marked with a semicolon ; end , Declaration in braces {} Cover up .
- CSS notes ：CSS Only... Is supported in /* */ Annotate
/* I'm commenting on the content */
- CSS introduce ： introduce CSS There are three ways to create a style sheet . External style sheets 、 Internal style sheets 、 inline style .
<head>
<!--
Import external style files （ recommend ）:<link> The label is on <head> tag . An external style sheet file cannot contain any HTML label . The stylesheet should use .css Extension to save .
href： Defines the... Of the linked external style sheet file URL, Can be a relative path , It could be an absolute path .
type： Define the type of linked document , It needs to be specified as “text/CSS”, Indicates that the linked external file is CSS Style sheets .
rel： Define the relationship between the current document and the linked document , It needs to be specified as “stylesheet”, Indicates that the linked document is a stylesheet file .
-->
<link type="text/css" rel="styleSheet" href="./study.css" />
</head>
<body>
<!-- Inline style ： In the syntax style It's the properties of the tag , In fact, any HTML Labels all have style attribute , Used to set inline . Among them, the writing standard of attributes and values is CSS The pattern rules are the same , An inline only works on the label it is on and the child tags nested within it . -->
<div style="font-style:italic; color:blue;"> Hello there</div>
<div class="a"> Hello A</div>
<!-- Internal style ： In the syntax ,style The label is generally located at head In the label title After tag , You can also put him in HTML Anywhere in the document . -->
<style>
.a {
color: red;
}
</style>
</body>
CSS Selectors
- CSS Selectors （ One ）： Used to select a label on a page , stay CSS It's called a selector in .
- Wildcard selector ： The wildcard selector is based on * Select all tags .
- tag chooser ： Directly use the tag name to select all tags of the tag name .
- id Selectors ：id The selector can select to be marked with the id Attribute HTML label .id Selector to "#" To define . An element can only have one ID
- Class selectors ： The class selector can select the class Attribute HTML label . Class selector to "." To define .class Selectors are different from id Selectors ,class Properties can be used in multiple tags . It also supports multiple tags in one tag class Property value （ Space off ）.
<!-- Classes can have multiple values on the same tag -->
<div class="a b c"> Hello A</div>
<!-- Class can be used on multiple tags -->
<div class="a b"> Hello B</div>
/* Wildcard selector */
* {
color: gray;
}
/* id Selectors */
#china {
color: red;
}
/* Class selectors */
.america {
color: green;
}
/* tag chooser */
li {
color: yellow;
}
-
Background selector ： The two elements are separated by spaces , And the elements are selected 1 Offspring of all levels
-
Descendant selector ： Only child elements can be selected
-
Union selector ： The union selector is separated by commas , Any other selector is supported , Multiple elements need to be written vertically
-
Pseudo class selector ： Pseudo class selectors represent the same tag , According to its different states , There are different styles . for example <a> Tags have two states before and after clicking .
<body>
<ol class="haha">
<li>1</li>
<li>
<p> I'm a son </p>
</li>
<li>3</li>
<p> I'm a grandson </p>
</ol>
<div> Big bear </div>
<p> Two bears </p>
<span> Bald head strength </span>
<a href="http://www.baidu.com"> use Baidu Search </a>
<input>
</body>
<style>
/* Background selector ： The two elements are separated by spaces , And the elements are selected 1 Offspring of all levels */
.haha p {
color: green;
}
/* Descendant selector ： Only child elements can be selected */
.haha>p {
color: red;
}
/* Union selector ： The union selector is separated by commas , Any other selector is supported , Try to write vertically */
div,
p,
.haha>a {
color: pink;
}
/* Pseudo class selector ： Pseudo class selectors represent the same tag , According to its different states , There are different styles . for example <a> Tags have two states before and after clicking . Be careful ： Be sure to write static pseudo class first , Post write dynamic pseudo class .
1. Static pseudo class ： Styles that can only be used for hyperlinks .
:link. Before hyperlinks click （ The main thing is to be able to distinguish whether it has href Of <a> label ）
:visited. After the link has been accessed
2. Dynamic pseudo class ： For styles that apply to all labels .
:hover. hover , When the mouse is on the label
:active. Activate , Click on the label , But when you don't let go .
:focus. It's the style when a tag gets the focus （ It is generally used for input box to get focus ）
*/
/* Let the hyperlink click before */
a:link {
color: red;
}
/* After you click the hyperlink */
a:visited {
color: orange;
}
/* Mouse hovering , When you put it on the label */
a:hover {
color: green;
}
/* Click on the link , But when you don't let go （ Activate ） */
a:active {
color: black;
}
/* When the input box gets the focus */
input:focus {
background-color: palegoldenrod;
}
CSS Common properties
| Name of the company |
explain |
Example |
| Piexels( Pixels ) |
The size of a pixel is set according to the user's display size and pixel density |
.classname { margin:5px; } |
| Points( pounds ) |
A pound is an inch of 1/72, From the print background design . |
.classname { margin:5pt; } |
| Inches( Inch ) |
1 Inches is equivalent to 72 pound |
.classname { margin:5in; } |
| Centimeters( centimeter ) |
1 Centimeter ratio 28 The pound is a little bigger |
.classname { margin:5cm; } |
| Millimeters( mm ) |
1 Mm equals 1/10 centimeter ( about 3 pounds ) |
.classname { margin:5mm; } |
| Picas |
Picas It's another printing unit of measure , be equal to 12 pounds |
.classname { margin:5pc; } |
| Ems |
One em Equal to the size of the current font , Used to describe relative dimensions |
.classname { margin:5em; } |
| Exs |
Also related to the current font size , Equal to lowercase letters x Height , Not commonly used |
.classname { margin:5ex; } |
| Percent( percentage ) |
This unit and em relevant , It's a relative unit |
.classname { margin:125%; } |
- Font related properties ： It can be used CSS Set the four main font properties ：family( Font family )、style( style )、size( size ) and weight( thickness ). The font is usually set directly in body To control the entire page .
- font-family： Set the font of the text
- font-size： Set the font size of the text
- font-style： Set the font style of the text （ normal normal、 Italics italic、 tilt oblique）
- font-weight： Set the font thickness of the text
<style>
div {
height: 50px;
width: 50px;
}
#cqz {
/* Set the font family of the text ： Regular script 、 Song typeface, etc （ Chinese characters are not recommended , English is recommended ）. You can set multiple , When the current browser does not support , In the second , And so on */
font-family: " Regular script ";
/* Set the font size of the text ： have access to px、em、 percentage . Different browsers have different font sizes by default , So you have to set the text default .h1 You need to specify the font size for the title label . */
font-size: 16px;
/* Set the text to italics ： Default normal It's normal font */
font-style: italic;
/* Set text thickness ： Mainly normal and bold These two values .blod For thickening . Or you can use numbers （ Be careful not to have units ） */
font-weight: 700;
/* Composite writing ： The first two can be omitted , The last two cannot be omitted . */
font: font-style font-weight font-size font-family;
}
</style>
<body>
<div id="cqz"> Cao </div>
</body>
- Text related properties ：
- color： text color .
- text-align： Set horizontal alignment of text . Align left (left)、 Right alignment (right）、 In the middle (center) Align with both ends (justify).
- line-height： Set the vertical alignment of the text （ Row height ）【 Realization principle ： Line height is determined by text height + It's made up of gaps , When the parent class has a height , It will automatically fill the upper and lower gaps , Make sure the text is centered .】
- word-spacing： Set text word spacing
- letter-spacing： Set word and character spacing
- text-transform： Set up text conversion . nothing 、 Start with a capital letter 、 Uppercase and lowercase .
- text-decoration： Set text decoration . Underline 、 Delete line 、 Top line 、 Flicker, etc .
- text-indent： Set the indent distance of the first line of text .
#cqz {
/* Set text color （ The specific setting method is shown below CSS Color definition in ） */
color: #00f0ff;
/* Set text horizontal alignment ： Align left (left)、 Right alignment (right）、 In the middle (center) Align with both ends (justify). */
text-align: center;
/* Set text vertical alignment （ Set row height , When the line height is the same as the height of the parent container and the text has only one line , The text is vertically centered ） */
line-height: 100px;
/* Set text decoration ： Underline （underline）、 Delete line （line-through）、 Top line （overline）、 flashing （blink） etc. . Be careful ：<a> The default value of the tag is underline, Want to get rid of <a> Underline of label , will text-decoration Set to none */
text-decoration: line-through;
/* Set text indent ： Generally set as em, Represents the distance of the current text size , It's a relative unit */
text-indent: 2em;
}
a {
/* Remove <a> Default underline for labels */
text-decoration: none;
}
- CSS Color definition in ：W3C Standardized by the organization for standardization 16 The names of the colors in are ：aqua( Water blue )、black( black )、blue( blue )、fuchsia( Purplish red )、gray( ash )、green( green )、lime( Green and yellow )、maroon( Pickled purple )、navy( Deep blue )、olive( Olive green )、ourple( purple )、red( red )、silver( silver )、teal( green )、white( white )、 and yellow( yellow ). You can also use hexadecimal RGB：#ff0000、#00ff00、#0000ff etc. . You can also use rgb function 【rgb(0,255,255)】
#cqz {
/* RGB function */
color: rgb(0, 255, 255);
/* Hexadecimal RGB */
color: #fff000;
/* W3C Standard color */
color: red;
}
- background-color： Set the background color
- background-image： Set the background image
- background-repeat： Set background image repeat / Tiling method
- background-position： Set background image positioning
- background-attachment： Set whether the background image is fixed or scrolls with the rest of the page
- background-size： Set the background image size 【CSS3 before , The size of the background image is determined by the actual size of the image 】
-
background： Composite writing . Any attribute can be omitted .
<body>
<div class="cqz"></div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.cqz {
margin-top: 50px;
margin-left: 50px;
height: 1000px;
width: 1000px;
border: 1px solid red;
/* Set the background color */
background-color: rgb(0, 0, 0);
/* Set the background image ： By default, the box is repeated */
background-image: url("../images/123.webp");
/* Set the background image to tile repeatedly ：
1.repeat Repeat vertically and horizontally .【 Default 】
2.repeat-x Repeat horizontally .
3.repeat-y Repeat in the vertical direction .
4.no-repeat The background image will only be displayed once （ No repetition ）.
*/
background-repeat: no-repeat;
/* Set background image positioning ： It is generally recommended that small icons and large images be set with backgrounds instead of <img>
1. You need to have two values .
2. If only one keyword is specified , So the second value would be center.
3. Position NOUN ： top left center right（ Position nouns do not distinguish the order of setting ）
4. Pixels / percentage ： When setting pixel values , The first value is x Axis , The second value is y Axis .
*/
/* background-position: center top; */
background-position: 50% 100%;
/* Set the background image size ： If the image size is set , The image is automatically stretched or compressed to the set size . */
background-size: 1000px 1000px;
/* Set whether the background image is fixed or scrolls with the rest of the page
1.scroll The default value is . The background image moves as the rest of the page scrolls .
2.fixed When the rest of the page scrolls , The background image doesn't move .
*/
background-attachment: fixed;
/* Composite writing ： Support omitting any attribute */
/* background: #00FF00 url(bgimage.gif) no-repeat fixed top; */
}
</style>
Display elements in a pattern
- Display elements in a pattern ： stay CSS in , According to the different display modes of elements, element tags are divided into two categories . Inline elements （inline-level）、 Block-level elements （block-level）.
- Inline elements ： In line elements are elements that do not monopolize a line , In line elements cannot have width and height set . Its width and height will change as the text changes . Block level elements cannot be filled inside . for example ：<span> <buis> <strong> <em> <ins> <del> etc. ;
- Block-level elements ： A block level element is an element that occupies a single line , Block level elements can set width and height , If you don't set the width and height , The default parent element is the same width , The height is 0. for example ：<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd> etc. .
- In line block level elements ： Because sometimes we not only need to set the width and height of the element , Also hope that the element does not monopolize one line , This brings up the inline block level element （inline-block）. There will be white space between block level elements in the same row . for example <img><input><td> etc. .
- transformation CSS Display mode of elements ： Set the element's display attribute .inline（ inline ）、block（ Block level ）、inline-block（ In line block level ）
<body>
<span> I'm an insider , Converted to block level elements </span>
<div> I'm a block level element , Is converted to an in-line element </div>
<img src="../images/1.webp"><img src="../images/1.webp">
</body>
<style>
* {
margin: 0;
padding: 0;
}
/* take span Convert to block level elements */
span {
display: block;
background-color: red;
width: 400px;
height: 200px;
}
/* take div Convert to inline block level elements */
div {
display: inline-block;
background-color: green;
width: 300px;
height: 300px;
}
/* take img Convert to block level elements */
img {
display: block;
width: 200px;
}
</style>
CSS The three major characteristics
- CSS The three major characteristics ：CSS The three characteristics of this method are lamination 、 Inheritance and priority .
- Layering ： Layering is in HTML There can be multiple for the same element in CSS Patterns exist , When there is Same weight When there is a pattern of , It will be written according to these styles Order To decide , At the bottom CSS The style will Cover Ahead CSS style .
- inheritance ： Child tags inherit some of the styles of the parent tags , Such as text color and font size . Want to set an inheritable property , Just apply it to the parent element . Using inheritance properly can simplify code , Reduce CSS The complexity of the style . For fonts 、 Font size 、 Color 、 Row spacing, etc Text class properties are inherited , Can be in body Unified settings in , It then affects all text in the document . however , Not all CSS Properties can be inherited , Like a border 、 Margin 、 padding 、 background 、 location 、 Element height, etc None of the attributes associated with block level elements are inherited .
- priority ： In complexity CSS Style sheets , It often happens that two or more different style rules are applied to the same element , Which style should be adopted at this time ？ That's typical CSS Priority questions . There are the following rules for calculating priority ： Inherit < Element selector < Class selectors / Pseudo class selector < ID Selectors < Inline style < !important
- The weight of the inherited style is 0： In nested structures , Regardless of the weight of the parent element style , When a child element inherits , The weights applied to the sub elements are 0, That is, the style defined by the child element will override all inherited styles .
- In line style takes precedence ： application style Attribute elements , The weight of the inline style is very high , It can be understood that it is much greater than 100. All in all , He has a higher priority than the selector above .
- Nearby principle ： When the weights are the same ,CSS Follow the principle of proximity . That is to say, styles close to elements have the highest priority , Or the last style has the highest priority .
- !important command ：CSS Defined a !important command , This command is given the highest priority . That is to say, regardless of the weight and the position of the style ,!important All have the highest priority .
- The weights are superimposed , But never carry .（ Next, we'll talk about the problem of weight superposition ）
<style>
div {
height: 100px;
/* Layering ： The attribute will be weighted equally CSS Cover */
width: 50px;
margin-left: 50px;
border: black 1px solid;
/* inheritance ： This property is inherited by the child tag */
font-size: 20px;
/* inheritance ： This property will be overridden by the child tag */
font-family: " Regular script ";
}
div {
/* Layering ： This property will override the same weight above CSS */
width: 60px;
}
p {
font-family: " Microsoft YaHei ";
}
</style>
<body>
<div>
<p> Cao Laosan </p>
</div>
</body>
- Weight superposition problem ： The weight of each selector is shown in the table below . The weight of style inheritance is 0, The compound selector makes the weights overlap , The weight can't cross the line ,11 There are no classes id The power of
| Selectors |
The weight |
| 0000 |
0000 |
| tag chooser |
0001 |
| Class selectors and pseudo class selectors |
0010 |
| ID Selectors |
0100 |
| Inline style |
1000 |
| !important |
+∞ |
<body>
<div class="father" id="fatherid">
<div class="child1" id="child1Id"> children 1</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
/* The weight of 0 */
background-color: pink;
}
.child1 {
/* The weight of 0010 */
background-color: red;
}
.father .child1 {
/* The weight of 0020 */
background-color: black;
}
#fatherid .child1 {
/* The weight of 0110 */
background-color: green;
}
#child1Id {
/* The weight of 0100 */
background-color: wheat;
}
#fatherid #child1Id {
/* The weight of 0200 */
background-color: greenyellow;
}
.child1 {
/* The weight of +∞ */
background-color: hotpink !important;
}
</style>