Add styles to pages (selectors and declaration blocks)

css rule = selector + declaration block

Simple selector

The role of selectors: to help developers precisely select the elements they want

id selector

The element corresponding to the Id value is selected (the element is followed by id, corresponding to the #suffix in the declaration block)

    <style>
        #text{
            color: red;
            background-color: black;
        }
    </style>
</head>
<body>
    <p id="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni natus mollitia nobis exercitationem delectus odit obcaecati explicabo. Tenetur laboriosam vero sapiente illum iure, corrupti a, consequuntur esse unde sed tempora magni molestiae vel fugiat blanditiis, ipsa tempore in quisquam maxime sint porro aliquam ullam debitis. Earum debitis, asperiores doloremque explicabo non dolorem quia rerum, nostrum, odio quibusdam eveniet nihil? Debitis sunt consequatur, assumenda quam minima labore architecto maiores autem delectus aspernatur harum, mollitia commodi iste, enim qui explicabo libero. Rem neque quisquam veritatis repudiandae, fugiat tempore nemo, delectus eos eius voluptas corrupti ipsam ab perspiciatis optio maxime similique id voluptate.</p>

</body>

element selector

Write the elements of the desired style directly in the declaration block, separated by multiple available','

    <style>
        p,q{
            color: #666;
        }
        .apple{
            background-color: blue;
        }

    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, porro.</p>
    <q>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, necessitatibus.</q>
    <biockquote class="apple">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, debitis quidem esse, sapiente minus odit aliquid maxime perferendis voluptate iste provident beatae eligendi necessitatibus illo corrupti fuga neque laudantium? Dolore.</biockquote>
    <h2 class="apple">Nonyang Weixian, Song Guo.</h2>

</body>
</html>

Class selector

Element followed by class attribute, declare block referenced with. suffix

Wildcard Selector

Simply use a * reference in the declaration block

    <style>
        *{
            color: lightblue;
        }
    </style>
</head>
<body>
    <div>Beautiful moon cause.</div>
    <p>Gengxueton disease.</p>
    <h1>Improper General.</h1>
</body>
</html>

attribute selectors

1. Write in [] the common attributes of the elements you want to add styles to

        [href]{
            color: purple;
        }   
    </style>
</head>
<body>
    <a href="https://Www.baidu.com ">Baidu</a>
    <a href="https://Www.taobao.com ">Taobao</a>
    <a href="https://Www.douyu.com ">Dogfish</a>
</body>
</html>

2. Represents an element with an attribute named class that is a space-delimited list of values with at least one value of 2

        [class~="2"]{
            background-color: black;
        } 
    </style>
</head>
<body>
    <a class="1 2 3" href="https://Www.baidu.com ">Baidu</a>
    <a href="https://Www.taobao.com ">Taobao</a>
    <a href="https://Www.douyu.com ">Dogfish</a>
</body>
</html>

Pseudo Class Selector

Select a state of certain elements

1.link (the state of a hyperlink when it is not accessed)

2.visited (hyperlink visited status)

3.hover (Mouse Up Style, Mouse Hover State)

4.active (Active, mouse-down)

Generally coded in the order above, i.e.'Law of Love and Hate'

5.first-child

Select the first child element

first-of-type

Selects the first element of a specified type among neutron elements

6.last-child

Select the last child element

last-of-child

Selects the last element of a specified type among neutron elements

7.nth-child

Select the specified nth child element

Even, even number is selected

Odd, then odd     (This attribute value can be used in the interlace discoloration of table elements)

nth-of-child

Nth of the nth specified type of neutron element selected

-child

    <style>
        a:link{
            color: green;
        }
        a:visited{
            color:purple ;
        }
        a:hover{
            color: rgb(206, 24, 24);
        }
        a:active{
            color: chocolate;
        }
    </style>
</head>
<body>
    <a href="https://Www.baidu.com ">Baidu</a>
    <a href="https://Www.taobao.com ">Taobao</a>
    <a href="https://Www.douyu.com ">Dogfish</a>
</body>
</html>

Pseudo Element Selector

1.before

Generate and select the first child element within an element

2.after

Generate and select the last child element within an element

    <style>
       span::before{
           content: "#";
           color: pink;
       }
       span::after{
           content: "#";
           color: purple;
       }
    </style>
</head>
<body>
    <p>I like to play<span>Shooter</span>And Assassins</p>
</body>
</html>

3.first-letter

The first letter of the selected element

4.first-line

Text on the first line of the selected element

5.selection

Select text selected by user box

Combination of selectors

1. And

Finish writing without any space between elements or selectors and attributes

    <style>
        p.cat{
            color: purple;
        }
    </style>
</head>
<body>
    <p class="cat">King Te Dust could see that there was a certain emperor who took all the shocks.</p>
    <q>Why do you want to win or win? How do you accept the Qin genus?</q>
</body>
</html>

2. descendant elements     (much used in actual development)

Spacing must be used between descendants and ancestors

    <style>
        div li{
            color: purple;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
        </ul>
    </div>
</body>
</html>

3. Child Elements     (Not much used in actual development)

Connect child elements to their corresponding parent elements with >

4. Elements of Neighboring Brothers

Brothers can be modified by + linking between sibling elements (can be applied to multiple lists)

    <style>
        .dog{
            color: purple;
        }
        .dog+li{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>lorem1</li>
            <li>lorem1</li>
            <li class="dog">lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
            <li>lorem1</li>
        </ul>
    </div>
</body>
</html>

5. Brotherhood Elements

Brothers elements are ~linked and can only be modified for all brothers below (can be applied to multiple lists)

Parallel Selector

Multiple selectors, separated by ","

css code writing location

1. Internal Style Sheet

Write in style element (in head er)

2. Inline Style Sheet (Element Style Sheet)

Write directly in the element's style attribute

3. External style sheets

Write styles in separate css files

Common style declarations

1.color

Text element inside element

Two writing formats: preset value, i.e. color words such as red black chocolate

                          The color values of the three primary colors, the optical three primary colors (red, green, blue) Each element can be expressed in numbers between 0 and 225

                          Hexadecimal representations such as  # 668282

Taobaohong: #ff4400     Black: #000     White: #fff     Red: #f00     Green: #ofo     Blue: oof     Purple: fof    

Cyan: #off     Yellow: #ffo     Gray: #ccc

2.background

Difference: Usually img elements are HTML concepts and background images are css concepts

img elements must be used when pictures belong to web content

Background images must be used when pictures belong to web beautification (only for use)

1.background-image:url("")

Write picture path in quotation marks

2.background-repeat:repeate

By default, the background image repeats in both horizontal and vertical coordinates

Attribute value: repeat-x repeats on the X axis

repeat-y repeats on the Y-axis

no-repeat means no repeat

3.background-size: contain;    

Background size, contain (no damage)     Cover (full)

Writable values or percentages in parentheses

4.background-position: left

Set the location of the background image:

The default value (left,button,right,top,center) can also be numeric

Sprite background-position with width, height implementation

5.background-attachment: fixed

It is often used to control whether the background image is fixed (relative to the viewport)

6. Blend background map with Beijing color

Solve bottom white edge problem

7. Shortcut Properties

Write position first, then size, using    /   Separate

Use PX COOK for Pixel Size Measurement

ALT+mouse wheel for zooming       Space+Mouse Drag

3.font-size

Size size of text inside an element

1) px:pixel     (absolute units)

2) em: relative unit, relative to the font size of the parent element.

Each element must have a font size, and if not declared directly, the parent element font size is used.

Use base font size if there is no parent element

4.font-weight

Text thickness can be numeric or preset.

No bold normal     Bold

5.font-family

Text type, there are: consolas, elegant-simple, Microsoft Yahei, Arial, etc.

Fonts that exist on the user's computer must be valid, using multiple fonts to match different environments.

sans-self       sans-serif

6.font-style

Font style, usually italicized

The default style is an oblique font; Actual use, usually used to represent an icon

>strong.Default bold

>em.italics

7.text-decoration

>a Element

>del element: obsolete content (error)

>s Element: Expired Content

8.text-indent: 2em   2px

First line text indentation

9.line-height

Vertical Centering       Take the value height

The greater the height of each line of text, the greater the distance between each line of text.

Set the line height to the height of the container to center the unit text vertically.

The line height can be set to a pure number to indicate the size of the font relative to the current element.

Two usages: can be written in body, can be written in style

10.width

width

11.height

height

12.letter-space

Text Spacing

13.text-align

Horizontal, center ed arrangement of text within an element

left Left       right

Tags: html css

Posted on Fri, 26 Nov 2021 12:45:20 -0500 by JayNak