Hdml中所有标签属性
设置字体font-family:
设置字体大写font-size
<div class="hp"></div>id
<div id="hs"></div>
<div></div>
父亲>儿子 不包括孙子
选择同级别的标签
同一级别相邻的元素
包含所有子孙
包含指定属性的标签,属性与属性值均匹配的标签
注意:a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后
li:befofe{
content:”>”
}
选择器的优先级
!Imporeant>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符
注意:!important要写在属性值后面,分号的后面
例如;
P{
color:red ! important
}
background-attachment: |
背景图像是否固定或者跟随滚动 |
background-image: url(); |
背景图插入 |
background-color: |
背景颜色 |
background-position: |
背景位置 |
background-size: |
背景大小 |
background-repeat: |
背景是否平铺 |
color:red
color:#ff0000;
rgb(red, green, blue)
Reba( , , , )
透明色 color:transparent
透明度opacity:
0完全透明
1不透明
normal正常;italic斜体;oblique倾斜
bold加粗;bolder更粗;lighter更细;400等同于normal;700相当于bold;
Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体
Font:样式 粗细 大小 字体名称;
6.字体引入
(阿里图标字体库:https://www.iconfont.cn/)
@font-face{
font-family:"abc";
src: url(/css/Day1/世纪园林/Americratika.ttf);
}
*{
font-family: "abc";
}
capitalize 单词首字母大写 uppercase全大写 lowercase全小写
下划线underline、删除线line-through、顶划线overline;
solid(实线)dotted(点线)dashed(虚线)double(双线)wavy(波浪 线)
text-shadow:水平位移 垂直位移 模糊度 颜色;
hidden;超出之后隐藏 scrol超出展示下拉框 visible超出展示
ellipsis;文本超出显示省略号
nowrap;文本不换行
inside; 边框内显示文本以内 inherit outside边框外
collapse重叠边框 separate边框独立
可用{display:block}把内联元素设为块级元素
可用{display:inline}把内联元素设为块级元素
可用{display:inline-block}把元素设为内联块级元素
solid(实线)dotted(点线)dashed(虚线)double(双线)
content-box(默认内容)
border-box;从边框开始
content-box(默认内容)尺寸包含内边距外边距和边框
border-box;从边框开始尺寸包含内边距和边框
定义浏览器内核
display: -webkit-box; 谷歌浏览器
Ie:ms
Opera:o
Firefox:moz
默认值水平排列horizontal;
垂直排列vertical;
倒序排列reverse;
默认正序排列:
1.按比例分配flex-grow
2.子元素排列方式flex-flow
3子元素flex-direction
4.子元素超出父级盒子后是否换行flex-wrap
fixed和absolute是不占据空间的,fixed不设置top,是相对于原来位置显示
除static外可根据top:;left:;right:;bottom:;设置上、左、右、下偏移量
左浮动float:left;
右浮动float:right;
clear:both;
1》父级元素后加元素:<div style=”clear:both”></div>
2》父级元素加::after{display:block;content:” ”;clear:both}
3》父级元素{overflow:hidden}
2D效果
transform: translate(10px 10px);
3D效果
@keyframes创建动画; animate.css
@keyframes myfirst
{
from{background:red;}
to{background:yellow;}
}
animation:动画名 2s;
animate.css扩展文件
媒体
检测浏览器尺寸并展示对应样式
居中总结
水平居中
line-height
text-alingn:center
{dispalay:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
原文:https://www.cnblogs.com/tiandlsd001/p/14942009.html