css3学习留存

其他 2021-03-29 21:43:57 阅读次数: 0

文章目录


2.28日2月最后一天的学习成果，留存，加油

01VScode常用插件

Vscode

插件 （左下）：

Chinese，open in browser，live server（用这个打开页面，页面可以自刷新，且是真正的网络协议），beautfly，Veture

常用设置：

自动保存 auto save off-》after delay
每隔多久保存 auto save delay：1000 1s
字体大小 font size 根据自己的习惯
自动折行word wrap：off
颜色主题

02Vscode的增删改查

新建文件

HTML----xxx.html
css----xxx.css
js-----xxx.js
马克飞象------xxx.md
文档------xxxx.txt

修改文件

鼠标右键—重命名

删除文件

邮件删除 delete

增加文件

点击新建文件夹css image等

注意：可以在VScode同时打开多个项目，一个工作区—将文件夹添加到工作区-----也可以删除

03马克飞象

笔记：有道、印象、语雀、石墨

马克飞象

  • 很多语法功能

  • 大于号是形成一个色块

- ctrl+b 加粗 **strong text**
- <div></div>

printf

ctrl + k 是代码块

扫描二维码关注公众号，回复： 13009954 查看本文章

04HTML标签

网页的组成部分

HTML 标签，文字元素，图片元素，音乐，视频元素
CSS 样式表美化Html style/link
JS 交互动效

HTML

  • 后缀名 xx.html 然后再输入 ！摁住enter/table建 会自动生成代码块
  • 代码放在body中

HTML标签

###语法：<小写标签名></小写的标签名> 结束比开始多一个/

  • 没有结束标签单标签自闭合标签
  • 标签分成对和不成对
  • 快捷键 标签名加tab 会自动生成一组标签（成对加不成对不加）

img 插入图片

**<img src="">**

  • 插入本地图片
    绝对路径：C:\Users\ys129\Pictures\ico图标
    相对路径：html和图片是同级关系直接写名称
    下级关系 /+名称
    上级关系…/+名称
      <img src="0.ico">

	    <img src="img/1156973.png">
  • 注释ctrl+\

超链接 a

标签属性：属性名=“属性值”
百度
跳转的页面不会覆盖当前页面的话 target=“blank”
百度
跳转在当前页面打开:可以用 target=“_self”，也可以什么也不写
a 超链接 href 小手
思考： a 超链接需不需要下划线 用css样式清空或增加

文字段落

全国脱贫攻坚总结表彰大会2021年2月25日在北京隆重举行。中共中央总书记、国家主席、中央军委主席习近平向全国脱贫攻坚楷模荣誉称号获得者颁奖并发表重要讲话。中共福建省寿宁县下党乡委员会获“全国脱贫攻坚楷模”荣誉称号。

复制整行代码快捷键： shift + alt + 下箭头 文字段落首行缩进：思考如何实现文字段落首段缩进，css ` `：空格符号
  • 标题标签:数字越大文字越小1-6,默认加粗效果
<h1></h1>
<h2></h2>
<h3></h3>

快捷生成方法

h${百度$}*6会生成
 <h1>百度1</h1>
    <h2>百度2</h2>
    <h3>百度3</h3>
    <h4>百度4</h4>
    <h5>百度5</h5>
    <h6>百度6</h6>

鼠标右键检查可以查看页面代码
文章大标题一般用h1
小模块h2
思考：去掉默认加粗 css

05常用四大标签问题解决

常用p标签首段缩进

text-indent：2em（1em=1个字）
css引入的多种方式
1.行内式<p style="text-indent:2em">
2.内嵌式:一般写在head里,title后面
3.外链式

 <style>
 p{text-indent:2em}
 </style>  
 <style type="text/css"> </style>`

a标签需要把下划线去掉

a标签会有默认下划线和小手

 <style>
 a{text-decoration:none}
 </style>

a默认去掉下划线，鼠标移上来就添加下划线

 <style>
 a:hover{text-decoration:underline;color:red}
  </style>

h标签去掉加粗

  • 粗体变细体 font-weight:normal 接近100
 <style>
h2{font-weight:normal}
 </style>
  • 细变粗font-weight:bold 接近900
 <style>
p{font-weight:bold}
 </style>
  • img 标签

06有序列表无序列表

列表

  • 无序列表
    快捷键：ul>li*4
	<ul>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
    </ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TivANqd2-1614523299854)(./1614500785283.png)]

  • 有序列表
	<ol>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
    </ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDql26NP-1614523299855)(./1614500905674.png)]

  • 去掉小黑点和数字
 <style>
			li{list-style:none}
 </style>

07去掉浏览器默认间距

##body和p都有间距

  • 清空所有间距
    外间距margin（谷歌默认8像素）
    内填充padding
    *{margin:0;padding:0}
    *:通配符
  • 为了保证页面在所有页面在浏览器中都达到一致，要把标签默认样式全部
    也可以将通配符改成几个标签中间用逗号隔开
    body，p，ul{padding:0;margin:0
  • 重置样式表 reset.min.css 会经常用到

08块级标签

div

  • div用来划分结构，容器，包裹其他元素
<div>
</div>

盒子模型样式属性

  • 宽：width
  • 高度：height
  • 背景颜色：bac,kground-color/background
<style>
  div{height: 424px;
      width: 00;
      background-color:aqua;}
 </style>

#09行内标签span
span用来划分结构 文字元素，行内元素（span里面可以嵌套行内元素或文字元素）

	<ul>
        <li><span>1</span>细变粗font-weight:bold 接近900</li>
        <li><span>10</span>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
        <li>细变粗font-weight:bold 接近900</li>
    </ul>

span与块级元素区别：行内元素宽高属性不起作用，他的大小由内容多少来决定

  • 行内元素span设置宽高属性不起作用 需要转换成具有块级元素特点的属性，display：inline
  • 块级元素div设置高度属性都是起作用的，不需要任何的转换 display:block
    行内元素=>块级元素 display：block（独占一行）
    display:inline-block（不会独占一行）
    将span内数字占的大小变得一样
 <style>
   
	span{
	display:block;
	  height: 20px;
      width: 20;
      background-color:red;}
 </style>

文本内容基本以text开头
文字以font开头
可以用文本类的方法text-align: center来居中

超出span的文字用省略号实现
overflow: hidden;溢出隐藏省略号这三条件缺一不可
white-space: nowrap;强制不折行
text-overflow: ellipsis;超出文字用什么方式来显示

10几个特殊标签

em、i斜体标签

可单独控制这几个字
i也控制斜体

<li><em>细变粗font-weight:bold 接近90</em>细变粗font-weight:bold 接近900</li>

让斜体不斜
em{
color: #000;
font-style: normal;
}

strong、b标签

b标签也可以强调

<li><strong>变粗font-weight:bold 接</strong>细变粗font-weight:bold 接近900</li>

音频视频元素

###视频播放器
注：谷歌浏览器禁用了自动播放
标签：video
autoplay 自动播放 - autoplay=“autoplay”

controls 播放器控件 - controls=“controls”

loop 循环播放 - loop="loop"等同于loop

  <video src="" autoplay></video>

音频播放器

标签：audio

<audio src="iTunes Library Genius.itdb"></audio>

##嵌套网页
标签:iframe

<iframe src="https://www.baidu.com" frameborder="0" width="50" height="800" >

##公司符号
&copy

11类选择器

写网页的时候要按照总上到下，从左到右，从外到里的顺序写
类选择器：class
后代选择器：div ul li span{}

<style>
    .zfstory{height: 424px;
          width: 500px;;
          background-color:aqua;}
     .zfstory li{
        width:300px;
    }
    </style>  

<div class="zfstory">
        <ul>
            <li><em>细变粗font-weight:bold 接近90</em>细变粗font-weight:bold 接近900</li>
            <li><strong>变粗font-weight:bold 接</strong>细变粗font-weight:bold 接近900</li>
            <li>细变粗font-weight:bold 接近900</li>
            <li>细变粗font-weight:bold 接近900</li>
            <li>细变粗font-weight:bold 接近900</li>
        </ul>

</div>

行内块元素对齐为基线对齐

 vertical-align: middle;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESorcz3v-1614523299856)(./1614518120260.png)]
#12行内元素和块级元素
img、a、h1-h6、p、ul、li、div、span、em、i、b、strong、audio、video、iframe
行内标签 display：inline ------a、span、 em、b、i、strong、img

  • 大小是自身内容大小
  • 行元素设置宽高不起作用，需要转换 display：block（上下结构）、inline-block（左右结构）
  • 行内元素不能嵌套块级元素，可以嵌套行内元素或文字元素
    块级元素display：block -----div、h1-h6、p、ul、li、ol、
  • 它的宽度是父元素的宽度，高度是本身内容的高度
  • 可以嵌套其他块级元素或者行内元素

行内块标签 display：inline-block

li>span----子级选择器 儿子元素

<li><span></span></li>

span li{}----后代选择器 儿子元素 孙子元素

<span>
    <ul>
        <li>
            细变粗font-weight:bold 接近900
        </li>
    </ul>
</span>

##思考：如何让独占一行的div变成不独占一行的div
inline虽然独占一行但是内容无他就无
行内块 display：inline-block可以，但是间距固定
解决方法1：用浮动代替inline-block
解决方法2：给父元素添加属性 font-size：0，为避免子元素font-size失效要给子元素重新设置

<style>
    .main{font-size: 0};
    
</style>
<div class="main">
        <div class="children"></div>
        <div class="children"></div>
        <div class="children"></div>
        <div class="children"></div>
</div>

转化的时候我们只有这样的情况：我们一般不会把元素转为行内元素
一般往块或行内块转化
空元素 单元素—<br>换行符<hr>分割符
##常用的HTML标签汇总

  • img、a、h1-h6、p
  • 三大列表：ul li、ol li、dl dt dd
  • 划分快：div、span
  • 文本格式化类：em、i、strong、b、small、big、del
  • 视频video、音频audio
  • iframe 嵌套网页
    ##HTML的分类
  • 行内元素 display：inline -------a、em、i、strong、b、small、big、del、video、audio
  • 块级元素 display：block -------div、h1-h6、p、ul li、ol li、dl dt dd
  • 行内块元素img
    ##display的取值
  • display：inline
  • display：block
  • display：inline-block
  • display：none（默认是下拉框隐藏，鼠标移上去才能看见，移走就消失不见）
    ##让元素消失不见的办法
    display：none
   <style>
        .layer{
            width: 100px;
            height: 100px;
            background-color: bisque;
            display: none;
        }
        .main:hover .layer{//注意这里hover后需要空一格，不空格不显示
            display: block;
        }
    </style>
	<div class="main">
	    <button>按钮</button>
	    <div class="layer"></div>
	</div>

01VScode常用插件
Vscode
插件 （左下）：
常用设置：
02Vscode的增删改查
新建文件
修改文件
删除文件
增加文件
03马克飞象
笔记：有道、印象、语雀、石墨
马克飞象
04HTML标签
网页的组成部分
HTML
HTML标签
语法：<小写标签名> 结束比开始多一个/
img 插入图片
超链接 a
文字段落
05常用四大标签问题解决
常用p标签首段缩进
a标签需要把下划线去掉
h标签去掉加粗
06有序列表无序列表
列表
07去掉浏览器默认间距
body和p都有间距
08块级标签
div
盒子模型样式属性
09行内标签span
10几个特殊标签
em、i斜体标签
strong、b标签
音频视频元素
视频播放器
音频播放器
嵌套网页
公司符号
11类选择器
12行内元素和块级元素
思考：如何让独占一行的div变成不独占一行的div
常用的HTML标签汇总
HTML的分类
display的取值
让元素消失不见的办法
01VScode常用插件
Vscode
插件 （左下）：
Chinese，open in browser，live server，beautfly

常用设置：
自动保存 auto save off-》after delay
每隔多久保存 auto save delay：1000 1s
字体大小 font size 根据自己的习惯
自动折行word wrap：off
颜色主题

02Vscode的增删改查
新建文件
HTML—-xxx.html
css—-xxx.css
js—–xxx.js
马克飞象——xxx.md
文档——xxxx.txt

修改文件
鼠标右键—重命名

删除文件
邮件删除 delete

增加文件
点击新建文件夹css image等

注意：可以在VScode同时打开多个项目，一个工作区—将文件夹添加到工作区—–也可以删除

03马克飞象
笔记：有道、印象、语雀、石墨
马克飞象
很多语法功能

大于号是形成一个色块

  • ctrl+b 加粗 strong text

printf
ctrl + k 是代码块

04HTML标签
网页的组成部分
HTML 标签，文字元素，图片元素，音乐，视频元素
CSS 样式表美化Html style/link
JS 交互动效

HTML
后缀名 xx.html 然后再输入 ！摁住enter/table建 会自动生成代码块

代码放在body中

HTML标签
语法：<小写标签名></小写的标签名> 结束比开始多一个/
没有结束标签单标签自闭合标签

标签分成对和不成对

快捷键 标签名加tab 会自动生成一组标签（成对加不成对不加）

img 插入图片

插入本地图片
绝对路径：C:\Users\ys129\Pictures\ico图标
相对路径：html和图片是同级关系直接写名称
下级关系 /+名称
上级关系…/+名称

  <img src="0.ico">
  <img src="img/1156973.png">

注释ctrl+
超链接 a
标签属性：属性名=“属性值”
百度
跳转的页面不会覆盖当前页面的话 target=“blank”
百度
跳转在当前页面打开:可以用 target=“_self”，也可以什么也不写
a 超链接 href 小手
思考： a 超链接需不需要下划线 用css样式清空或增加

文字段落
全国脱贫攻坚总结表彰大会2021年2月25日在北京隆重举行。中共中央总书记、国家主席、中央军委主席习近平向全国脱贫攻坚楷模荣誉称号获得者颁奖并发表重要讲话。中共福建省寿宁县下党乡委员会获“全国脱贫攻坚楷模”荣誉称号。

复制整行代码快捷键： shift + alt + 下箭头
文字段落首行缩进：思考如何实现文字段落首段缩进，css
&nbsp：空格符号
标题标签:数字越大文字越小1-6,默认加粗效果

快捷生成方法

hKaTeX parse error: Expected '}', got 'EOF' at end of input: {百度}*6会生成

百度1

百度2

百度3

百度4

百度5
百度6
鼠标右键检查可以查看页面代码 文章大标题一般用h1 小模块h2 思考：去掉默认加粗 css

05常用四大标签问题解决
常用p标签首段缩进
text-indent：2em（1em=1个字）
css引入的多种方式
1.行内式


2.内嵌式:一般写在head里,title后面
3.外链式

`

a标签需要把下划线去掉
a标签会有默认下划线和小手

a默认去掉下划线，鼠标移上来就添加下划线

h标签去掉加粗
粗体变细体 font-weight:normal 接近100

细变粗font-weight:bold 接近900

img 标签

06有序列表无序列表
列表
无序列表
快捷键：ul>li*4

<ul>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
</ul>

Alt text

有序列表

<ol>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
</ol>

Alt text

去掉小黑点和数字

07去掉浏览器默认间距
body和p都有间距
清空所有间距
外间距margin（谷歌默认8像素）
内填充padding
*{margin:0;padding:0}
*:通配符

为了保证页面在所有页面在浏览器中都达到一致，要把标签默认样式全部
也可以将通配符改成几个标签中间用逗号隔开
body，p，ul{padding:0;margin:0

重置样式表 reset.min.css 会经常用到

08块级标签
div
div用来划分结构，容器，包裹其他元素

盒子模型样式属性 宽：width

高度：height

背景颜色：bac,kground-color/background

09行内标签span
span用来划分结构 文字元素，行内元素（span里面可以嵌套行内元素或文字元素）

<ul>
    <li><span>1</span>细变粗font-weight:bold 接近900</li>
    <li><span>10</span>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
    <li>细变粗font-weight:bold 接近900</li>
</ul>

span与块级元素区别：行内元素宽高属性不起作用，他的大小由内容多少来决定

行内元素span设置宽高属性不起作用 需要转换成具有块级元素特点的属性，display：inline

块级元素div设置高度属性都是起作用的，不需要任何的转换 display:block
行内元素=>块级元素 display：block（独占一行）
display:inline-block（不会独占一行）
将span内数字占的大小变得一样

文本内容基本以text开头
文字以font开头
可以用文本类的方法text-align: center来居中

超出span的文字用省略号实现
overflow: hidden;溢出隐藏省略号这三条件缺一不可
white-space: nowrap;强制不折行
text-overflow: ellipsis;超出文字用什么方式来显示

10几个特殊标签
em、i斜体标签
可单独控制这几个字
i也控制斜体

  • 细变粗font-weight:bold 接近90细变粗font-weight:bold 接近900
  • 让斜体不斜 em{ color: #000; font-style: normal; }

    strong、b标签
    b标签也可以强调

  • 变粗font-weight:bold 接细变粗font-weight:bold 接近900
  • 音频视频元素 视频播放器 注：谷歌浏览器禁用了自动播放 标签：video autoplay 自动播放 - autoplay=“autoplay”

    controls 播放器控件 - controls=“controls”

    loop 循环播放 - loop=”loop”等同于loop


    音频播放器
    标签：audio


    嵌套网页
    标签:iframe

    公司符号 ©

    11类选择器
    写网页的时候要按照总上到下，从左到右，从外到里的顺序写
    类选择器：class
    后代选择器：div ul li span{}

    • 细变粗font-weight:bold 接近90细变粗font-weight:bold 接近900
    • 变粗font-weight:bold 接细变粗font-weight:bold 接近900
    • 细变粗font-weight:bold 接近900
    • 细变粗font-weight:bold 接近900
    • 细变粗font-weight:bold 接近900
    行内块元素对齐为基线对齐

    vertical-align: middle;
    Alt text

    12行内元素和块级元素
    img、a、h1-h6、p、ul、li、div、span、em、i、b、strong、audio、video、iframe
    行内标签 display：inline ——a、span、 em、b、i、strong、img

    大小是自身内容大小

    行元素设置宽高不起作用，需要转换 display：block（上下结构）、inline-block（左右结构）

    行内元素不能嵌套块级元素，可以嵌套行内元素或文字元素
    块级元素display：block —–div、h1-h6、p、ul、li、ol、

    它的宽度是父元素的宽度，高度是本身内容的高度

    可以嵌套其他块级元素或者行内元素

    行内块标签 display：inline-block

    li>span—-子级选择器 儿子元素

  • span li{}—-后代选择器 儿子元素 孙子元素
    • 细变粗font-weight:bold 接近900
    思考：如何让独占一行的div变成不独占一行的div inline虽然独占一行但是内容无他就无 行内块 display：inline-block可以，但是间距固定 解决方法1：用浮动代替inline-block 解决方法2：给父元素添加属性 font-size：0，为避免子元素font-size失效要给子元素重新设置
    转化的时候我们只有这样的情况：我们一般不会把元素转为行内元素 一般往块或行内块转化 空元素 单元素—
    换行符
    分割符

    常用的HTML标签汇总
    img、a、h1-h6、p

    三大列表：ul li、ol li、dl dt dd

    划分快：div、span

    文本格式化类：em、i、strong、b、small、big、del

    视频video、音频audio

    iframe 嵌套网页

    HTML的分类
    行内元素 display：inline ——-a、em、i、strong、b、small、big、del、video、audio

    块级元素 display：block ——-div、h1-h6、p、ul li、ol li、dl dt dd

    行内块元素img

    display的取值
    display：inline

    display：block

    display：inline-block

    display：none（默认是下拉框隐藏，鼠标移上去才能看见，移走就消失不见）

    让元素消失不见的办法
    display：none

    <div class="main">
    <button>按钮</button>
    <div class="layer"></div>
</div>

    132mcevq416
    退出账号
    当前文档
    恢复至上次同步状态
    删除文档
    导出…
    预览文档
    分享链接
    系统
    设置
    下载桌面客户端
    下载离线Chrome App
    使用说明
    快捷帮助
    常见问题
    关于
    搜索文件
    我的第一个笔记本02Vscode的增删改查
    我的第一个笔记本01VScode常用插件

猜你喜欢

转载自blog.csdn.net/qq_43218276/article/details/114241687
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022