Table of contents
Foreword:
We have learned HTML related tags and frame writing before, then after we understand the usage of these tags, we must learn how to beautify the interface through related methods. Here we need to learn CSS to further process these tags. Below I will briefly introduce css and its related writing methods
1. What is CSS?
CSS is the abbreviation of Cascading Style Sheet. Font color, alignment, etc.), set pictures (width, height, position, etc.), etc.
2. CSS writing style
CSS code is divided into internal style, external style, and inline style .
(1) Inline style
With the help of the style attribute that all tags have , add a style statement to the current element.
Writing:
<标签名 style="样式声明">CSS style declaration: consists of CSS properties and values
CSS property: the name of the style you want to set for the HTML tag
Value: use the value to control the effect of a property display
style="css属性名:值;css属性名:值;"(2) Internal styles
CSSWith the help of the style tag, the style code is embedded in the HTML document , andCSSthe separation between the style and the HTML tag can be realized. At the same time, you need to useCSSselectors to match elements in HTML and apply styles. Written instylethe tags of the HTML document, the style is usually placed in the head, and the format is as follows:
<head>
<style>
/*这里写css代码*/
</style>
</head>This attribute can be added to the style tag type="text/css"to tell the browser what format the code is here, but it does not need to be written in the HTML5 specification.
Example:
<html>
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
#fu{
box-shadow: 0 0 10px 10px rebeccapurple;
}
#look{
background-color: aqua;
}
</style>
</head>
<body>
<div id="fu"></div>
<div id="look">hello</div>
</body>
</html> Effect:
3. External styles
Use the suffix to create an external style sheet file , and use tags to import the external style sheet
.cssin the HTML file<link>. In fact, the idea is similar to the way of importing a custom module. It is written as follows:
<!-- rel：引入文件资源类型 href：引入文件资源的路径 -->
<link rel="stylesheet" href="外部样式表的地址">The stylesheet means to connect two files, and the address of the file to be connected is written after the href
Example:
html file code
<!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>
<!-- 创建连接 -->
<link rel="stylesheet" href="./index.css">
</head>
<body>
<a href="https://blog.csdn.net/m0_73633088/article/details/130973039?spm=1001.2014.3001.5501" target="_blank" id="fuc">这是一个链接，点开</a>
<div id="shit">555</div>
</body>
</html>css file code
#fuc{
height: 200px;
background-color: aqua;
font-family: 幼圆;
text-decoration: none;
/* 去除下划线 */
}
#shit{
width: 200px;
/* 背景颜色 */
background-color:aquamarine;
/* 颜色 */
color: brown;
/* 字体大小 */
font-size: 50px;
} Effect:
4. Comparison among the three
| style sheet | advantage | shortcoming | Usage | scenes to be used |
|---|---|---|---|---|
| inline style sheet | Easy to write, high weight | The separation of structure and style is not achieved, it is not easy to maintain, and cannot be reused | rarely | Used when a label needs to be styled individually |
| embedded style sheet | Some structures and styles are separated, which is easier to maintain | The separation of structure and style has not been completely realized, so it cannot be reused | generally | It is used when the amount of css code is not much, and it is closely related to the current page and does not need to be reused |
| external style sheet | Fully realize the separation of structure and style, which can be reused | If the amount of code is small, the introduction method is more troublesome | most recommended | Use when the amount of css code is large, or when it needs to be reused |
Well, the above is all the content of today, you should learn it all!
Share a wallpaper:
