CSS style, I also talked about it a little bit when I learned the structure of HTML. Probably know how to use CSS styles. Now, let's talk about the usage of CSS systematically, and some structures about CSS styles.

Reference article: CSS Background Image Repeat (w3schools.com)

1. Introduction to CSS

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are displayed on screen, paper or other medium
CSS saves a lot of work. It can control the layout of multiple web pages at once
External style sheets are stored in CSS files

2. CSS syntax and basic usage

Basic structure: syntax, selectors, usage methods, annotation methods

CSS rules consist of selectors and declaration blocks.

grammar:

Analysis:

There are five types of CSS selectors, some of which are also described in HTML.

1. CSS element selector (some HTML basic elements)

For example: p{ } h1{ } div{ }

2. CSS id selector (custom HTML element)

For example: #dada{ }

3. CSS class selector (elements customized using class)

For example: .dada{ } or: p.dada{ } //In this usage, you can specify the dada attribute of an element p!

4. CSS Universal Selector

Use *{} to directly apply to all css elements.

5 group selectors (that is, to put some elements with the same css style together to reduce the amount of code)

p，h1，div{ }

Three ways to use CSS:

1. External CSS (that is, a custom style sheet, and then specify the style sheet. <link rel="stylesheet" href="mystyle.css"> )

Note: Some attributes in the css style, do not have spaces! ! ! For example: witdh:300px There should be no spaces in this.

2. Internal CSS (that is, the CSS style placed in the head)

3. Inline CSS (declared using the style style inside!)

Note: In the case where the above three methods are used, the priority of the inline style is greater than the previous two!

Annotation method:

In html, the annotation method is:

In CSS, the comment method is: /* */

CSS colors and backgrounds

The introduction of CSS color and HTML is the same, here is an extra memory for the element of transparency.

In CSS colors, you can use opacity to represent transparency:

div {
background-color: green;
opacity: 0.3;
}

You can also use RGBA to add transparency:

div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

background-color
background-image
background-repeat
background-attachment
background-position
background(shorthand property)

background-color: background-color

Background image: background-image:url("");

Background Image Repeat: Set No Repeat: background-repeat: no-repeat, repeat-x, repeat-y.

background-image-position: background-position: left top

Background image attachment: background-attachment: fixed, scroll. (one is fixed position)

Shorthand background-image properties:

For example: equivalent to including all the above attributes

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

CSS borders, margins, padding

Border properties:

border-style: Set the style of the border , such as: solid. Indicates bold.

solid, dotted (dotted border), none, double

border-width: The width of the border . (That's the width of the black line.)

It has four borders, top, right, bottom, left. (In clockwise order.)

border-color: border color , it also has four borders.

border-radius: Set the rounded border .

The above four borders can also be written like this: border-top-color (Which border is written first.) Or do not write the border, directly write 2px, it will be automatically filled according to the order.

Margin attribute: margin

It also has four attributes. In addition, learn an inheritance property inherit. (The inheritance attribute is interesting. If you use inheritance, it has some similarities with the display page of padding.)

For example: <div> is the parent class, which defines a border of 1px. The empty space of the right border is 100px.

<p.ex1> is also a block element, which belongs to the div frame, after adding inheritance attributes. It will be 100px from the border of the div.

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>


<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

Note: In the way of inheritance, only the margin can be inherited, and the style cannot be inherited. For example, in the above example, it only inherits the margin, and the property of the border 1px is not inherited.

Two margins collapse into one margin:

collapse, for example, define the bottom margin of the upper element as 100px. The top margin of the next element is 20px. Logically, it is 100px+20px. A total of 120px distance, however, is actually only 100px. This is folding.

Padding: padding

It also exists four border properties. It is actually the distance between the inner block element and the outer border. It exists in two ways. One is that the width of the entire border remains unchanged after adding the padding attribute, and the other is that it changes.

It is often used with the box property. First look at what will change: directly add the padding attribute, it will change the size of the entire border with the size of the padding.

To keep the width of the entire border unchanged, add the box-sizing attribute.

For example:

div { width: 300px; padding: 25px; //No matter how you change this value, the entire width will not change. box-sizing: border-box; }

CSS height/width, box model, outline

The width and height of CSS are different from the width of the border learned earlier! ! ! One refers to the border, the width of the line, and the other refers to the width of a certain attribute.

auto- It's the default value. Browser calculates height and width
length- Define height/width in px, cm, etc.
%- Define the height/width percentage of the containing block
initial- set height/width to their default values
inherit- height/width will be inherited from its parent value

max-width: max-width:

Box model:

Content - the content of the box that displays text and images
Padding - Clears the area around the content. fill is transparent
border - a border around padding and content
Margin - Clears the area outside the border. margins are transparent

Outline:

Its essence is actually the part outside the border. Note that it is different from the border and also different from the margin. Outlines exist that may overlap with other parts.

outline-style
outline-color
outline-width
outline-offset
outline

Outline style: outline-style Its attributes are the same as the border style.

Outline offset: outline-offset It will offset some empty space outside the border. A bit like margin.

But it’s a little different. The change of the outline will not affect the overall change, unlike the previously learned border change, which will cause the entire box size to change, unless box-sizing:border-box is added.

(Before the outline is offset, it is equivalent to the border. After the offset is added, it will have some space from the border)

Simple usage: (Fill in order, the same as the simple way of writing the frame)

outline-width
outline-style(required)
outline-color

css text

Text color: color //Unlike others, it only needs one color element.

Text alignment:

text-align
text-align-last
direction
unicode-bidi
vertical-align

text-align: center, left, right, justify. //Left or right alignment, center alignment or both ends alignment

text-align-last: Format of the last line of text.

direction: Indicates the direction of the text.

For example: p { direction: rtl; unicode-bidi: bidi-override; } //Indicates the reversed direction.

vertical-align: baseline, text-top, text-bottom. The way to align vertically. baseline is the default way.

Text decoration (underline text-decoration):

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

text-decoration-line: Decoration line. overline, underline, line-through (overline, underline, middle line)

text-decoration-style: the style of the decoration line, note that you must first write the decoration line attribute before you can write this.

text-decoration-thickness: The thickness of the decoration line.

Easy usage: (Fill in order.)

text-decoration-line(required)
text-decoration-color(optional)
text-decoration-style(optional)
text-decoration-thickness(optional)

For example: p { text-decoration: underline red double 5px; }

Note: text-decoration: none. Indicates no underscore.

Text transformation (text-transform): text-transform: uppercase; (uppercase), lowercase; capitalize; (capitalize the first letter)

Text Spacing:

text-indent
letter-spacing
line-height
word-spacing
white-space

text-indent: Text indentation (that is, first line indentation). text-indent: 50px;

letter-spacing: letter spacing. letter-spacing: 5px;

word-spacing: word spacing.

line-height: Line height. line-height: 0.8; (Note that only its property value is 0.8. No px)

white-space: Blank, prohibit line breaks. white-space: nowrap;

Text shadow (text-shadow):

Its order is: horizontal, vertical, blur (optional), color.

For example: h1 { text-shadow: 0 0 3px #ff0000; }

CSS fonts, icons, links

There are many kinds of fonts. In English fonts, please remember the two most commonly used ones: Serif and Sans-serif.

Sometimes, writing will appear in multiple fonts. This is used as a backup font, that is, when the first font is not found, the following font is used.

font-family : font style.

font-style: Font shape. normal (normal), italic (italics). Here, I feel a little confused. In the study of the front border, there is a border-style: solid (black solid line.)! ! ! Oh oh oh, it's different.

font-weight: Font weight. (It has a bold attribute, which means bold. It is separate from the previous style style. It cannot indicate font size, only thickness.)

font-variant: Font variant. (this is rarely used)

font-size: font size. It should be noted here that the font size is the font size, and the font size cannot be used to represent information such as titles h1~h6. It exists in three forms: vw, px, em.

vw changes as the view (browser page) changes (1vw = 1% of the viewport width. If the viewport is 50 cm wide, 1vw is 0.5 cm.). px is pixels. em is equivalent to 16px.

Shorthand font:

font-style （样式只有斜体和正常）
font-variant （变体，不常用，可选）
font-weight
font-size/line-height （必选）
font-family （必选，字体选择）

For example:

pa { font: 20px Arial, sans-serif; (Followed by a font selection.) }

icon:

This introduction is less, it is recommended to read the online information and add it yourself. Its tag is <icon>. Links can also be used.

<i class="glyphicon glyphicon-cloud"></i> //Check the information.

CSS link:

The tag of the link is <a href="">

Its style has four attributes, and the four link states are:

a:link- a normal, unvisited link
a:visited- Links the user has visited
a:hover- the link when the user hovers over it
a:active- The moment the link is clicked

It is also often used with text modifiers: text-decoration: none; // Without this sentence, the link will be underlined.

There are background colors, buttons.

Example: This is a button link.

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

<a href="default.asp" target="_blank">This is a link</a>

CSS lists, tables

In the previous HTML, we learned about unordered (ul) and ordered (ol) lists.

list-style-type: list style. circle, square.

list-style-image: List image. url("")

list-style-position: The position of the list. Two types: outside (the serial number of the list is placed outside the div), inside

sheet:

HTML learned <table>, <tr>, <th>, <td>.

Their attributes are mainly <border>. (the border of the table)

border-collapse: Collapse the table . border-collapse: collapse; //Indicates that a single border is used. Because they are double borders by default.

td——text-align: Align the text in the table.

For example: td{text-align:center;} //Center alignment.

Note: The th element is center-aligned by default, while the td element is left-aligned by default.

td - vertical-align: vertical alignment. The text will be lower left.

Sometimes, form filling is also used: padding.

th, td - border-bottom: Horizontal divider. Equivalent to only a horizontal line.

tr - tr:hover{ background-color: } . Mouseover table. The color will appear in a row on mouseover.

tr:nth-child(even){background-color: }. Stripes the table.

Responsive table: (Interesting pinch.)

In fact, that is, it has an extra sliding bar that can slide.

CSS display properties, maximum width, position (positioning)

When learning these three knowledge points, first introduce block elements and inline elements. This has been introduced a bit in HTML. This is very important. For example: block element, its characteristic is that it always starts from a new line, and its area always extends to both sides as much as possible.

Inline elements, which are characterized by on-demand occupancy, do not start on a new line.

Display: In fact, it is the display attribute and the visibility attribute.

display:none (will hide all the attributes defined by it, and will not display it on the interface)

display: inline. Turn block elements into inline elements.

For example: li is originally a list, which is a block element. After using the inline element, it becomes one line.

li {
  display: inline;
}
<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

display: block. Convert inline elements to block elements.

For example: a is an inline element. It was originally displayed in one line. After being converted into a block element, it will occupy one for each line.

a {
  display: block;
}

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

visibility: hidden . //Hide an element view, there will still be leftover space.

Set width and max-width:

The purpose is to prevent, like a block element, it will extend to both sides as much as possible. Set width or max width. You can solve this problem.

At the same time, set margin:auto. You can make this block element in the center position.

Position or position:

There are five different position values:

static
relative
fixed
absolute
sticky

position: static; //Static position, will not be changed by css styles of other properties. For example, add left:20px. This original attribute will not be sidelined.

position: relative; //The relative position is changed by the css style of other attributes, but the block element size of the entire element remains the same, it only shifts.

position: fixed; //Fixed position, it is a view position. This is not good. Because it will cover the view of the original css. It is a position similar to an inline property.

position: absolute; // absolute position. It is relative to the parent element. It is generally placed inside the frame of the parent element. Custom css styles in the parent element.

position: sticky; // sticky position. It is equivalent to a block-level element. It will change with the slide of the slider bar. And it will not overwrite the original view. ( This is interesting.) (It should be noted that this attribute is not supported in some browsers, and some components need to be added. For example: Safari browser, you need to add position: -webkit-sticky; and then use this attribute. )

CSS index, overflow, float and clear

Z-index:

This element enables it to overlap other views. Usually with position: relative, absolute. Use together. Its main function is to decide, among multiple images, which image is placed on top.

For example: z-index:3 is better than z-index:1. to be placed on top of 1.

Note: If this index element is not added. For the overlapping of multiple images, the default is that the last element is placed on top.

overflow overflow:

It has four properties: visible, auto, hidden, scroll.

overflow:visible; It keeps the text as it is, it will show even though the text goes out of the frame.

overflow:hidden; for text that exceeds the frame, it will be formatted.

overflow:auto; It will automatically adjust the frame size according to the size of the text.

overflow:scroll; It generally sets the frame size in advance, and if the text exceeds this range, a sliding bar will appear. Note that this property has two values. overflow-x. overflow-y.

Float and clear (float, clear):

Four values exist for float properties:

left- The element floats to the left of its container
right- The element floats to the right of its container
none- Elements will not float (will appear where they occur in the text). It's the default value
inherit- The element inherits the float value of its parent element

The floating property is somewhat similar to the position property. But it's not at all different. The position position attribute generally overlaps, but the floating attribute does not overlap. For example:

div1, div2, and div3 are three block elements respectively. Pretty much each takes up one line.

When float:left is set, it becomes an inline element. output on one line only.

div {
  float: left;
  padding: 15px; 
}

<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>

Clear element clear:

It has the following property values:

none- Elements are not pushed below left-floated or right-floated elements. It's the default value
left- the element is pushed to the bottom left of the floating element
right- the element is pushed below the right floated element
both- element is pushed below both left and right floated elements
inherit- The element inherits the clear value from its parent

Clear elements are fun to pinch.

It explains the nature of floating elements, which are generally used in conjunction with floating elements. For example, in the following example, before clear is added, it will be used as an inline element and placed on the left side of the text.

After adding the clear attribute, it changes from an inline element to a proper block-level element, starting on a new line, without overlapping. (It is a block-level element of auto type.)

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}

CSS inline block, CSS alignment

Inline-block:

Represents a block-level element acting inside an inline element.

In general, block-level layout occupies a single line and extends as far as possible. The block-level elements only occupy the set width size.

Here, the layout of the inline block element is to occupy a single line in the set inline element. (Set up the navigation bar.)

For example:

Use inline-blocks to create navigation links:

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

//nav是块级元素。在<li>设置内联块元素。
<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#clients">Our Clients</a></li>  
  <li><a href="#contact">Contact Us</a></li>
</ul>

CSS horizontal and vertical alignment:

margin:auto sets the center of block-level elements. (Not text centered)

text-align: center; the text is centered.

Sometimes it is possible for an element to have an image outside the block-level frame. At this time, you need to use Clear to repair the element. clearfix hack

Clear fix element:

code element:

.clearfix::after {
content: "";
clear: both;
display: table;
}

line-height: vertically centered.

transform: translate(%, %) Use a positional transform.

flebox: flexible box.

CSS combinators, pseudo-classes, pseudo-elements

Combiner:

There are four different combinators in CSS:

descendant selector (space)
child selector (>)
Adjacent sibling selector (+)
Regular sibling selector (~)

Descendant selector: It selects all p elements that are descendants.

div p {
background-color: yellow;
}

Child selector: > It will only select p tag elements inside div elements

div > p {
background-color: yellow;
}

Adjacent sibling selector (+): It follows the next p element of the div element. If it is not the following element, it will not work. Note that it is not the p element nested in the div element.

div + p {
background-color: yellow;
}

Regular sibling selector (~): It selects all p elements following the div element.

div ~ p {
background-color: yellow;
}

Pseudo-classes: Elements used to define special syntax. Syntax: is the colon: form.

We have learned before: a:hover, a:link, a:visited, a:active.

Simple tool hover method: //Put the hover method before the p element.

div:hover p {
display: block;
}

p:first-child //Match the label of the first p element.

:first-child

pi:first-child //Match the first i element of the p tag. Subsequent i elements will not have this effect.

p i:first-child {
color: blue;
}

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

p:first-child i //Match all i elements after the p tag. All subsequent i elements will have this style.

Pseudo-elements: The syntax is represented by ::.

::first-line //The style of the first line of text

::first-letter //The initial letter style of the first line of text

::before //The picture placed before the text.

For example: h1::before { content: url(smiley.gif); }

::after //The image placed after the text.

::marker //The text of the marker. For example, elements such as li and ul.

Learning CSS Style Sheets

1. Introduction to CSS

2. CSS syntax and basic usage

Basic structure: syntax, selectors, usage methods, annotation methods

CSS colors and backgrounds

CSS borders, margins, padding

CSS height/width, box model, outline

css text

CSS fonts, icons, links

CSS lists, tables

CSS display properties, maximum width, position (positioning)

CSS index, overflow, float and clear

CSS inline block, CSS alignment

CSS combinators, pseudo-classes, pseudo-elements

Guess you like