CSS基础知识点轨迹（一）

 

1.布局标签：

A.<div></div>:布局用div这个标签，表示一个区域块，本身没有任何宽和高，可以用style属性定义width和height，背景色等

B.<span></span>

2.CSS：层叠样式表Cascading stylesheets控制表现；JavaScript控制行为

3.样式表类型：A.属性样式<astyle=””>：内联样式表

                              B.内部样式<style></style>：内部样式表

                              C.引用样式<link>：外部样式表

                              D.浏览器用户自定义样式

                              E.浏览器用户默认样式

4.样式表优先级：就近原则浏览器设置<外部样式<内部样式<内联样式

5.层叠：多个样式表作用于一个元素，先判断是否有重复的样式，如果有重叠的样式，执行优先级就近原则

6.选择器：

       A.ID选择器：用#加ＩＤ表示

         　　B.元素选择器：直接取标签名字针对页面上所有的元素

                   C.class选择器：表示同一类元素的相同样式，用.点表示，可以重复

ID选择器不能以数字开头，不能合并使用，类选择器也不能使用数字开头，ID选择器优先级高于类选择器的优先级，类选择器优先级大于元素选择器

       D.后代选择器:如#ul li，包含所有的后代

                   E.子元素选择器:只找子类，如>strong

                   F.相邻兄弟选择器：不包括自己，如li+li

                   G.通过属性和属性值选中元素：如input[name=“username”]

                   H.通过带有指定属性选中元素：如[title]{ }选择元素中属性值带有特定的单词

                   I.通过带有指定单词开始的元素：[title~=“gyy”]{}

^=以……开头，*=所有，$=结尾

7.设置背景：

（1）背景色：background-color

（2）背景图片：background-image：url（“路径”）如果图片没有当前div大，那就默认x轴和y轴平铺；background-repeat：no-repeat设置图片不平铺；repeat-x和repeat-y设置图片只在某一方向上平铺

（3）背景图片位置background-position：center center（x轴 y轴）可以替换成left、right、bottom、top

（4）背景尺寸：background-size：30px 30px

8.设置文本

（1）字间距：letter-spacing

（2）文本位置：text-align：center设置文本默认居中，只能控制左右

（3）文本样式：text-decoration：underline下划线

                              none移除下划线

                                                                 overline设置上划线

                                                                  line-through中划线

（4）文本首行缩进text-indent

（5）字母样式：text-transform：capitalize首字母大写

                                                                 Uppercase全大写

                                                                 Lowercase全小写

（6）单词间隔word-spacing

9.设置字体：

（1）字体：font-family

（2）字体尺寸：font-size

（3）字体格式：font-style：Italic斜体

（4）字体粗细：font-weight：100-900

（5）字体颜色：color

10.设置链接：基于a标签

（1）link：未点之前

（2）visited：点了后

（3）hover：鼠标移上去

（4）active：点击时

超链接必须按照上面四个设置顺序来，如果把visited放在最后，执行完第一次后就默认为visted的样式了

11.设置列表：<ul></ul>无序列表

<ol></ol>有序列表

<li></li>添加元素

（1）list-style-type：none无小圆点

（2）list-style-image：url（“”）图标

（3）line-height行高，可以控制上下