1.1 style style definition: inline style attribute, single page <style> tag, multi-page <style> tag
Article directory
First create a
staic
Folder, used to store folder resources such as pictures, audio and video, css:
1. Inline style attribute: only affects the current tag
Defining styles such as length and width in the style attribute of a certain tag will only affect the current tag, such as:
<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">
The pixel unit px cannot be omitted in style
Two ways to define attributes:
No style:
Use style:
2. Single page <style> Tag: affects one/multiple types of elements on the same page
At this time, <style> is generally defined in the <head> tag:
styleThe style in the tag can affect the same type/multiple types of elements on the page:
In addition to directly setting styles for certain types of tags in a unified manner, you can also set styles by combining class attributes:
class class names can be combined into multiple combinations:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--style 标签一般写在 head 标签里-->
<style>
img {
width: 200px;
height: 200px;
border-radius: 50%;/* 边角弧度 */
}
</style>
<style type="text/css">/* type="text/css"可以不写 */
p {
width: 50px;
height: 50px;
background-color: lightblue;
}
.blue-p {
/* style 引用 class 分组的组名前面要加. */
background-color: lightgreen;
}
.big {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- class 分组要写在第一组<>里面 -->
<img class="big" src="/static/images/mountain.jpg" alt="">
<p>段落一</p>
<p class="blue-p">段落二</p>
<p class="blue-p big">段落三</p>
</body>
</html>
3.Multiple pages <style> Tag: affects multiple pages
Create a new style.css file in the css folder, cut the content in the single page <style> tag, and then return to < Adding the tag inside the a i=3> tag can affect multiple pages. <head><link>
is to store the styles in <style> into a new css file, and then reference it by <link>.
<style> The styles in can be stored in multiple css files. <link> can have multiple tags:
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/style1.css">
<link>The tag greatly facilitates batch modification of page styles for multiple pages<style> After defining the corresponding style, you only need to reference it through the link tag on the page where the style needs to be modified:
4. Multi-line comments: /* */
/* 注释内容 */
CSS multi-line comments are the same as C++
