1. How to use CSS in html
Cascading style sheet css
a. in line style
Define a style attribute on the element and write the style in the style attribute
b. inline style
Define a style tag in the header of html and write the style in the style tag
c. external style
Define an external with For files with css suffix, use the link tag in the header of html to introduce @ import 'path of css file'
2. grammar
1 > notes
/ * comments in css*/
Function: record programming ideas; Convenient for later maintenance
/* @import './style.css'; */
2 > declaration
Attribute name: attribute value: color:red; origin: Center / left / right
3 > declaration block
Multiple css declarations are written in one and wrapped through {}, which is the declaration block; Between different statements; Interval. The last one can not be written
4 > Rules
Adding a selector before the css declaration block is the rule of css, and multiple css rules are stacked style sheets
5 > sketch
border:1px solid red; borderWidth ？ border-width
padding: 10px; Inner margin
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px
Margin: outer margin
div{
width: 100px;
height: 100px;
border: 1px solid red;
/* css notes */
}3.css selector
1 > the core selector (basic selector) needs to be mastered
Label selector: div {} p {} input {}
The class selector} uses the class attribute of html one {} can be reused
id selector #box{} uses the id attribute #box uniqueness of html and cannot be reused
Universal selector * {}
<title>Core selector</title>
<style>
div{
border: 1px solid red;
margin-bottom: 10px;
}
.one{
color: brown;
}
#box{
background-color: aquamarine;
}
*{
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="one">1111111</div>
<div id="box">22222222</div>
<div>3333333</div>
<div class="one">44444444</div>
<div>55555555</div>
<p>This is a text label</p>
</body>2 > the level selector {needs to be fully mastered
*The descendant selector is separated by a space. div span
*Progeny selector > greater than sign to separate div > span
Adjacent brother selector + div + * div+span
Then all the brothers ~ p ~ one div~span div~*
div{
width: 100px;
height: 150px;
border: 1px solid red;
margin: 10px;
}
/* Offspring */
/* .box p{
color: blue;
} */
/* Offspring */
/* .box>span{
color: blueviolet;
} */
/* brother */
/* div>p{
color: chartreuse;
}
p+span{
color: aqua;
} */
/* p+*{
color: blue;
} */
/* p~.one{
color: cadetblue;
} */
p~*{
color: blue;
}
</style>
</head>
<body>
<div>
<p>ppppp</p>
<span class="one">span1</span>
<span class="one">span2</span>
<span>span3</span>
<span>span4</span>
<span>span5</span>
</div>
<div>
<p>ppppp</p>
<div>111</div>
<span>span1</span>
<span class="one">span2</span>
<span class="one">span3</span>
<span>span4</span>
<span>span5</span>
</div>
<div>
<p>ppppp</p>
<span>span1</span>
<span class="one">span2</span>
<span class="one">span3</span>
<span>span4</span>
<span>span5</span>
</div>
<div class="box">
<span>111111</span>
<div>
<span>22222</span>
<p>3333333</p>
</div>
</div>
</body>3 > multi selector
Combination selector
Multiple selectors are used in combination to separate labels with common styles. For convenience of writing
Nested selector
Multiple selectors are nested and use div.one with class one
<style>
/* .one{
color: red;
border: 1px solid red;
}
.two{
color: blue;
border: 1px solid red;
} */
.one,
.two{
border: 1px solid red;
}
div.one{
color: red;
}
span.one{
color: blue;
}
</style>
</head>
<body>
<div>1111111</div>
<div class="one">
2222222
<span class="one">span</span>
<div>Gift box</div>
</div>
<div class="two" id="box">33333333</div>
<div class="one two">4444444</div>
</body>4 > attr ibute selector
*[attr] select an element with an attribute, no matter what the attribute value is
*[attr = val] select an element with an attribute and change the value of the attribute to val
[attr^=val] select an element with an attribute, and change the attribute value to start with val
[attr$=val] select an element with an attribute, and change the attribute value to end with val
[attr*=val] select an element with an attribute, and change the attribute value to include val
[attr~=val] select an element with an attribute, and change one of the attribute values to val
<style>
/* [class]{
color: red;
} */
/* [title]{
color: blue;
}
[class^=t]{
color: aqua;
} */
/* [class$=e]{
color: red;
} */
/* [class*=o]{
color: red;
} */
.one{
color: red;
}
.box{
background-color: blueviolet;
}
[class~=one]{
border: 2px solid red;
}
</style>
</head>
<body>
<div class="one box" title="This is a div">
Hello world
</div>
<div class="two">html</div>
<div class="three box" > csssssss</div>
<div class="four" > jjjjjjjj</div>
<div class="five one"> pppppppp</div>
</body>5 > pseudo class selector
Beginning with:,,,, after the selector,,, indicates that the element can only be selected in a special state
Pseudo class selectors related to descendant elements:
: only child: select the only child element
.parent span:only-child{
border:1px solid blue ;
}: first child ， choose to be someone else's first child
: last child ， choose to be someone else's last child
: nth child (n) 3 4 ， 2n ， 2n+1 ， even ， odd ， select as the first child of others
: nth last child (n) select the penultimate child of others
.parent span:first-child{
border:1px solid purple ;
}
.parent span:last-child{
border:1px solid purple ;
}
.parent span:nth-child(odd){
border:1px solid purple ;
}
.parent span:nth-last-child(odd){
border:1px solid purple ;
}: first of type
.parent span:first-of-type {
border:1px solid purple ;
}
: last of type
: nth of type (n) select as the first child in each type of others
: nth last of type (n) select as the penultimate child in each type of others
Pseudo class selector related to element state:
: link # not accessed # a tag
: visited
: hover mouse over
: active mouse long press
: focus state of focus
: blur # lose focus
: checked ， radio buttons and check buttons selected by the user
: default the radio and check buttons selected by default
a:link{
color: brown;
}
a:visited{
color: burlywood;
}
a:hover{
color: aqua;
}
a:active{
color: chartreuse;
}
.one:hover{
background-color: aqua;
}6 > pseudo element selectors pseudo element selectors cannot be used for inline element labels
Pseudo elements start with::, and are used after selectors
The selected content is not a real element, but the selected element content is treated as an element
: after: select nodes that do not exist and fill them with content
:: before select nodes that do not exist before and fill them with content
:: first line select the first line of text
:: first letter select the first text character
:: selection selects the text the user selects
<style>
div{
border: 1px solid red;
}
div::first-line{
color: red;
}
div::first-letter{
font-size: 40px;
}
div::selection{
background-color: blueviolet;
color: azure;
}
div::before{
content: '*';
}
div::after{
content:Kim Kardashian in class;
color: blue;
}
</style>
</head>
<body>
<!-- <div>
erhesrhehtrntfdvdzs Auto coupled nanofiltration, then you're a computer csjcoerhesrhehtrntfdvdzs Auto coupled nanofiltration, then you're a computer csjcoerhesrhehtrntfdvdzs Auto coupled nanofiltration, then you're a computer csjco
</div> -->
<div>html </div>
<div>css </div>
<div>js </div>
</body>4. Priority of selector
1. When the weight is the same, the principle of proximity shall be selected
2. With different weights, the larger the calculated weight, the smaller the coverage will be displayed
! important maximum
In line style property value 1000
id selector property value 100
Class, pseudo class, attribute selector 10
Tag selector, pseudo element selector 1
Space > + ~ * 0
Q: inline style > inline style > external style? Same weight
5. inherit
Some elements in css inherit from the parent element, while others do not
Properties that can be inherited:
color
Font family font size font farily font
Background color list related attributes mouse related attributes visibility
<style>
*{
padding: 0;
margin: 10px;
}
div{
color: red;
font-size: 30px;
border: 1px solid red;
background-color: antiquewhite;
padding: 10px;
}
span{
color:initial;
border:inherit ;
}
</style>
</head>
<body>
<div>
This is a div
<span>This is a span</span>
</div>
</body>
Non inheritable properties
border series padding margin
css provides three special assignments to handle inheritance
inhreit inherits the style of the parent element
initial does not inherit
unset does not set or change the inheritance rules. If you can inherit, you will inherit. If you cannot inherit, you will not inherit