属性选择器
<!--head内部的css部分-->
<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部分-->
<span>用户名<input type="text" class="user"></span><br>
<span>手机号<input type="text" class="phone"></span><br>
<span>密码<input type="password" class="phone"></span><br>
文字属性
文字常用属性
属性值解释font-size16px文字大小/它有一个特殊功能，如果一个div内部包含多个a，并每个a都有背景图，那么此时图片和图片之间是有间夕的，可以通过设置父级元素div的font-size为0然后自定义a的font-size为指定大小即可font-weigth700文字粗细，从100—900，一般从700开始font-family微软雅黑…字体font-stylenormal(默认值)/italic(斜体)文字的风格line-height40px行高，实际就是写字的格子间距有多大background-colorred背景色text-alignleft；center；right内容水平对齐text-indent2m首行缩进text-decorationnone;underline;line-through没下划线；有下划线；删除线fontfont-style font-weigth font-size line-height font-family综合设定
示例
<!--head内部的css部分-->
<style type="text/css">
div{
font-size: 16px;
font-weight: 700;
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
font-style: italic;
line-height: 40px;
}
</style>
<!--html body部分-->
<div>北京马哥教育</div>
文本属性的连写
使用font属性可以简写属性，使用连写的时候，font-size、font-family为必须书写项；
<!--head内部的css部分-->
<style type="text/css">
div{
font: 700 italic 16px/40px 微软雅黑;
}
</style>
相等于
<!--head内部的css部分-->
<style type="text/css">
div{
font-size: 16px;
font-weight: 700;
font-family: 微软雅黑;
font-style: italic;
line-height: 40px;
}
</style>
常用字体
字体名称英文名称Unicode编码宋体SimSun\5B8B\4F53新宋体NSimSun\65B0\5B8B\4F53黑体SimHei\9ED1\4F53微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312隶书LiSu\96B6\4E66幼园YouYuan\5E7C\5706华文细黑STXihei\534E\6587\7EC6\9ED1细明体MingLiU\7EC6\660E\4F53新细明体PMingLiU\65B0\7EC6\660E\4F53
选择器练习题
<!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>
<!--head内部的css部分-->
<style type="text/css">
div.div1 {
width: 900px;
height: 600px;
text-align: center;
margin-left: 200px;
}
.h1 {
text-align: center;
font-family: "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">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<div class="div2">
<p class="p1">
<font class="f1">2014年07月16日20:11</font>
<font class="f2">新浪体育 评论中大奖（11人参与）</font>
<a href="#">收藏文本</a>
<input type="text" placeholder="请输入查询条件">
<input type="submit" value="搜索">
</p>
</div>
<hr>
<p>
新浪体育讯 7月16日是燕京啤酒<font color="navy">[微博]</font>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
<p>
据记者多方了解的情况，李虎<font color="navy">[微博]</font>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
<p>
这样的情况并没有影响到丽江嘉云昊队<font color="navy">[微博]</font>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>
</div>
</body>
</html>
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/3-wen-zi-shu-xing-he-shu-xing-xuan-ze-qi.html
支付宝扫一扫 
评论列表（196条）
测试