CSS Writing Position

  • The inline type:

    < p style=" margin-top: 1em; margin-bottom: 1em; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; > Content </ tag name >Copy the code

  • Internal style sheets:

    <head>
<style type="text/CSS">Selector (selected tag) {property1: attribute values1; attribute2: attribute values2; attribute3: attribute values3;
    }
</style>
</head>
Copy the code

  • External style sheets:

    <head>
  <link rel="stylesheet" type="text/css" href="CSS file path">
</head>
Copy the code

CSS selectors

  • Label selector:

    Attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }Copy the code

    • Example:

      p{
	color:red;
}

<p>I'm red</p>
Copy the code

    • Advantages: You can select all types of tags, for example, set a common base style for a tag, and then modify the specific style from it.

  • Class selector:

    . Class name {attribute 1: attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }Copy the code

    • Example:

      .para{
	color:green;
}

<p class="para">I'm green</p>
Copy the code

    • Advantages: You can define individual or identical styles for element objects, and you can select one or more labels

  • Id selector:

    Attribute 1: attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }Copy the code

    • Example:

      #box{
	background-color:red;
}

<div id="box">My background is red</div>
Copy the code

    • Advantages: Unique ID and high weight. You can set a unique style for a label without affecting other labels

  • Wildcard selector:

    * {attribute 1: Attribute value 1; Attribute 2: Attribute value 2; Attribute 3: Attribute value 3; }Copy the code

    • Example:

      * { margin: 0; /* Define the margin */ padding: 0; /* Define the inner margin */}Copy the code

    • Usage scenario: In the initial case of the page, remove the page and browser margins

  • Descendant selector:

    Parent child {property: property value; Attribute: attribute value; }Copy the code

    • Example:

      .box p{
	color:red;
}

<div class="box">
    <p>I'm red<p>I'm red</p>
    </p>
    <p>I'm red</p>
    <p>I'm red</p>
</div>
Copy the code

    • Write: Write ancestor elements first, then descendant elements, separated by Spaces

    • Used to select the descendant of the specified element

  • Child element selector:

    Parent > child {color:red; font-size:14px; }Copy the code

    • Example:

      .box>p{
	color:red
}

<div class="box">
    <p>I'm red<p>I'm not red, I'm just offspring not offspring</p>
    </p>
    <p>I'm red</p>
    <p>I'm red</p>
</div>
Copy the code

    • Write the parent element first, then the child element

    • Action: Selects the child elements of the current element, that is, the next level of the element, but does not select the child elements

  • Intersection selector:

    p.para1{
	color:red
}

<div class="para1">I wasn't chosen</div>
<p class="para1">I was chosen</p>
Copy the code
    • Note: Two or more attributes of the label to be selected cannot be added with a space. If a label selector is available, the label is first written
    • Function: Select labels that meet two or more conditions at the same time to increase the accuracy of the selector

  • Union selector:

    p,div,.para{
	color:red
}

<p>I was chosen</p>

<div>I was chosen</div>
<span class="para">I was chosen</span>
Copy the code
    • Written: Each selector passes.Connection and become
    • What it does: If some selectors define the same style, you can use the union selector once to make the code more concise

  • Linked pseudo-class selectors:

    A :link{unvisited link} a:visited{visited link} A :hover{mouse move on the link} a:active{mouse link}Copy the code

    • Example:

      a {   /* a is all the links of the label selector */
			font-weight: 700;
			font-size: 16px;
			color: gray;
}
a:hover {   /* :hover is a link to pseudo-class selector mouse over */
			color: red; /* When the mouse moves over it, the grey color changes to red */
}
Copy the code

    • Effect:

    • (link visited hover active) (link visited Hover active

CSS font Styles

  • The font – size: size

    p {  
    font-size:20px; 
}
Copy the code
    • Action: Sets the font size

  • The font-family: font

    p{font-family: Arial,"Microsoft Yahei".Microsoft Yahei; }Copy the code
    • Function: Set the font type, according to different types, display different font styles, English space or Chinese need to use double quotation marks, multiple font types used.separated

  • Font-weight: the weight of a font

    p{
    font-weight:bold
}
Copy the code
    • Two values:normalThe default value is not bold,boldIf I use numbers in bold, 400normal700 saidboldMore than 700 is still 700 thick

  • Font style

    p{
    font-style:italic
}
Copy the code
    • Default value:normalRepresents a standard font styleitalicRepresents font slant, generally available<em>Labels implement slant fonts

  • Font: Set the font style comprehensively

    The selector {font: font-style font-weight font-size/line-height font-family; }Copy the code

    • Example:

      p{
    font:30px/15px Arial;
}
Copy the code

    • Font size and font family attributes must be reserved, and other attributes can be omitted

CSS Appearance Properties

  • Color: text color

    p{
    color:red
}
p{
    color:#ff00}p{
    color:rgba(255.0.0.1)}Copy the code
    • Three ways to write: English, hexadecimal, RGB/RGBA write, rGBA last value is transparency, 1 is opaque, 0 is fully transparent

  • Text-align: indicates the horizontal alignment of text

    div{
    text-align:center;
}
Copy the code
    • Three attributes:leftLeft-align defaults,rightThe right alignment,centerAlign center
    • Note: The content in the box is horizontally centered, not the box itself, so the attributes should be written on a parent box to align the child elements

  • The line – height: line spacing

    p{
    line-height:32px
}
Copy the code
    • When the line height equals the box height, the text is centered vertically

  • Text-indent: indent the first line

    p{
    text-indent:2em
}
Copy the code
    • unitemIt means the same size as the font, for example2emRepresents two character sizes, i.e. the first line is indent two characters

  • Text-decoration: the text should be decorated

    span{
    text-decoration:none;
}
Copy the code
    • Four values:noneBy default, there is no changeunderlineThe text is underlinedoverlineThe text is underlinedline-throughDelete the line
    • Mainly used to ununderline hyperlinks

Label display mode display

  • Display implements label display conversion

    span{
    display:block;
}
Copy the code

    • Block inline: display:inline

    • Inline transfer block: display:block

    • Display :inline-block