CSS study notes (first acquaintance)

1. Definition

CSS is a Cascading Style Sheet (Cascading Style Sheet), also known as Cascading Style Sheet, or style sheet for short.

2. Function

(1) Used for the definition of element styles in HTML documents. Realize the separation of content and performance.

(2) Improve the reusability and maintainability of the code. The file extension is .css.

3. The relationship between css and HTML

(1) HTML is used to build the structure of the web page
(2) CSS is used to build the style of HTML elements
(3) HTML is the content of the page, and CSS is the performance of the page

结构层 HTML
表示层 CSS
行为层 JS

4. The way to import CSS

(1) Inline method
directly add the CSS code to the start tag with the style attribute

 <p style="color:gold;" >金色字体</p>

(2) Internal style
directly add the CSS code to the style tag of the head

 <style>
     p{
    
    color:red;}
 </style>

(3) External style sheet

<link rel="stylesheet" href=""/> 

(4) Lead-in

<style>
     @import url(style.css);
</style>

优先级：行内样式>内部样式>外部样式>导入样式

5. CSS style sheet features

• Inheritance
• Cascading
• priority

6, CSS basic selector

• Universal selector, global selector (*)
  • Can match any element
  • Often used to set some default styles, the
    lowest priority
• Element selector
  • Elements
    p, b, div, a, img, body, etc. in HTML documents
• Class selector
  • Such as: .body{color:red;} The
    class name cannot start with
    a number . The class name in a page can be repeated
• ID selector
  • #box{color:skyblue;}
    id's name cannot be repeated. ID attribute is unique
• Merge selector
  • Syntax: Selector 1, Selector 2, ...{}
    can extract common styles and reduce repetitive codes

7, CSS basic style

• font-style Set whether the text is italic
  normal (normal font). The default value is
  italic. For
  example:

p{
    
    font-style:italic;}     /*  倾斜 */

• font-family defines the text to use a certain font

p{
    
    font-family:microsoft YaHei;}

可以设置多个字体，排名越靠前优先级越高 默认值由浏览器决定

• font-weight specifies the thickness of the text

p{
    
     font-weight:normal;}   /*  默认值  */
p{
    
     font-weight:bold;}   /*  粗体  */

font-style 、 font-weight 、 font-size 、line-height 、 font-family

• Text attributes
  • text-decoration Set whether the text has a decoration line, the default value is none

p{
    
    text-decoration:underline;}   /*   指定文字的修饰线是下划线  */
p{
    
    text-decoration:overline;}   /*   指定文字的修饰线是上划线  */
p{
    
    text-decoration:through;}   /*   指定文字的修饰线是贯穿线，类似于删除标签的效果  */

常用text-decoration:none;来去除a标签的下划线

• text-indent text indent
  • The text indent property is used to specify the indentation of the first line of text, and
    it can also hide the text in a box. For
    example

p{
    
    text-indent:2em}    /*  首行缩进2个文字的大小  */
p{
    
    text-indent:-9999em;}    /*  用来隐藏文本   */

1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px， 那么，1em的默认大小是16px

• word-wrap Set whether to wrap the current line when it exceeds the boundary of the specified container

  • If the word in the container is too long, it will cause the long word to overflow if it exceeds the width of the container itself
  • word-wrap:break-word; can set the text that is too long to wrap automatically.

• line-height Set the line height of the object ( 不允许使用负值)
  normal Default, set a reasonable line spacing
  number Set the number, this number will be multiplied by the current font size to set the line spacing

8. Box model

The box model mainly defines four areas: content, padding, border, and margin.

All document elements (labels) will generate a rectangular box, we become the element box (element box), which describes the position and size of a document element in the page layout summary. Therefore, in addition to its own size and location, each box also affects the size and location of other boxes.
Box model features:

• Each box has 4 attributes: border, border, padding, and content;

• Each attribute consists of 4 parts: top, right, bottom, and left. The 4 parts of the attribute can be set at the same time or separately.
  

• border
  : border-width || border-style || border-color
  注意：顺序不能错误。
  When the style attribute is empty, the entire border will not appear. If width is not written, there will be a default three-like value, and if the color is not written, it will default. Is black.

  border-radius: upper left corner, upper right corner, lower right corner, lower left corner;

border-radius: 10px 40px;   /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
border-radius: 10px 40px  80px;  /* 左上角 10    右上角  左下角 40   右下角80 */
border-radius: 10px 40px  80px  100px; /* 左上角 10  右上角 40  右下角 80  左下角 100 */

扩展：
table{ border-collapse:collapse; }
collapse 单词是合并的意思，通过该属性可以来设置一个细线表格

• Margin
  margin is the blank area around the border of the element, it will create extra blank area outside the element, the margin is transparent

  单边设置：
  margin-top/right/bottom/left:value;
  value可取值为像素、%、auto、负值
  外边框简写：
  margin:value(四个方向相同);
  margin:value(上下) value(左右)；
  margin:value(上) value(左右) value(下);
  margin:value(上) value(右) value(下) value(左)
  

Extension 1: The box is centered horizontally

You can make a box horizontally centered, and you need to meet the following two conditions:

• Must be a block-level element.

• The box must have a width (width)

• Then set the left and right margins to auto, so that the block-level elements can be centered horizontally.

.header{
    
     width:960px; margin:0 auto;} 

Extension 2: Clear the default inner and outer margins
of the elements In order to more easily control the elements in the webpage, when making the webpage, you can use the following code to clear the default inner and outer margins of the elements:

* {
    
    
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

Tips: Inline elements have only left and right margins, but no top and bottom margins. Inner margins will also have problems in lower version browsers such as ie6. We try not to specify upper and lower inner and outer margins for inline elements.

Extension 3: Margin merge

(1) Merging of the vertical outer margins of adjacent block elements (vertical collapse of outer margins)

When two adjacent block elements meet, if the upper element has a lower margin-bottom and the lower element has a upper margin-top, then the vertical spacing between them is not margin-bottom and margin-top The sum, but the larger of the two. This phenomenon is called the merger of the vertical margins of adjacent block elements (also called margin collapse ).

Solution: Just avoid it. Generally, margin-top or margin-bottom is added to one element, and it is not necessary to add margin-top or margin-bottom to two elements at the same time.

(2) Combining the vertical margins of nested block elements

For two nested block elements, if the parent element has no top padding and border, the top padding of the parent element will be merged with the top padding of the child element, and the combined padding will be the larger of the two. Larger, even if the top margin of the parent element is 0, the merge will occur.

Solution:
(1) A 1-pixel top border or top padding can be defined for the parent element.
(2) You can add overflow: hidden for the parent element.

• padding

  内容区域和边框之间的空间，会扩大元素边框所占用的区域
  

Syntax: padding:value;
unilateral setting:
padding-top/right/bottom/left:value;
value can be pixels, percentages, but not
a shorthand for negative padding:

   padding:value(四个方向相同);
   padding:value(上下) value(左右);
   padding:value(上) value(左右) value(下);
   padding:value(上) value(右) value(下) value(左);

• Content (content) width and height (width and height)

Use the width attribute width and the height attribute height to control the size of the box.

The attribute values ​​of width and height can be values ​​in different units or percentages relative to the parent element. The pixel value is the most commonly used in actual work.
Most browsers, such as Firefox, IE6 and above, have adopted the W3C specification. The calculation principles for the total width and height of the box model conforming to the CSS specification are:

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：
1. The width attribute width and the height attribute height are only applicable to block-level elements and are invalid for inline elements (except img tag and input).
2. When calculating the total height of the box model, the combination of the vertical margins of the upper and lower boxes should also be considered.
3. If a box does not have a given width/height or inherits the width/height of the parent, padding will not affect the size of the box.

(4) Layout stability of the box model

According to the stability, the recommendations are as follows:
use width first, then padding, and then margin.

width > padding > margin

Reason:
Margin will have the margin merging and the bug of doubling the margin under ie6 (annoying), so I used it last.
Padding will affect the size of the box, and it needs to be added and subtracted (troublesome) and then used.
There is no problem with width. We often use the width remaining method and the height remaining method to do it.

(5) Box shadow
box-shadow: horizontal shadow vertical shadow blur distance shadow size shadow color inner/outer shadow;

• The first two attributes must be written. The rest can be omitted.
• The outer shadow (outset) is the default value, but it cannot be written, just write inset if you want the inner shadow.
• You can add multiple shadows, such as adding inner and outer shadows at the same time

/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

9, background background

1.background-color: set the background color of the box. The background color can be filled with padding or margin.
2.background-image: set the background image of the box. The img tag is also a box. You can also set a background image for the img box.

• A box is exactly the same size as the background image: it fits in
• If a box is larger than the background image: it will be tiled on the x and y axis by default
• If a box is smaller than the background image: only a part of the background image will be displayed. The upper left corner of the background image is aligned with the upper left corner of the box. The upper left corner refers to the padding, but the border will also be filled with the background image

3. background-repeat: control whether to tile
repeat-x only tile x axis repeat-y only tile y axis repeat x and y axis are tiled no-repeat not tile

4. Put a large or small background image in a box, you can use background-position for positioning

10. Elements

• Block-level elements
  div, p, h, etc.

• Features:
  1. Exclusive line
  2. The default width is as wide as the parent element 3. The width and
  height set by css are valid

• Inline elements
  span, a, em, strong, etc.

• Features:
  1. Will not occupy a row by itself
  2. The width is determined by the content
  3. Setting the width in css does not work

• Inline block element
  img tag, etc.

• Features:
  1. Will not occupy a row by itself
  2. The width and height can be set and effective

• Element mode conversion

  • display:block;
    把某个元素的显示模式修改为块级元素，在img标签设置这个属性可以去除图片默认的3px间隙
  • display:inline;
    把某个元素的显示模式修改为行内元素
  • display:inline-block;
    把某个元素的显示模式修改为行内块模式

• Display and hide of elements

  • display:none; No display mode, neither can see nor occupy position
  • visibility:hidden; hidden, although invisible, but occupying a position
  • visibility:visible; Visible (the default value of visibility)