2.前端之css概述

1.CSS的优势

• 1.内容和表现分离
• 2.网页结构表现统一,可以实现复用
• 3.样式丰富
• 4.可以使用独立于html的css文件
• 5.利用SEO,容易被搜索引擎收录

2.四种css样式使用方式

• 1.内部样式:直接在网页头部(head)添加style标签

   <style> ...........  </style>
  

• 2.2.外部样式(链接式):在网页头部(head)通过link标签调用外部样式表

   <link> rel="stylesheet" href="css文件位置" </link>
  

  stylesheet代表调用外部样式表(会将页面结构渲染之后再展示)

• 2.3.行内样式:直接在标签内添加style属性

   <标签 style="....">  .....  </style> 
  

• 2.4.导入式:是外部样式的一种,在网页头部(head)使用, 但是是CSS2.1特有的

   <style>  import url("css文件位置") </style>
  

  少用,在展示页面会先展示页面结构在进行渲染

• 2.5.优先级:采取就近原则,哪种样式距离标签近,标签就使用哪种样式

3.选择器

• 1.作用:选择页面的某一个或某一类元素
• 2.语法: 选择器{ 声明…; }

4.基本选择器

• 1.标签选择器:选择一类标签 标签{}
• 2.类选择器 class:选择所有class属性一致的,可以跨标签 可复用 .类名{ }
  <标签 class=“类名”>… <标签>
• 3.ID选择器:全局选择器:全局唯一 不可复用,只可使用一次 #id名{ }
  <标签 id=“id名”>…<标签>
• 补充:优先级:id选择器>class选择器>标签选择器
• !important加载样式上优先级为最高

5.层次选择器

• 1.后代选择器:在某个元素后面的所有元素 body(父元素) 元素{ 声明; }
• 2.子选择器:在这个元素下一个层次的所有元素
  body(父元素)>元素{ 声明; }
• 3.相邻(兄弟)选择器:当前选中A元素的下个A元素,不包括自己(只有一个)
  .类/#id +元素{ 声明; } 注:当A元素下个元素不是A类型时样式无效
• 4.通用选择器:当前选中A元素下面的所有同层次A元素,不包括自己
  .类/#id ~ 元素{ 声明; }

6.结构伪类选择器

• 1.选中A元素内的第一个子元素

  A元素 子元素:frist-child{ 声明; }

• 2.选中A元素内的最后一个子元素

  A元素 子元素:last-child{ 声明; }

• 3.body的第n个A元素,考虑顺序,非规定元素类型也计入,当第n个元素非A类型时无效

  A元素 子元素:nth-child(n){ 声明; }

• 4.body的第n个A元素,只考虑与元素同类型的(A类型)

  A元素 子元素:nth-of-type(n){ 声明; }

• 5.子标签选中:div 子元素:nth-of-type(1) input {…}

• 6.A元素 子元素:nth-child(even){ 声明; } :偶数行选择器

  A元素 子元素:nth-child(odd){ 声明; } : 奇数选择器

7.属性选择器

• 1.选中具有指定属性的所有A元素

  A元素[属性]{ 声明; }

• 2.选中属性绝对等于值的所有A元素

  A元素[属性=值]{ 声明; }

• 3.选中属性中包含值的所有A元素

  A元素[属性*=值]{ 声明; }

• 4.选中属性中以值开头的所有A元素

  A元素[属性^=值]{ 声明; }

• 5.选中属性中以值结尾的所有A元素

  A元素[属性$=值]{ 声明; }

• 补充:值可以加双引号也可以不加,对结果没有影响

8.span标签

• 1.行内元素,无任何格式,通常用于网页需要重点显示内容
• 2.语法: 内容

9.div标签

• 1.块元素,通常用于一块区域

10.表单两种请求

1.get请求

• 1.请求参数拼接在请求路径后面,地址栏可见
• 2.因为请求参数可见所以相对不安全
• 3.请求参数大小有限制
• 4.传输效率相对较高

2.post请求

• 1.请求参数不在请求路径后面,地址栏不可见
• 2.因为请求参数不可见所以相对安全
• 3.请求参数大小无限制
• 4.传输效率相对较低