CSS- 跟着李南江学编程

清除默认样式方式一

				
	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