CSS (Cascading Style Sheet): defines how to display HTML elements
CSS selection
Basic selector
Element selector
p< /span>{color:"red";}
ID selector
#i1{
background-color:red;
}
Class selector
.c1{
font-size:14px;
}
p.c1{
color:red;
}
Note:
Do not start the style class name with a number (some browsers don’t recognize it)
If there are multiple class attributes in the tag , Separated by spaces
combination selector
Descendant selector
/*Set the font color of the a tag inside li*/
li a {
color: green;
}
Son selector
/*Select all elements whose parent is a
element*/
div>p {
font-family: "Arial Black",arial-black cursive;
}
Adjacent selector
/*Select all the elements that follow the
element*/
div+p {
margin:5px
}
Brother selector
/*All brother p tags behind li*/
#li~p {
border: 2px solid royalblue;
}
Attribute selector
/*Used to select elements with specified attributes. */
p[title]{
color: red;
}
/*Used to select elements with specified attributes and values< span style="color: #008000;">*/
p[title="213"] {
color: green;
}
Grouping and nesting
Grouping
div,p {
color:red;
}
div and P uniformly set the font to red
nested
.c1 p {
color: red;
}
Set the font color of all p tags in the.c1 class to red
Pseudo-class selector
/*Unvisited links*/
a:link{
color:grey;
}
/*Move the mouse over the link*/
a:hover {
color: red;
}
/*Selected link*/
a:active {
color:blue;
}
/*Link to visit*/
a:visited {
color: orange;
}
/*input input box gets focus style*/
input:focus {
outline: none;
background-color:red
}
Pseudo element selector
first-letter
Commonly used to set special styles for the first letter:
p:first-letter {
font-size: 48px;
color:red;
}
before
/* Insert content before each element
*/
p:before {
content:" *";
color:red;
}
after
/* Insert content after each element
*/
p:after {
content:"[?]";
color:blue;
}
Before and after are mostly used Clear float
Selector priority
p{color:"red";}< /pre>#i1{
background-color:red;
}
.c1{
font-size:14px;
}
p.c1{
color:red;
}
/*li The internal a tag sets the font color*/
li a {
color: green;
}
/*Select All parent elements of
elements*/
div>p {
font-family: "Arial Black",arial-black cursive;
}
/*Select All elements following the
element*/
div+p {
margin:5px
}
/*All brother p tags behind li*/
#li~p {
border: 2px solid royalblue;
}
/*Use To select elements with specified attributes. */
p[title]{
color: red;
}
/*Used to select elements with specified attributes and values< span style="color: #008000;">*/
p[title="213"] {
color: green;
}
div,p {
color:red;
}
div and P uniformly set the font to red
.c1 p {
color: red;
}
Set the font color of all p tags in the.c1 class to red
/*< /span>Unvisited links*/
a:link{
color:grey;
}
/*Move the mouse over the link*/
a:hover {
color: red;
}
/*Selected link*/
a:active {
color:blue;
}
/*Link to visit*/
a:visited {
color: orange;
}
/*input input box gets focus style*/
input:focus {
outline: none;
background-color:red
}
p:first-letter {
font-size: 48px;
color:red;
}
/*in Insert content before each element
*/
p:before {
content:" *";
color:red;
}
/*in Insert content after each element
*/
p:after {
content:"[?]";
color:blue;
}