基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
</head>
<body>
</body>
<script>
</script>
</html>
选择器
这里主要是外部选择器,外部选择器也就是在css文件中。html文件通过代码<link rel="stylesheet" href="index.css">
来使用index.css文件中的样式
基本选择器
元素选择器E{}
/* 元素选择器E{} 用元素名称做选择器 *{}代表所有元素 */
div{
background-color:purple;
color:pink;
}
/* div,span{}表示所有div和span */
div,span{background-color: #2ac; color:beige; font-size: 20px;}
属性选择器
div[id] /*有id属性的div*/
div[id^=xx] /*id属性为xx开头的div*/
div[id$=xx] /*id属性为xx结尾的div*/
div[id*=xx] /*id属性包含xx的div*/
id选择器
#yy { background: red;color: #aaa;font-size:20px }
/* div#yy表示即是div又得是id="yy"*/
div#yy{ background: red;color: #aaa; font-size:20px }
class选择器
.zz { background: red;color: #aaa;font-size:20px }
/*表示即是div又得是class="zz"*/
div.zz { background: red;color: #aaa;font-size:20px }
关系选择器
父子,包含,兄弟等关系。
/* A B:表示在A下的B 不一定是父子关系,但是包含关系*/
body span { background: red;color: #aaa;font-size:20px }
/* A>B:表示B必须是A的儿子 */
body>div>span { background: red;color: #aaa;font-size:20px }
/* selector1~selector2 selector1的弟弟(selector2)*/
/* class是php的标签的弟弟的class是java的 **/
.php~.java { background-color: #2ac; color:beige; font-size: 20px; }
/*selector1,selector2{} 对selector1和selector2的所有 */
伪元素选择器
也可以与属性选择器组合,例如div[id]::first-letter
就表示具有id属性的div标签的首字母
/* 以下两个都是对于块级标签的。常见的块级标签:div、p(段落文本)、 h1-h6(标题)、ul(无序列表)、li、dl(自定义列表)、dt、dd*/
/* 首字母 */
div::first-letter { color:red; font-size:40px; }
/* 首行 */
div::first-line { color:red; font-size:40px; }
首行:对于中文来说无论浏览器大小是什么都是是第一行文本,而对于一串没有空格的英文字母浏览器不会自动分行,当在css中加入使用属性word-break: break-all;
就会变得和中文一样。具体可见。
/* before:前置添加,after:后置添加 添加的是content*/
div::before{
content:"你好";
color:#2ac;
font-size:20px;
}
伪类选择器
结构性伪类选择器
first-child 第一个孩子
last-child 最后一个孩子
nth-child(n) n从1开始
nth-child(2n+1) n从0开始
nth-child(odd) 奇数
nth-child(even) 偶数
nth-last-child() 倒着数
UI状态伪类选择器
/* :hover 悬停状态 */
div:hover{
background-color:pink;
}
/* :focus 焦点状态 */
input:focus{
background-color:pink;
}
/* :checked 选中状态 */
/* valid 验证通过状态 配合input标签的required*/
常见标签
<input type="">
其中type
的值不同,所表达的标签类型也不相同,不同的标签也有其特有的属性,但是公共的都有id
,calss
等等。
type的取值 | 所表达的标签 | 具体说明 |
---|---|---|
text | 单行文本框 | |
password | 密码框 | |
radio | 单选框 | name属性值相同时是一组选择,只能选择一个 |
chekbox | 多选框 | |
file | 文件选择器 | |
color | 颜色拾取器 | |
date | 日期 | 年月日 |
datetime-local | 日期时间 | 年月日+时间 |
week | 周 | 选择周 |
number | 数字文本框 | [min,max]以step增加或减少,初始显示value |
range | 滑块 | 最左端是min,最右端是max,初始位置在value |
button | 普通按钮 | 显示为value |
submit | 提交按钮 | 显示为value,可以配合from标签 |
reset | 重置按钮 | 显示为value,可以配合from标签 |
<!-- 下拉框 -->
<select>
<option value="语文"></option>
<option value="数学"></option>
<option value="英语"></option>
</select>
<!-- 多行文本域
初始显示n行m列,可以由鼠标调整文本框大小
-->
<textarea rows="n" cols="m"></textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a name="aa"></a>
<!-- span 文本标签 -->
<span style="color:red;font-size:50px">h</span><span>ello</span>
<!-- div 竖着布局的标签 -->
<a name="div"></a>
<div>1</div>
<div>1</div>
<!-- h1-h6标题 -->
<a name="h"></a>
<h1>2</h1>
<h2>2</h2>
<h3>2</h3>
<h4>2</h4>
<h5>2</h5>
<h6>2</h6>
<!-- 段落标签 -->
<a name="p"></a>
<p>3</p>
<p>3</p>
<!-- 超链接标签
href:设置资源的路径
target:打开窗口的方式
_self:前者是默认值,在当前窗口打开
_blank:后者是在新窗口打开
-->
<a href="https://www.bilibili.com/" target="_blank">点击跳转</a><br>
<!-- 锚点标签
<a name="aa"></a> 定义锚点
href:使用#,例如:href="#aa",会跳转到<a name="aa"></a>
position:fixed;固定位置,不会随着滚轮而滚动
-->
<div style="position:fixed;right:100px;bottom:20px;font-size:30px;">
<a href="#aa">跳转到页面顶部</a><br>
<a href="#div">跳转div</a><br>
<a href="#h">跳转h</a><br>
<a href="#p">跳转p</a><br>
</div>
<!-- 图片标签
src引用图片资源,alt当图片加载失败时显示的内容
绝对路径:图片在磁盘中的位置
相对路径:图片与html文件的关系
在同一目录下:src="***.png"
图片在与html文件同一目录的img目录中:src="img/***.png"
img与html文件的上一级在同一目录中:src="../img/***.png"
也可以直接加载网址
设置图片格式:使用style或者直接width=10px;height=10px;等等。
-->
<img src="index.jpg">
<!-- 列表标签
无序;ul
有序:ol。type="A":以ABC...顺序,strat="3"从C开始,默认是123...。
-->
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
<li>hello4</li>
</ul>
<ol>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
<li>hello4</li>
</ol>
<!-- 表格标签
table:border:设置表格边框的像素;格式:使用style或者直接width=10px;height=10px;等等
cellspacing:单元格之间的距离;cellpadding:单元格的填充度
头:<thead></thead>;身体:<tbody></tbody>;尾:<tfoot></tfoot>
tr:一行空间。
td:td是tr里的单个单元格。rowspan:合并列,colspan:合并行
-->
<table border="1" >
<thead>
<tr>
<td colspan="2">上午</td>
<td colspan="2">下午</td>
</tr>
</thead>
<tbody>
<tr>
<td>8:00-10:00</td>
<td>10:10-12:00</td>
<td>14:00-16:00</td>
<td>16:10-18:00</td>
</tr>
<tr>
<td rowspan="2">领导讲话</td>
<td>大会主题报告</td>
<td>分会专题报告</td>
<td rowspan="2">总结报告</td>
</tr>
<tr>
<td>专家报告</td>
<td>分组讨论</td>
</tr>
<tr>
<td colspan="4">全天参观考察无锡国家物联网中心</td>
</tr>
</tbody>
</table>
<!-- 框架标签(窗口标签)
嵌套其他页面
-->
<iframe src="https://www.bilibili.com" framenorder="0" width="800px" height="400px" name="cc"></iframe>
<!-- 在"cc"窗口打开 -->
<a href="https://www.huya.com/" target="cc">点击跳转</a><br>
<!-- 音频资源
controls:手动播放并让播放器显示
autoplay:自动播放
loop:循环播放
-->
<audio src="URL" controls></audio>
<!-- 视频播放
controls:手动播放并让播放器显示
autoplay:自动播放
loop:循环播放
有控制宽高的属性style或者直接使用属性
-->
<video src="URL" autoplay loop></video>
</body>
</html>
盒子
通过设置display可以改变盒子的级别
块级盒子(dispaly:blok)
也叫块级元素,标签,独占一行,支持设置宽高,例如div
,p
,ul
,li
内联级盒子(dispaly:inline)
也叫内联级元素,标签,不独占一行,不支持设置宽高(由内容决定),例如span
,a
内联块级盒子(dispaly:inline-blok)
也叫内联级元素,标签,不独占一行,支持设置宽高,例如img
,input
弹性盒子(dispaly:flex)
一个父级元素设置成为弹性盒子,其子元素默认横向布局,子元素永远不会超出父元素
盒子的样式
属性设置:
width
和height
默认对内容区进行设置(内容区box-sizing: content-box;
,以边框为标准box-sizing: border-box;
)。- 填充区。
padding
取值可以有1,2,3,4个,也可以通过paadding-x
(其中x=top,left,buttom,right
)设置特定方向的填充大小。 - 边框区。通过
border-width
,border-style
,border-color
分别设置边框宽度和边框样式以及边框颜色,也可以直接通过border来设置,例如border:5px soild red
边框宽度为5像素,样式为实线,颜色为红色。结合top,left,buttom,right
对各方向设置,例如border-top-width
,border-left-color
。 - 外边距。margin的取值也是可以有1,2,3,4个,也可以通过
margin-x
(其中x=top,left,buttom,right
)设置特定方向的边距大小。
布局
<div class="s1">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
.s1{
width:800px;
background-color:red;
}
.left{
width:200px;
height:100px;
background-color:#2ac;
}
.middle{
width:200px;
height:150px;
background-color:yellow;
}
.right{
width:200px;
height:300px;
background-color:blueviolet;
}
浏览器展示:
如果要让left,middle,right这三个块级元素横向排列可以有以下几种方法
- 使用
float:left
,它的作用是让标签浮起来,不去占一个地方,而是漂浮在上方,但是如果没有设置父级元素的高度,那么父级元素会消失,需要手动设置宽度,使用overflow:hidden
那么父级元素的高度会与子级元素最大的高度相同,子级宽度<父级宽度,则宽度会剩余。 - 使用内联机元素实现横向布局。将子元素设置为
diaplay:inline-block
,但是每一个子元素之间会有空字符,解决方法有两种。 - 弹性盒子模型。给父级加上属性
display:flex
,子级会默认横向从左向右布局(flex-direction:row
),row-reverse
是从右往左横向布局,column
从上往下从小布局,column-reverse
是从下往上纵向布局。横向排列默认不会换行,也就是说不管子元素的宽度之和有多大都会被压缩在父级元素之内(flex-wrap:nowrap
),设置换行则将取值改为wrap
。order
作用在子元素上,order
取值越小那么这个子元素越靠前。
弹性盒子模型的布局
justify-content
用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
值 | |
---|---|
flex-start | 默认值。从行首起始位置开始排列。 |
flex-end | 从行尾位置开始排列。 |
center | 居中排列。 |
space-between | 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点。 |
space-evenly | 均匀排列每个元素,每个元素之间的间隔相等。 |
space-around | 均匀排列每个元素,每个元素周围分配相同的空间。 |
align-item
align-item 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
值 | 描述 |
---|---|
stretch | 默认值。元素被拉伸以适应容器 |
flex-start | 元素位于容器的开头。 |
flex-end | 元素位于容器的结尾。 |
baseline | 元素位于容器的基线上。 |
align-content
多行布局,使用flex-warp控制换行之后就可以使用多行布局。
值 | |
---|---|
flex-start | 所有行都在顶端 |
flex-end | 底部 |
center | 居中排列 |
space-between | 空白放中间 |
space-evenly | 空白放周围 |
space-around | 空白均匀分布 |
background符合属性
background-color
颜色background-image
背景图片或者渐变颜色,linear-gradient
线性渐变,linear-gradient(dirction,color1,color2,color3...)
background-repeat
背景是否重复,repeat重复,no-repeat不重复,repeat-x横向复,repeat-y纵向重复 ,round:保障图片完整为前提,放不下的时候对放下的部分做大小调整 space:个体完整,调整空隙background-size
:宽度,高度(单位像素,百分数) 设置背景大小。cover(覆盖)background-position
:横向偏移量,纵向偏移量。设置背景位置background-attachment
: 设置背景图片是否滚动,scroll(默认滚动), fixed背景图片固定窗口不固定
css长度单位
绝对单位
px(像素),pt(点),in(英寸),cm(厘米),mm(毫米)
相对单位
- %(以父级元素的宽度为参考维度)
- em(以父级元素的字体大小为参考维度)
- rem(以根元素的字体大小为参考维度)
- vw(以浏览器视图窗口的宽为参考维度)
- vh(以浏览器视图窗口的高为参考维度)
- vmin,vmax(以浏览器视图窗口最小值或者最大值参考维度)
响应式布局
.parent {
}
.parent .nums1{
}
.parent .nums2{
}
.parent .nums3{
}
@media screen and (min-width:1000px) {
.parent {
}
.parent .nums1{
}
.parent .nums2{
}
.parent .nums3{
}
}
@media screen and (max-width:400px) {
.parent {
}
.parent .nums1{
}
.parent .nums2{
}
.parent .nums3{
}
}
以上代码就体现了响应式布局,页面宽度大于等于1000px,就会使用第二个样式,小于等于400px,使用第三个样式,其他情况使用第一个样式。
position
- static:代表静态模式
- fixed:代表固定模式,不随浏览器的滚动而滚动 ,样放自己原来的空间,参考物是浏览器
- relative:代表相对模式 随浏览器的滚动而滚动,保留自己原来的空间,参考物是自己原来的位置
- absolute代表绝对模式 随浏览器的滚动而滚动,释放自己原来的空间,参考物是浏览器
- 结合模式,父级使用相对模式,子集使用绝对模式,随浏览器的滚动而滚动,释放自己原来的空间,参考物是父级元素
- 两个relative的元素可以使用z-index可以设置定位层级,值越大,越在上层。
服务器字体
定义方式:
@font-face{
font-family:name;
src:url("1.tff")
}
使用时通过font-family:name
来访问。
过渡动画 transition
- transition-property设置指定属性进行过渡动画
- transition-duration设器动画的持续时间
- transition-timing-function设置动画的渐变速度,其值有linear(匀速),ease(由慢到快,由快到慢) ease-in(由慢到快) ease-out(由快到慢) ease-in-out(由慢到快,由快到慢)
- transition-delay设置动画延迟时间
- 可以直接
transition:border 2s linear 2s,2s width ease 5s
,对属性border以及width分别进行过渡动画的设置
帧动画 animation
帧动画的定义
@keyframes 动画的名称{
百分数 | to |from {
...
}
}
帧动画的使用
- animation-name 设置动画名称
- animation-duration 设置动画的持续时间
- animation-timing-function 设置动画的渐变速度,其值有linear(匀速),ease(由慢到快,由快到慢),ease-in(由慢到快),ease-out(由快到慢),ease-in-out(由慢到快,由快到慢)
- animation-delay 设置动画的延时时间
- animation-iteration-count 设置动画执行次数,无穷次(infinite)
- animation-direction 设置动画的方向, (交替)
- animation-play-sate 设置动画的播放状态,paused(暂停)
变形 transform
x向右为正,y向下为正,z向外为正
函数
位移函数
transform:translate()
- translate(tx/tx,ty),沿x方向位移/沿x,y方向位移
- translateX(tx),沿x方向位移
- translateY(ty),沿y方向位移
- translateZ(tz),沿z方向位移
- translate3d(tx,ty,tx),沿x,y,z方向位移
缩放函数
transform:scale(2),数字大于1表示放大,小于1表示缩小
- scale(sx,sy),沿x,y方向缩放,sx=sy时可以只写一个
- scaleX(sx),沿着x轴缩放
- scaleX(sx),沿着x轴缩放
- scaleY(sy),沿着y轴缩放
- scaleZ(sz),沿着z轴缩放
- scale3d(sx,sy,sz),沿着x,y,z轴缩放
旋转函数
transform:rotate(xdeg),沿着z轴旋转x度
- rotate(xdeg),沿着z轴旋转
- rotatX(xdeg),沿着x轴旋转
- rotateY(xdeg),沿着y轴旋转
- rotateZ(xdeg),沿着z轴旋转
倾斜函数
transfrom:skew(xdeg,ydeg),沿着x,y轴倾斜
- skew(xdeg)等同于skewX(xdeg),只沿着x轴倾斜
- skewY(xdeg),只沿着y轴倾斜
变形配套属性
- 多种变形使用:多种变形函数空格隔开
- 设置变形中心点:transform-origin:x坐标,y坐标![[Pasted image 20230815164433.png]]
- 3d透视效果(视图距离):perspective,其值是长度单位像素,值越小效果越明显,作用在父级上
- 3d嵌套效果:transform-style,其值flat(默认,不保留3d效果) preserve-3d(保留3d效果)
- 背面是否可见:backface-visiblility 其值visible(默认,可见) hidden(隐藏)
滤镜 filter
- blur(8px) 作用是调整元素的模糊度 单位是像素
- brightness(200%) 作用是调整元素的亮度 单位百分数 小于100%是变暗,大于100%变亮
- contrast(5e%) 作用是调整元素的对比度,单位是百分数
- grayscale(100%) 作用是调整元素的灰度 单位是百分数
- hue-rorate(80deg) 作用是调整元素的色相 单位是角度
- opacity(100%) 作用是调整元素的透明度 单位是百分数
- invert(30%) 作用调整元素的反转输入颜色 单位是百分数
- saturate(100%) 作用调整元素的饱和度 单位是百分数