(二)CSS和JS

一.CSS简介

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的 文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以 及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等， 而且还可以针对不同的浏览器设置不同的样式。

二.体验CSS

　　1、CSS基本语法

　　　　1.1 书写位置：head标签内部

　　　　1.2 环境：<style type=“text/css”></style>

　　　　1.3 书写css属性： 控制的对象{ css键值对 } CSS键值对语法 k:v;

　　2、CSS常用文字控制属性

　　　　字体：font-family

　　　　字号：font-size

　　　　颜色：color

　　3.书写语法：

　　　　1、写在head标签的最后位置

　　　　2、放在style标签中

　　　　　　例：

　　　　　　P{   属性名:属性值;  属性名:属性值; ...........     }

　　　　　　注意：在大括号中，空格一般来说写与不写，不会造成语法错误

　　　　3、color    设置文字颜色

　　　　4、font-size   设置文字大小，必须在数值之后添加px，像素单位

 

 

四、调试工具的使用方法

谷歌浏览器：f12打开调试工具，在左侧找到想要设置的html代码，点击左键选中，右侧就会出现，对应的css样式，我们可以直接在浏览器中调试代码；此调试刷新后会恢复原样，如果想更改，必须回到代码中设置；

五、选择器

　　选中控制的对象

类选择器

　　 前台工作人员最常用的选择器。

　　定义类选择器：

　　　　要求以“点”开头，后面紧跟类选择器的名称，名称自定义，但要满足

       规则：

　　　　不能出现特殊符号；不能以数字开头，可以以数字结尾

       使用类选择器：

　　　　要求在开始标签身上添加html属性：class=“类选择器名称”

      多学一招：

　　　　添加多个类： class=“名称1 名称2”

 

三、CSS基础选择器

(一)标签选择器

定义：css代码选择页面中的html标签

 

(二)ID选择器

　　后台开发人员常用的选择器，一个页面同一个id名称只能使用一次。用html语法中的id的值，在css语法中使用 # 号来获取的一种方式

 　　定义ID选择器：

　　　　要求以“#”开头，后面紧跟ID选择器的名称，名称自定义，但要满足规则

　　语法规则：　　　　

　　　　<p id=”p1”>呵呵</p> 

　　　　#p1{ xxxx }

　　　　　　注意：id名称是唯一的（一个标签只允许有一组id的值、id的值只允许出现一次，其它标签不能使用重复的id名字）；

 　　　　　　　　　　不允许使用数字开头来命名，可以以数字结尾

         　　　　　　　　不允许使用中文来命名

 　　　　　　　　　　不允许使用除了下划线和中划线（减号）以外的其它符号

　　使用ID选择器：

　　　　要求在开始标签身上添加html属性： id =“id选择器名称”

(三)class类选择器

　　定义：html中使用class来设置值，在css语法中使用英文状态下的句号来获取页面中内容

　　语法规则：

　　　　<p class=”hehe gaga heihei”>我是</p>

 

　　　　　　.hehe{ xxx }

　　注意：class类选择器对比id更加灵活，可以给每个标签设置多个class，不同的标签可以设置相同的class；其它的命名规则与id选择器相同；

　　　　　　Id用的少 class用的多

 

六、基础选择器权重

 

　　标签选择器  <   class类选择器   <   id选择器

 

           1斤        10斤       100斤

 

注意： 当选择器权重相同的时候，后写的把先写的覆盖；

 

七、div和span标签

　　div标签：没有任何语义，它就是当做一个独占一行的大盒子存在

　　span标签：没有任何语义，它当做小盒子一行可以存放多个；

八、css书写位置（引入方式）

1、行内式

　　书写在开始标签身上的style属性

　　css代码直接写在html标签的身上，修改起来相当不方便，此种写法一定不要出现

　　　　<p style="color: red;">我式p</p>

 

　　例如：

　　　　<div style="color:#333; background:pink; height:50px;">我是行内式CSS</div>

　　　注意：行内式没有实现结构与样式分离

2、内嵌式

　　写在head标签里面，放在style标签中的css代码

　　（css代码和html代码在同一个文件中）

    注意：内嵌式是结构与样式半分离 （电商首页用，优化加载速度）

3、外链式

　　写在head标签里面，使用link标签外链进html中的css形式

　　（我们要有一个单独存在css的文件，将文件使用link标签引入到html页面）

　　注意：在外链css的文件中，直接写大括号css语法即可，不要再添加style标签了！！！

　　使用场景：内嵌式必须用在电商网站的首页；其它任何页面都要使用外链式，实现代码的分离，方便今后代码的修改整理；

　　例如：

　　　　<link rel="stylesheet" type="text/css" href="style.css" />

　　链接三属性：

　　　　格式 -- type -- 纯文本的CSS格式

　　　　关系 -- rel -- 样式表/样式单

　　　　地址 -- href -- 相对路径查找CSS文件

　　　注意：外链式是结构与样式完全分离

引入方式（书写位置）权重对比

　　（外链式 = 内嵌式）< 行内式

　　了解：如果代码中出现 !important 此句css代码权重被提高到顶级；

九、复合选择器

(一)后代选择器

   规律：一个空格表示后代关系

 

　　Css选择器语法中，出现空格就代表寻找后代；

　　　　例：   div span{  }

　　注意：后代包含：儿子、孙子、重孙子......

(二)并列、并集选择器

 

　　被并列上的选择器，一起被选中；

　　　　语法：

　　　　　　.hehe,#pgag,h2,h3,div span{  }

　　　　无论什么选择器只要使用英文的逗号连接，就是并列都选中的意思；

(三)指定标签选择器 

　　规律：不管标签身上有类选择器也好，还是id选择器也好，都在标签后面连着写

十、了解边框属性

在程序和我们的话术中，标签周围的线，叫边框，ui设计师叫描边；

注意：程序员可以单独设置上下左右四个方向的边框样式

 

十一、盒子模型

程序中的盒子模型组成部分：

　　1、内容  

　　2、内边距、内填充（padding）：内容与边框之间的距离；

　　3、边框线(border)

　　4、外边距、外填充（margin）：盒子与其它盒子之间的距离

详解盒子模型的border:

　　顶部边框线：border-top

　　右侧边框线：border-right

　　底部边框线：border-bottom

　　左侧边框线：border-left

 

盒子模型在火狐的显示样式

  黄色：margin                             

 

  黑色：border

  紫色：padding

  浅蓝色：内容/实体化范围

 

补充:网页常见图片格式

png可以实现透明效果、

jpg是普通图片类型、

gif可以实现动图效果、

psd分图层

十二、js特效

Js负责网页中的行为，它是控制html和css的

1、模态窗口：弹出窗口的效果是半透明的，盖住后面的页面内容；

使用场景：要求用户优先解决的问题，就会放到模态窗口中

2、js的动画累积：在程序中带有动画的模块，我们要多次触发这个动画，查看是否有动画的累积、排队的情况；