Table of contents
HTML5 new tags
<body>
<!-- 旧标签的实现方式-->
<div id="header"></div>
<div id="nav"></div>
<div id="article">
<div id="section"></div>
</div>
<div id="silder"></div>
<div id="footer"></div>
<!-- 新标签的实现方式-->
<header></header>
<nav></nav>
<article>
<section></section>
</article>
<aside></aside>
<footer></footer>
</body>
<header></header> head
<nav></nav> navigation
<section></section> defines sections in the document, such as chapters, headers, and footers
<aside></aside> sidebar
<footer></footer>尾部
<article></article> represents an independent, complete block of related content, such as a complete forum post, a blog post, a user comment, etc.
Introduction to CSS
CSS concepts
CSS (Cascading Style Sheets) cascading style sheets, also known as cascading style sheets, style sheets for short.
CSS files have a suffix of .css .
CSS is used to define the styles of elements in HTML documents.
The role of CSS
The purpose of using css is to make the web page have a beautiful and consistent page.
grammar
A CSS rule consists of two main parts: a selector, and one or more declarations.
Selectors are usually HTML elements that you need to change styles.
Each declaration consists of an attribute and a value.
The property is the style attribute you wish to set. Each property has a value. Attributes and values are separated by colons.
<style>
h1{
color:blue;
font-size:9px;
}
</style>How to import CSS
Inline styles (inline styles)
To use inline styles, you need to use the style (style) attribute in the relevant tags. The Style property can contain any CSS property.
The lack of integrity and planning is not conducive to maintenance and the maintenance cost is high.
<p style="background:orange; font-size:24px;">CSS</p>internal style
Internal style sheets should be used when individual documents require specific styles. You can define internal style sheets in the document head using the <style> tag.
The CSS code in a single page is unified and planned, which is easy to maintain, but it is easy to be confused between multiple pages.
<head>
<style>
h1{
color:blue;
font-size:9px;
}
</style>
</head>External styles (recommended)
External style sheets are ideal when styles need to be applied to many pages. In the case of external style sheets, you can change the look of the entire site by changing one folder. Each page links to the stylesheet using the <link> tag. The <link> tag is at the head of the document.
<link rel="stylesheet" href="xxx.css" type="text/css" />Selector
CSS syntax rules consist of two main parts: selectors , and one or more declarations (styles).
global selector
Can be matched with any element, with the lowest priority, and is generally used for style initialization.
<style>
*{
margin:0;
padding:0;
}
</style>element selector
Elements in an HTML document, p, b, div, a, img , etc.
It can also be called a tag selector, which selects all tags of this type on the page, so it often describes "commonality" and cannot describe the "personality" of a certain element.
<style>
p{
font-size:9px;
}
</style>Notice:
1. All tags can be selectors. For example, ul, li, dt, dl, input, div, etc.
2. No matter how deep this label is hidden, it will definitely be selected.
3. Select all, not just one.
class selector
The rule is defined with a dot . , which is used for all the tags you want. The advantage is that it is very flexible.
<head>
<style>
.oneclass{
width:800px;
}
</style>
</head>
<body>
<h2 class="oneclass">hello</h2>
</body>Features of the class attribute
- Class selectors can be used by various tags.
- Class names cannot start with a number.
- Multiple class selectors can be used for the same tag. separated by spaces.
<body>
<h2 class="classone classtwo">hello</h2> <!--正确-->
<h2 class="classone" class="classtwo">hello</h2> <!--错误-->
</body>ID selector
It is used for a specific label and can only be used once . ID selectors in css are defined with # .
Notice:
1. ID is unique.
2. ID cannot start with a number.
<body>
<p id="text">hello1</p>
<p id="text">hello2</p> <!-- 在ID选择器中这样是不规范的，尽管能够实现效果-->
<p class="classone">Hello1</p> <!-- 在类选择器中是可以的-->
<p class="classone">Hello2</p>
</body>merge selector
Syntax: selector1, selector2, ...{}
Role: Extract common styles and reduce duplicate code.
<style>
h1{
color:blue;
font-size:9px;
}
p{
color:blue;
font-size:9px;
}
<!-- 相当于上面两个选择器-->
h1,p{
color:blue;
font-size:9px;
}
</style>selector priority
In CSS, weights are measured numerically:
- The weight of the element selector is: 1
- The weight of the class selector is: 10
- The weight of the id selector is: 100
- Weight for inline styles: 1000
font properties
color
Specifies the color of the text
<style>
div{
color:rgba(255,0,0,.5); <!-- .5修改字体的透明度-->
}
</style>font-size
set the size of the text
The minimum font size accepted by the chrome browser is 12px.
font-weight
set the thickness of the text
bold : bold
bolder : thicker
lighter : thinner
100-900 : Arbitrary definition, 400 is equivalent to default, 700 is equivalent to bold.
font-style
Specifies the font style of the text
| value | describe |
|---|---|
| normal | Defaults |
| italic | define italics |
font-family
The font-family attribute specifies the font of an element
Each value is separated by a comma.
If the font name contains spaces, it must be quoted.
font-family:"Microsoft YaHei","Simsun","SiHei";background property
CSS background properties mainly include the following:
| Attributes | describe |
|---|---|
| background-color | set background color |
| background-image | set background image |
| background-position | Set the display position of the background image |
| background-repeat | Set how to fill the background image |
| background-size | Set the background image size property |
background-color
This property sets the background color
<head>
<style>
.box{
width:300px;
height:300px;
background-color:palevioletred;
}
</style>
</head>
<body>
<div class="box"></div>
</body> 
background-image
Sets the background image of the element.
The element's background is the total size of the element, including padding and borders (excluding margins). By default, the background-image attribute is placed in the upper left corner of the element. If the image is not large enough, it will tile the image vertically and horizontally. If the image size exceeds the element size, the part of the element size will be displayed from the upper left corner of the image.
background-repeat
This property sets how to tile the background image
| value | illustrate |
|---|---|
| repeat | Defaults |
| repeat-x | Tile horizontally only |
| repeat-y | Tile vertically only |
| no-repeat | Not tiled |
background-size
This property sets the size of the background image
| value | illustrate |
|---|---|
| length | Set the width and height of the background image, the first value is width, the second value is height, if only one is set, the second value is auto |
| percentage | Calculate the percentage of the relative position area, the first value is width, the second value is height, if only one is set, the second value is auto |
| cover | Scale the image to the maximum size that completely covers the background area while maintaining the aspect ratio of the image |
| contain | Scales the image to the maximum size that fits the background positioning area while maintaining the image aspect ratio |
text attribute
text-align
Specifies the horizontal alignment of the element's text
| value | describe |
|---|---|
| left | Align the text to the left, the default value |
| right | Align text to the right |
| center | center the text |
text-decoration
The text-decoration attribute specifies the decoration added to the text, underline, overline, strikethrough, etc.
| value | describe |
|---|---|
| underline | define underscore |
| overline | define overline |
| line-through | Define strikethrough |
text-transform
The text-transform property controls the capitalization of text
| value | describe |
|---|---|
| captialize | Define capitalization at the beginning of each word |
| uppercase | define all caps |
| lowercase | Define all lowercase letters |
text-indent
The text-indent attribute specifies the indentation of the first line of text in a text block.
p{
text-indent:2em; <!-- 首行缩进2个字节-->
}
<!-- 或者用px（像素）来定义-->
p{
text-indent:50px;
}Note: Negative values are allowed. If negative, indent the first line to the left.
Form properties
table border
To specify a CSS table border, use the border property.
<style>
table,td{
border:1px solid black;
}
</style>collapsing border
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开。
表格宽度和高度
width和height属性定义表格的宽度和高度。
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心。
<style>
td{
text-align:center;
}
</style>垂直对齐属性设置垂直对齐
<style>
td{
height：50px;
vertical-align:bottom;
}
</style>表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性
<style>
td{
padding:15px;
}
</style>表格颜色
<style>
table,td,th{
border:1px solid green;
}
td{
background-color:green;
color:white;
}
</style>关系选择器
关系选择器分类：
1.后代选择器
2.子代选择器
3.相邻兄弟选择器
4.通用兄弟选择器
后代选择器
定义
选择所有被E元素包含的F元素，中间用空格隔开。
语法
<head>
<style>
ul li{
color:green;
}
</style>
</head>
<body>
<ul>
<li>后代选择器</li>
<li>子代选择器</li>
</ul>
<ol>
<li>没有绿色文本的效果</li>
</ol>
</body>
子代选择器
定义
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示。
语法
<head>
<style>
div>a{
color:red;
}
</style>
</head>
<body>
<div>
<a href="">子元素1</a>
<p><a href="">孙元素</a></p>
<a href="">子元素2</a>
</div>
</body> 
相邻兄弟选择器
定义
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素。（使用率不高）
语法
<head>
<style>
h1+p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>标题一</h1>
<p>这是一个段落。</p>
</body>
通用兄弟选择器
定义
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开。
语法
<head>
<style>
h1~p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>标题一</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</body> 
end