The most concise CSS learning notes

CSS is a computer language used to express file styles such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language). CSS can not only statically modify web pages, but can also cooperate with various scripting languages ​​to dynamically format various elements of web pages. CSS can perform pixel-level precise control of the layout of element positions in web pages, supports almost all font sizes and styles, and has the ability to edit web page objects and model styles.

1. Common attributes

---

1. name: name, can be repeated, can be the same;

2. class: The class name can be repeated or multiple, for CSS; such as

   ;

3. id: unique identifier, cannot be repeated, generally used in JavaScript; the naming rules are the same as those of other languages;

4. title: title, which can be added in the tag; such as ;

2. Tag relationship

---

1. Descendant relationship: parent-child relationship (including relationship);

2. Brother relationship: same-parent relationship;

3.CSS-Cascading Style Table

---

1. CSS comments:/The comment content is written here for the programmer to see and will not be displayed on the page/;

2. CSS grammar rules: All symbols must be entered in English input mode, in lowercase, and attributes must be written in braces. Each attribute statement must end with a semicolon, and the attribute value must have a pixel unit (px); format : Attribute: attribute value;

4. How to introduce CSS

---

1. Inline introduction: How to introduce styles in tags ;Format: Content;Note: The maintainability of the code is extremely poor, and the CSS code and html structure are not separated ;The scope of influence is only in the current tag;

2. ##Inline introduction: add
##External introduction :Create a xx.css file outside the web page, and use in the header of the web page;
3. Note: Code maintainability High, the CSS code is completely separated from the HTML structure, and the scope of influence is on all web pages that introduce CSS files on the entire website;

5. CSS core syntax:

---

Structural format: selector {attribute: attribute value; attribute: attribute value;...}; Example: p{background:red;color:gray;size:20px;};
Selector: A tool for selecting page elements;
Braces: Style content is written inside the braces;
6. Selector

---

Basic selector:

Universal selector: used to initialize the default style of the web page , written at the beginning of the style sheet; format: *{padding:0;margin:0;};
Tag selector: add style to the specified tag; format: p{color:green ;};
Class selector: choose to specify the class selector style; format: .class name{background:pink;};
• Note: the class name is defined in the tag, For example, class="one"; If the content styles of several blocks are the same, then you can give them the same style;

id selector: unique identifier, cannot appear repeatedly; Format: #id name{backgound-image:url(1.jpg);}
• Note: The id name is defined in the tag id="one"; the id cannot be added with the table, and several blocks have the same content style. The id names of the blocks must be different;

  ;

The difference between id and class:

Pay attention to the previous point-ID must Ability to uniquely determine DOM nodes. If you use the ID selector throughout the article, even if the two DOM node styles are exactly the same, you must write the node style twice. If you want to maintain it later, you must maintain the code in both places! ! ! Greatly increases the cost of maintenance;

Pseudo-class selector: Sequential LoVe HAte principle, you can jump over, but the order cannot be changed; respectively, link status (link) , visited state (visited), active state (hover) and clicked state (active);

Point tracing class: a:link{color:yellow;} a: visited{color:blue;} a:hover{color:red;} a:active{color:pin;} style when getting focus a:focus{};

Note: Text attributes and background color can be added to the attributes and pictures; a{} and a:link{} achieve the same effect;

List class: li:link{color:yellow;};li:visited{color:blue;} li:hover {color:red;} li:active{color:pin;};Note: Text series attributes, background colors and pictures can be added to the attributes;

Composite selector:

• Group selector (union selector, multiple selector): used to add the same style to multiple elements; example: .one,#one,a,span{color :red;font-size:14px;} means class one, #one, a tag, span tag have common attributes;

• Descendant selector: add attributes to subclass elements; Example: .one a{text-decoration:none;} means that the content modified by the a tag of the descendant of class one is not underlined;

• Sub-element selector (specified selector): Add attributes to the specified child element; for example: #one>p{color:red;}; means to add attributes to the content resting on the p tag of the son of id selector one;

• Adjacent element selector:

1. Two adjacent sibling selectors add attributes. They do not add attributes to themselves, but only to the following brothers. Attribute; .one+p{background:red;};
2.one~p{background:green} means to add attributes to all p tag elements after the one selector, provided that they have a parent class;

• Attribute selector:

1. Add attributes to elements with attributes; img[id]{ background:red;}Add attributes to elements with id;

1. Add attributes to elements with specified attribute values: img[src="b.jpg"]{background:red ;}Add attributes to elements with b.jpg;

3. Add attributes to elements starting with the specified character: img[src^="b"]{background: red;}Add attributes to all elements starting with b;
4. The selector has elements ending with the specified attribute value: img[src$="b"]{background:red;}Add attributes ending with b Add attributes to all elements;
5. The selector has elements containing the specified attribute value: img[src*="b"]{background:red;}Add attributes to all elements containing b;

7. Element inclusion (category of display methods)

---

1. Block elements: used for typesetting, typical structures include: p, p, li, h1, dt;

• The element is displayed on its own line (independent of the width);

• The width and height can be set;

• When nesting a block-level element, if the width of the child element is not set, the width of the child element will be the width of the parent element;

Inline elements: used to add styles; span, a, font, strong; Note: Do not give upper and lower margins and padding to inline elements. The upper and lower will be ignored, and the left and right will work (generally not used);

• The element is displayed on one line;

• The width and height cannot be set directly;

Inline block elements: image, input;

• Elements are displayed on one line;

• The width and height can be set;

Conversion relationship: inline contains inline; block elements contain block elements, and block elements can contain inline elements;

• Display: inline Convert elements to inline elements For the block element

• 8.CSS properties

• ## Font-related properties:

font-size: font size, how many pixels, px;

---

1. font-weight: font thickness, bold (700-900), normal, you can write 100 -900;

• font-style: font italic, italic, normal;

• font-family: font, Microsoft Yahei, bold;

• Attribute concatenation: font: font-style font-weight font-size/line-height font-family;

  Note: font attribute concatenation must include font-size and font -family (other attributes do not need to be written); the order of font-size and font-family cannot be changed;

• ##Text:

• color: color;

text-indent: indent [unit is em];

text-decoration : Text line [underline, overline, line-through strikethrough, none cancel line];
word-spacing: distance between words;
letter-spacing: letter key distance;
text-align: horizontal alignment [default left, center, right];
line-height: line height, the height of the line where the text is located
• [When the line height is equal to the height of the element, the text is vertically centered];

• Size: It is the size of the block element. The width and height cannot be set for inline elements. If you want to set it, you must convert it;

• width: width;

height: height;

• List ul, li attributes: list-style-type can be added to ul but does not need to be added to li;

• list-style-type:none;

  Remove symbols, square, circle, disc solid circle, you can add pictures without writing or list-style-type: none;

list-style-image:url(1.jpg)

Picture

• border:1px solid red;Set the border for ul as a whole

• ##list-style-position:outside;

  Style Image positioning: inside, outside

Background:

##Background-color;
Background image background-image
• Note: When setting the background image, be sure to set the width and height;

Background tile background -repeat: repeat (default value) | no-repeat (no tiling) | repeat-x | (horizontal tiling) repeat-y (vertical tiling)
Background position background- position: Set specific values: left| right| top| bottom| cneter;
• When setting specific values, the order is not distinguished; when setting specific numbers, the first value represents the horizontal direction, and the second value represents the vertical direction. , set the front background image setting format to background-image;

Set whether the background is fixed background-attachment: Scroll (default value) scrolling; fixed (picture fixed);
Attribute joint writing: no quantity limit or order limit: background:url("") red no-peat 30px 40px;

line-height:

Box model: used for web page layout, the width must be set

Box border attribute :

Components:

Border width and height: border-width: 1px;
Border color: border-color:red;
Border style: border-style: solid solid line/dotted dotted line/dashed dashed line /none None;
Attribute joint writing: border:1px solid red; Note: There is no order restriction when attribute joint writing, the border color and border width do not need to be written
Separate writing method:
border border:
padding padding: set the content distance from the box The distance between borders
margin: Set the distance between boxes

     p{
          width:300px;
          height:200px;
         border-top:1px solid red;
         border-left:1px solid  red;
         border-right:1px solid  red;
         border-bottom:1px solid  red;
        }

6. 单独设置属性法：

     border-top-color:red;
     border-top-style:solid;
     border-top-width:1px;

Box size:

The impact of box size:
• The inherited box is within the width range of the parent box, and the padding value will not affect the size of the box

Box size calculation: width = content width + left and right borders + left and right padding

# #Border can affect the size of the box

1. The inner margin affects the size of the box

2. In the future, the page box layout will be implemented. If the inner margin is set for the box Margin, corresponding to the content width or height minus the corresponding value
marginExternal margin: Set the distance between boxes

The box is centered:

Attribute joint writing:

The box under the standard flow is centered: margin:0px auto;

1. The positioned box is centered: first take half of the parent box, and then go back half of its own width

2. Margin: 10px upper right and lower left 10px

3. ##Aargin: 10px 20px up and down 10px

4. # Margin: 10px 20px 30px Top 10px Left and right 20px Bottom 30px

5. Margin: 10px 20px 30px 40px Top right bottom left

6.  one{
          width: 100px;
         height:100px;
         border: solid red  1px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
         }

• 
  Note:

• Attribute joint writing:

• Padding: 10px; Left and right 20px

1. Padding: 10px 20px 30px; Top 10px Left and right 20px Bottom 30px

2. Padding: 10px 20px 30px 40px; Top, right, bottom, left

3. When two boxes are displayed vertically, the margins are subject to the set maximum value (the first case of merging margins). When the two boxes are displayed horizontally, the margins overlap.

4. Collapse of outer margins (difficult problem) Solution steps:

1. padding inner margins: Set the distance between the content and the box border

2. Set the border for the parent box

3. Set the overflow:hidden;
for the parent box

1. 清除边距：

1. 方法1：*{padding：0；margin：0；}

2. 方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}

9.CSS的三大特性

---

1. 继承性：

• 可继承性：color，text-align，text-indent，font-size，font-weight，font-family

• 不可继承：text-decoration，border，display，margin，float，padding

• 继承性发生的前提是标签之间属于一种嵌套关系

• 文字颜色可以实现继承；文字大小可以实现继承；字体可以实现继承；与文字有关的属性都可以 实现继承

• 行高可以实现继承

• 特殊性：

1. 不能继承父元素中的文字颜色（层叠掉了）

2.         标题标签不能继承父元素中的文字大小

重叠性：层叠性是指样式的覆盖

• 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。

• 层叠性发生的前提： 样式冲突

优先级：

• 权重：行内引入（1000）>id(100)>class(10)>标签（1）>通用(0)

• 把权重相加，值越大越有先

• 权重一样，后面的样式起作用

10.补充知识笔记

---

1. 表单优化写法：用户名：

2. 格式化列表图标：list-style: none

3. 表单合并：border-collapse:collapse(设置表格边框合并，适用于表格）

4. Bfc   “格式化上下文”

5. overflow:

• visible:默认值。内容不会被修剪，会呈现在元素框之外

• hidden:内容会被修剪，并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置，给父元素加此属性值可使父元素位置不变

• scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

• auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

11.标准流：块级元素独占一行显示；标准流的显示方式：元素默认的显示方式

---

12.浮动：浮动用来解决文字图片环绕问题；用来制作导航栏，网页布局

---

• 用法： Float:left| right

• 特点：要浮动都浮动

1. 设置了浮动的元素不占原来的位置（脱标）

2. 可以让块级元素在一行上显示

3. 浮动可以行内元素转化为行内块元素

4. 模式转换的过程中，能用display就用display

清除浮动：

1. 定义：清除浮动不是删除浮动；清除浮动指的是清除浮动的影响

2. 注意使用时机：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱；这种情况下进行清除浮动。

3. 清除浮动方法：
    [x]注意：在要清除浮动的元素后面添加一个空块元素（

   ,标签），在添加的空元素中加clear:both | left |right

     .clearfix{
            clrar:both;
      }
     <p>
           </p><p></p>
           <p></p>
           <p></p>
     

  [x]给父盒子设置overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动**

     .content{
     width:500px；
     overflow:hidden;
     }

  [x]使用伪元素清除浮动

     .clearfix:after{
        content:"";
       display:block;
       clear:both;
       height:0;
       visibility:hidden;
     }
     .clearfix
     {
       zoom:1;
     }
     

     <p>
     </p><p></p>
     <p></p>
     

13.定位：方位：left、right、top、bottom

---

• 静态定位：静态定位就是元素标准流的显示方式position:static;就是默认的定位

• 绝对定位：相对于定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就会找到最初的包含层；不占有以前的位置；position：absolute；

1. 当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。

2. 当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。

3. 当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。

4. After setting absolute positioning for the box, the box does not occupy the position (off-script)

5. After setting absolute positioning for the inline element, the element is converted to inline Block element

6. Note: After the element is set to absolute positioning, the position of the element can be set at will through the specific orientation name

• Relative positioning: relative to the original position of the element, it will occupy the previous position; position: relative;

1. The element occupies the original position after setting relative positioning

2. Set relative positioning using your own position as a reference to set the position

3. Relative positioning cannot perform mode conversion of elements

4. The child must be in the same position as the parent (the child element is set to absolute positioning, and the parent element is set to relative positioning)

• Fixed positioning: relative to the entire stable position; Fixed positioning does not occupy position (off-script); convert inline elements into inline block elements position: fixed

• Hierarchy problem:

1. Only when positioning is set will there be hierarchical problems

2. There are relative, absolute and other positioning among sibling elements. Whose HTML document structure is at the back and which is at the outermost layer (hierarchy) High)

3. Z-index: Set the level, the value is a number, as long as there is positioning, the positioning setting will be used

14. CSS Wizard Rabbit: Select a transparent document

---

• Coordinate system in the browser

• The right direction of the dot is the positive direction, and the direction below the dot is Positive

• CSS sprite is a way to process web page background images; sprite map is also a kind of background image

• Use of sprite map

1. Be sure to open the sprite with the open method when using fw

2. When using the sprite as a background image, often with Use background-position with

3. to measure the coordinates of elements in the sprite map. Use the rectangle selector

4. or use the shortcut key letter: k

15. CSS visibility

---

• overflow: hidden Hide the excess part

• Display: None directly hides the element

• ## Display: BLOCK will display the element (cooperate with JS)

• Visibility: Hidden hides the element to hide the element

• display: none;                                                                                                                                                                                                                                                                  

• #16. Center images and text

Every inlne-block element has a default vertical-align:baseline

---

• vertical-align:middle Vertical alignment; vertical-align is better matched with inline-block;

• 17. Avoid off-standard flow

In the process of web page layout, use the standard stream if you can use the standard stream

---

• The standard stream cannot solve the problem of floating

• Floating cannot solve positioning

• Use margin-left/margin-right with a value of auto to automatically push the box to the two outer sides

• 18. Tag inclusion specifications

p can contain tags under any standard stream

---

• p tags cannot contain p and title tags and lists Tags

• The title note can contain other tags

• Inline elements are best not to contain other tags

• 19. Summary of setting width and height

After floating, the element can set the width and height

---

• After absolute positioning, the element can You can set the width and height

• After fixed positioning, the element can set the width and height

• 20. Upgrade to CSS3

CSS3 and CSS2: CSS is powerful and the code is concise

---

• Pseudo-class selector:

• First child element: first-child

1. The best element: last-child

2. nth child element: nth -child(n);n gives the value

3. Odd numbers are child elements: nth-child(odd); or (nth-child(2n+1))

4. Even-numbered elements: nth-child(even); or (nth-child(2n))

5. Text-shadow: text-shadow : horizontal, vertical, shadow

• box-shaadow: box-shaadow: horizontal, vertical, shadow

• Background: background

• Related recommendations:

Comprehensive summary of attribute value inheritance knowledge in css

Detailed explanation of CSS paragraph properties

Summary of 20 advanced CSS techniques

The above is the detailed content of The most concise CSS learning notes. For more information, please follow other related articles on the PHP Chinese website!