2020.4.7 css

发布于 2020-04-07  18 次阅读


1.复习内容

Emmet

  • 属性

    input[type=“text”]

2.灵感代办

  • get和post区别

  • 两组ANKI

  • SOCKET复习

  • form表单练习

  • Windows快捷键

3.学习内容

表单 form

作用:

采集用户信息,提交给服务器

组成:

表单元素(form)负责提交数据,表单控件(input passwd) 采集信息

提交方式:

  • get方式

    get是用字符串拼接在网址中 ?开始 &连接,

  • post方式

    post是将数据封装在请求体中,如果是文件,图片等,要用post,并设置编码类型,enctype=“multipart/from-data”

* input标签属性

  • input标签

    一般都放在form表单中,放在form外的数据并不提交,类型就用type=“text”

  • name属性

    相当于key和value中的key,传递时候是key=value,也是控件的名称

  • placeholder属性

输入框的提示文本,类似于安卓的hint

  • maxlength属性

    设置最大字符数

  • readonly属性

    不需要取值,设置输入框只读

  • value属性

    设置控件的默认值,如果用户改变,则提交用户更改的属性

  • type类型 radio

    设置控件的单选多选,如果是多选,一组内容name要唯一,其中value是要被提交的属性

  • checked 属性

    按钮选中状态,默认选中

  • type类型checkbox

    多选框

  • label标签

    用来绑定管理一个id,点击自身和点击id元素效果相同

  • type类型 file

    可以选择上传一个文件,要用post才能传输二进制,get知识传输一个文件名

  • type类型 hidden

    隐藏域:发送当前页面附加信息,用户不可见

  • select 标签 下拉菜单

    <select>要给出name值,里面嵌套的option要给value值

  • textarea标签 多行文本域

    不常用,可以在里面换行

  • 功能按钮 提交 重置 普通按钮

    value在功能按钮中,设置的是显示的文本

    submit:是提交,将控件内容提交

    reset:是清空,还原到初始状态

    button :是普通按钮,没有value就为空

  • button标签

    可以指定类型,type也是三种

    form标签内:等价于submit提交

    form标签外:等价于普通按钮

CSS 层叠样式表

层叠样式表

使用方式

  1. 行内样式:style标签属性:书写css样式声明
    • element.style{} 都是行内样式

      样式代码:属性名:属性值

  • 常用属性:
    • font-size 设置字体大小,去像素值
    • color 设置文本样色
    • background-color 设置背景颜色
  1. 内嵌样式表

    使用<style><\style>书写样式,实现结构与样式分离,使用选择器匹配(根据标签名,类名,属性名等来查找元素)

  • 外链样式表 Css

    <link> 引入样式表

    • rel属性 stylesheet
    • href属性 index.css
    • type属性 text/css
    • 如果有删除线,应该是属性出错,如果在继承中,说明是优先级不够
  • 样式表特点

    1. 层叠性

      多个样式之间可以重叠设置

    2. 继承性

      子元素可以继承父元素或者祖先元素的文本样式

    3. 优先级

      发生样式冲突时,谁优先级高就用谁

      优先级划分:行内样式>选择器样式>代码书写顺序>浏览器默认样式和继承样式(后来者居上)

  • user agent stylesheet

    浏览器的默认样式

  • inherited from

    继承浏览器样式

    如果有删除线,是继承的优先级不够

标签选择器

基础选择器 (id 标签 类)

  1. 标签名匹配元素(h1,div等)
  2. ID选择器(根据ID属性值 # 来选择)
  3. 类选择器(根据类 .来选择)
  4. 群组选择器(selector1,selector2)
  5. 后代选择器(selector selector)
  6. 子选择器 (selector>selector)浏览器查找时候是逆序查找
  7. 属性选择器 ([id=“value”] 就是选择属性,可以省略值)
  8. 并列选择器(id.class 就是并列选择器,没有空格,标签都要放在前面 p.class)
  9. 伪类选择器(配合基础选择器使用)表示元素的某种状态
    1. 在chrome中,右上角:hov强制显示状态
    2. 伪标签中,可以嵌套使用 :hover div
    • 超链接伪类选择器

      :link 访问前

      :visited 访问后

    • 动态伪类

      :hover 鼠标悬停元素上 最常用的状态

      :active 激活状态,鼠标点按

    • 表单控件的状态

      :focus 输入框编辑状态时 ,光标在其中(取消输入框在焦点下的轮廓线outline:none)

    选择器的优先级

    1. 相同类型的选择器(后来居上)
    2. 不同类型的选择器发生样式冲突,看权重,权重值越高,优先级越高
      1. 标签选择器 1
      2. 类class、伪类 10
      3. id选择器 100
      4. 后代选择器 子代选择器 (各个选择器累加计算)
      5. 群组选择器 每一个选择器都有各自的权重

4.扩展延伸知识

伪元素 after和before

​ 在元素前后添加

https://www.cnblogs.com/polk6/p/8058468.html

浏览器内核

  1. IE trident
  2. Firefox Gecko
  3. Google chrome Webkit/blink
  4. Safari webkit
  5. Opera presto

网页结构

  • HTML CSS Javascript
  • 结构,样式,动作

学习阶段(任何技能都要长时间的练习)

  1. 能用出来(实践,扎实复习)
  2. 能讲出去(理解透彻)

同步异步

​ 同步是一个一个执行
​ 异步是共同执行

CSS 权重(优先级)

​ 行内样式: 1000
​ id 100
​ class 属性 伪类 10
​ 标签|伪元素 1
​ 通配符 * 0
​ 256进制 :CSS进制

HTML5中新引入了section

​ section和div的功能是一样的,想用来取代div

CSS查找规则

字体基础属性

  • ​ font-size:20px 设置字体大小(设置字体高度,而不是宽度)
  • font-width:bold; 100-900 没有单位
  • ​ font-style:italic 斜体
  • font-family: arial 设置字体

color:字体颜色

  • 土鳖式:纯英文单词 red
  • 颜色代码:#fff
  • 颜色函数:rgb(,,)

border:是一个复合属性

  • border是组合图形
  • border-witdth
  • border-style
  • border-[left/right/top/bottom]-color

transparent是透明色

颜色基础

​ 三原色:

光学三原色 RGB

​ 美术三原色 RYB

​ 每两位代表一种颜色:

5.知识内容个人梳理

6.今天都复习了之前的什么内容


Ares个人进阶之路