i / em: 倾斜标签 b / strong: 加粗标签 u: 下划线标签 hr: 水平线
br: 换行标签 空格 < 尖括号 > 尖括号 © 版权号
sup: 上标标签 sub: 下标标签 a: 超链接 title=“提示信息” target=“跳转方式”
_self 默认值 _blank 打开新窗口 点击位置
src=“图片路径” .jpg 普通格式 .gif 动画图 .png 背景透明图
alt=“在图片加载失败才会被看到” width=“宽度” height=“高度”
只写宽度/高度,另一边等比例缩放
ul > li: 无序列表 type=“修饰符号” disc 默认小黑圆点 circle 空心圆
square 实心方块 特征: 默认小黑圆点修饰,单独占据一行,一般用来做导航,列表
ol > li: 有序列表 type=“1/a/A/i/I” start=“开始位置数”
特征: 默认阿拉伯数字,单独占据一行,一般用来做导航,列表
dl > dt + dd:自定义列表
特征: 单独占据一行,是列表标题和列表项目的组合,在一个dl中只有一个dt,可以有一个或者多个dd,一般用来双导航
p: 段落标签
特征: 单独占据一行,能嵌套文本,和非单独占据一行的标签
span: 文本节点标签
特征: 只占据自己内容大小的位置,一般结合样式呈现效果
div: 盒子标签
特征: 单独占据一行,一般结合样式搭建页面结构
表格
table > tr > td:
border=“边框” bordercolor="边框颜色"width="宽度"width=“宽度”
cellspacing="边框与边框之间的间隙"cellpadding=“单元格与内容之间的间隙”
align="水平对齐方式"left center right
valign="垂直对齐方式"top middle bottom
colspan=“合并列” 左右合并 rowspan=“合并行” 上下合并
注意: 合并之后,多余的单元格需要删除
表单
Css样式
css的语法规则:选择器{属性:值;}在head标签中添加 style标签
2: 外部样式
1: 创建独立的css文件 2: 创建独立的html页面
3: 建立联系
方式一:在html页面中添加
2: 选择符的应用(id class 包含 群组 伪类 :hover)
id什么时候使用 id=“name” #name{} 在一个页面当中只允许出现一次相同的值
class什么时候使用 .name{}在一个页面中可以多次出现,一个class可以有多个值类型选择器什么时候使用(div span p a img…)
群组选择器什么时候使用
选择器1,选择器2,选择器3{} 提取公共样式,简化代码
伪类选择器什么时候使用
:link{} 未访问状态 :visited{} 访问过后的状态 :hover{} 鼠标移入状态 (案例) :active{} 鼠标按下的状态
.box:hover{} 移入.box 改变的是.box
.box:hover .txt{} 移入.box 改变后代.txt
文本的编辑
font-size:文本大小;px 最小文本 12px 默认显示文本 16px em 跟随最近的父级文本大小 rem 跟随根元素(html)的文本大小
font-weight:文本是否加粗; bold 加粗 normal 常规文本(不加粗)
bolde更加粗 100-400 变细 500 常规文本 600-900 加粗
fotn-style:倾斜; normal 常规文本(不倾斜) italic 倾斜 oblique 倾斜
line-height:行高;(控制文本垂直方向的对齐方式)
行高值 < 高度值 偏上 行高值 = 高度值 垂直居中 行高值 > 高度值 偏下
注意: 针对单行文本设置
font-family:字体1,字体2,字体3;
1: 中文字体加引号 2: 多个英文单词的字体加引号 3: 多个字体之间用逗号
4: 单个英文单词字体不需要加引号
综合写法: font:倾斜 加粗 文本大小/行高 字体;
text-align:文本水平对齐方式;
left 左对齐(默认值) center 居中 right 右对齐 justify 两端对齐
边框对齐
border-top:;顶部边框 border-right:;右边框 border-bottom:;底部边框
border-left:;左边框
三角形:width:0;height:0; border:10px solid transparent;颜色透明
border-top-color:red;
text-decoration:文本修饰;
none 没有修饰 overline 上划线 line-through 中划线 underline 下划线
letter-spacing:字符间距;px word-spacing:词间距;px
text-indent:首行缩进;em 针对文本段落第一行设置
list-style:列表修饰;
list-style:; = list-style-type:; list-style-type:;
disc 实心圆 circle 空心圆 square 实心方块 none 没有修饰
list-style-image:url(“图片地址”);
list-style-position:图片位置; outside 外部 inside 内部
背景编辑
background-color:背景颜色;
颜色单词 red blue green…
十六进制值 # 0-9 a-f
三原色值 rgb(0,0,0) 0-255
background-image:url(“图片地址”);
背景图默认平铺 画了一幅画 img 挂了一幅画
background-repeat:图片是否重复;
repeat 重铺(默认值)no-repeat 不重铺repeat-x 水平重铺repeat-y 垂直重铺
background-position:背景定位;关键字写法
水平值 left center right 垂直值 top center bottom 具体像素位置
综合写法:background:颜色 图片 是否重复 定位 关联;
ackground-attachment:背景关联; scroll 滚动(默认值) fixed 固定
浮动编辑
浮动的属性:float:;
left 左浮动 right 右浮动 none 不浮动 浮动的目的: 让竖着的元素横着来
浮动效果:
1: 左浮动找左边,右浮动找右边
2: 浮动只影响后面的元素,不影响前面的元素
3: 父级元素的宽度小于浮动子元素的总宽度,子元素将被迫换行
4: 子元素高度不一致的浮动元素被迫换行时,可能被卡着
5: 结构先写的先浮动,后写的后浮动
6: 图文混排
7: 浮动产生的问题,父级元素高度塌陷
解决办法: 给父元素添加height:;
盒子编辑
外边距: 改变元素外边的间距
内边距:改变元素与内容的间距
padding:一个值; 一个值,改变四个方向
padding:上下 左右;
padding:上 左右 下;
padding:上 右 下 左;顺时针方向变化
padding-top:顶部内边距;
padding-right:右内边距;
padding-bottom:底部内边距;
padding-left:左内边距;
注意:内边距没有负值;
文本溢出相关属性:
overflow:文本溢出;hidden 隐藏scroll 滚动查看auto 自适应inherit 继承
white-space:空白空间;
nowrap 强制不换行,但是干不过br标签 pre 原格式输出
pre-line 原格式输出,被迫换行 pre-wrap 原格式输出,被迫换行normal 默认值
text-overflow:省略号; clip 裁剪 ellipsis 省略号
显示省略号的四个步骤:
1: 元素添加width,且内容超出元素
2: 内容强制不换行white-space:nowrap;
3: 超出隐藏 overflow:hidden;
4: 省略号 text-overflow:ellipsis;
注意: 只针对单行文本有效
元素类型:块状元素(block):div p h1-h6 ul li ol dl…
1: 单独占据一行
2: 能设置宽高
3: 能正常设置内外边距
4: 一般用于搭建页面结构
5: 在页面中矩形显示
内联元素(inline):span a i em b strong…
1: 只占据自己内容位置大小,能在一行显示
2: 不能设置宽高
3: 不能正常设置上下内外边距
4: 一般结合css样式显示页面效果
5: 只有内容单位最小才有可能是矩形显示
内联块元素(inline-block):img input
1: 只占据自己内容位置大小,能在一行显示
2: 能设置宽高
3: 能正常设置内外边距
元素类型互相转换:
display:元素类型转换;
block 将元素转换成块元素(显示)
inline 将元素转换成内联元素
inline-block 将元素转换成内联块元素
none 隐藏(在页面中小时不见且不占据位置)
list-item 将元素转换成列表类型
宽高自适应
宽度自适应:1: 块级元素默认宽度100% 2: 设置样式 width:;单位%
高度自适应:前提条件 html,body{height:100%;}
1: 元素高度默认自适应2: 设置样式 height:;单位%
最小宽高:min-height:最小高度;min-width:最小宽度;
最大宽高:max-height:最大高度;max-width:最大宽度;
浮动高度塌陷:问题: 子元素浮动,父元素未设置高度,父元素将高度塌陷,会引起布局混乱
高度塌陷解决办法:
1: 给父元素添加height:;缺点: 不灵活
2: 给父元素添加 overflow:hidden;缺点: 定位出去的元素将被隐藏
3: 给浮动的子元素最后添加兄弟空元素(块级元素),然后设置样式 clear:left/right/both; 清除浮动缺点: 代码冗余
4: 万能清除法:after{content:"";
display:block;width:0;height:0;overflow:hidden;
visibility:hidden;clear:left/right/both; 清除浮动
}
伪对象选择器:.box:after{content:“内容”;}
在box元素的内容后面添加.box:before{content:“内容”;}
在box元素的内容前面添加:first-letter{}
第一个字的样式:first-line{}
第一行文字的样式visibility:显示隐藏;
hidden 隐藏
visible 显示
visibility:hidden; 和 display:none;的区别
1: 前者占位,后者不占位2: 都是隐藏元素
一屏页面的书写:必须加上 html,body{height:100%;}
定位:
position:;static 默认值relative 相对定位
特征: 1: 占据文档流2: 相对自身加载到页面中的初始位置进行位置改变absolute 绝对定位
特征: 1: 脱离文档流 2: 默认相对html(根元素)进行定位
3: 参考最近的有定位(static除外)的父级元素
fixed 固定定位 特征: 1: 脱离文档流
2: 相对浏览器窗口进行定位
sticky 粘性定位
特征: 1: 脱离文档流
2: 结合了relative 和 fixed的特征
坐标属性:
水平方向 left right
垂直方向 top bottom
包含块:父级有定位且是position:relative;,子集有定位为position:absolute; 就是包含块
层级关系:前提条件: 想要改变层级关系,那元素必须有定位
z-index:层级关系;
auto 默认值 number 具体数字(值越大,层级越高,值越小,层级越低,可以为负数)
并列关系: 两个元素都可以改变层级关系
嵌套关系: 只能改变子元素的层级关系
锚点:实现本页面的跳转,页面要足够高
点击位置
<标签 id=“name”>跳转位置</标签>
css3渐变: 由浏览器生成的
线性渐变:
background: -webkit-linear-gradient(方向,颜色1,颜色2,颜色3,....颜色n);
background: linear-gradient(to 方向,颜色1,颜色2,颜色3,....颜色n);
1 单一方向渐变:
left 从左边开始
right 从右边开始
top 从上边开始
bottom 从底部开始
注意: 需要添加兼容前缀
to left 到左边(结束位置)
to right 到右边
to top 到顶部
to bottom 到底部
注意: 不要添加兼容前缀
2 对角渐变:
left top 左上开始
left bottom 左下开始
right top 右上开始
注意: 带兼容前缀
to left top 到左上(结束位置)
注意: 不带兼容前缀
3 角度的渐变
10deg 10度
4 默认情况下颜色趋于均分
可以指定颜色分布的百分比,让颜色按照百分比进行渐变
blue 10% 到10% 都是蓝色
red 10px 到10px都是红色
径向渐变:(一定要加浏览器前缀)
从一个点到四周的渐变
background:-webkit-radial-gradient(渐变位置,形状,大小,颜色1,颜色2,颜色3);
渐变位置: 默认从中心到四周
left 从左边到四周的渐变
right
top
bottom
left top 从左上角到四周的渐变
left bottom
right top
...
10px 30px 距离左边10px 距离上边30px
形状:
默认椭圆 ellipse
正圆 circle
注意: 元素是正方形,则都是正圆
大小:
size：渐变的大小，即渐变到哪里停止，它有四个值。
closest-side：最近边；
farthest-side：最远边；
closest-corner：最近角；
farthest-corner：最远角。
-->
<!--<video src="video/3theA.mp4" controls muted poster="1.jpg">
您的浏览器是渣渣,看不见我
</video>-->
<!--
10 + a = 10a
10 + 1 = 101
10 + 1 = 11
-->
<form action="" oninput="num3.value=parseInt(num1.value)+parseInt(num2.value)">
<input type="range" id="num1" min="0" max="10" step="2" />
+
<input type="text" id="num2" />
=
<output name="num3" for="num1 num2"></output>
</form>
.box{
width: 400px;
height: 100px;
background: #f00;
box-shadow:10px 10px 10px 10px yellow;
-webkit-box-shadow:10px 10px 10px 10px yellow;
-o-box-shadow:10px 10px 10px 10px yellow;
-ms-box-shadow:10px 10px 10px 10px yellow;
-moz-box-shadow:10px 10px 10px 10px yellow;
}
<!--<ul class="list">
<li>
哈哈哈哈1
<a href="">111</a>
<a href="">22</a>
</li>
<li>
哈哈哈哈2
<a href="">111</a>
</li>
<li>哈哈哈哈3 <a href="">111</a></li>
<li>哈哈哈哈4 <a href="">111</a></li>
<li>哈哈哈哈5 <a href="">111</a></li>
<li></li>
<li>哈哈哈哈7</li>
<li>哈哈哈哈8</li>
<li>哈哈哈哈9</li>
</ul>
<ul>
<li>哈哈哈哈666</li>
</ul>-->
<!--
所有小孩中的第一个 first-child{}
未分类 p1是第一个
span4是第四个
男孩中的第一个 first-of-type{}
分类后 p1是第一个
女孩中的第一个 first-of-type{}
分类后 span4是第一个
有很多同级元素,但是只有一个a标签 :only-of-type{}
没有其他同级元素,只有一个a标签 :only-child{}
-->
<form action="">
<input type="text" disabled /> <!--禁用-->
<input type="text" />
<input type="text" />
<input type="radio" name="man" id="ha" />
<label for="ha">哈哈哈哈1</label>
<input type="radio" name="man" id="aa" />
<label for="aa">哈哈哈哈2</label>
</form>
<p>哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<input type="text" />
<input type="text" />
<input type="text" />
<p>hahahahhahahahahah </p>
</body>
/*选中后代,不论是儿子还是孙子,都选中box 下的 所有 a 都会被选中*/
/*.box a{
color:red;
font-size:30px;
}*/
/*选中儿子,孙子不会被选中*/
/*.box>a{
color:red;
font-size:30px;
}*/
/*直选中紧跟在p后的第一个a (只能选中一个)*/
/*p + a{
color:red;
font-size:30px;
}*/
/*选中p标签后的所有 a (可以选中多个)*/
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-liebiao2"></use>
</svg>
<!--
颜色单词 red blue green
十六进制 #000000 #ff0000 #ffffff
rgb()
rgba(0,0,0,0)
r red 0-255
g green 0-255
b blue 0-255
a alpha 0-1 透明
hsl(0,100%,50%):
hsla(200,70%,70%,0.6):
h 色调 0-360
s 饱和度 0%-100%
l 亮度 0%-100%
a 透明 0-1
边框图片:
border-image-source:url("图片地址");
默认在元素的四个角落
border-image-slice:垂直显示 水平显示;
显示图片的区域范围
没有单位,不能为负数
按照九宫格的切法来显示图片
数值越小,切的越少,图片会放大
数值越大,切得越多,图骗效果相对缩小
border-image-repeat:;
repeat 从中间往两头平铺
round 从一头往另一头平铺
stretch 拉伸(有可能会变形)
-->
*{margin: 0;padding: 0;}
.box1{
width:200px;
height: 300px;
background: red;
float:left;
}
.box2{
/width:100%;/
width:calc(100% - 200px);
height: 320px;
background: skyblue;
/overflow:hidden;/
float:right;
}
</style>
</head>
<body>
<!--
calc(x - y)方法
运算符号前后一定要空格
-->
a{
pointer-events:none;/让点击无效 穿透当前元素/
}
*{margin: 0;padding: 0;}
.box{
display:flex;
width: 400px;
height: 200px;
background: pink;
align-items:center;
}
.box div{background: red;}
.box1{
align-self:auto;/设置子元素在侧轴的对齐方式/
/align-self:stretch;/
}
.box2{align-self:auto;}
1054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
