- Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
- Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
table of Contents
Introduce CSS style sheet (writing position)
Internal style sheet (embedded style sheet)
External style sheet (external link)
CSS Cascading Style Sheet
Limitations of HTML
- HTML cannot meet the needs of designers
- Inconvenient to manipulate html attributes
- Adding styles in HTML brings endless bloat and cumbersome
Beautician for CSS pages
- The biggest contribution of CSS is: to separate HTML from the style, to achieve HTML focus on structure presentation, and style to css
- Our desired result : structure (html) and style (css) are separated
CSS first knowledge
- concept:
- CSS (Cascading Style Sheets) , usually called CSS style sheets or cascading style sheets ( cascading style sheets)
- effect:
- Mainly used to set the text content (font, size, alignment, etc.) in the HTML page, the shape of the picture (width and height, border style, margins, etc.), and the layout and appearance display style of the layout.
- Based on HTML, CSS provides a wealth of functions, such as font, color, background control and overall layout, etc. It can also set different styles for different browsers.
Introduce CSS style sheet (writing position)
Inline (inline style)
- concept:
- It is called in-line style and inter-line style.
- Set the style of the element through the style attribute of the label
- The basic syntax format is as follows:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
- In fact, any HTML tag has a style attribute to set the inline style.
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
- note:
- style is actually the attribute of the label
- Between the style attribute and the value is
:;Separate multiple sets of attribute values .- Can only control the current label and the word label nested in it, causing code redundancy
- Disadvantages:
- No separation of style and structure
Internal style sheet (embedded style sheet)
- concept:
- Embedded
- It is to centrally write the CSS code in the head tag of the HTML document and define it with the style tag
- The basic syntax format is as follows:
<head> <style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style> </head><style> div { color: red; font-size: 12px; } </style>
- note:
- The style tag is generally located in the head tag, of course, in theory, it can be placed anywhere in the HTML document.
- type="text/css" can be omitted in html5.
- Can only control the current page
- Disadvantages:
- Not completely separated
Comprehensive case
<style> /*选择器{属性:值；}*/ p { color:#06C; font-size:14px; } /*文字的颜色是 蓝色*/ h4 { color:#900; } h1 { color:#090; font-size:16px; } body { background:url(bg2.jpg); } </style>
External style sheet (external link)
- concept:
- Link-in
- Is to put all styles in one or more external style sheet files with .CSS extension,
- Link the external style sheet file to the HTML document through the link tag
- The basic syntax format is as follows:
<head> <link rel="stylesheet" type="text/css" href="css文件路径"> </head>
- note:
- link is a single label
- The link tag needs to be placed in the head tag and three attributes of the link tag are specified
Attributes effect rel Define the relationship between the current document and the linked document, where it needs to be specified as "stylesheet", which means that the linked document is a style sheet file. type Define the type of the linked document, which needs to be specified as "text/CSS", which means that the linked external file is a CSS style sheet. We can all omit href Defines the URL of the linked external style sheet file, which can be a relative path or an absolute path.
Summary of three style sheets (location)
Style sheet advantage Disadvantage Usage Control range Inline style sheet Convenient writing, high weight No separation of style and structure less Control one label (less) Internal style sheet Partial structure and style are separated Not completely separated More Control a page (medium) External style sheet Complete separation of structure and style Need to introduce At most, highly recommended Control the entire site (multiple)
Code style
- There are generally two types of style writing:
- One is the compact format (Compact)
h3 { color: deeppink;font-size: 20px;}
- One is the expanded format (recommended)
h3 { color: deeppink; font-size: 20px; }Code case
- The style selector, attribute name, and attribute value keywords are all written in lowercase letters, and uppercase and lowercase are allowed for attribute strings.
/* 推荐 */ h3{ color: pink; } /* 不推荐 */ H3{ COLOR: PINK; }
Summary of CSS style rules
- When using HTML, you need to follow certain specifications. CSS is the same. If you want to use CSS to decorate web pages proficiently, you first need to understand CSS style rules.
- The specific format is as follows:
- to sum up:
- 1. The selector is used to specify the HTML tags used by the CSS style. The specific styles set for the object are in curly braces.
- 2. Attributes and attribute values appear in the form of " key-value pairs ".
- 3. Attributes are style attributes set for the specified object, such as font size, text color, etc.
- 4. Use English ":" to connect between attributes and attribute values .
- 5. Use English ";" to distinguish between multiple "key-value pairs" .
