清除默认样式方式一
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
html{color:#000;background:#FFF}
table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
a{text-decoration: none; color: #666666}
body{ background-position: center top;}
清除默认样式方式二
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
/**
* 在IE中一致地渲染“main”元素。
*/
main {
display: block;
}
/**
* Chrome, Firefox, and Safari中
* 修正h1标签在“section”和“article”上下文中的字体大小和页边距
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 处理 Firefox、IE、Edge中与其它浏览器的差异。
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. 修正所有浏览器中字体大小的继承和缩放。
* 2. 修正在所有浏览器中更正 em字体大小。
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 删除IE 10中活动链接上的灰色背景。
*/
a {
background-color: transparent;
}
/**
* 1. 删除Chrome 57-中的底部边框
* 2. 在Chrome,Edge,IE,Opera和Safari中添加正确的文字装饰
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* 在Chrome,Edge和Safari中添加正确的字体粗细。
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. 修正所有浏览器中字体大小的继承和缩放。.
* 2. 修正所有浏览器中em的字体大小.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* 在所有浏览器中添加正确的字体大小.
*/
small {
font-size: 80%;
}
/**
* 防止`sub`和`sub`元素影响所有浏览器中的行高.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* 删除IE 10中链接内图像上的边框.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. 修正所有浏览器中的字体样式.
* 2. 删除Firefox和Safari中的边距.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* 在IE中显示溢出.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* 删除Edge,Firefox和IE中的文本变换的继承.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 修正了iOS和Safari中无法创建可点击类型的样式.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* 删除Firefox中的内边框和内边距.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* 恢复Firefox中前面规则未设置的焦点样式.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* 修正Firefox的内边距.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. 修正在Edge和IE中包装的文本.
* 2. 修正在IE中的“fieldset”元素的颜色继承.
* 3. 删除填充,以便开发人员在所有浏览器中清除`fieldset`元素时不会出现.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 在Chrome,Firefox和Opera中添加正确的垂直对齐方式.
*/
progress {
vertical-align: baseline;
}
/**
* 删除IE10+中的默认垂直滚动条.
*/
textarea {
overflow: auto;
}
/**
* 1. 在IE 10-中添加正确的框大小.
* 2. 删除IE 10中的填充.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 修正Chrome中的增量和减少按钮的游标样式.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. 修正Chrome和Safari中的莫明奇妙的外观.
* 2. 修正Safari中outline样式.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* 在Mac操作系统上删除Chrome和Safari中的内部填充.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. 修正iOS和Safari中无法创建可点击类型的样式.
* 2. 在Safari中将字体属性更改为“inherit”.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* 在Edge,IE10+和Firefox中添加正确的显示.
*/
details {
display: block;
}
/*
* 在所有浏览器中添加正确的显示.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* 在IE10+中添加正确的显示.
*/
template {
display: none;
}
/**
* 在IE 10中添加正确的显示.
*/
[hidden] {
display: none;
}
font-family: "Arial Black","微软雅黑"; 字体 如果前面的字母都是一样的可以写成 font: "微软雅黑" center italic bold 20px;
color: brown; 字体颜色
text-align: center; 字体对其
left
right
font-size: 20px; 字体大小
font-style: italic; 字体倾向
font-weight: bold; 字体粗
text-decoration: underline; 添加下划线
line-through 删除线
overline 上划线
none 什么都没有,可以删除a标签的下划线
text-indent: 2em; 像写作文 前面空2格
color: aqua !important; !important提升优先级
元素转换
display: inline; 块
block 行
inline-block 行内块级
background-color: chartreuse; 设置背景颜色
background-clip: content-box;
background-image: url(img/xxx.gif); 设置背景图片
no-repeat 显示一张
repeat-x 横
repeat-y 坚
background-position: 水平方向 垂直方向; 背景定位
left左 top顶
center中 center中
right右 bottom低
可以用像素100px
background-attachment: fixed; 可以让背景图片不动
border: 1px solid navajowhite; 边框
border-top: 2px dotted floralwhite;
border-right:3px dashed lemonchiffon;
border-bottom:4px solid darkviolet;
border-left: 5px inset darkorange;
内边距
padding-top: 20px;
right
bottom
left
padding: 10px 20px 30px 40px; 连写
外边距
margin-top: 20px;
right:
bottom:
left:
margin: 10px 20px 30px 40px; 连写
margin: 0 auto;
box-sizing: border-box; 可以让盒子不变:
line-height: 40px; 行高
overflow: hidden; 隐藏
*zoom: 1;
子绝 父相
position: relative; 相当到位
position: absolute; 绝对定位
position: fixed;固定定位
z-index 1
a:link{
color: maroon;
/*默认的颜色*/
}
a:visited{
color: #2caf6f;
/*访问后的颜色*/
}
a:active{
color: black;
/*点击不动的颜色*/
}
a:hover{
color: darkviolet;
/*鼠标放上去的颜色*/
}
box-shadow: 10px 10px 10px; 盒子阴影
text-shadow: 10px 10px 10px; 文字阴影
cursor: pointer; 鼠标
我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com