!!!Why use CSS to modify the style, instead of directly using the attributes in the label, because it is troublesome and there are a lot of points to remember, so use CSS to modify the style without memorizing which attributes belong to which label, and there is no need to modify a lot when the requirements change The code can meet the requirements. In front-end development, CSS has only one role to modify the style! ! !
Note: The CSS code is written between <style>style</style> between <head> and </head>
1. First acquainted with CSS:
Use CSS instead of changing styles in the tags little by little! More convenient and faster
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初识CSS</title>
<style type="text/css">
h2{
text-align: center; <!--修改文字的位置（居中）-->
color:#FF0004; <!--修改文字颜色-->
font-family: "微软雅黑"; <!--修改文字字体-->
}
p{ <!--找到当前网页上所有为p的标签，对其样式进行修改-->
text-align: center;
color: mediumslateblue ;
font-size="10px"; <!--修改文字大小-->
font-family: "Times New Roman";
font-weight: "600px"; <!--修改文字粗细-->
}
</style>
</head>
<body>
<h2>独自美丽</h2>
<p>Love is love</p>
<p>Man always love beause of romantic</p>
<p>想来生活无非是痛苦和美丽</p>
<p>落日和你</p>
</body>
</html>
Note: 1. The style tag must be written in <head>! 2. The attributes in style{} must be added at the end; sign!
2. Learn CSS tags:
The main learning attributes and attribute values, as well as the value in front of the selector {}, such as p{}.
(1) The style, thickness, size, and font attributes of the text:
<head>
<style type="text/css">
p{
font-style: italic; /*文字样式，按fs加tab键即可自动生成*/
font-weight: "400"; /*字体粗细，有极限值,快捷键是fw加tab键*/
font-weight: bold ; /*加粗，快捷键是fwb加tab键*/
font-weight: bolder; /*比加粗更粗,快捷键是fwbr加tab键*/
font-weight:lighter; /*细线,快捷键是fwl加tab键*/
font-size: "300px" ; /*文字大小，一定要带单位px单位,快捷键是fz加值加tab键*/
font-family: "楷体"; /*设置字体,快捷键是ff加tab键*//*中文需要加""号*/
}
h1{
font-style: italic;
font-weight: bold;
font-size: 20px;
font-family: "楷体";
}
</head>
</style>
<body>
<h1>独自美丽</h1>
</body>
Note that there may be special needs in the font:
1. If the set font system is not available, you can use the system default font or write a few more fonts for backup.
2. English fonts are not suitable for Chinese, but Chinese fonts can be used for Chinese. With this, we can make Chinese and English fonts different.The English style comes first, and the Chinese style comes later.
p{
text-align: center;
font-family: "Times New Roman","宋体";
font-weight: bold;
}
<p>Man Alwags love 想来生活无非是痛苦 pain 和美丽 beautiful</p>
note:
1. Common Chinese fonts: Song Ti, Hei Ti, Microsoft Yahei.
2. Commonly used English fonts: Times New Roman, Arial.
3. It is not because the font of the name must be the font used in English, every Chinese font also has an English name. Times New Roman: SimSun Hei: SimHei Microsoft YaHei: Microsoft YaHei
3. Abbreviation of font property:
But here can only omit the style or bold attribute value, others cannot be omitted, and the position cannot be exchanged
/*文字属性的缩写 font：文字样式 是否加粗 文字大小 文字字体*/
p{
font: italic bold 20px "宋体"
}
(2) Text attributes: attributes of text-decoration, text-align, and text indent
<style type="text/css">
p{
/*缩写就是td+值加tab键*/
text-decoration: underline;/*下划线*/
text-decoration: overline; /*上划线*/
text-decoration: none; /*可以去除下划线，比如a标签中超链接的下划线*/
text-decoration: line-through;/*删除线*/
text-align: center; /*文本居中*/
text-indent: 20px; /*文本缩进，单位是像素*/
text-indent: 2em; /*缩进两个文字,em是文字的单位*/
}
</style>
(3) Color attributes
<style type="text/css">
p{
color: red;
}
</style>
<body>
<p>想来生活无非是痛苦和美丽</p>
</body>
How to modify the text color through the color property in CSS:
- Assign values through English words: color: red (red); but Indicates that the color is limited.
- Assign values through rgb (red, green, blue): color: rgb(100,200,30),The value range is 0~255, the same three values are gray, and the smaller the value, the more black。
- Assign value through rgba: color: rgba(250,0,0,0.8); the value of a represents transparency,The value is 0~1, the smaller the value, the more transparent.
- Assign value through hexadecimal: color: #00FFFF; The essence is still RGB, and every two digits of hexadecimal represents a color value.
- Assign value by hexadecimal abbreviation: color: #0FF; The hexadecimal value, every two digits are the same, can be abbreviated.
3. Label selector in CSS
<head>
<title>CSS文本属性</title>
<style type="text/css">
p{
/*更改属性以及属性值*/
}
</style>
</head>
<body>
<p>想来生活无非是痛苦和美丽</p>
</body>
But note: it will be applied to all the tags in the current interface, and you cannot specify one individually. For example, if the p tag, all paragraphs in the current interface will be changed. And each tag can be used as a tag selector: hn, img...
4.id selector
Features: In order to achieve a separate selection of a specific label to change the style separately
Note: The #+id name is required when using the id selector to select a specific tag. The id name naming rule is the same as the identifier, and cannot be the same as the tag name. In enterprise development, id can not be used casually, just to set the style without id, id is reserved for js.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
#ident1{ /*注意，使用id选择器时前面一定要加#*/
color: red;
}
</style>
</head>
<body>
<p id="ident1">Love is love</p>
<p id="ident2">Man always love beause of romantic</p>
<p id="ident3">想来生活无非是痛苦和美丽</p>
<p id="ident4">落日和你</p>
</body>
</html>
5. Class selector
Note:
1. Each label can set the class name.
2. The class name can be repeated.
3.Note that when the setting style is =, you need. (Dot) + class name {set attribute + attribute value}.
4.A label can have multiple class names.
eg: <p class="pp par2">Sunset and you</p> means that the p tag has two names, pp and par2, separated by a space.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>class类选择器</title>
<style type="text/css">
/*根据指定的类名找相应的标签，设置相应的属性*/
/*类名前加.点！*/
.pp{
color: red;
}
.ppp{
color: yellow;
}
</style>
</head>
<body>
<h2>独自美丽</h2>
<p class="pp">Love is love</p>
<p class="ppp">Man always love beause of romantic</p>
<p class="pp">想来生活无非是痛苦和美丽</p>
<p class="pp par2">落日和你</p>
</body>
</html>
Compared: The difference between class selector and id selector
- id is equivalent to a person's ID number, which cannot be repeated, and only one. Class is equivalent to the community that people join can be repeated and there can be more than one.
- The id selector starts with #, and the class selector starts with.
- Generally id is for js, so when setting the style, first consider class and then id.
expand:
Class can extract the same changed style, which is commonly used in enterprise development, which can reduce the amount of code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>class类选择器</title>
<style type="text/css">
/*根据指定的类名找相应的标签，设置相应的属性*/
/*类名前加.点！*/
.size30{
font-size: 25px;
}
.colorR{
color: red;
}
.line{
text-decoration:underline;
}
</style>
</head>
<body> <!--在企业开发中可以将公共代码抽取到类选择其中，将标签与类绑定即可-->
<p class="colorR size30">想来生活无非是痛苦和美丽</p>
<p class="size30 line">落日和你</p>
<p class="colorR line">超喜欢你</p>
</body>
</html>
6. Descendant selector:div is the parent tag
Format: div, (#+id name) in the div tag, (.+class name) in the div tag + space + child tag (similar to div, available tag names, you can also use id or class)
The meaning is: to find the parent in the body tag content, find the corresponding child tag to change the style. Note that if you only use the tag name without the id or class name, then a space here means to the next generation
eg:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
div p{ /*父代标签+空格+子代(儿子、孙子等等等，只要是子代就行)标签*/
color: red;
text-decoration: underline;
}
#div1 #para1{
text-align: center;
}
#div1 .para3{
font-size: 25px;
}
div ul li ul li p{
color: blueviolet;
}
</style>
</head>
<body>
<div id="div1" class="div2">
<p id="para1">想来生活无非是痛苦和美丽</p>
<p class="para3">落日和你</p>
<p>超喜欢你</p>
<ul>
<li>
<ul>
<li>
<p>Man Alwags love 想来生活无非是痛苦 pain 和美丽 beautiful</p>
</li>
</ul>
</li>
</ul>
</div>
<hr>
<h2>独自美丽</h2>
<p>Love is love</p>
<p>Man always love beause of romantic</p>
<p>想来生活无非是痛苦和美丽</p>
<p>落日和你</p>
</body>
</html>
7. Child element selector*Can only choose the direct offspring of the parent (ie son)*
note:
1.> means direct child, a> sign means the next direct child, no spaces! ! ! No spaces! ! !
2.
div>ul>li>p
{
color: blueviolet;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子元素选择器</title>
<style type="text/css">
div>p{ /*>表示直接子代*/
color: red;
}
div>ul>li>p{ /*>表示直接子代,一个>号表示向下一个直接子代*/
color: blueviolet;
}
#ident1>p{ /*也可以跟子代选择器一样用父代的id或者class名*/
font-size: 25px;
}
.div1>p{
text-align: center;
}
</style>
</head>
<body>
<p>Love is love</p>
<div id="ident1" class="div1"> <!--如何只让下面两个p变成红色的？即直接子代变色-->
<p>Man always love beause of romantic</p>
<p>想来生活无非是痛苦和美丽</p>
<ul>
<li>
<p>独自美丽</p>
</li>
</ul>
</div>
<p>落日和你</p>
</body>
</html>
Expansion: The difference between descendant selector and child element selector, which one should you choose in enterprise development?
different:
1. The descendant selector will select all the children of the parent with this tag (including grandchildren...), but the child element selector> can only select direct children
the same:
1. Both can use the corresponding symbol to continue forever.
2. Both types of selectors can be implemented using tag selectors, id selectors, and class selectors.
8. Set the background color, background image
The background color is the attribute background-color, and its setting is the same as the setting of the font color value.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景颜色和背景图片</title>
<style type="text/css">
body{
<!--本地或者是网络地址-->
background-image: url("img1.jpeg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
1. background-repeat property (tiling method)
The background repeat attribute controls how the picture is tiled, with x-direction smoothing, y-direction smoothing, and no-repeat non-tiling.
2. background-position
Value:
(1) Specific position nouns: horizontal direction: left, center, right, vertical direction: top, center, bottom
(2) specific pixel value:Two values, the one on the left represents the pixel distance from the left of the picture, and the one on the right represents the pixel distance from the top of the image. You can take a negative value! ! ! Be sure to add the unit px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景颜色和背景图片</title>
<style type="text/css">
body{
background-color:pink;
}
div{
height: 500px;
width: 900px;
}
.div1{
background-image: url("img1.jpeg");
background-repeat: no-repeat;
background-position: center center;
background-position: 200px 0px;/*左边值表示水平距离左边的像素距离，右边的值表示距离顶端的像素距离*/
background-position: -100px 0px; /*可以为负值*/
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
