attribute selector
<!--The css part inside the head-->
<style type="text/css">
input[type="password"] {
background-color: red;
input[type="text"][class="user"] {
background-color: green;
input[type="text"][class="phone"] {
background-color: blue;
</style>
<!--html body part-->
<span>Username<input type="text" class="user"></span><br>
<span>Mobile phone number<input type="text" class="phone"></span><br>
<span>Password<input type="password" class="phone"></span><br>
text attribute
Common properties of text
Explanation of attribute valuefont-size16px text size/It has a special function. If a div contains multiple a's inside, and each a has a background image, then there is a gap between the picture and the picture. Sometimes, you can set the font-size of the parent element div to 0 and then customize the font-size of a to the specified size. font-weigth700 text weight, from 100-900, usually starting from 700 font-family Microsoft Ya Black... font font-stylenormal (default value)/italic (italic) text style line-height 40px line height, which is actually the size of the grid spacing for writing background-colorred background color text-alignleft; center; right content horizontal alignment text-indent2m First line indent text-decorationnone; underline; line-through no underline; underline; strikethrough fontfont-style font-weigth font-size line-height font-family comprehensive settings
Example
<!--The css part inside the head-->
<style type="text/css">
div{
font-size: 16px;
font-weight: 700;
"Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
font-style: italic;
line-height: 40px;
</style>
<!--html body part-->
<div>Beijing Marco Education</div>
Ligation of text attributes
You can use the font attribute to abbreviate the attributes. When using continuous writing, font-size and font-family are required items;
<!--The css part inside the head-->
<style type="text/css">
div{
font: 700 italic 16px/40px Microsoft Yahei;
</style>
equal to
<!--The css part inside the head-->
<style type="text/css">
div{
font-size: 16px;
font-weight: 700;
font-style: italic;
line-height: 40px;
</style>
Commonly used fonts
Font name English name Unicode encoding Song Dynasty SimSun\5B8B\4F53 New Song Dynasty NSimSun\65B0\5B8B\4F53 Black body SimHei\9ED1\4F53 Microsoft YaHei\5FAE\8F6F\96C5\9ED1 KaiTi_GB2312KaiTi_GB2312 \6977\4F53_GB2312 Lishu LiSu\96B6\4E66 Kindergarten YouYuan\5E7C\5706 Chinese fine black STXihei\534E\6587\7EC6\9ED1 Xingming MingLiU\7EC6\660E\4F53 New Xingming PMingLiU\65B0\7EC6\660E \4F53
Selector exercises
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--The css part inside the head-->
<style type="text/css">
div.div1 {
width: 900px;
height: 600px;
text-align: center;
margin-left: 200px;
.h1 {
text-align: center;
"Microsoft YaHei";
font-size: 20px;
text-indent: 1em;
div .f1 {
color: darkgray;
font-size: 10px;
div .f2 {
color: red;
font-size: 10px;
.div1 > p {
text-align: left;
text-indent: 2em;
div input[type='submit'] {
color: blue;
</style>
</head>
<body>
<div class="div1">
<h1 class="h1">The Chinese second team suddenly changed coaches before the game and still beat Yiteng. The dark horse of the plateau wants to stop Sainty</h1>
<div class="div2">
<p class="p1">
<font class="f1">July 16, 2014 20:11</font>
<font class="f2">Sina Sports comments won the jackpot (11 people participated)</font>
<a href="#">Favorite text</a>
<input type="text" placeholder="Please enter the query criteria">
<input type="submit" value="search">
</p>
</div>
<hr>
<p>
Sina Sports News July 16th is the third round match of Yanjing Beer<font color="navy">[Weibo]</font>2014 Chinese Football Association Cup. Lijiang Jiayunhao team plays against Harbin Yiteng team at home. game day. However, at noon on the match day, Lijiang Jiayunhao team coach Li Hu and two other members quietly submitted their resignations to the club and packed their bags to leave. Under such circumstances, the Lijiang Jiayunhao team had to let the previous coach Yang Guidong direct the game on his behalf. </p>
<p>Lijiang Jiayunhao team coach Li Hu was absent from the pre-match press conference yesterday. The explanation given by the club at that time was that Li Hu went to the hospital for treatment due to poor health. However, when Li Hu appeared at the club today, he denied this statement to reporters and admitted that he had submitted his resignation to the club. </p>
<p>
According to various reports from reporters, Li Hu<font color="navy">[Weibo]</font> and the coaching staff have been under a lot of pressure in terms of coaching performance recently. During the league break, the coach The team once proposed to the club that they could introduce more capable players to strengthen the team. However, due to differences with the club on investment and performance indicators, Li Hu eventually resigned along with the coaching staff on match day. </p>
<p>
This situation did not affect the members of the Lijiang Jiayunhao team<font color="navy">[Weibo]</font>. During the game, the Lijiang team fought very fiercely at home. In the heavy rain Still taking advantage of their abundant physical strength, they finally defeated the Chinese Super League team Harbin Yiteng with a penalty kick and successfully advanced to the next round. <strong>According to the Chinese Football Association Cup schedule, Lijiang Jiayunhao team will face Jiangsu Sainty team on the 23rd of this month. </strong></p>
</div>
</body>
</html>
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/3-wen-zi-shu-xing-he-shu-xing-xuan-ze-qi.html
支付宝扫一扫 
评论列表（196条）
测试