Front end CSS

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

 Share picture

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;
}

WordPress database error: [Table 'yf99682.wp_s6mz6tyggq_comments' doesn't exist]
SELECT SQL_CALC_FOUND_ROWS wp_s6mz6tyggq_comments.comment_ID FROM wp_s6mz6tyggq_comments WHERE ( comment_approved = '1' ) AND comment_post_ID = 5726 ORDER BY wp_s6mz6tyggq_comments.comment_date_gmt ASC, wp_s6mz6tyggq_comments.comment_ID ASC

Leave a Comment

Your email address will not be published.