首页 > Web开发 > 详细

CSS

时间:2015-10-25 00:53:15      阅读:283      评论:0      收藏:0      [点我收藏+]

CSS

id选择器:

id选择器顾名思义就是给一个元素加上一个名字
比如说我要给一个div里面加一个背景颜色红色
先给一个div一个命名,id前面要加一个“#”号来表示

                             <div id=“mingzi”></div>

                                #mingzi

                                   {background-color: red;}

                             这就是id选择器
当然di选择器也可以和生派选择起一起用,比如说我想给一个div里面的p标签加一个字体大小,类前面要加一个.来表示

                              #mingzi p

                                   {font-size: 18;}

这就是id和生派选择器一起用

 

类选择器:

类选择器和上面介绍的id差不多,还是一样我们给一个div里面加一个背景颜色,类前面要加一个“.”来表示

                             <div class="mingzi"></div>

                                     .mingzi

                                        {background-color:red;}

这就是一个类选择器

当然id可以和生派选择器一起用,同样类也可以和生派一起用

                                <idv class="mingzi"></div>

                                       .mingzi p

                                           {font-size:18;}

这就是类选择器和生派一起用

 

属性选择器:

属性选择器是可以把含有标题mingzi的所有元素的颜色变成红色

                                [mingzi]

                                 {color:red;}

这是所有带有mingzi标题的属性都变成了红色,当然属性选择器也可以对单个指定的元素属性

                               p[mingzi]

                                  {color:red;}

还有就是属性和值多个选择器

                              [title~=mingzi]

                                 {color:red;}

这里的"~="的意思是包含有mingzi的内容都要变成红色。如果只有一个"="的话就表示只有有mingzi才要变成红色

这里要介绍一个包含指定值lang属性元素所有变成红色,使用于带有连字符分隔符号

                             [lang|=mingzi]

                                  {color:red;}

背景:

给一个div里面设置一个背景颜色

                               div

                                  {background-color:red;}

给div里面添加一张背景图片

                               div

                                   {background-imge: url(背景.jpg);}

背景图片不平铺

                              div

                                  {background-repeat:no-repeat}

 

文字:

一段文字首行缩进两字符,这里还可以使用负值和百分比

                             p

                             {text-indent: 2em}

一段文字里面水平对齐

                           p

                            {text-align:center}

一段文字里面每个字的间隔5像素

                          p

                           {word-spacng:5px;}

字符转换,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写,默认none不做任何改动

                         p

                          {text-transform:uppercase;}

CSS

原文:http://www.cnblogs.com/wangqiulin/p/4907998.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!