One, CSS overview
CSS: Cascading style sheets;
Second, the code specification
- Placement specification: write CSS style code
in the<style>content body of the<style>label, and place the<head>label in the label; - Format specification:
选择器名称 { 属性名：属性值；属性名：属性值; ...... }
<html>
<head>
<title>标题</title>
<style>
span{
font-size:100px;
color:red;
border:1px solid blue;
}
</style>
</head>
<body>
<span>111111111111</span>
<span>222222222222</span>
</body>
</html>
- Code specification:
selector name {attribute name: attribute value; attribute name: attribute value;…}
an attribute name has multiple attribute values, and multiple values are separated by "spaces";
note:/* 注释内容 */
Three, element selector
- Element selector: use the HTML tag name as the selector name;
- Scope of application: apply the same style to multiple labels with the same name;
标签名 {
/* CSS样式代码 */
}
Fourth, the class selector
- Class selector: the class name is used as the selector name;
- Scope of application: apply the style to the label of the same class name once;
.类名 {
/* CSS样式代码 */
}
Five, ID selector
- id selector: id value as the selector name;
- The id value is unique on this page ;
- Scope of application: apply the style to a label;
#id值 {
/* CSS样式代码 */
}
Six, combination method
- Hierarchical relationship
选择器1 选择器2 ......{
/* CSS样式代码 */
}
注意：它表示 选择器1 下的 选择器2；
Seven, border attributes
Note: All HTML tags have borders, which are not visible by default;
- border: Set the border style, format: width style color;
- width: set the label width;
- height: set the height of the label;
- background-color: set the label background color;
8. Layout
- float：
选择器 {float:属性值;}
常用属性值： none:元素不浮动
left:元素向左浮动
right:元素向右浮动
- Note: After the element is set to float, it will deviate from the original document flow (depart from the original layout), which will affect the style of other elements. Therefore, after setting the float, the page style needs to be adjusted again.
Nine, conversion
- display
can make the elements convert between inline elements and block elements; - Note:
Block elements:<h1>,<p>,<div>,<ul>and the like; (automatically wrap)
inline elements:<span>,<a>and the like; (does not wrap)
选择器{display:属性值}
常见属性值： block:块元素；
inline:行内元素；
none:隐藏，不显示，也不占用页面空间；
Ten, font
- font-size: font size;
- color: color;
11. Box model
1. What is the box model
- All HTML elements can be seen as a quadrilateral, that is, a box;
- With the box element CSS to the margins, borders, margins style embodiment;
- Equivalent to setting the style of the box, we call it the box model;
2. Border
Note: You can directly use the general settings, such as: border:1px solid red;
(The same applies to the inner and outer margins behind)
3. Padding
4. Margin
12. The combination of CSS and HTML
1. Internal style
(1) In-line style
- Set the style of the element through the style attribute of the label;
- Applicable environment: modify the style of a label more specifically;
<html 标签 style="CSS样式代码"/>
(2) <style></style>Style
- Applicable environment: suitable for style reuse in the page;
2. External style
(1) <link/>Labeling method
<link/>Also known as link-in, try to put all styles in one or more external style sheet files with .css extension, and<link/>link styles to HTML documents through tags;- Scope of application: suitable for the reuse of styles on different pages;
<link rel="stylesheet" type="text/css" herf="css文件路径"/>
- rel="stylesheet": 固定值，表示 样式表；
- type="text/css": 固定值，表示 css 类型；
- herf="css文件路径": 表示 css 文件位置；
The css file is as follows: The
HTML file is as follows:
