admin管理员组文章数量:1566643
HTML的相关概念和建站流程
- 英语:HyperText Markup Language
- HTML的概念:超文本标记语言,是一种用于创建网页的标准标记语言。
- 标记:<>里面是标记
- 超文本:文字/图片/视频/超链接
HTML的基本组成:
-
结构(structure):html/xhtml w3c(万维网联盟)制定规范
概念 区别 html 超文本标记语言 最大的区别是语法 xhtml 可扩展的标记性语言 1.xhtml的单标签后面要加个/,
如
2.xhtml的标签必须是小写
3.xhtml的属性值必须用双引号引起来 -
样式(prasentation):css w3c(万维网联盟)
-
行为(behavior):js ECMA(欧洲电脑网商联合会)制定规范
快速生成HTML的基本结构(VScode)
-
新建带有.html后缀的文件
-
英文状态下按 ! 按 tab 或者 enter 生成基本结构
<!-- 文档类型声明 --> <!DOCTYPE html> <!--根标签--> <html> <!-- 头部 --> <head> <!-- 编码格式 --> <meta charset="UTF-8"> <!-- 网页的标题 --> <title>我的第一个网页。</title> </head> <!-- 主体 --> <body> 文字/图片/视频/超链接 </body> </html>
vscode快捷键
- 注释 ctrl+/ 取消注释 ctrl+/
- 保存 ctrl+s
- 撤销 ctrl+z
- 反撤销 ctrl+y
- 切换界面 alt+tab
- 全选 ctrl+a
- 快速写标签:标签名+tab
HTML的基本语法
- <标签(第一个单词)>
- 双标签:成对出现的标签
- 空(单)标签:单个出现
- <标签 属性=“属性值” 属性=“属性值”>
- 属性跟在标签后边用空格隔开
- 属性和属性值用=连接
- 属性值用引号引起来
- 属性可有多个,中间用空格连接
H5新增的语法(ie8及以下浏览器版本不生效)
- 文档声明DOCTYPE可以小写
- 单标签不写结尾标签
- 可以省略的结尾标签 li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
- 可以省略的标签 html、head、body、colgroup、tbody
HTML的基本标签
文章类的标签
- 标题标签:h1~h6
- 双标签/加粗且字体较大/h1-h6字体大小逐渐变小/独占一行
<!--最大标题-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<!--最小标题-->
<h6>标题6</h6>
- 段落标签:p
- 双标签/独占一行
- 随机生成一段文本:lorem(可加字数)+回车
- 控制换行:文件->首选项->设置->搜索wrap->将off改为on
<p>段落标签</p>
- 加粗标签:b strong(强调重要的)
- 可在同一行显示的标签/双标签
<b>加粗</b>
<strong>强调重要的</strong>
- 倾斜标签:i em
- 可在同一行显示的标签/双标签
<i>斜体</i>
-
删除线: del
- 可在同一行显示的标签/双标签
-
下划线: u
- 可在同一行显示的标签/双标签
-
上标:sup
- 可在同一行显示的标签/双标签
-
下标:sub
- 可在同一行显示的标签/双标签
-
换行标签:br
- 单标签
-
水平线:hr
- 单标签
-
特殊字符:
- 空格:
大小不确定 - 注册商标:
©
- 版权符号:
®
- 左尖括号:
<
- 右尖括号:
>
- 空格:
超链接标签:a
<a href="" target="_blank"></a>
- href=“链接跳转地址”
- 窗口打开方式 target
- -_self 自身窗口打开,默认值
- -_blank 新窗口打开
图片标签: img
<img src="" alt="" title=""></img>
-
单标签
-
src=“绝对路径(线上图片地址)/相对路径(本地图片地址)”
绝对路径
绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“C:\img\网页布局图片\图片文件1”目录下,那么 “bg.jpg”这个图片的绝对路径就是“C:\img\网页布局图片\图片文件1\bg.jpg"。那么如果要使用绝对路径指定插入网页的图片就应该使用 以下语句:
<img backround="C:\img\网页布局图片\图片文件1\bg.jpg" >
相对路径:所谓相对路径,就是相对于自己的目标文件位置
1. 当当前文件和目标文件在同一目录下时:直接图片名.后缀
2. 当当前文件和目标文件不在同一目录时:目录名/目录名…/图片名.后缀
3. 当当前文件的文件夹和目标文件的文件夹在同一目录时:…/目录名/图片名.后缀 (…/代表返回上级目录)
注意:相对路径使用“/”字符作为目录的分隔字符,而绝对路径可以使用“\”或“/”
字符作为目录的分隔字符。在网页编程时,很少会使用绝对路径,通常在网页里指定
文件时,都会选择使用相对路径。
-
alt=“图片加载失败时显示”
-
title=“鼠标滑到图片上时显示”
- title可用于所有标签
img自带的3px的底部留白
-
vertical-align:垂直方向对齐方式 (只对图片生效)
属性值 含义 baseline 基线 默认值 bottom 底线 可以解决img自带的3px的底部留白 middle 中线 可以解决img自带的3px的底部留白 top 顶线 可以解决img自带的3px的底部留白 - 应用:
- 解决图片底部三像素的留白
- 调整小图标和文字对齐的方式
- 应用:
布局标签
-
div 划分网页板块
- 双标签/不带任何自带样式/独占一行
-
span 小文本
- 双标签/没有任何样式,适合css选取小段文字/同行显示
列表标签
-
无序列表
<ul> <li><b>哈哈哈</b><> <li><a href="">嘿嘿嘿嘿</a><> <li>嘻嘻嘻<> </ul>
- 快速生成无序列表ul里面有10个li:ul>li*10{li里的内容$}+tab/enter $代表从1开始。
- 应用场景:网页导航,新闻列表,商品列表。
-
有序列表
<!--排序方式是大写字母顺序,开始位置为C,(A,B,C,···。C的位置为3)--> <ol type="A" start="3"> <li>哈哈哈1</li> <li>哈哈哈2</li> <li>哈哈哈3</li> <li>哈哈哈4</li> </ol>
- type属性:排序方式1(数字)/A(大写字母)/a(小写字母)/I(大写罗马字母)/i(小写罗马字母)
- start属性:排序的起始值,必须是数字。
-
自定义列表
<dl> <dt>图片/名词</dt> <dd>图片说明/名词的解释</dd> <dd>可有多个</dd> </dl>
- 应用场景:上图下字,左图右字。
表格标签:table
主要用在后台系统展示数据,一般不用在前台网页布局,有自动调节大小的功能
-
table 表格
-
边框 border=“数字”,单位是像素。
-
宽度 width=“数字”,单位px,height=“数字”,单位px;
-
表格位置align
left 居左 默认值
right 居右
center 居中
-
单元格之间间距cellspacing=“数字”,一般设置为0,去掉单元格之间的间距。
-
调整内容到单元格的左右距离 cellpadding=“数值”
-
以上都是table自带属性。
-
-
tr 行
-
水平对齐:align
left 居左 默认值
right 居右
center 居中
-
垂直对齐:valign
middle 居中 默认值
top 居上
bottom 居下
-
-
td 列
-
水平对齐:align
left 默认值
right 居右
center 居中
-
垂直居中:valign
middle 默认值 居中
top 居上
bottom 居下
-
-
合并
-
列合并:colspan
-
行合并:rowspan
-
合并步骤
a. 补全表格,有几行几列就生成几行几列的表格
b. 观察属于行合并还是列合并,那个不同合并那个
c. 确定属性后,观察合并几个单元格,属性对应的值就是几
d. 将合并的属性放到合并的起始的单元格
e. 注释掉多余的单元格
遇到行合并和列合并时,先进行列合并
-
<table border="1" width="300" height="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<hr>
<table border="1" width="300" height="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<hr>
<table border="1" width="300" height="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<!-- <td></td> -->
</tr>
</table>
<table border="1" width="700" height="400" align="center" cellspacing="0">
<tr>
<td colspan="5" align="center">H5</td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr align="center">
<td width="100">姓名</td>
<td width="150"></td>
<td>年龄</td>
<td></td>
<td rowspan="5">照片</td>
</tr>
<tr align="center">
<td>是否毕业</td>
<td>是</td>
<td>专业</td>
<td></td>
<!-- <td></td> -->
</tr>
<tr align="center">
<td>大学</td>
<td colspan="3"></td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr align="center">
<td>从事工作</td>
<td colspan="3"></td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr>
<td>H5基础</td>
<td colspan="2"></td>
<!-- <td></td> -->
<td></td>
<!-- <td></td> -->
</tr>
<tr>
<td>自我性格描述</td>
<td colspan="4"></td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr width="150">
<td rowspan="2">自我简述</td>
<td colspan="2" rowspan="2"></td>
<!-- <td></td> -->
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr width="150">
<!-- <td></td> -->
<!-- <td colspan="2"></td> -->
<!-- <td></td> -->
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<td colspan="5" align="center">欢迎</td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
</table>
表格新增标签及属性
-
标题标签 caption
-
caption-side:top(默认)/bottom 标题的位置
<table> <caption>标题</caption> </table>
-
-
列标题 th
<tr> <th>姓名</th> <th>性别</th> <th>年纪</th> </tr>
-
行分组
- 表头 可选
- 表体 可以有多个
- 表尾 可选
-
列分组 colgroup
-
span: 几列为一组
<colgroup> <col span="1" class="first"> <col span="2" class="second"> <col span="1" class="third"> </colgroup>
-
-
单元格之间的距离:border-spacing:数值+px 一般设置0。加在表格身上
-
合并边框 border-collapse:collapse; 加在表格身上
-
表格固定 table-layout:auto(自动)/fixed(固定) 加在表格身上
- 设置表格为fixed提高浏览器加载速度
-
垂直对齐方式 vertical-align: baseline/top/bottom/middle 可以在单元格中生效
表单标签 form
<form action="" method=""></form>
作用 | ||
---|---|---|
action | 提交路径 | 如:https://www.baidu |
method | 提交方式GET/POST | 1.GET一般用来获取数据,POST一般用来提交数据 2.GET请求安全系数较低。 3.GET可以传送的数据量较小 一般不超过2kb,POST可以传送的数据量较大 理论上不受限制 |
-
表单元素 input 单标签/在同一行显示
-
文本输入框
请输入姓名:<input type="text" placeholder="请输入姓名" value="小白">
placeholder:提示信息 value:默认值
-
密码输入框
请输入密码: <input type="password">
-
提交按钮
<input type="submit" value="搜索">
value:按钮文本
-
重置按钮
<input type="reset" value="重新">
-
普通按钮
<input type="button" value="普通按钮">
-
表单元素新增属性
-
单选框 name的属性必须有,且值必须一样才能够互斥,checked 默认选中 disabled 禁止选中
<input type="radio" name="sex" checked>男<input type="radio" name="sex">女
-
多选框 checked 默认选中 disabled 禁止选中
<input type="checkbox" checked disabled>M416 <input type="checkbox">AKM
-
下拉列表 selected:默认选中
<select name="height" id=""> <option value="1">175</option> <option value="2" selected>176</option> </select>
-
多行文本域
-
禁止用户缩放:给textarea 添加 resize:none;
<textarea name="" id=""></textarea>
-
-
文件上传
<input type="file">
-
扩大表单选中范围 label
-
for的属性值指向选择元素的id名
<label for="man"> <input type="radio" name="sex" id="man">男 </label>
-
-
表单字段集 fieldset
-
字段集标题 legend
<fieldset> <legend>标题</legend> <input type="text"> </fieldset>
-
-
去掉表单元素获取焦点时候的边框:outline:none;
链接外部文件标签 link
- 标签定义文档与外部资源的关系。
- 标签最常见的用途是链接样式表。
-
link 元素是空元素(单标签),它仅包含属性。
-
link元素只能存在于 head 部分,不过可以出现多次。
-
链接一个外部样式表:
<head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head>
属性 | 作用 |
---|---|
rel | 规定当前文档与被链接文档之间的关系。 |
type | 规定被链接文档的 MIME 类型(多用途互联网邮件扩展类型)。 |
href | 规定被链接文档的位置。 |
- 扩展MIME类型:Multipurpose Internet Mail Extensions,多用途互联网邮件扩展类型,是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。
标签(元素)类型 display
-
内联(行内)元素(inline) span b strong i em a sub sup img
- 宽高不生效,由内容决定
- 在同一行显示
- 盒模型属性padding的左右生效,上下显示不准确;margin的左右显示准确,上下不准确
- 内联元素添加浮动之后,会转换成块级元素
-
块级元素(block) h1-h6 div p ul li dl dt dd ol form table
- 宽高生效
- 独占一行
- 盒模型属性都生效
- 一般作为容器去包裹其他元素,p标签一般不包裹块级元素,也不包裹自己
-
行内块元素(inline-block) input (img)
- 在同一行显示
- 宽高生效
- 盒模型属性都生效
-
元素类型转换 display
属性值 含义 block 块 inline 内联 inline-block 内联块 none 隐藏元素,隐藏之后不占位 注:visibility:hidden;隐藏元素,隐藏之后会占位
-
解决横向排列的元素之间的空格:指的是内联元素或者行内块元素写代码时换行导致的空格出现。
- 将标签代码写到同一行
- 添加浮动
- 给元素添加一个父元素,设置font-size:0;然后单独设置该元素的字体大小
元素类型
- 置换元素:浏览器会根据标签以及标签内的属性值来显示不同的内容
input的type类型, img的src ,
textarea的内容在变
,select中的option内容会变。(img或者input有的标签可以设置宽高,是因为img,input标签属于置换元素。) - 非置换元素:除了置换元素
字体图标的使用(iconfont-阿里)
-
注册账号
-
普通字体图标的使用
-
搜索对应的图片,点击加入购物车
-
完成后点击添加至项目
-
下载项目到本地站点,解压文件,不要删除任何文件
-
在使用图标的文件地方 用link引入iconfont.css文件
<!--download/font_2135748_v7l4jintarp 这个路径是不固定的,根据自己下载的图标文件夹路径进行引入 --> <link rel="stylesheet" href="download/font_2135748_v7l4jintarp/iconfont.css">
-
使用,必须加 iconfont的名字,其次添加所需图片的class名。(一般在下载的文件中有demo_index.html文件,打开之后有具体的引入方法。)
<span class="iconfont icon-jipiao">哈哈哈</span>
-
-
彩色图标的使用
-
引入js文件
<script src="download/font_2135748_v7l4jintarp/iconfont.js"></script>
-
添加通用样式
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
-
使用 只需要改id名就行(一般在下载的文件中有demo_index.html文件,打开之后有具体的引入方法。)
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-tubiaov-daochushangchuan-"></use> </svg>
-
H5新增的标签(ie8及以下浏览器版本不生效)
-
新增标签特点:语义化 (双标签)
-
头部 header
-
导航 nav
-
板块 section
-
侧边栏 aside
-
主要内容区域 main
-
有图文 figure ficaption
<figure> <img src=""> <figcaption>图片说明</figcaption> </figure>
-
footer 底部
-
article 文章
-
mark 标记 内联
-
time 时间标签 内联
-
多媒体标签
-
音频
<audio src="zy/梦然-少年.mp3" controls autoplay muted loop></audio> <!--兼容写法 浏览器从上到下解析支持那种格式就播放哪个--> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio> <!-- controls: 控件 autoplay: 自动播放 谷歌和火狐不支持 muted: 静音 静音之后火狐支持自动播放 loop: 循环-->
-
视频
<video src="zy/zyx.mp4" controls autoplay loop poster="zy/7.jpg"></video> <!--兼容写法 浏览器从上到下解析支持那种格式就播放哪个--> <video width="800" height=""> <source src="myvideo.mp4" type="video/mp4"></source> <source src="myvideo.ogg" type="video/ogg"></source> <source src="myvideo.webm" type="video/webm"> </source> </video> <!--属性同音频 autoplay: 静音之后谷歌和火狐都支持自动播放 poster: 视频没有播放之前显示的图片 -->
CSS 层叠样式表
css概念
- 英文:Cascading Style Sheets
- css是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译,是用来表现HTML或XHTML的标记语言,由W3C的CSS工作组发布推荐和维护的.运用CSS样式可以让页面变得美观。
- 层叠
- 通过不同的选择器选择同一个标签的时候,设置了相同的属性,但是设置了不同的属性值,根据选择器的权重值,权重值高的优先显示,如果没有冲突的样式,正常显示
- 样式表
- 内联/行内样式表
- 内部样式表
- 外部样式表
CSS语法
-
CSS语法由三部分构成:选择器、属性和值:
selector {property: value}
选择器{
属性:属性值;(声明) 属性:属性值;(声明)
属性:属性值;(声明)
……
}- 选择器和声明组成
- 每条声明以分号结尾
- 最后一条声明可以省略分号
css样式表
-
内联/行内样式表:在标签内部设置
-
给标签生成一个style的属性
-
style的属性值为css属性:css属性值;css属性:css属性值;
<div style="width:200px;height:100px;background-color:red;color:blue;"></div>
-
-
内部样式表
- 在head标签里面,生成一个style的双标签
- 在style的标签里面写对应的css样式
<style> div { width: 200px; height: 200px; background-color: pink; } </style>
-
外部样式表
- 新建一个css文件夹
- 在css文件夹的下面新建一个.css后缀的文件
- 引入外部样式表
- 在html文件的head标签里面生成一个link单标签
<link rel="stylesheet" href="css/外部样式表.css" type="text/css">
属性 作用 rel 当前关联的文件类型 stylesheet 样式表 href css文件的路径 type 文件类型 默认就是css文件类型 ii.@import url()
<style> @import url(路径); </style>
区别:
1.@import只能引入css文件,link不止可以引入css文件
2.@import的css文件会在结构加载完成之后,才开始加载, link是结构和样式同时加载
3. @import只能在ie5以上支持,link都支持
-
样式表的权重(优先级)
- 内联>内部
- 内联>外部
- 内部和外部,根据就近原则,离得近的优先显示
-
样式表的选择
- 内联样式表:css属性较少的时候,还需要考虑优先级的问题
- 内部样式表:写小的案例
- 外部样式表:整页开发,结构样式分离
css属性
属性 | 属性值 | 注 | |
---|---|---|---|
宽度 | width | 数值+px | 必须要有单位,0可以不加单位。只对块级元素有效 |
高度 | height | 数值+px | 必须要有单位,0可以不加单位。只对块级元素有效 |
计算宽度:width: calc(100% - 300px) 计算符号两边一定要有空格
字体属性
属性 | 属性值 | 注 | |
---|---|---|---|
字体大小 | font-size | 数值+ 1.px 2.em 3.rem | 1.一般情况是偶数,并且一般不低于10px; 2.em默认值是1em=16px,父元素有字体大小的话,参考的是父元素的字体大小; 3.rem默认值是16px,根元素(html)有字体大小时,参考根元素的字体大小(一般用在移动端)。 |
字体加粗 | font-weight | 1.bold 2.normal 3.100-900 | 1.bold定义粗体字符。 2.normal是默认值,定义标准的字符。 3.100-900定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
字体样式 | font-style | 1.italic 2.normal 3.oblique 4.inherit | 1.italic浏览器会显示一个斜体的字体样式。 2.normal默认值,浏览器显示一个标准的字体样式。3.oblique浏览器会显示一个倾斜的字体样式。 4.inherit规定应该从父元素继承字体样式。 |
字体类型 | font-family | 中文/英文。 | 1.中文要加引号,如:“宋体”。 2.英文一个单词不用引号,多个单词要加引号引起来。3.多个字体类型用逗号隔开,浏览器会依次检索,有该字体直接显示,找到最后都没有该字体时,显示默认字体。 |
-
字体属性的复合写法 font
font:字体加粗 字体倾斜 字体大小/行高 字体类型
font: bold italic 20px/40px "宋体";
- 字体加粗 字体倾斜为可选
- 字体大小/行高 字体类型 必选,并且必须是该格式,顺序不能换
文本属性
属性 | 属性值 | 注 | |
---|---|---|---|
文本颜色 | color | 1.颜色单词 2.十六进制3.rgb(红绿蓝) 4.rgba(红绿蓝阿尔法 ) | 1.颜色的名称,如red, blue,等,不区分大小写. 2.十六进制符#RRGGBB 和 #RGB(比#ff0000)。"#" 后跟 6 位或者 3 位十六进制字符(0-9, A-F)。 3.规定颜色值为 rgb 代码的颜色,函数格式为rgb(R,G,B),取值可以是 0-255 的整数或百分比。 4.rgba扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。a 表示透明度:0=透明;1=不透明。 |
文本水平对齐方式 | text-align | 1.left 2.right 3.center 4.justify | 1.left 左对齐 默认值 2 .center 居中 3.right 居右 4.justify 两端对齐 内容向两边,加大中间的间距 |
行高 | line-height | 1.数字 2.数值+px | 1.数字是字体大小的倍数。 2.去掉标签自带的行高:设置line-height(行高)和font-size(字体大小)值为一样 应用: 1.多行文本:加行高可以增大行和行之间的距离 2.单行文本:将行高和元素的高度设置成一样,实现垂直居中 |
文本修饰 | text-decoration | 1.underline下划线 2.overline上划线 3.line-through删除线 4.none去掉下划线 | |
文本缩进 | text-indent | 1.数值+px/em | 1.只对独占一行的元素才生效 2.可以设置负数 3.缩进两个词:设置text-indent:2em; 参考当前元素的字体大小 |
字符间距 | letter-spacing | 数值+px | 1.中文:加大字和字之间的距离 2. 英文:加大字母之间的距离 |
单词之间的距离 | word-spacing | 数值+px | 只对英文生效,加大单词和单词之间的距离 |
大小写转换 | text-transform | 1.首字母全部大写 capitalize 2.全部小写 lowercase 3.全部大写 uppercase 4.默认值 none |
列表属性
- 列表符号:list-style-type
- disc 实心圆
- square 方块
- circle 空心圆
- none 去掉列表符号(也可以用list-style:none去掉列表符合)
边框属性
属性 | 属性值 | 注 | |
---|---|---|---|
边框颜色 | border-color | 1.颜色单词 2.rgb(0-255,0-255,0-255) 3.十六进制 | 默认情况下,边框颜色和字体颜色一样。 |
边框样式 | border-style | 1.实线 solid 2.虚线 dashed 3.点状线 dotted 4.双实线 double | |
边框大小 | border-width | 数值+px |
-
边框的复合写法 border: 边框大小 边框样式 边框颜色;顺序不固定
-
单方向边框 border-方向(top/right/bottom/left/none(去掉边框)):边框大小 边框样式 边框颜色;
-
边框实现三角形
/*向右的三角*/
div {
height: 0;
width: 0;
/*transparent 透明*/
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red;
}
背景属性
-
背景颜色 background-color
- 颜色单词/rgb(0-255,0-255,0-255)/#十六进制
- rgba(0-255,0-255,0-255,0-1);0表示完全透明 1表示不透明 值越小越透明
-
背景图 background-image:url(图片路径)
-
背景图是否重复 background-repeat
属性值 含义 repeat 重复 repeat-x 在x轴重复 repeat-y 在y轴重复 no-repeat 不重复 -
背景图的位置 background-position: x轴 y轴;
属性值 含义 数值+px 向右和向下为正数,反之,可以设置负数 关键字 1.水平方向:left/center/right
2.垂直方向:top/center/bottom -
复合写法:
background: 背景颜色 背景图 背景图是否重复 背景图的位置/背景图大小;
顺序不固定
- 展开的写法写到复合写法的后面,不然会被复合写法覆盖掉
-
背景图和img使用的条件
- img插入的图片占位, 图片作为网页的内容
- 背景图不占位, 修饰性的图片用背景图插入
浮动
-
应用场景:让纵向排列的元素横向排列
-
float
属性值 含义 none 默认值,不浮动 left 左浮动 right 右浮动 -
浮动特点 从父元素的边缘开始按顺序挨个排列 浮动元素会脱离文档流,浮动元素会遮挡后面的兄弟元素,但是不会遮挡文字 浮动元素的宽度如果超出父元素的宽,后面的元素会掉到浮动设置的位置 浮动元素会影响后面的兄弟,但是不会影响到前面的兄弟 内联元素添加浮动之后,会转换成块级元素
PS切图方法
- 矩形工具(一次只能切一个)
- 选中需要的图片 ctrl+c
- ctrl+n 弹框中按回车
- ctrl+v 粘贴图片
- 菜单项 文件->导出->快速导出为png格式
- 切片工具(可以切多个)
- 选中多个需要的图片
- 菜单项 文件->导出->存储为web所用格式
- 弹框中根据需求修改图片格式,完成点击存储
- 存储的时候文件资源器的图像选择 所有用户切片
- 在对应的文件下面会生成images的文件夹
盒模型
-
内容区(content) :显示文字/图片/视频等的区域,宽高确定内容区
-
内填充(padding):
- padding值的设置
值个数 声明 作用范围 一个值 padding:10px 四周 两个值 padding:10px 20px; 上下 左右 三个值 padding: 10px 20px 30px; 上 左右 下 四个值 padding: 10px 20px 30px 40px; 上 右 下 左 - 单方向 padding-方向(left/right/top/bottom): 数值+px;
padding值的特点 会撑大盒子,如果不想被撑大的话,要在原来宽高的基础上,减去对应方向的padding值 padding值不能设置负数 背景图/色可以在padding区域显示 可以用来调整内容区到盒子边缘的位置 -
边框(border):边框也会撑大盒子,设计图从边框里面开始量取
-
外边距(margin)
值个数 声明 作用范围 一个值 padding:10px 四周 两个值 padding:10px 20px; 上下 左右 三个值 padding: 10px 20px 30px; 上 左右 下 四个值 padding: 10px 20px 30px 40px; 上 右 下 左 margin值的特点 margin值不会撑大盒子,但是会影响到旁边的元素 margin可以设置负数 背景图和背景色不在margin区域显示 调整自己和别的元素之间的距离 margin:auto; auto: 浏览器会根据当前窗口的宽,减去元素的宽,将剩余的空间进行一个自动的平均分配,实现左右的居中,垂直是不生效的 -
margin的bug
-
margin的传递:给元素的第一个子元素添加上边距的时候,边距会错误加在父元素的身上
解决margin传递的方法 使用padding 给父元素添加边框 给父元素或者是该元素添加浮动 给父元素添加overflow:hidden(溢出隐藏) -
margin的重叠:给上面的元素设置下边距,给下面的元素设置了上边距,边距会产生重叠,并且以两个值的最大值显示,左右的间距是不会出现重叠的
- 解决margin重叠的方法:只给一个盒子添加外边距。
-
怪异盒模型
- 标准盒模型:box-sizing:content-box
- 盒子宽度 = 内容区的width+padding的左右+border的左右
- 怪异盒模型:box-sizing:border-box (ie8以下不支持)
- 盒子宽度 = 内容区的width
弹性盒布局 flex
-
父元素
-
形成弹性盒 display:flex;
-
主轴对齐方式 justify-content
属性值 含义 flex-start 默认值 主轴起点 flex-end 主轴终点 center 主轴中心 space-between 两端对齐 space-around 中间空隙是两边的2倍 space-evenly 平均分配 -
交叉轴 align-items
属性值 含义 stretch 默认值拉伸
1.主轴是横向的话,看到该效果需要去掉子元素的高度,子元素的高会拉伸到和父元素一样高
2.主轴是纵向的话,看到该效果需要去掉子元素的度,子元素的宽会拉伸到和父元素一样宽)flex-start 交叉轴的起点 flex-end 交叉轴的终点 center 交叉轴的中心 -
主轴的方向flex-direction
属性值 含义 row 默认值 横向从左向右 row-reverse 横向从右向左 column 纵向从上到下 column-reverse 纵向从下到上 -
换行 flex-wrap
属性值 含义 nowrap 默认值 不换行 wrap 换行 -
多行之间的对齐方式 align-content
属性值 含义 stretch 拉伸 flex-start 整个盒子的起始 flex-end 整个盒子的终点 center 主轴中心 space-between 多行内容两端对齐 space-around 多行内容中间空隙是两边的2倍 space-evenly 多行内容平均分配
-
-
子元素
-
子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)
属性值 含义 stretch 拉伸 flex-start 交叉轴的起点 flex-end 交叉轴的终点 center 交叉轴的中心 -
排列顺序 order
- 数值 值越大,越在后面排,可以为负数
-
放大比例 flex-grow
- 0 不放大
- 数值
-
压缩 flex-shrink
-
1 默认值 压缩
-
0 不压缩
-
滚动导航的实现
1.设置子项不压缩 flex-shrink:0;
2.给父元素设置溢出显示滚动条 overflow-x:auto;
-
-
子项的宽度 flex-basic:数值+px
-
复合属性 flex:flex-grow(0) flex-shrink(1) flex-basic(auto);
-
flex:1; 子项占满整个剩余控件
-
-
利用弹性盒对盒子进行水平垂直居中
/*父元素*/ div{ display:flex; justify-content:center; align-items:center; }
溢出属性
-
overflow(overflow-x(x轴溢出)/overflow-y(y轴溢出))
属性值 含义 visible 默认值 显示 hidden 溢出隐藏 scroll 显示滚动条 auto 内容没有溢出正常显示,溢出显示滚动条 -
单行文本溢出显示省略号
步骤一:设置宽度
步骤二:设置不换行 white-space:nowrap
步骤三:设置溢出隐藏 overflow:hidden
步骤四:设置文本溢出显示省略号 text-overflow:ellipsis
定位属性 position
-
static 默认值
-
relative 相对定位
- 参考物:自己本身
- 移动距离:left/right/bottom/top:数值+px
- 特点
- 移动之后依然占位
- 定位元素的层级要比普通元素的层级要高
-
aboslute 绝对定位
-
参考物(包含块):参考有定位属性(除static属性之外)的祖先元素,设置绝对定位的元素,会一层一层向上找有定位属性的祖先元素,谁有定位属性,就参考谁去移动,如果找到body也没有找到有定位属性的祖先元素的话,就参考body,也就相当于浏览器的窗口,一般使用相对定位去形成参考物。(子绝父相)
-
移动距离:left/right/bottom/top:数值+px
-
特点
- 脱离文档流,会遮挡后面元素的文字
- 给元素设置绝对定位后,margin:auto会失效
- 给内联元素添加定位后,内联元素会变成块级元素
- 给元素不设置宽,自适应宽度的时候,加了绝对定位,自适应会失效,需要重置元素的宽width:100%
- 定位元素的层级要比普通元素的层级要高
-
应用场景
- 有重叠效果
<div> <img src="img/1.webp" alt=""> <ul> <li class="first"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
div { width: 800px; /*设置宽高和图片一样的宽高*/ height: 300px; border: 10px solid black; position: relative; } ul { /* width: 400px; height: 25px; */ background-color: blueviolet; position: absolute; /*参考div去定位*/ bottom: 30px; right: 50px; }
-
二级菜单
-
元素水平垂直居中
<div class="box1"> <div class="box2"></div> </div>
.box1 { width: 600px; height: 400px; background-color: pink; margin: 0 auto; position: relative; } .box2 { width: 200px; height: 200px; background-color: cornflowerblue; position: absolute; /* left: 150px; */ /* top: 100px; */ left: 50%; /*当前参考元素的宽度的50%*/ margin-left: -100px; /*向左拉取当前盒子宽度的一半*/ top: 50%; margin-top: -100px;/*向上拉取当前盒子高度的一半*/ }
-
-
fixed 固定定位
-
参考物: 浏览器窗口
-
移动距离:left/right/bottom/top
-
特点
- 不会跟随滚动条进行滚动
- 脱离文档流
- margin: auto;失效
- 宽度自适应会失效,需要重新设置宽度
-
应用场景
- 侧边栏/回到顶部/头部导航/广告
-
sticky 粘性定位
- 参考物:浏览器窗口
- 移动距离 top
- 特点
- 未达到top值之前,普通元素,达到top值之后类似于固定定位
-
定位元素的层级关系 z-index
- auto 默认值
- 数值 数值越大,层级越高,在最上面显示,可以为负数
宽高自适应
-
宽度自适应
- 宽度不设置,参考父元素
- 设置百分比 ,参考父元素
- 最大宽度(max-width)和最小宽度(min-width)
-
高度自适应
-
auto 自动 根据内容撑开
-
高度不设置 根据内容撑开
-
百分比 参考父元素
-
最小高度(min-height)和最大高度(max-height)
-
一屏页面(盒子的宽高和当前浏览器的宽高一样)的实现方式
html,body{ height:100%; } div{ height:100%; width:100%; /*(可设,可不设)*/ }
-
高度塌陷(浮动造成的影响)
-
产生条件:父元素不设置高度,想要子元素撑开,子元素浮动。
-
解决方法
-
给高度塌陷的父元素添加overflow:hidden;(触发BFC)
- 弊端:会把溢出父元素的内容隐藏掉
-
给浮动元素的下方添加一个块级元素(一般添加的是div),给块级元素设置clear属性
- clear:left(左浮动)/right(右浮动)/both(两侧的浮动); 清除浮动元素对后面的元素带来的影响
- clear只对块级元素生效
- 弊端:代码中会出现很多空的标签,造成代码冗余
-
万能清除法,给高度塌陷的父元素,通过伪元素选择器的方法添加元素
/*高度塌陷的父元素*/div::after{ content:""; clear:both; display:block; }
-
锚点
-
作用:实现在同一个页面不同板块之间的跳转
-
利用a标签的href属性和id名(必须是id名)进行联系
<a href="#box">跳转</a> <div id="box"></div>
css属性的继承
- 给元素设置样式之后,该元素的后代都会具有该样式
- 可以继承
- 字体类:font-size(字体大小)font-weight(字体加粗) font-style(字体倾斜)font-family(字体类型)
- 文本类:color(文本颜色) text-indent(缩进) line-height(行高) letter-spacing(字符间距) word-spacing(单词之间的距离) text-align(文本对齐方式)
- 列表属性:list-style
- 不可继承
- text-decoration(文本修饰) width height float padding margin border
BFC
-
块级格式化上下文(独立渲染的区域)
-
触发条件
- float的值为left/right
- position的值为absolute/fixed
- display的值inline-block/table-caption/table-cell/flex(弹性盒)/inline-flex
- overflow的值为hidden/scroll/auto
-
特性
- 在BFC的区域,浮动元素的高度也会计算在内(解决高度塌陷)
- BFC的区域不会与浮动盒子重叠 (两栏布局)
过渡属性(ie9及以下浏览器版本不支持)
-
需要过渡的属性:transition-property:css属性
-
过渡持续时间:transition-duration:数值+s/数值+ms 1s=1000ms
-
过渡延迟时间:transition-delay:数值+s/数值+ms 1s=1000ms
-
过渡执行效果:transition-timing-function:linear(匀速)
-
复合写法:transition:需要过渡的属性 过渡持续时间 过渡延迟时间 过渡执行效果;(顺序不固定,出现一个时间或者两个时间的话,默认第一个时间为执行时间)
- transition: all 1s; 过渡所有的属性,过渡时间为1s
-
利用外部样式表写过渡属性存在的问题及解决
-
问题:利用外部样式表写过渡属性可能会在页面初始的时候就有过渡效果
-
解决:给整个结构也就是html的标签下面添加
-
过渡属性对 display:none到display:block是不生效的
-
浏览器内核(浏览器的解析代码机制)
-
ie浏览器 Trident内核 -ms-
-
火狐浏览器 Gecko内核 -moz-
-
欧鹏浏览器 Blink内核 -o-
-
谷歌浏览器 Webkit内核 -webkit-
-
过渡的兼容写法
/* 标准写法 */ transition: all 1s; /* 火狐*/ -moz-transition: all 1s; /*谷歌*/ -webkit-transition: all 1s;
-
渐变 ( ie9及以下不支持)
-
线性渐变:background-image/background:linear-gradient(渐变方向,颜色1,颜色2……)
-
方向 设置方向一定要加 to
-
to bottom; 向下
background-image: linear-gradient(to bottom, red, yellow, blue, green);
-
to top; 向上
-
to left 向左
-
to right 向右
-
to right top 右上角
-
to right bottom 右下角
-
to left top 左上角
-
to left bottom 左下角
-
数值+deg
background-image: linear-gradient(45deg, red, yellow, blue, green);
-
-
-
重复性的线性渐变 background-image/background: repeating-linear-gradient(渐变方向,颜色1,颜色2……)
.box2 { /* 0-10px 红色纯色 10px-50px 红色到蓝色的过渡 50px之后是蓝色纯色*/ background-image: repeating-linear-gradient(red 10px, blue 50px); font-size: 50px; line-height: 50px; }
-
径向渐变 background-image/background:radial-gradient(方向,颜色值1,颜色值2……)
-
方向:和背景图的位置取值一样,设置方向一定要加浏览器前缀,否则不生效
background-image: -webkit-radial-gradient(left top, red, yellow);
-
-
重复性的径向渐变 background-image: repeating-radial-gradient(方向, 颜色值1,颜色值2……);
background-image: repeating-radial-gradient(blue, red 20px);
2d变形 transform:位移|旋转|缩放|倾斜
-
位移
-
transform:translateX(数值+px) 向右和向下为正数
-
transform:translateY(数值+px) 向右和向下为正数
-
写一个值代表的是x轴的位移
transform: translate(100px);
-
两个方向同时位移
transform: translateX(100px) translateY(-100px); transform: translate(100px,-100px);
-
移动之后,原来的位置依旧存在
-
利用位移实现水平垂直居中
-
优点:不论大盒子和小盒子的宽高如何变化,都能够识别到宽高的百分比
.box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); /*百分数参考的是当前盒子的宽高*/ }
-
-
-
旋转
-
x轴的旋转 transform:rotateX(数值+deg)
-
y轴的旋转 transform:rotateY(数值+deg)
-
z轴的旋转 transform:rotateZ(数值+deg) 顺时针是正数,逆时针是负数
-
只写一个值:
transform: rotate(-600deg); 代表的是z轴的旋转 -
位移和旋转同时存在
/*表示先位移后旋转*/ transform: translateX(300px) rotateZ(90deg); /*先旋转,坐标轴会跟着变化,位移会根据新的坐标轴去移动*/ transform: rotateZ(90deg) translateX(300px);
-
-
缩放
-
x轴的缩放 transform:scaleX(数值) 1:正常, 0-1之间是缩小, >1是放大。
-
y轴的缩放 transform:scaleY(数值) 1:正常 ,0-1之间是缩小, >1是放大。
-
两个方向都有
div{ transform: scaleX(0.4) scaleY(2); transform: scale(0.4, 2); transform: scale(2); }
-
-
倾斜
-
x轴的倾斜 transform:skewX(数值deg)
-
y轴的倾斜 transform:skewY(数值deg)
-
一个值代表的只是x轴的倾斜
-
xy轴的倾斜
div{ transform: skew(40deg, 50deg); }
-
-
变形原点:transform-origin:水平 垂直
- 水平:left/center/right
- 垂直:top/center/bottom
- 数值+px
- 百分比
动画 (ie9及以下浏览器版本不支持)
-
定义动画
@keyframes 动画名{ 关键帧 划分时间 from{} /*0%*/ to{} /*100%*/ } /*若动画执行时间是5s*/ @keyframes 动画名{ 0%{} /*0s*/ 20%{} /*1s*/ 40%{} /*2s*/ 60%{} /*3s*/ 80%{} /*4s*/ 100%{}/*5s*/ } /*兼容写法 @-moz-keyframes longer{} @-webkit-keyframes longer{}*/
-
使用动画
-
animation-name: 动画名
-
animation-duration: 动画执行的时间 s/ms
-
animation-delay: 动画的延迟时间 s/ms
-
animation-iteration-count: 动画执行的次数 数值/infinite(无限循环)
-
animation-timing-funcition: 动画的执行效果 linear(匀速)
-
复合写法 animation: 动画名 动画执行的时间 动画的延迟时间 动画执行的次数 动画的执行效果; animation: longer 1s infinite linear;
-
兼容写法 -webkit-animation
-
animation-direction: 动画的播放方向;noraml(正向)/reverse(反向)/alternate(交替运行)
-
animation-fill-mode:动画停止的关键帧(要限制次数才可以停止);backwards(第一帧)/forwords(最后一帧)如果设置了动画执行的方向为反向,关键帧起始和结尾也会变
-
animation-play-state:动画是否停止播放 running(播放)/paused(暂停)
div:hover { animation-play-state: paused; }
-
3d变形 transform
- 位移
- z轴的位移 transform:translateZ(数值+px)
- 三个轴都位移 transform:translate3d(x轴,y轴,z轴)
- 旋转
- x轴的旋转 transform:rotateX(数值+deg)
- y轴的旋转 transform:rotateY(数值+deg)
- 三个轴都旋转 transform:rotate3d(a,b,c,数值+deg) 0或者1 0表示不旋转 1表示旋转
- 缩放
- z轴缩放 transform:scaleZ(数值) 0不显示 ,1正常 ,0-1缩小 ,>1放大。
- 三个轴都缩放 transform:scale3d(x轴,y轴,z轴)
- 景深:persepctive:数值+px 近大远小
- 形成3d空间: transform-style:flat(2d平面)/preserve-3d(3d空间)属性加在变形元素的父元素身上
- 背部隐藏:backface-visibility: hidden;
透明度
-
使用透明度可以实现元素从无到有的过程
-
第一种 rgba()
div { width: 200px; height: 200px; background-color: rgba(165, 42, 42, 1); /*透明度从1*/ transition: all 1s; } div:hover { background-color: rgba(165, 42, 42, 0);/*过渡到0*/ }
-
第二种 opacity
div { width: 200px; height: 200px; background-color: brown; opacity: 1; /*透明度从1*/ transition: all 1s; } div:hover { opacity: 0; /*过渡到0*/ }
-
两种的区别:rbga不会模糊到里面的文字,opacity会影响里面的文字
css3新增的属性
盒子阴影
-
box-shadow: x轴偏移 y轴偏移 阴影模糊大小 阴影大小 阴影颜色 阴影位置
eg:box-shadow: 10px 10px 20px 10px green inset;
文字阴影
- text-shadow:x轴偏移 y轴偏移 阴影模糊大小 阴影颜色
- eg:text-shadow: 10px 10px 10px blue;
圆角
-
border-radius:数值+px/百分比;
-
一个值 四周
-
两个值 对角
-
三个值 左上 对角 右下
-
四个值 顺时针
-
圆:border-radius:50%/100%;
背景图的大小
- background-size: 宽度 高度
- 百分比 可能会变形
- 像素
- 关键字
- cover 背景图会不断放大 直到充满整个盒子,可能会出现裁切的情况
- contain 背景图会不断的放大 碰到边缘后就停止放大,可能会出现留白
背景图的固定
- background-attachment:srcoll/fixed(固定) 背景图不会随滚动条滚动
响应式布局
-
概念:根据不同的分辨率,显示不同的样式
-
主要修改的样式
- 元素的隐藏与显示
- 宽度
- 浮动排列
- 文本对齐方式
- 字体大小
-
优点:适配性好
-
缺点:
- 增大工作量
- 出现大量的隐藏元素,导致代码量冗余
- 一般用在小网站
媒体查询
@media 设备类型 and (媒体特性){}
-
设备类型
- all 所有的设备
- screen 显示器/笔记本/移动端设备
- print 打印机
-
媒体特性
- min-width(比最小值大)/max-width(比最大值小)
- 媒体特性的值后面不要加分号
- 多个媒体特性之间用and连接
- and两侧必须有空格
<style> /* @media 设备类型 and 媒体特性{} */ /* 设备宽度>1000 body显示红色 */ @media screen and (min-width:1000px) { body { background-color: red; } } /* 设备宽度500-1000 body显示蓝色 */ @media screen and (min-width:500px) and (max-width:999px) { body { background-color: blue; } } /* 设备宽度<500 body显示粉色 */ @media screen and (max-width: 499px) { body { background-color: pink; } } </style>
移动端准备工作
-
meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
+ 视口 viewport - 布局视口:css所作用的区域,默认是980px; - 可视视口:所看到的区域 - 完美视口/理想视口:将布局视口的宽和可视视口的宽设置为一样 width=device-width + 参数 - width = device-width:宽度等于当前设备的宽度 - initial-scale: 初始的缩放比例(默认设置为1.0) - minimum-scale:允许用户缩放到的最小比例(默认设置为1.0) - maximum-scale:允许用户缩放到的最大比例(默认设置为1.0) - user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
-
设备参数
- 屏幕尺寸:对角线的长度
- 分辨率:宽度或者高度容纳像素的个数
- PPI: 每英寸显示的像素点的个数
- 物理像素: ps量取的值
- 逻辑像素:css设置的值
- 逻辑像素比(dpr) = 物理像素/逻辑像素
pc端ps量取多少值就设置多少的值,移动端,因为iphone4的出现,出现了视网膜高清屏,1个css像素对应的就不是1个物理像素,物理像素和逻辑像素就产生了不对等的情况- 320设计图 dpr=1
- 750/640设计图 dpr=2
- 1080/>750 dpr=3
-
单位
-
百分比
-
em/rem
- em: 字体大小参考父元素的字体大小
- rem: 参考根元素(html)的字体大小 (一般将根元素的字体大小设置为100px html{font-size:100px})
-
vw(设备宽度)/vh(设备高度)
1vw = 设备宽度的1%, vh等同。 10vw = 设备宽度的10% , vh等同。
100vw = 设备宽度的100% ,vh等同。
-
-
根元素单位转换
- 设计图宽度750/设备宽度 375px
1rem = 100px
100vw = 375px
1rem = ??vw 1rem = 26.667vw - 设计图宽度640/设备宽度 320px
1rem = 100px
100vw = 320px
1rem = ?? vw 1rem = 31.25vw
- 设计图宽度750/设备宽度 375px
移动端布局
-
百分比布局(流式布局)
-
rem布局(等比缩放布局)
-
观察设计图大小,确定dpr,在ps图像->图像大小,修改图像所对应的宽度(根据量取的值除以dpr)
-
设置HTML标签的font-size:26.667vw或者24.154vw。
- 100vw = 设备分辨率 ( 设计图 / dpr ) 414
- 1vw = 414px / 100 = 4.14px
- 100px = 100/1vw(4.14px) = 24.154vw
-
在设计图里正常测量,测量出来的结果是以px单位结尾的,我们写代码的时候要把这个px换算成rem,此时px和rem的比例就是1rem:100px。如:height:0.9rem;
-
-
混合布局(百分比+rem)
CSS Sprite(雪碧图)
- 雪碧图的本质:将项目中所有的小图进行整合,整合为一张大图,然后使用背景图片和background-position属性来进行定位,进而显示出整张大图里某一个小的区域。
- 雪碧图的优势:减少服务器端硬盘的寻址压力,减少HTTP请求次数;繁忙的网站有必要使用,但不繁忙的网站完全没有必要。
- 劣势:1. 使用麻烦;2.维护起来不能改变原有图片的位置。
- 使用注意事项:
-
.确定装载图片的容器,并为其设置宽高(图标的宽高)。
-
为装载图片的容器设置background-image属性。
-
测量要使用的图标在雪碧中的相对位置。
-
为装载容器设置background-position属性,属性值就为刚刚量取的相对位置(该值都为负值,没有特性情况)。
-
grid(网格)布局
-
父元素
-
形成网格 display: grid
-
设置列宽 grid-templete-columns
- 数值px 数值px 数值+px;
- 百分比
- fr 占比
- repeat(重复的次数,宽度)
-
设置行高 grid-templete-rows
-
数值px 数值px 数值+px;
-
百分比
-
fr 占比
-
repeat(重复的次数,宽度)
-
划分网格区域 grid-template-areas
grid-template-areas: "a1 a1 a2" "a1 a1 a2" "a3 a3 a2" ;
-
行间距 row-gap: 数值+px
-
列间距 column-gap:数值+px
-
水平对齐方式 justify-content
属性值 start end center space-between space-around space-evenly stretch -
垂直对齐方式 align-content
属性值 start end center space-between space-around space-evenly stretch -
元素在网格里的水平对齐方式 justify-items
属性值 start center end stretch -
元素在网格里的垂直对齐方式 align-items
属性值 start center end stretch
-
-
子元素
-
grid-area: 区域名
p:nth-of-type(2) { grid-area: a2; background-color: blueviolet;}
-
多列布局
- 列的个数 column-count:数值
- 列间距 column-gap:数值+px
- 列之间的边框 column-rule: 值和边框的值一样
- break-inside: avoid; 防止瀑布流的阻断
css选择器
标签选择器
-
标签名{属性:属性值}
p{color:red}
id选择器
-
给标签添加id的属性,值为id名。
<div id="box">Lorem ipsum dolo</div>
-
#id名 选择元素
#box { background-color: pink; }
- id名不能重复
- id只能有一个
- id名不能重复
class(类)选择器
-
给标签添加class的属性,值为class名
<div class="box box1">Lorem ipsum </div>
-
class名选择元素
.box { color: red; } .box1 { font-size:12px; }
- class名可以重复
- 一个标签可以有多个class名,多个之间用空格隔开
后代选择器
- 选择器(父亲/祖先元素) 选择器(子代/后代元素){ css样式}
- 可以是多个选择器
- 选择器之间可以跨级,但是必须存在后代关系。
群组选择器
- 选择器,选择器 ,··· { css样式}
- 同时选中多个不同或相同的选择器,为它们设置相同的css样式。
选择器权重
设置的样式 | 权重 |
---|---|
内联样式 | 1000 |
id选择器 | 100 |
class选择器/伪类选择器 | 10 |
标签选择器 | 1 |
继承样式 | 0 |
选择器权重的特点
- 权重值越高,优先显示该样式
- 后代选择器的权重由每个选择器的权重值相加
- 群组选择器的权重值为选择器本身的权重值
- 权重值相同的,就近原则
- 继承样式的权重值是最低的
标签命名
- 英文单词并且语义化
- 驼峰命名
- 短线连接
- 下划线连接
通用选择器
*{
margin:0; /*外边距*/
padding:0;/* 内填充*/
}
css3新增选择器
属性选择器
- 属性选择器权重和class选择器一样为10 ,方括号前面可以加标签名,限制元素
用法 | 含义 |
---|---|
[属性名]{} | 属性名可以是自定义属性 |
[属性名=“属性值”]{} | 属性名和属性值匹配 |
[属性名^=“值”]{} | 属性值以某个值开头 |
[属性名$=“值”]{} | 属性值以某个值结尾 |
[属性名*=“值”]{} | 属性名中包含某个值 |
伪类选择器
-
权重值和class选择器一样 为10
-
结构性的伪类
- child系列
用法 含义 父元素 子元素:first-child{} 父元素中的第一个孩子必须和该子元素匹配 父元素 子元素:last-child{} 父元素中的最后一个孩子必须和该子元素匹配 父元素 子元素:nth-child(n){} 1.父元素中的第n个孩子必须和该子元素匹配。2.n可以替换成even(偶数)odd(奇数) 也可以是表达式 2n等。3.n是自然数是从0开始 父元素 子元素:only-child{} 父元素中只能有该子元素一个孩子 - type系列
用法 含义 父元素 子元素:first-of-type{} 这么多子元素中的第一个 父元素 子元素:last-of-type{} 这么多子元素中的最后一个 父元素 子元素:nth-of-type(n){} 这么多子元素的第n个子元素 父元素 子元素:nth-last-of-type(n){} 这么多子元素中倒数第几个元素 -
目标伪类
-
元素:target{} 点击跳转到该板块之后样式才生效(与锚点合用)
<!--锚点--> <a href="#box">点击跳到HTML板块</a> <div id="box">HTML板块</div>
#box:target { background-color: brown; color: chartreuse; font-size: 40px; }
-
-
状态伪类
状态 用法 示例 可编辑 表单元素:enabled{} input:enabled{} 不可编辑 表单元素:disabled{} input:disabled{} 获取焦点 表单元素:focus{} input:focus{} 选中 单选/多选::checked{} input:checked+span{} 高亮状态 元素::selection{} div::selection{color:blue;background-color:red;} -
动态伪类
- 在某种状态下所显示的样式。【爱恨原则(love hate)】
伪类选择器 作用范围 超链接:link{} 链接未点击之前显示的样式 超链接:visited{} 链接访问之后显示的样式 任何元素:hover{} 鼠标滑过该元素显示的样式 超链接:active{} 鼠标按下时显示的样式
伪元素选择器
用法 | 含义 |
---|---|
元素::after{ content: “”; | |
} | 给父元素添加最后一个孩子 |
元素::before{ content: “”; (必须要有的声明) | |
} | 给父元素添加第一个孩子 |
元素::first-letter{ css属性:css属性值; | |
} | 选中第一个字符 |
元素::first-line{ css属性:css属性值; | |
} | 选中第一行 |
层级选择器
类型 | 用法 |
---|---|
后代选择器 | 选择器 选择器{} |
子代选择器(只能选择的孩子) | 选择器>选择器 |
相邻并且在后面的兄弟 | 选择器+选择器{} |
相邻并且在后面的兄弟们 | 选择器~选择器{} |
type{} | 这么多子元素中的第一个 |
| 父元素 子元素:last-of-type{} | 这么多子元素中的最后一个 |
| 父元素 子元素:nth-of-type(n){} | 这么多子元素的第n个子元素 |
| 父元素 子元素:nth-last-of-type(n){} | 这么多子元素中倒数第几个元素 |
-
目标伪类
-
元素:target{} 点击跳转到该板块之后样式才生效(与锚点合用)
<!--锚点--> <a href="#box">点击跳到HTML板块</a> <div id="box">HTML板块</div>
#box:target { background-color: brown; color: chartreuse; font-size: 40px; }
-
-
状态伪类
状态 用法 示例 可编辑 表单元素:enabled{} input:enabled{} 不可编辑 表单元素:disabled{} input:disabled{} 获取焦点 表单元素:focus{} input:focus{} 选中 单选/多选::checked{} input:checked+span{} 高亮状态 元素::selection{} div::selection{color:blue;background-color:red;} -
动态伪类
- 在某种状态下所显示的样式。【爱恨原则(love hate)】
伪类选择器 作用范围 超链接:link{} 链接未点击之前显示的样式 超链接:visited{} 链接访问之后显示的样式 任何元素:hover{} 鼠标滑过该元素显示的样式 超链接:active{} 鼠标按下时显示的样式
伪元素选择器
用法 | 含义 |
---|---|
元素::after{ content: “”; | |
} | 给父元素添加最后一个孩子 |
元素::before{ content: “”; (必须要有的声明) | |
} | 给父元素添加第一个孩子 |
元素::first-letter{ css属性:css属性值; | |
} | 选中第一个字符 |
元素::first-line{ css属性:css属性值; | |
} | 选中第一行 |
层级选择器
类型 | 用法 |
---|---|
后代选择器 | 选择器 选择器{} |
子代选择器(只能选择的孩子) | 选择器>选择器 |
相邻并且在后面的兄弟 | 选择器+选择器{} |
相邻并且在后面的兄弟们 | 选择器~选择器{} |
本文标签: web
版权声明:本文标题:web前端设计 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1727192732a1101603.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论