Danmo 的学习之路（HTML——CSS）

最新推荐文章于 2024-07-08 18:14:28 发布

DanmoSAMA

最新推荐文章于 2024-07-08 18:14:28 发布

阅读量646

点赞数 4

分类专栏：其他文章标签： html5 1024程序员节

本文链接：https://blog.csdn.net/m0_51235736/article/details/108909014

版权

其他专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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标签

选择器

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，作为图片左下角的点。

<ul>
<li>
<li>
<li>
<div>
<div><a></a></div>
</div>
</ul>

这样是可以的。
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 使用步骤:

下载 https://fontawesome.com/
解压
将css和webfonts移动到项目中
将all.css引入到网页中
使用图标字体

/*直接通过类名来使用图标字体*/           
class="fas fa-bell"
class="fab fa-accessible-icon"

（免费使用的只有fab和fas，一种出现乱码就换另一种）

11.2
CSS:

图标字体

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

<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-otter" style="font-size: 160px; color:green;"></i>	
       ↑免费的只有fas和fab

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

找到要设置图标的元素通过before或after选中
在content中设置字体的编码
设置字体的样式

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…

通过实体来使用图标字体：
        &#x6 + 图标的编码; 
    <span class="fas">&#xf0f3;</span>

iconfont:
- 先进网站，点最上方图标库-->官方图标库，随便选一个，把图标加入购物车，点右上角购物车，创建一个项目，把刚才的购物车都放进项目里。进入My projucts界面（刚加购物车会自动跳转，其它时候打开时点最上面Resources-->My Projects），点download codes，将压缩包解压，删除其中两个demo文件，将其它文件全部放入项目文件夹内，在link处引入iconfont.css文件。

CSS区域：
<style>
i.iconfont{ font-size:100px;}
 
（不写.iconfont可能无法生效）
</style>
在HTML区域写
<i class="iconfont">&#xe61c;<i>
                ↑实体方式

<i class="iconfont icon-qitalaji"></i>
                   ↑类名方式

<style>
p::before{
    content:'\e625';
    font-family:'iconfont';
    font-size:100px;
</style>

<p>xxx</p>
↑伪元素方式

对于文字：行高（可设置）-->字体框-->字体
字体框：指字体存在的格子，设置字体大小，实际上是设置字体框大小。
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">D2</td>
```
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>

前端之路漫漫…

DanmoSAMA

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Danmo 的学习之路（HTML——CSS）

永久日更（即便什么都没学也要更）10.2获得前端三剑客书籍第一次在github上存代码C语言练习使用printf和scanf第一次在CSDN上发博客HTML+CSS教程（后简称HC）前两讲：历史HTML负责结构，CSS负责样式，JS负责行为10.3安装了notepad++...
复制链接

扫一扫