css属性选择器
class标签选择器 .名称 { ... } <标签 class='名称'></标签>
在head里引入 <head> <link rel="stylesheet" href="style.css" /> </head>
id选择器 #名称 { ... } <标签 id='名称'></标签> 标签选择器 标签 { ... } 层级选择器 空格隔开 .c1 div { ... } 组合选择器 逗号隔开 .i1,.i2,.i3 { ... } 属性选择器 对选择到的标签通过属性再筛选一次 .c1[n='alex']{100px;height:200px;}
css优先级
标签里的style优先，
#id
.class
标签
有!important声明的规则高于一切
css样式
@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, button, input, textarea, th, td {
margin: 0;
padding: 0
}
body {
font-size: 12px;
font-style: normal;
font-family: "宋体", Helvetica, sans-serif
}
small {
font-size: 12px
}
h1 {
font-size: 18px
}
h2 {
font-size: 16px
}
h3 {
font-size: 14px
}
h4, h5, h6 {
font-size: 100%
}
ul, ol {
list-style: none
}
a {
text-decoration: none;
background-color: transparent
}
a:hover, a:active {
outline- 0;
text-decoration: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
hr {
border: 0;
height: 1px
}
img {
border-style: none
}
img:not([src]) {
display: none
}
svg:not(:root) {
overflow: hidden
}
html {
-webkit-touch-callout: none;
-webkit-text-size-adjust: 100%
}
input, textarea, button, a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block
}
audio, canvas, progress, video {
display: inline-block
}
audio:not([controls]), video:not([controls]) {
display: none;
height: 0
}
progress {
vertical-align: baseline
}
mark {
background-color: #ff0;
color: #000
}
sub, sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
button, input, select, textarea {
font-size: 100%;
outline: 0
}
button, input {
overflow: visible
}
button, select {
text-transform: none
}
textarea {
overflow: auto
}
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: inherit;
opacity: .54
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
.clear:after {
display: block;
height: 0;
content: "";
clear: both
}
常用样式
/*div的样式*/
.dv {
border:6px solid red; /*solid实线 dotted点点 double双线 dashed虚线 border-top/right/bottom/left */
height:200px; /* 高度 可以设置数值，也可以设置百分比 */
80%; /*宽度*/
background-color: yellow; /*背景色*/
float:left; /* 左浮动 right右浮动*/
display:inline-block;/* display:block 让内联标签变为块级标签，这样内联标签就可以设置宽高了，独占一行;
display:inline 让块级标签变为内联变迁
display:inline-block既是块级标签又是内联标签 属性是：默认自己有多少占多少，可以设置高度，宽度，margin,padding
display:none 让标签消失 用js的时候用的多*/
margin: 0 auto;/*外边距 上右下左 */
padding: 0; /*内边距*/
}
/*文本的样式*/
.word {
font-size: 20px; /*字体大小*/
font-weight: bold; /* 加粗*/
text-align:center;/*左右居中*/
line-height: 200px;/*上下居中 数值设置为高度*/
}
内外边距 margin padding
position
position: fixed; 固定在页面的某个位置 页面 页面的某个位置
<div style="50px; height: 50px; background-color: black; color:white; position: fixed;bottom:20px;right:20px;"> 返回顶部 </div> <div style="height: 5000px;background-color: gray">
/*position: fixed 表示固定下来了，bottom:20px;right:20px; 设置固定在那个位置，不会随着滚动条的滑动改变位置，返回顶部一般在右下角 ***注意这里的参照物是整个页面 是固定在整个页面的某个位置 */
父级 position: relative; 子级 position: absolute; 儿子以老子为参照物 进行定位，不再是以页面
<div style="border:1px solid red; height: 200px; 200px; position: relative;margin: 0 auto;"> <div style="height: 50px; 50px; background-color: #8aab30; position: absolute; bottom:20px;right:20px; text-align: center;line-height: 50px; "> 小玩意 </div> </div> <div style="border:1px solid red; height: 200px; 200px; position: relative;margin: 0 auto;"> <div style="height: 50px; 50px; background-color: #8aab30; position: absolute; bottom:20px;right:-60px; text-align: center;line-height: 50px; "> 小玩意 </div> </div>
效果如下：
多层放在一起
z-index 数值越大，越是放在上边
<div style="z-index:10;position: fixed;top:50px;right: 700px;height: 200px;200px;background:white;"></div> <div style="z-index:9;position: fixed;top: 0;bottom: 0;right: 0;left: 0; background-color: #333333; opacity: 0.5"></div> <div style="z-index:8;height: 5000px;background-color: #8aab30;"></div>
效果如下：
overflow
hidden: 多余的隐藏 否则图片会把div固有的宽度撑开
auto:会出现滚动条
<div style="height:200px;200px;overflow: hidden;"> <img src="./yangmi.jpg" alt="girl"> </div> <p></p> <p></p> <div style="height:200px;200px;overflow: auto"> <img src="./yangmi.jpg" alt="girl"> </div>
效果如下：
hover
<head> <meta charset="UTF-8"> <title>Title</title> <style> .dv { border:1px solid red; height:80px; width:80px; } .dv .menu { display:inline-block; height:40px; width:40px; background-color: #4a92f5; } .dv .menu:hover{ background-color: #8aab30; } </style> </head> <body> <div class="dv"> <a class="menu" href="http://www.baidu.com">点点</a> </div>
background
.share_icon span a{
display: block;
background: url(img/allPuzzle.png) no-repeat; #默认是重复 repeat-x水平方向重复 repeat-y垂直方向重复
height: 28px;
28px;
}
.share_icon span.weibo a{
background-position: -28px 0;
}
.share_icon span.zhifubao a{
background-position: -56px 0;
}
##简写方式
background:white url("img/5.png") -105px -212px no-repeat;