CSS
css
Introduction
To put it simply, css is the
w3school manual to control the style of the elements.
Why use css? Repeated styles and uncomfortable codes. The following figure compares the
realization of this code
.
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: black;float:right;"></div>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<div style="width: 100px;height: 100px;background-color: green;float: left;"></div>
<div style="width: 100px;height: 100px;background-color: yellow;float: right;"></div>
</body>
</html>
two
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one{
width: 100px;height: 100px;background-color: black;float:right;
}
.two{
width: 100px;height: 100px;background-color: red;
}
.three{
width: 100px;height: 100px;background-color: green;float: left;
}
.four{
width: 100px;height: 100px;background-color: yellow;float: right;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
Of course, the style code can be more concise. Here is how much code in the element is compared.
Basic usage
The style can be controlled by the style tag in the head tag
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
color: #FF0000;
}
h2{
color: aqua;
}
</style>
</head>
<body>
<h1>我是狗</h1>
<h2>巧了，我也是狗</h2>
</body>
</html>
Advanced usage-selector
id selector
Adjust the style of the element marked by id
What is id
<h1 id="oneH">我是狗</h1>
id="data"
data is the value of the id tag. The id value of this element is data.
Simply put,
you may not know what it is called but his code name is Zhang San id="Zhang San"
but id is the only
company There can only be one codename Zhang San
How to use id selector
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#oneH{
color: #0000FF;
}
</style>
</head>
<body>
<h1 id="oneH">我是狗</h1>
</body>
</html>
Use # in the style tag to mark. For example, id="one"
is written as
#one{ … }
Class selector
What is the class name of the
class
element attribute The
example is as follows
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.oneH{
color: #0000FF;
}
</style>
</head>
<body>
<h1 class="oneH">我是狗</h1>
<h2 class="oneH">我是猪</h2>
</body>
</html>
Use # in the style tag to mark. For example, class="one"
is written as
.one{ … } The class is common. Multiple elements can use the same class
Attribute selector
What is the attribute
name title id class waits are all element attributes,
but id class has specific, so remove these two use the attribute selector
[attribute] to select the element with the specified attribute
[attribute=value] to select the element with the specified attribute and value The element
[attribute~=value] is used to select the element containing the specified string in the
attribute value [attribute|=value] is used to select the element with the attribute value starting with the specified value, the value must be a complete string
[ attribute^=value] is used for each element whose
attribute value starts with the specified value [attribute$=value] is used for each element whose attribute value starts with the specified value)
[attribute*=value] is used to match the attribute value contains the specified Each element of the value is
used as follows
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[name]{
color: red;[attribute]选取带有指定属性(此处为name)的元素
}
[name=two]{
color: #0000FF;[attribute=value]选取带有指定属性(此处为name)和值(此处为two)的元素
}
[name~=twenty]{
color: aqua;[attribute~=value]用于选取属性值(此处为name)用于中包含指定(此处为twenty)字符串的元素
}
[name|=five]{
color: blueviolet;[attribute|=value]用于选取带有以指定值(此处为five)开头的属性值(此处为name)的元素，该值必须是完整字符串 }
[name^=he]{
color: chartreuse;[attribute^=value]用于属性值(此处为name)以指定值(此处为he)开头的每个元素
}
[name$=p]{
color: darkgreen;[attribute$=value]用于属性值(此处为name)以指定值(此处为p)结尾的每个元素
}
[name*=god]{
color: black;[attribute*=value]用于匹配属性值(此处为name)中包含指定值(此处为god)的每个元素
}
</style>
</head>
<body>
<h1 name="one">我是狗</h1>
<h1 name="two">我是狗</h1>
<h1 name="twenty three">我是狗</h1>
<h1 name="twenty four">我是狗</h1>
<h1 name="three">我是狗</h1>
<h1 name="five-one">我是狗</h1>
<h1 name="five one">我是狗</h1>
<h1 name="hello">我是狗</h1>
<h1 name="wow p">我是狗</h1>
<h1 name="oh god cool">我是狗</h1>
</body>
</html>
Citation method
Introduced in HTML
Write in the style tag
<style type="text/css"></style>
External import
Reference css file (local/network)
file directory
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="./style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1 class="one">我是狗</h1>
</body>
</html>
.one{
color: red;
}
You can also quote css in other people's web resources
<link href="地址" type="text/css" rel="stylesheet" />
Such as some fonts or special effects styles
Will be launched later
Front end: js entry vue entry vue development applet, etc.
Back end: java entry springboot entry, etc.
Server: mysql entry server simple instructions cloud server to run the project
python: recommended not to warm up the fire, be sure to see
the use of some plug-ins, etc.
The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our qq group to communicate together: 974178910
If you have any questions, you can leave a message below, and you will reply if you see it