CSS基础-01

CSS样式

---

 

1. Web前端三层：

　　　　HTML：结构层    CSS：样式层    JS：行为层

2. CSS层叠式样式表：使用符合CSS语法的纯文本为页面添加样式效果。

3. 注释：/* 描述规则，没有任何作用 */   快捷键：Ctrl+/

4. HTML：<table border=”   ”>    </table>

CSS:table{ border:     ;}

使用CSS选择器定义标签

<style>

 　　选择器{属性名称：属性值;}     <!--必须加分号-->

</style>

5. CSS对空格、换行、缩进不敏感；

　CSS发送到服务器之前：对代码进行压缩，删除所有空格、换行，代码显示在一行，文件体积变小，加载速度快。

6. CSS语言需要绑定HTML，来渲染结构和内容（不能单独运行）

CSS引入HTML的方式有四种：行内（内联）式；嵌入（内嵌）式；外链（链接）式；导入式。

7. 添加样式的方式分为三种：

• 直接将CSS代码编写到style属性中，缺点：会导致结构和表现耦合，不方便代码的复用，并且不方便后期的维护，所以开发中永远不要使用内联样式。

　　　<p style=”color:颜色；font-size:字体大小；”

• 样式编写在style标签中(style写在head里)，缺点：只能在当前页面复用，在其他里面不能用

　　将样式编写在style标签中，通过CSS选择器选中指定的元素并为其设置样式。将HTML与CSS分开，CSS样式可以复用，方便后期维护

　　<style>

　　　　table{ border:    ;}     /*设置边框*/

　　　　li{list-style-type:    ;}   分号，冒号必须要写

　　</style>

• 创建style.css文件，在其中编写样式，在HTML中引入，可以在不同页面使用。

　　优点：将样式表写在外部文件中，可以充分利用到浏览器的缓存机制，进而加快页面的加载速度，提高用户体验

　　<link rel=’stylesheet’ href=’style.css’

8. 引入CSS的目的：为了达到结构和样式分离；更加丰富的效果，浏览器兼容性更好，HTML结构代码书写量减少。

9. CSS语法：选择器（选择哪个标签进行样式设置）

声明块：样式规则（给标签添加什么属性）：样式+样式值   利用;隔开样式

　　语法：选择器{

　　　　　　　　样式名称：样式值；}

选择器

---

 

元素选择器

　　作用：根据标签选中指定的元素

　　语法：标签名  p{},div{}

　　例：第二行设置字体大小50px

　　　　#p2{color:red;font-size:50px}

选择器分组（并集选择器）

　　作用：为多个选择器设置同样的样式

　　语法：选择器1，选择器2，...选择器N{}

　　例：为第三行、第四行、第五行设置一个背景颜色为黄

　　　　style:   #p3,#p4,#p5{background:yellow}  /*逗号表示并集*/

　　　　body:   <p id=’p1’>   </p> 

类选择器  p.p1+tab键=<p class=’p1’>   </p>

　　作用：根据元素的class属性选中元素，功能更强大

　　为元素进行分类，拥有相同class属性的元素属于同一类元素，可以重复使用

　　例子：.p{}，.div{}

　　　　body:   <p class=”p2 p3 p4”>  </p>

　　　　style:   .p4{background:yellow}        /*包含p4都设置为  */

通配选择器

　　作用：选择页面的所有元素

　　语法：*{color:red;}

交集选择器

　　作用：选中同时符合多个选择器的元素

　　语法：选择器1.选择器2{}

父子兄弟选择器

　　元素间的关系：

    　　父元素

        　　- 直接包含子元素的元素

  　　  子元素

       　　 - 直接被父元素所包含的元素

    　　祖先元素

        　　- 直接或间接包含后代元素的元素

       　　 -父元素也属于祖先元素

    　　后代元素

     　　   - 直接或间接被祖先元素包含的元素

      　　  - 子元素也属性后代元素

    　　兄弟元素

        　　- 拥有相同父元素的元素

后代元素选择器

　　作用：选中指定元素的指定后代

　　语法：祖先  后代{}

　　例子：div span{}

　　选择某一特定的div进行操作：

　　　　body:   <div class=”d1”> <span>  </span> </div>

　　　　style:   .d1 span{background:yellow}

子元素选择器

　　作用：选中指定父元素的指定子元素

　　语法：父元素>子元素 {}

　　例子：div>span{    }

兄弟元素选择器

　　作用：兄+弟{}选择紧随其后的一个兄弟元素；兄~弟{}选择其后面的所有兄弟元素。

　　语法：A+B{}==选择B；A~B{}

　　　　div+span{}

　　　　div~span{}

伪类选择器

　　作用：一般用来表示元素的一些特殊的状态或者特殊的位置

　　　　：first-child--表示第一个子元素（所有的子元素中）

　　　　：first-of-type--同类型中的第一个子元素

　　　　：last-child      ：last-of-type

　　　　：nth-child（even/odd/n）第n个子元素，奇数偶数

　　　　：nth-of-type（even/od/n）同类型的第n个元素

　　　　：only-child唯一的一个子元素

　　　　：only-of-type同类型中唯一一个子元素

　　　　：empty：匹配空元素   div:empty{    }

　　　　：not（.p1）所有p都选择除了p1

　　　　例子：p：first-child

　　　　　　div p:first-child{   }

　　　　　　p:first-child{   }

a的伪类

　　　:link

   　　 - 正常的超链接（带有href的a标签)

　　　- 主要用来设置没有访问的链接的样式

　　　:visited

    　- 访问过的超链接（只能修改字体的颜色）

　　　:hover

  　  - 鼠标移入的状态（不仅仅适用于超链接）

　　　:active

    　- 鼠标正在点击的状态（不仅仅适用于超链接）

 

 属性选择器

　　作用：根据元素的属性来选中元素

　　语法：[属性名] 获取含有指定属性的元素

　　例子：div[title]{   }：含有title元素的div

　　　　[title]{  }

　　　　[title=”  ”]{  }

　　　　[title^=’ h ’]{  }   ^以什么开头       [title$=’ h ’]{  }   $以什么结尾

　　　　[title*=’ h ’]{  }   *包含就行，不管位置

　　　　[title=’  ’ i]{  }   i无论大小写

伪元素

　　伪元素主要表示一些特殊的元素

    　　::before 表示元素开头的位置

    　　::after 表示元素结尾的位置

    　　::first-letter 表示首字母

    　　::first-line 首行

   　　 ::selection 选中的内容时，呈现出来的效果

　　　.box1::before{color=  ;content=’   ’}在开头加入设定文字

　　　P::first-letter{     }

继承

　　<p><span>   </span></p>:两者格式相同，继承关系

　　继承

     　　 在网页中后代元素会继承到祖先元素上的样式

    　　　　- 为祖先元素所设置样式，也会同时应用到其后代元素上

    　　　　- 继承的存在大大的简化了样式的编写

      　  可以只为祖先元素设置样式，即可让所有后代元素都同时具有该样式

    　　在开发中可以将一些公共的样式，统一设置到祖先元素上，这样即可让所有的元素都具有该样式

   　　　　 - 并不是所有的样式都会被继承，比如背景相关的样式都不会继承，还有布局相关...

　　　　<div style=’width:10px;height:5px;background-color:red;’></div>

 选择器的权重！！！

　　当使用不同的选择器选择了相同的元素，而又为其同一个样式设置了不同的值，此时就发生了样式的冲突

　　显示哪个样式，由选择器的权重决定，权重高的优先显示

　　优先级：若添加！important（最重要，慎用）

   　　 内联样式 1000(1,0,0,0)

   　　 id选择器 100 (0,1,0,0)

    　　类和伪类  10 (0,0,1,0)

    　　元素      1 (0,0,0,1)

   　　 通配选择器 0 (0,0,0,0)

　   　继承来的样式，没有优先级

　　.box1{color=’’ ! important}

　　p.p1{}>.p1{}==10+1>10  对于复合选择器来说，需要将所有的选择器的优先级相加再比较

    优先级计算时不会超过其最大的数量级,分组选择器中的优先级是独立计算的。如果两个选择器的优先级相同，则使用靠下的样式。