CSS（1）

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；}