Danmo 的学习之路(HTML——CSS)

文章目录

  • meta标签
  • 选择器
  • RGB、盒子模型、文档流
  • 盒子大小和圆角
  • 浮动
  • 高度塌陷和BFC
  • 定位
  • 字体族
  • 图标字体
  • 字体和文本
  • 背景
  • 渐变
  • 雪碧图
  • 表格
  • 表单
  • 过渡
  • 动画
  • 变形
  • less
  • 弹性盒子
  • 像素和移动端
  • 响应式布局

10.2

  • 获得前端三剑客书籍
  • 第一次在github上存代码
  • C语言 练习使用printf和scanf
  • 第一次在CSDN上发博客 HTML+CSS教程(后简称HC)前两讲: 历史

HTML负责结构,CSS负责样式,JS负责行为

10.3
HTML:
自结束标签(不用写结束标签)

  • < !DOCTYPE HTML> 声明类型
  • < meta charset=“utm-8”>设置网页的字符集,防止乱码的出现
  • 实体(w3school上可查详细内容):& nbsp;可以输出空格

软件:

  • 安装了notepad++
  • 终于用上Chrome
  • 在Vscode内打开代码文件夹(学习了vscode的一些功能)
  • 下载了vscode中文包,live server
  • 设置字体大小:(左上角)文件-首选项-设置
  • 左下角的齿轮也可以设置
  • 先!再Tab可以直接生成完整网页结构

10.4
HTML:

meta标签

meta

< meta arthor="Danmo">
< meta name="keywords" content="逆转裁判,神千,神乃木庄龙">
< meta name="description" content="这是一个关于逆转裁判的网站">
< meta http-equiv="refresh" content="3;url=https://www.bilibili.com/video/BV1XJ411X7Ud?p=15">(自更新)
HTML,对于语义化标签,我们只关注语义,不在乎形式,那些东西交给CSS吧!
像div,span这种标签,没有语义
  • 块元素< h> < hgroup> 存放一组相关的标题< p> < blockquote>长引用
  • 行内元素 < em> 语气加重 < strong>表示强调 < q>短引用
  • div是主要的布局元素
  • span行内元素,在网页中选中文字

软件:

  • Pr 2020
  • Vscode:
    Ctrl+回车 只会让光标下移;
    Ctrl+backspace 可以一次性删掉一行前边的所有空格(Tab)

10.5
HTML:
链接:./表示当前目录,…/表示上一级目录

    < img>图片标签

    四种图片格式:jpg,gif,png,webp,base64码

软件:
    alt+shift+↑/↓,可以在vscode里向上/向下复制

    在vscode输入br*3再回车,可以同时出现3个

10.6
HTML:

  • iframe表示内联框架(由于无法被浏览器搜索功能检索,用处不是很大),只有设置了frameborder=0才能彻底消除边框,可以设置width和height。
  • audio引用音频,加controls属性才出现播放按钮,autoplay属性自动播放(但基本无用,浏览器为了用户体验,不会设置成自动播放,IE除外)loop可以播放完继续循环播放
  • video引用视频,和audio的用法一样。
    引用其他网站视频的方法:在视频网站点分享,有一个“嵌入代码”,复制到vscode即可,视频框的大小可以用width和height调整。

选择器

10.7
CSS:

  • 三种CSS编写的位置:内联样式,内部样式,外部样式。
    • 外部样式在head里用< link>引入外部CSS文件,内部样式写在head里,内联样式直接在p后跟style。

CSS基本语法:选择器+声明块

  • 常用选择器:
  • 元素选择器
  • id选择器:在p后加入id属性,css中在选择器前加#号。注意,id不要重复
  • 类选择器(class选择器):在p后加入class属性,css中在选择器前加.号。类选择器可以重复。可以同时为一个元素添加多个class属性(两个class名之间用空格隔开即可) (建议多用class选择器)
  • 通配选择器(用*{})
  • 复合选择器:无
  • 交集选择器:语法:选择器1选择器2选择器3...选择器n(连着写,如果有就必须以元素选择器开头)(有时候没必要多此一举)
    • 举例:div.red(div对应元素选择器,.red对应class选择器)
  • 并集选择器:语法:选择器之间以逗号隔开。
    • 举例:#b1,.p1,h1,span,div.red
  • 交集选择器和并集选择器可以套(交集中可以出现并集,并集中可以出现交集)

软件:
Vscode:

  • Ctrl+!可以直接生成注释(在HTML中就生成HTML注释,在CSS中就生成CSS注释)再按一次可以取消注释

10.8

HTML:

  • Title属性,把鼠标光标放在文件上,可以看到title信息。

CSS:

  • 父元素、子元素、祖先元素、后代元素、兄弟元素(父子的要求比较严格,兄弟指同一个父元素下的几个子元素)
  • 关系选择器:
    • 子元素选择器:选中指定父元素的指定子元素。用”>”连接。
    • 后代元素选择器:选中指定元素内的指定后代元素。用空格连接。
    • 兄弟选择器:
      • 下一个:选中A元素的下一个元素B,并且中间不能被隔开(前提是兄弟关系)。用+连接。
      • 下边所有:选中A元素之后的所有元素。
    • 属性选择器: 语法:
      • [属性名] 选择含有指定属性的元素
      • [属性名=属性值]选择含有指定属性和属性值的元素
      • 属性名^=属性值]选择属性值以指定值开头的元素
      • [属性名$=属性值]选择属性值以指定值结尾的元素
      • [属性名*=属性值]选择属性值中含有某值的元素的元素
    • 例如:p[title^=abc](元素选择器和属性选择器构成了复合选择器)
    • 伪类选择器:(前边带一个冒号) 语法:
      • child系:对所有子元素进行排序
      • type系:在同类型元素中进行排序
      • :nth-child( ) 选中第n个子元素(第一个元素的序号为0)。
      • :nth-of-type 括号内输入2n或even可指定偶数,括号内输入2n+1或odd可指定奇数,还可以输入其它代数式来选中对应的元素。(经过测试,有时候输入odd或者even会失效,建议输入含n的代数式)

nth可以换成first或last,但感觉不如上面的这两种。

软件:
Vscode:

  • 可以根据CSS选择器的需求来生成标签。比如输入ul>li*5,就会自动生成一系列标签。其他选择器也是同理。

10.9
CSS:

  • 超链接伪类:
    • link表示没访问过的,visited表示访问过的。完整的写法是a:link和a:visited.
    • 只有link标签既可以改颜色又可以改大小,出于隐私性考虑,visited只能改颜色
    • 在link处改大小时,link和visited的链接都会变大
    • a:hover和a:active 分别可以修改链接被选中和没被选中时的颜色
  • 伪元素:
    • p::first letter
    • p::first line
    • p::selection 表示选中的内容
    • 以下的两种最常用: p::before p::after
      • before和after必须结合content属性来使用,content是CSS内的元素

before和after里的内容,在复制的时候不会被选上,在开发中常用

软件:
Vscode:
在< p>标签中输入lorem,可以自动生成一大段话,用于测试。

10.10
CSS:

  • 样式的继承:为一个元素设置样式的同时也会应用到它的后代元素上
    • 可以将通用的样式统一设置到共同的祖先元素上,从而使所有元素都具有该样式,但是背景/布局相关的样式不会被继承。
  • 样式的权重:
    • 内联样式:1,0,0,0
    • id选择器:0,1,0,0
    • 类和伪类选择器:0,0,1,0
    • 元素选择器:0,0,0,1
    • 通配选择器:0,0,0,0
    • 继承:无优先级
    • 将所有选择器加在一起算(逗号隔开的分组选择器是单独算)
    • 选择器的累加不会超过其对应的数量级(比如类选择器再高也高不过id选择器) 如果优先级相同,优先使用靠下的样式
    • 在某一个样式的后边添加!important,则此时该样式会获取最高的优先级,甚至超过内联样式,开发中尽量不要用。
  • width和height,可以将属性值设置为相对于其父元素属性的百分比 好处:设置百分比可以使子元素跟随父元素的改变而改变
  • em:相对于元素的字体大小来计算,1em=1font-size,em会根据字体大小的改变而改变,相对于根元素(html)的字体大小来计算
  • 可以这样设置,从而改变根元素的字体大小:
html
{
Font-size:30px;
}

软件:
Vscode:输入.box就可以自动生成< div class=”box1”>< /div>

RGB、盒子模型、文档流

10.11
CSS:

  • RGB(red,green,blue)每一种颜色的范围在0-255(0%-100%)之间
    • RGBA 第四个值表示不透明度,0表示完全透明,1表示完全不透明,.5半透明
  • 十六进制的RGB值:
    • 语法:“#红色绿色蓝色
    • 颜色浓度的范围:00-ff
    • 如果颜色两位两位重复可以简写 #aabbcc-->#abc
  • hsl值
    • h色相(0-360)本质是在色环上的度数
    • s饱和度,颜色的浓度0%-100%
    • l亮度,颜色的亮度0%-100%(一般标准颜色是50%)
    • 若加a,意思依然是透明度
  • 文档流:是网页的基础,我们所创建的元素默认都是在文档流中进行排列。 元素主要有两个状态:在文档流中/不在文档流中
  • 元素在文档流中的特点:
    • 块元素:在页面中独占一行/默认宽度是父元素的全部(把一行占满)/默认高度被内容撑开(字有多大,就有多宽)
    • 行内元素:只占自身的大小默认宽度和高度都是被内容撑开
  • 盒子模型:
    • 几个部分:内容区content、内边距padding边框border、外边距margin
    • 内容区:大小由width和height两个属性来设置 边框:至少设置三个样式:
    • 宽度border-width 颜色border-color 样式border-style
    • 值的情况:
      • 四个值:上 右 下 左(顺时针)
      • 三个值:上 左右 下
      • 两个值:上下 左右
      • 一个值:上下左右
    • 每一个属性都有一组border-(top/right/bottom/left),用来单独指定某一个边的宽度
    • 可以使用属性值none来让某一条边的边框失效 如:border:10px red solid; Border-right:none; 这样就只有右边没有边框
    • 关于style的属性值:solid实线 dotted 点状虚线 dashed 虚线 double 双线

软件:

  • Faststone capture 测量长宽,提取颜色的RGB值(直接复制十六进制的RGB值放入vscode)
  • Vscode:
    • css区,输入w200和h200,会自动生成width:200px;和 height:200px;
    • 直接敲bd,发现快速生成边框三个样式的方法 border:10px solid #000;

10.13
CSS:

  • 水平方向的布局:子元素属性必须满足 margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度(必须满足)
  • 如果相加结果使等式不成立, 则称为过渡约束,等式自动调整 如果这七个值没有为auto的情况,则浏览器会自动调整margin-right值以使等式满足
  • 有三个值可以设置为auto(auto在冒号后面,是属性值):width margin-left margin-right(如果不设置子元素的width,它的默认值就是aoto)
  • 如果某个值设为auto,则会自动调整为auto的那个值以使等式成立 如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0.
  • 如果将三个值都设置为auto,则外边距都是0,宽度最大。
  • 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值。

(经常利用这个特点来使一个元素在其父元素水平居中)

10.14
HTML:

  • 关于行内元素span的理解: < span>aaa< /span>< span>bbb< /span> 这样显示的是aaabbb 如果在两个span之间加了空格或回车,显示会变成aaa bbb

CSS:

  • 默认情况下父元素的高度被内容撑开。
  • 子元素在父元素的内容区中排列,若大小超过父元素,会溢出。 使用overflow属性来设置父元素如何处理溢出的子元素。

(还分为overflow-x只处理水平方向,overflow-y只处理垂直方向)

  • 可选值:
    • visible(默认):子元素溢出部分在父元素外部位置显示
    • hidden:溢出内容将会被裁剪不会显示
    • scroll:生成两个滚动条,通过滚动条来查看完整内容
    • auto:根据需要生成滚动条(比如只生成垂直方向)
    • 垂直外边距的重叠:相邻垂直方向外边距会发生重叠现象
      • 兄弟元素:(对开发有利,不用调整)
        • 都是正值-->兄弟元素间的相邻垂直外边距会取两者之间的较大值
        • 一正一负-->取两者的和
        • 都是负值-->取两者绝对值较大的
      • 父子元素(需要调整) 方法:调整padding和height(以后有更好的方法)
  • 行内元素(span,a)的盒模型:
    • 行内元素不支持width和height
    • 行内元素可以设置padding,border,magin,但垂直方向都不影响页面布局
  • display用来设置元素显示的类型,可选值:
    • inline 将元素设置为行内元素(默认)
    • block 块元素 inline-block 行内块元素 table 表格 none不在页面显示(不占位置)
  • visibility用来设置元素的显示状态,可选值:
    • visible 元素在页面正常显示(默认)
    • hidden 元素在页面中隐藏不显示,但是依然占据页面位置

10.15
CSS:

  • 浏览器默认样式:只需要引入超哥给的reset.css和normalize.css中的一个。

reset是去除默认样式,normalize是统一样式。(用link引入,建议放在最前面)

10.16
没学

10.17
没学

10.18

  • 完成练习:京东的左侧导航,解决:
    • 如何使文字在每一行内垂直居中显示(lineheight和height相同)

hover和active在任何元素中都可使用,不仅限于超链接

  • 巧妙的两步的字体大小设置(对li设置一次字号,对a再设置一次),可以使/的大小为12px,而字是14px

10.19~10.22 没学

10.23

  • 京东图片列表,设置步骤(大的):
  • HTML
    • 创建列表ul
    • 在li中插入图片和超链接
  • CSS
    • 设置ul的宽高,裁剪溢出内容,设置margin使得居中。
    • 对li,设置li的位置。
    • 对img,设置图片大小。

注意点:
先设置ul的width和height,再设置margin
注意超链接伪类 not:(:last-child)
设置图片大小:100%

  • 京东左侧导航条,设置步骤:
  • HTML
    • 创建一个nav,里面套很多div,div里套超链接和行内元素span
  • CSS
    • 设置nav的宽高,四周padding,居中margin,背景颜色
    • 设置div,字体大小,左内边距,(高度和行高一致)
    • 设置span,每一个/前后空2格
    • 设置div的hover
    • 设置超链接,去下划线,改颜色,设字体大小
    • 设置超链接的hover

10.24

  • 继续敲之前盒子模型的代码

10.25

  • 网易新闻列表:
  • HTML:
    • 一个div当容器,左上角有小标题
    • 一个div存放图片(超链接)和图片内的文字
    • ul里的li存放四条新闻
  • CSS:
    • 去超链接的下划线
    • 容器的宽高、margin、背景色、上边框
    • 标题 高度 上边框 上外边距 上内边距
    • 标题超链接的颜色 加粗
    • 图片容器的高度
    • 图片内文字的效果
    • 新闻列表ul的上外边距
    • li的下外边距
    • 用before给每一个li加项目符号
    • 设置li中的字体大小和颜色
    • 超链接hover

10.26

CSS:

盒子大小和圆角

  • 盒子大小:box-sizing
  • 属性值:
    • content-box:默认值,width和height只设置内容区的大小,加上margin padding border后盒子可见框变大。
    • border-box:width和height设置盒子可见框的大小,加上margin、padding后,盒子可见框不变,但是内容区变小。
  • outline设置元素轮廓线,和border类似,但不影响可见框大小(不影响页面布局)
    • 可以设置hover,鼠标移动上去以后会加上轮廓
  • box-shadow设置元素的阴影效果,不影响布局。四个属性值分别是:水平偏移量 垂直偏移量(正值为右、下,必须写)阴影模糊半径(使阴影看起来更真实)阴影颜色(使用rgba,调整透明度为0.5)
  • border-radius:设置圆角
    • 四个值:左上 右上 右下 左下
    • 三个值:左上 右上/左下 右下
    • 两个值:左上/右下 右上/左下
  • 如果要设置椭圆形,一起设置的话,四个只能被设置成一个样式的,用“/”隔开:
    • 例如:border-radius:20px/40px(水平方向半径/垂直方向半径) 也可以分开,每个角都定义成不同的椭圆形,如:border-top-left-radius:20px/40px

10.27
CSS:

浮动

  • 浮动float(left/right):使一个元素脱离文档流,向其父元素的左侧或右侧移动。(可用来制作水平布局)
  • 特点:
    • ①浮动元素不会从父元素中移出/浮动元素向左或向右移动时,不会超过它前面的其他浮动元素(看html中先后顺序)。
    • ②如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移。
    • ③浮动元素不会超过它上边浮动的兄弟元素,最多就是和它一样高。
    • ④可以用浮动设置文字环绕图片的效果。
    • ⑤元素设置浮动后,块元素和行内元素将不再区分。宽度和高度都默认被内容撑开。
  • 简单布局:Tips:提取公共样式。

技巧:

  • 在chrome浏览器中用“检查”调试padding值。

10.28:

CSS:

高度塌陷和BFC

  • 高度塌陷问题:子元素浮动后,完全脱离文档流,无法撑起父元素高度,导致父元素的高度丢失。
  • BFC(块级格式化环境)
  • BFC开启后的特点:
    • ①不会被浮动元素所覆盖
    • ②子元素和父元素外边距不会重叠
    • ③可以包含浮动的子元素(从而避免高度塌陷)
  • 开启方法:
    • ①设置float
    • ②将元素设置为行内块元素
    • ③设置overflow:hidden

10.29
CSS:

  • clear:清除浮动元素对当前元素产生的影响(本质是浏览器自动为该元素添加上外边距)
  • 可选值:left right both(清除两侧中最大影响的那侧)
  • 解决高度塌陷的最终方案:伪元素after
        .box1::after{
            content: '';
            display: block;
            clear: both;
        }
    
  • 最终形态的clearfix
    • clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题,当你在遇到这些问题时,直接使用clearfix这个类即可
  .clearfix::before,
    .clearfix::after{
        content: '';
        display: table;
        clear: both;
    }
  • position:设置定位(只改变该元素的位置,不影响其它元素),
  • 可选值:static(默认),四种开启定位:relative absolute fixed sticky
  • 相对定位relative:使用offset设置偏移量top、bottom/left、right(每组设置一个即可)

10.30
CSS:

定位

  • 绝对定位:absolute
  • 特点:
    • ①元素从文档流中脱离
    • ②此时元素只有位置不变(其它性质都变)绝对定位改变元素的性质,行内变成块,块的宽高被内容撑开。
    • ③绝对定位使元素提升一个层级(浮在别的元素上方)
    • ④相对于其包含块进行定位
  • 包含块:正常情况下指离当前元素最近的祖先块元素/绝对定位的包含块指离它最近的,开启了定位的祖先元素。如果所有祖先元素都没开启定位,根元素html是它的包含块。
  • 关于绝对定位元素的位置:
    • 水平方向:在原先等式中加上left和right,现在left和right的默认值是auto,如果left=0,right=0,则rigjt=0不生效
    • 垂直方向:原来没有垂直方向上的等式,现在有了,利用这一点可以使得元素在其包含块内垂直居中。
  • 使用绝对定位使元素在包含块内居中的办法:
    • ①开启某元素的绝对定位,top=0,bottom=0,left=0,right=0,margin=auto(如果是某一方向的居中,可以margin-left/right margin-top/bottom设为auto)
    • ②开启它父元素(祖先元素)的定位(不是static就行,一般开relative)
  • 固定定位:fixed,和绝对定位类似,但可以固定在浏览器的窗口中的某个位置(拖动滚动条也不改变位置)
  • 粘滞定位:sticky(由于兼容性差,了解即可,以后实现这种效果用JS)可以先拖动滚动条,元素到达某个位置时将其固定。
  • 元素的层级:对于已开启的顶标高为元素,可通过z-index属性指定元素的层级。它需要一个整数作为参数,值越大则层级越高,越优先显示。 如果元素的层级一样,优先显示靠下的元素/素馅元素的层级再高也不会盖住后代元素。

Vscode:

  • 输入poa可以直接生成position:absolute

10.31
练习了京东轮播图。
HTML:

  • 设置一个ul>li>a>img,存放图片。
  • 在ul内部,放一个div,div里再嵌套8个div,作为图片左下角的点。

这样是可以的。
CSS:

  • 对ul设置宽高,外边距(居中)开相对定位(目的是使ul中的pointer可以相对于ul定位而不是相对于初始包含块(html)去定位)
  • 对li开启绝对定位(让图片重叠,只显示一张图片)
  • li:nth-child( )设置z-index,修改元素的层级来显示指定的图片
  • 对导航点整体,开启绝对定位,定位在左下角
  • 对div中的a,设置float:left,并设置圆边框,大小,颜色等。
  • hover设置鼠标移入,导航点的效果
  • 此调整是为了在鼠标移入后,各导航点的中心仍在一条直线上,同时不改变各导航点的大小(总之就是美观,应该加上这两条语句)。对div中的a设置:
 /* 将背景颜色值设置到内容区,边框和内边距不再有背景颜色 */
            background-clip: content-box;
            border: 2px solid transparent;
  • 遇到的问题: 即便加了float:left,导航点仍然是垂直排列的,怎么才能变成水平排列?

11.1
CSS:

字体族

  • font-family(字体族):指定字体的类别,可选值:
    • serif 衬线字体 (如“一”的最后带个小勾)
    • sans-serif 非衬线字体(没有小勾)
    • monospace 等宽字体(比如L和H占的宽度一致)
      • (也可以写“微软雅黑”等,上边这些值一般放在最后,比如最后是serif,即“我实在没办法,找任意一种满足serif的字体”)
    • 可以同时指定多个字体,用逗号隔开,优先使用第一个,以此类推 例:font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif

font-face可以将服务器中的字体直接提供给用户使用,但要注意加载速度、版权和字体格式。
例:

 @font-face {
            /* 指定字体的名字,下边在font-family要用一样的名字 */
            font-family:'myfont' ;
            /* 服务器中字体的路径 */
            src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
        }
  • format指定字体的格式,默认情况下可以不写。
  • 图标字体(为矢量图):将图标设置为字体,可以更灵活,加快加载速度。

其它:

  • 查看系统内的字体:C盘-->Windows-->Fonts 右上角搜索“微软”,出现微软雅黑

fontawesome 使用步骤:

  1. 下载 https://fontawesome.com/
  2. 解压
  3. 将css和webfonts移动到项目中
  4. 将all.css引入到网页中
  5. 使用图标字体
/*直接通过类名来使用图标字体*/           
class="fas fa-bell"
class="fab fa-accessible-icon"

(免费使用的只有fab和fas,一种出现乱码就换另一种)

11.2
CSS:

图标字体

写图标字体的3种方法:
1.




	
       ↑免费的只有fas和fab

双引号内为图标的名称,后边可以设置图标大小和颜色
2.
通过伪元素来设置图标字体

  1. 找到要设置图标的元素通过before或after选中
  2. 在content中设置字体的编码
  3. 设置字体的样式
fab
font-family: 'Font Awesome 5 Brands';(所有fab都用这个名)

 fas(需要加font-weight才能正常显示)
ont-family: 'Font Awesome 5 Free';(所有fas都用这个名)
ont-weight: 900; 
例:
li::before{
            content: '\f1b0';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
            color: blue;
            margin-right: 10px;
        }
        (这种方法的好处是,多行之前可以同时添加符号字体)

3…

通过实体来使用图标字体:
         + 图标的编码; 
    
  • iconfont:
    • 先进网站,点最上方图标库-->官方图标库,随便选一个,把图标加入购物车,点右上角购物车,创建一个项目,把刚才的购物车都放进项目里。进入My projucts界面(刚加购物车会自动跳转,其它时候打开时点最上面Resources-->My Projects),点download codes,将压缩包解压,删除其中两个demo文件,将其它文件全部放入项目文件夹内,在link处引入iconfont.css文件。
CSS区域:

在HTML区域写

                ↑实体方式


                   ↑类名方式


xxx

↑伪元素方式
  • 对于文字:行高(可设置)-->字体框-->字体
  • 字体框:指字体存在的格子,设置字体大小,实际上是设置字体框大小。
  • line-height行高: 指的是文字占有的实际高度。可以设置px/em,也可以设置为一个整数(意思是行高和字体框大小的比值)
    • 行高会在字体框的上下平均分配,因此只要将div和line-height设置为同一个值,即可让单行文字在一个元素中垂直居中。
    • 行间距=行高-字体大小

软件:

  • 在Zeal上下载文档。
  • 下载安装了Adobe Ps,Ae和Au。

11.3
CSS:

字体和文本

字体和文本:

  • 简写:font:粗体、斜体 大小/行高 字体族 只有大小和字体族必须写,其它的不写均使用默认值。 例:font: bold italic 50px/2 微软雅黑, 'Times New Roman', Times, serif;
  • font-weight:字体的加粗,除了normal和bold,还有100-900九个级别(没用)
  • font-style:字体的风格,有normal和italic。
  • text-align:文本的水平对齐。可选值:left、right、center、justify(两端对齐)
  • vertical-align:元素的垂直对齐。可选值:baseline 基线对齐(默认),top顶部对齐,bottom底部对齐,middle居中对齐(对齐字母x的交叉点)
  • text-decoration:设置文本修饰,可选值:none、underline、overline(上划线)、line-through(删除线)
  • white-space:设置网页如何处理空白,可选值:normal、nowrap不换行、pre保留空白
  • 如果想设置处“一行内容显示不全,最后出现省略号”的效果,可以:
 white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

背景

背景:

  • background-image:设置背景图片,可以同时设置背景图片和背景颜色。
  • background-repeat:设置背景的重复方式,可选值:repeat(默认,沿着x和y重复)、repeat-x、repeat-y、no-repeat。
  • background-position:设置背景图片的位置。两种方式:
    • 可以写background-position:top left、center center、bottom right等,分成九宫格。
    • 也可以同偏移量来指定,background-position:水平方向偏移量 垂直方向xxx
  • background-clip:设置背景的范围,可选值:border-box(默认,背景出现在边框的下边)、padding-box(背景只出现在内容区和内边距)、content-box(背景只出现在内容区)
  • background-origin:背景图片和偏移量计算的原点,可选值:padding-box(background-position从内边距处开始计算),其它属性值和clip一样,效果同理。
  • background-size:设置背景图片的大小,两个值依次为宽度和高度,如果只写一个,第二个值默认auto。属性值还有cover(图片比例不变,铺满)、contain(图片比例不变,将图片在元素中完整显示)
  • background-attachment:选择背景图片是否跟随元素移动。可选值:scroll(默认,背景图片跟随元素移动)fixed(背景固定在页面中)
  • 简写属性:background
    • 注意:background-size必须写在~position后面,用/隔开。~origin要在~clip的前边。

11.9

CSS:

渐变

  • 实现渐变:

    • 选中一张渐变的图片,在PS中使用裁剪,裁出横向长度为1px的图片条,将图片条设为背景,并且设置“repeat-x”。

      一些PS的操作:

      • 测量图片大小:矩形选框工具。如果数字消失了,按F8.
      • 裁剪:(最上方)图像→裁剪。
      • 导出:文件→导出→存储为web格式。
      • 历史记录:在PS右上角,点击历史记录,可以在裁剪后恢复之前的状态。

雪碧图

  • 雪碧图

    • 起因是按钮练习:如果给link、hover、active各设置一张背景,就会出现由于图片加载速度慢而产生图片闪烁的情况。

      浏览器的一些操作:

      • ctrl+F5 刷新,强制清除缓存。
      • F12打开开发者工具,选择All,如果刷新一般会有进程减少。
    • 解决方法:可以将多个小图片统一保存到一个大图片中,通过调整background-position来显示图片,这样图片可以同时加载到网页中,避免闪烁。

    • 该技术被称为CSS-Sprite。

    • 使用步骤:

      1. 确定要使用的图标。
      2. 测量图标的大小。
      3. 根据测量结果创建一个元素。
      4. 将雪碧图设置为元素的背景图片。
      5. 设置一个偏移量以显示正确的图片。
    • 雪碧图的特点:一次性将多个图片加载进页面,降低请求的次数,加快访问速度。

    11.10

HTML:

表格

  • 表格:table、thead(内容自动加在表头)、tbody、tfoot(内容自动加在表末)、tr(一行)、td(单元格)

    如果没加tbody,浏览器会自动加上,因此tr不是table的子元素,而是后代元素。

  • colspan横向合并单元格,比如:

    <td colspan="2">D2td>
    

    rowspan纵向合并单元格,同理。

  • 表格的样式:

    • border-spacing: 指定边框间距离。
    • border-collapse:collapse; 设置边框的合并。
    • 设置排列方式:text-align:center 、vertical-align:middle(值可以修改)
  • 将元素设置为单元格:display:table-cell;

    • 可以用vertical-align设置在父元素内垂直居中。
    • 但是text-align无效,还得用margin设置水平居中。

CSS:

  • 线性渐变:

    • 格式:background-image:linear-gradient(方向,颜色,颜色 大小,颜色 大小)

    • 方向:

      • to left/right/bottom/top
      • 还可以组合(to top left)
      • deg表示度数,turn表示圈(如.25turn表示1/4圈)
    • 平铺的线性渐变:background-image:repeating-linear-gradient(方向,颜色 大小,颜色 大小)

      注意,此时只关注两个大小的差值,0 50px和50px 100px是等效的。

  • 径向渐变:

    • 格式:~:radial-gradient(大小 at 位置 ,颜色 位置,颜色 位置)

    • 大小:

      • circle 圆形
      • ellipse 椭圆
      • closest-side 近边
      • closest-corner 近角
      • farthest-side 远边
      • farthest-corner 远角
      • 可以手动指定径向渐变的大小
    • 位置:

      • top right left center bottom
      • 写具体的数值(px)

(设置渐变后,即使设置background-repeat:no repeat也不起作用)

11 . 11
没学
11. 12

表单

  • 表单:用于提交数据给远程的服务器,用form标签创建。
  • 属性:
    • action属性加服务器地址。
    • name:数据要提交到服务器,必须指定name属性值。对于单选框和多选框,必须有相同的name值。
      • (如果文本框的name=username,这个文本框内容的名字即为username,根据username,服务器就可以获得数据。)
    • value:会作为用户填写(选择)的值,体现在网址里。
    • checked:(选项的默认值)
    • type:表单项的类型。每一行都加type。
    • 不同的type:(属性值)
      • 文本框:text
      • 密码框:password
      • 单选按钮:radio
      • 多选框:checkbox
    • 下拉列表:(selected value表示默认选项)
<select name="haha">
<option value="i">选项一option>
<option selected value="ii">选项二option>

  • 表单拓展:
    • input和button:两者类似,input是自结束标签,所以button的使用更多。
    • 属性补充:
      • autocomplete=“off”,关闭自动补全(如果加在form后面,所有表单项都会关闭自动补全)
      • readonly :将表单项设置为只读,数据可以提交。(判断有没有提交的方法是,点了按钮后看网址有没有变)
      • disabled:将表单项设置为禁用,数据不会提交。
      • autofocus:自动获取焦点,意思是一开始光标会出现在哪一个表单项里。
    • type属性补充:
      • submit:提交按钮
      • reset:重置按钮
      • button:普通按钮,需要用js加上效果。

11.13&11.14
复习京东顶部导航练习。

11.16&11.17
电影卡片练习
CSS:

过渡

  • 过渡:(transition)
    • transition-property:指定要执行过渡的属性,多个属性间用,隔开。all设置所有属性过渡。(大多数属性都支持过渡,过渡时必须从一个有效数值向另一个有效数值)
    • transition-duration:指定过渡的持续时间(时间单位有s和ms),如果上方的属性用,隔开,duration也可以用,隔开,表示不同属性的持续时间。
    • transition-timing-function:过渡的时序函数。
      可选值:
      • ease:默认,先加速后减速(比较明显)
      • linear:匀速
      • ease-in:加速
      • ease-out:减速
      • ease-in-out:先加速后减速(不太明显)
      • cubic-bezier():贝塞尔曲线 指定时序函数
        https://cubic-bezier.com
      • steps() 分步执行过渡效果
    • 可以设置第二个值:end:在时间结束时执行过渡(默认) start:在时间开始时执行过渡。
    • transistion-delay:延迟,等待一段时间后再执行过渡。
    • transition 同时设置过渡相关的所有属性,唯一要求是如果要写延迟,则第一个时间是持续时间,第二个是延迟。

11.18

动画

  • 动画:(animation)
    • 关键帧:

      • 格式示例:
      @keyframes 	 关键帧名{
      	from表示动画开始的位置 可以用0%{
      	/*from表示动画*/
      		margin-left:0;
      		background-color:orange;
      	}
      	/*to动画的结束位置 可以用100%*/
      	to{
      		background-color:red;
      		margin-left:700px;
      	}
      }
      
    • animation-name:设置关键帧名

    • animation-duration:动画的执行时间

    • animation-delay:动画的延时

    • animation-timing-function:和过渡一样

    • animation-iteration-count:动画执行的次数(可以写次数,也可以写infinite)

    • animation-direction:指定运行方向,可选值:

      • normal:默认,从from向to运行,每次都如此
      • reverse:从to向from运行,每次都如此
      • alternate:从from向to运行,重复执行动画时反向执行
      • alternate-reverse:同理
    • animation-play-state:设置动画执行状态(running/paused)
      (可以用paused设置鼠标移入则动画暂停的效果)

    • animation-fill-mode:动画的填充模式,可选值:

      • none:默认 动画执行完毕元素回到原来位置
      • forwards 动画执行完毕元素会停止在动画结束的位置
      • backwards 动画延时等待(delay)时,元素就会处于开始位置
      • both 结合了forwards 和 backwards

11.19
CSS:

变形

变形:通过CSS改变元素的形状或位置,不影响页面布局。
transform设置元素的变形效果。
设置变形原点:transform-origin:值 值(水平和和垂直) (默认值为center)
以下为属性值

  • 平移:
    • translateX() 沿着x轴方向平移
    • translateY() 沿着y轴方向平移
    • translateZ() 沿着z轴方向平移
      (平移元素,百分比相对于自身计算)
      示例:
    transform:translateY(100px);
    transform:translateX(-50%); 
    
    • z轴平移: 调整元素和人眼之间的距离,距离越大,元素离人越近。
      想要让z轴平移的效果体现出来,必须设置网页视距。
      如果想要做3D效果,必须加视距perspective。
    html{
        perspective:800px
        /*设置当前网页的视距为800px,指人眼距离网页的距离,该距离在600~1200为宜*/
    body:hover .box{
    	transform:translateZ(800px);
    	/*此时就相当于box“贴脸上了”,会占满整个浏览器的页面*/
    }
    
    }
    
  • 旋转:通过旋转可以使元素沿着x、y或z旋转指定的角度:
    • rotateX()、rotateY()、rotateZ()
    • 括号内的值可以是角度(deg),也可以是圈数(turn)
    • transform后可以跟多个旋转的属性,不同属性的先后顺序会对效果产生影响。
       transform: rotateY(180deg) translateZ(400px); 
       transform: translateZ(400px) rotateY(180deg) ; 
       /*二者的显示效果不一样,前者离我们变远,后者离我们变近*/
    
    • backface-visibility可以调整是否显示元素的背面,属性值有visible和hidden。
  • 缩放:
    • scaleX()水平缩放 scaleY()垂直缩放 scale() 双向缩放
    • scaleZ 较特殊,只有设置了transform-style:preserved-3d(3d变形效果)才能体现,会拉长z轴(垂直显示屏的轴),想象“腊肠狗”。

11.20
CSS:

less

(CSS熟练后再考虑less)

  • less简介:是CSS增强版,可通过更少代码实现更强大的功能;新增了对变量和对mixin的支持;语法大体上和css一致,浏览器需要先将less转换为css再执行。
  • 在Vscode上安装插件Easy-less。之后写less,保存时会自动生成css文件。
  • less书写的格式:
.box1{
    background-color: #bfa;

    .box2{
        background-color: #ff0;

        .box4{
            color: red;
        }
    }

    .box3{
        background-color: orange;
    }
}

其编译为css代码如下:

.box1 {
  background-color: #bfa;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  color: red;
}
.box1 .box3 {
  background-color: orange;
}
  • 变量(和C的#define类似)

    • 用@变量名 定义变量。
    • 直接使用:以@变量名 的形式使用。
    • 作为类名,或者一部分值使用时以@{变量名}的形式使用。(url里必须加引号)
    @c:box6;
    .@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
    }
    
  • 变量重名时,优先使用比较近的变量。

  • 可以在变量声明前使用变量。

  • 建议将变量集中定义。

继续补充:

  • 关于注释://是不会被编译的注释(单行),/**/是会被编译的注释(多行)。
  • &表示外层的父元素。
.box1{
    .box2{
        color: red;
    }

    >.box3{
        color: red;
	//为box3设置一个hover
        &:hover{
            color: blue;
        }
    }
	//为box1设置一个hover
	//& 就表示外层的父元素
    &:hover{
        color: orange;
    }
	//此处对应div .box1
    div &{
        width: 100px;
    }
    
}

对应的CSS是:

.box1 .box2 {
  color: red;
}
.box1 > .box3 {
  color: red;
}
.box1 > .box3:hover {
  color: blue;
}
.box1:hover {
  color: orange;
}
div .box1 {
  width: 100px;
}
  • :extend() 对当前选择器扩展指定选择器的样式(选择器分组)

这个方法比下边的方法的代码要简洁。

.p1{
    width: 100px;
    height: 200px;
}
.p2:extend(.p1){
    color: red;
}
/*相当于p2在p1的基础上“拓展”*/

css代码如下:

.p1,
.p2 {
  width: 100px;
  height: 200px;
}
.p2 {
  color: red;
}
  • 直接对样式的引用(样式的复制)
    这种方式也称为mixin,混合函数。
.p1{
    width: 100px;
    height: 200px;
}

.p3{
    /*直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制*/
    .p1;/*也可以写成p1(),即不含参数的混合函数*/
    color:red;
}

css代码如下:

.p1{
    width: 100px;
    height: 200px;
}

.p1{
    width: 100px;
    height: 200px;
    color:red;
}
  • 混合函数
//混合函数 在混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}

div{
    /*调用混合函数,按顺序传递参数*/
    /*.test(200px,300px,#bfa);*/
    .test(300px);
    /* .test(300px, 100px, red);*/
    /*
    传值必须要按顺序,如果不按顺序,也可以这样写:
    .test(@bg-color:red, @h:100px, @w:300px)
    */
}
* average:颜色取平均值
span{
    color: average(red,blue);
}
*  darken:颜色加深 
body:hover{
    background-color: darken(#bfa,50%);
}
  • less中可以做加减乘除的运算。
  • 可以引入其它的less文件,以达到模块化的效果。
//import用来将其他的less引入到当前的less
//可以通过import来将其他的less引入到当前的less中
@import "syntax2.less";

.box1{
    // 在less中所有的数值都可以直接进行运算
    // + - * /
    width: 100px + 100px;
    height: 100px/2;
    background-color: #bfa;
    
}

  • 配置vscode插件,从此ctrl+s保存less的时候会生成对应.css.map,在浏览器使用“检查”功能时可以看对应在less代码中的行数(而不是css)。
    (第130集有配置vscode插件的方法)

弹性盒子

弹性盒子,即可以伸缩的盒子。
弹性盒子由两部分组成:外层叫弹性容器,它的子元素(只是子元素,不是后代)是弹性元素。
弹性盒子可以嵌套,一个元素,可以同时是弹性容器和弹性元素。

  • 主轴:弹性元素的排列方向称为主轴。
  • 侧轴:与主轴垂直方向的称为侧轴。
  • 设置弹性盒子的方法:开启了display:flex(块级弹性容器)或inline-flex(行内块弹性容器)的便是弹性容器,子元素为弹性元素。
  • 弹性容器的属性:
    • flex-direction 指定容器中弹性元素的排列方式
      可选值:
      row 默认值,弹性元素在容器中水平排列(左向右)
      - 主轴 自左向右
      row-reverse 弹性元素在容器中反向水平排列(右向左)
      - 主轴 自右向左
      column 弹性元素纵向排列(自上向下)
      column-reverse 弹性元素方向纵向排列(自下向上)
  • 弹性元素的属性:
    • flex-grow 指定弹性元素的伸展的系数
      规定当父元素有多余空间的时,子元素如何伸展。
      父元素的剩余空间,会按照比例进行分配。
    • flex-shrink 指定弹性元素的收缩系数
      规定当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩。
      设置为0则不收缩。
    • flex-basis 指定元素在主轴上的基础长度,如果主轴是横向,则指定元素宽度;否则指定元素高度。默认值是auto,表示参考元素自身的高度或宽度;如果传递了具体的数值,则以该值为准。
    • flex 可以设置弹性元素的以上三个样式:(有顺序)
      flex 增长 缩减 基础(也可以用下面三个值)
      initial “flex: 0 1 auto”.
      auto “flex: 1 1 auto”
      none “flex: 0 0 auto” 弹性元素没有弹性

属性常用nth-child()来设置:

 		li:nth-child(1){
 			background-color:#bfa;
            flex-grow: 0;
            flex-shrink: 1;
        }

        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
            flex-shrink: 2;
        }

        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
            flex-shrink: 3;
        }
  • 弹性容器上的样式

    • flex-wrap:设置弹性元素是否在弹性容器中自动换行
      可选值:nowrap:默认,不换行
      wrap:元素沿着侧轴方向自动换行
      wrap-reverse:元素沿着侧轴反方向换行
    • flex-flow:是wrap和direction的简写属性

    例: flex-flow: row wrap;

    • justify-content:决定如何分配主轴上的空白空间(或主轴上的元素如何排列)
      可选值:flex-start:默认值 元素沿主轴起边排列
      flex-end:元素沿主轴终边排列
      center:元素居中排列
      space-around:空白分布到元素两侧(中间空白是边缘处空白的两倍)
      space-evenly:空白分布到元素单侧(每个空白大小一样)
      space-between:空白均匀分布到元素间 (左右两侧没有)

    • align-items:决定元素在侧轴上如何对齐(元素间的关系)
      可选值:stretch:默认值 将元素的长度设置为相同的值
      flex-start:元素不拉伸,沿侧轴起边对齐
      flex-end:沿侧轴的终边对齐
      center:居中对齐
      baseline:基线对齐

    • align-self:对单个元素使用,用来覆盖当前弹性元素上的align-items,属性值和上面相同。
      例如:
      li:nth-child(1){
      align-self:stretch;
      }

像素和移动端

  • 像素分为:物理像素 和 CSS像素,二者默认情况下大小比例为1:1。
  • 在移动端中,默认情况下移动端像素比为980/移动端宽度。
  • 将网页的视口设置为完美视口:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

“viewport”意思为视口,width=device-width意思为CSS像素和物理像素的比值会根据设备宽度进行适配(一般1个css像素对应2或3个物理像素)←(一维,不是面积)
最后一句话意思是默认倍数为1(确保能够正常显示),写移动端页面时一定要加上这句话。

11.22

  • 在移动端内,不用px不布局,而是使用vw。1vw=%1视口宽度。
  • 设计图宽度:由于1个css像素对应2或3个物理像素,为了避免图片放大失真,参照iphone6的完美视口375,设计图的宽度一般为750或1125。
  • vw的适配:借助rem,推荐以下方式:
    html{
        font-size: 26.667vw;
        /*
        此时1个rem代表200物理像素的大小,由于1个css像素对应2个物理像素,所以显示效果1rem=100css像素的大小。
        */
    }
    .box{
        width: 3.75rem;
        height: 3.75rem;
        background-color: #bfa;
    }

到这里,H5和CSS3的新知识告一段落,开始做练习,进而学习JS。

2.3回来补充,响应式和媒体查询:

响应式布局

响应式布局:

  • 网页可以根据不同的设备或窗口大小呈现出不同的效果
  • 使用响应式布局,可以使一个网页适用于所有设备
  • 响应布局的关键就是 媒体查询
  • 通过媒体查询,可以为不同的设备,或设备不同状态来分别设置样式

媒体查询:

  • 语法: @media 查询规则{}
  • 媒体类型:
    all 所有设备
    print 打印设备
    screen 带屏幕的设备
    speech 屏幕阅读器
  • 可以使用,连接多个媒体类型,这样它们之间就是一个或的关系
    可以在媒体类型前添加一个only,表示只有,添加and,表示与。
    only的使用主要是为了兼容一些老版本浏览器,没有其他作用。因为老版本浏览器不认识only,就不会执行后边的代码,如果不加only,它能够识别,但也许不能正常显示。
  • 媒体特性:
    width 视口的宽度
    height 视口的高度
    min-width 视口的最小宽度(视口大于指定宽度时生效)
    max-width 视口的最大宽度(视口小于指定宽度时生效)

样式切换的分界点,称其为断点,也就是网页的样式会在这个点时发生变化

一般比较常用的断点:

  • 小于768 超小屏幕 max-width=768px
  • 大于768 小屏幕 min-width=768px
  • 大于992 中型屏幕 min-width=992px
  • 大于1200 大屏幕 min-width=1200px

媒体查询演示:

<style>
       @media only screen and (min-width: 500px) and (max-width:700px){
           body{
              background-color: #bfa;
           }
       }
style>

前端之路漫漫…

你可能感兴趣的:(其他,html5,1024程序员节)