码迷,mamicode.com
首页 > Web开发 > 详细

html基础(选择器,font属性 )

时间:2017-07-13 20:23:46      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:inpu   value   hover   isp   title   css选择器   nbsp   12px   visit   

css选择器
 
 css与html的关系
 
css以html为基础
css主要设置的就是html标签中的属性样式,css进行网页布局。
 
css语法
选择器{属性:值,属性:值}
 
css选择器
 
基本选择器
技术分享
*{margin:0; padding:0}网页中所以的标配都可以用

p{ font-size:2px }标签选择器

.input{background:#ffo}

p.info{background:red} p下面类名是info的标签

#footer{ background:red; }

p#info{ background:red; }p下面id是#info的标签

 

多元素选择器

技术分享

div,p{ color:#f00 }多元素选择器

ul li{ display:inline;}后代选择器

ul>li{ displa:inline; }子元素选择器

div+p{ color:#f00;}毗邻元素选择器

 

属性选择器

技术分享

E[att]
<style>
  div[title]{ color:red }
</style>
<div title="哈哈"></div>
<div class="acb"></div>
命中第一个div,
E[att=val]
<style> div[class*="b"]{ color:red } input[type="text"]{ foot:12px; } </style>
命中所有div,因为匹配到了class属性,属性值都包含了b <div class="abc"></div> <div class="acb"></div>
只匹配第一个input <input type="text" name="Name"/> <input type="button" name="Name"/>

 

伪类选择器

技术分享

p:frist-child{ font:12px } 匹配父元素第一个子元素
a:link{ color:red; }/* 未被访问的链接 */
a:visited{color:red }/* 已被访问的链接 */
a:hover{ color:red;}/* 鼠标指针移动到链接上 */
a:active{ color: red;}/* 正在被点击的链接 */
style type="text/css">
  input[type=text]:focus  { background:red; color:#fff}
</style>
<body> <input type="text" value="skss" /> </body> 匹配获得当前焦点的元素
<style>
  p:before{ content:台词};
</style>
<p>开始</p>//台词开始  在E元素之前插入生成的内容
<style>
  p:after{ content:台词}
</style>
<p>开始</p>//开始台词   在E元素之后插入生成的内容

 

html基础(选择器,font属性 )

标签:inpu   value   hover   isp   title   css选择器   nbsp   12px   visit   

原文地址:http://www.cnblogs.com/wdz1/p/7162073.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!