css总结

color定义字体的颜色定义css样式<style>.xxx{color: red;}.yyy{color: blue;}p{color:brown;}</style>使用定义的样式<p class="xxx">第一个段落1</p><p class="yyy">第一个段落2</p><p>第一个段落3</p><p>第一个段落4</p>

<style> ???????body{ ???????????background-color: aqua;设置背景颜色 ???????????background: url("../1.ico");设置背景图片 ???????????background-repeat: no-repeat;设置背景图片不重复 ???????????/*background-repeat: repeat-x;*/设置背景图片横向重复 ???????????/*background-repeat: repeat-y;*/设置背景图片纵向重复 ???????????/*background-repeat: repeat;*/设置备份图片横向纵向同时重复 ???????????background-position: right top;设置背景图片的位置 ???????????/*background-position: 10px ?20px;*/设置背景图片的位置，用像素的方式 ???????????/*background-position: 20% ?30%;*/设置背景图片的位置，用百分比的方式 ???????????background-attachment: fixed;设置背景图片固定 ???????} ???</style>

css定义边框属性 p{ ????????????border-width: 4px; 设置边框的宽度 ????????????border-style: solid; 设置边框的风格类型 ????????????border-color: aquamarine; 设置边框的颜色 ????????????border-radius: 50px; 设置边框的圆角，像素越大，圆角越明显 ????????}设置四个框的的属性div{ ????????????background-color: #dddddd; ????????????border-left-color: brown; ????????????border-left-style: solid; ????????}也可以单独设置某个边框的属性css定义padding属性，设置文字举例内边框的距离.xxx{ ???????????border-width: 20px; ???????????border-style: solid; ???????????border-color: aqua; ???????????padding: 20px; ???????}同时设置文字距离4个边框的长度.yyy{ ???????????border-width: 20px; ???????????border-style: solid; ???????????border-color: aqua; ???????????padding-bottom: 10px; ???????????padding-left: 15px; ???????????padding-right: 20px; ???????????padding-top: 25px; ???????}分别设置文件距离4个内边框的距离

style> ???????.cc{ ???????????border-color: red; ???????????border-style: solid; ???????????border-width: 2px; ???????????padding: 20px; ???????????margin: 40px; ???????} ???</style>设置一个margin的属性为40px，那么引用cc的这个元素距离外部的元素的距离是40个像素<h1>测试margin</h1> ???<p class="cc">这是一个margin</p> ???<h2>测试margin</h2>这个效果就是p标签距离h1和h2标签的距离都是40像素，同样，margin也可以分别设定上下左右的margin的属性值

 ???<style> ???????.cc{ ???????????border-style: solid; ???????????border-width: 2px; ???????????border-color: red; ???????????background-color: blue; ???????????width: 50px; ???????????height: 100px; ???????} ???</style>设置宽度和高度，这里设置了具体的值，也可以设置为百分比，这个百分比相当于body的百分比<h1 class="cc">测试元素的宽度和高度</h1> ???<p class="cc">测试元素的宽度和高度</p> ???<h2 class="cc">测试元素的高度和宽度</h2>css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面 ???<style> ???????.cc{ ???????????border-width: 3px; ???????????border-style: solid; ???????????border-color: black; ???????????outline-color: blue; ???????????outline-style: solid; ???????????outline-width: 4px; ???????} ???</style><p class="cc">css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面</p>

color：设置字体颜色text-align:设置文本的位置，靠左，靠右text-docration:定义文本中线【line-throngh】，下划线【underline】，上线【overline】text-transform: lowercase;定义文本中的字母都为小写，用来转换字母的属性text-indent：设置文本内容缩行，设置文档的首行往里缩多少个像素text-spacing：设置文本内容的字符的间隔line-height:设置文本中的行间距，属性值是数字，是标准行间距的倍数，也可以设置像素值

font-family:设置字体的类型font-style：设置字体的风格，比如斜体font-size：设置字体的大小，一般默认的字体大小是16个像素值font-weight：设置字体的粗度的效果

display：none ???隐藏标签display：block 显示标签，且会被行内标签调整为块级标签display：inline ?把块级标签调整为行内标签visibility：hidden：隐藏元素，但是被隐藏的元素所占的高度和宽度还会继续保留，不会被其他元素占用，这个就是和display不一样的地方

positionstatic，一般就是元素原来的位置，static和没有这个属性的效果是一样的，就算设置了left right top buttom都会不生效relative,可以设置left right top buttom的值，意思就是距离左边多远，右边多远，上边多远，下边多远，相对于参数static时候的位置fixed，他的效果和relative的效果一致，唯一的区别就是如果有滚动条，如果拉动滚动条，那么relative的的元素会变，而fix的元素位置是固定的

z-index如果有2个元素在一个位置，z-index就是定义哪个元素在上面显示哪个元素在下面显示，z-index的值越大，则显示的越在上面

overflowvisible:如果一个元素在框中，而元素的内容已经超出元素的外框，那么元素就溢出，不会做任何处理hidden：如果一个元素在框中，而元素的内容以及超出元素的外框，那么超出外框的元素就会被隐藏不会被显示scroll：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框也有滚动的栏出现auto：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框就不会有滚动的栏出现.auto{ ???????????border-width: 2px; ???????????border-style: solid; ???????????border-color: pink; ???????????width: 300px; ???????????height: 100px; ???????????overflow: auto; ???????}

css控制元素浮动floatnoneleftright

inline-block<style> ???????.cc{ ???????????border-width: 2px; ???????????border-style: solid; ???????????border-color: red; ???????????width: 440px; ???????????height: 80px; ???????????display: inline-block; ???????} ???????.bb{ ???????????border-width: 2px; ???????????border-style: solid; ???????????border-color: blue; ???????}</style>

元素居中对齐.cc{border-color:red;border-style:solid;border-width:2px;width:50%;margin: auto;}上面的办法可以实现元素居中显示，如果元素要居中，对已块级标签，则必须要有一定的宽度

文本的居中对齐<style>.cc{border-color:red;border-style:solid;border-width:2px;width:50%;text-align: center;}</style>

图片居中对齐.pic{ ???????????display: block; ???????????margin: auto;}

元素的左对齐，右对齐.right{ ???????????background-color: blue; ???????????width: 100px; ???????????height: 50px; ???????????position: absolute; ???????????right: 0; ???????}

opacity ??????.opacity{opacity: 0.2;}

 ???.box{ ???????????border-color: red; ???????????border-style: solid; ???????????border-width: 2px; ???????????width: 300px; ???????????height: 300px; ???????????color: green; ???????????background-color: pink; ???????????box-shadow: 20px 15px 10px black}20px 15px 10px black20：定义x轴的宽度15：定义y轴的宽度10：定义虚幻的程度，这个可以不加，非必须的black：阴影的颜色

transition ???????.transition{ ???????????width: 100px; ???????????height: 200px; ???????????background-color: red; ???????????transition: 1s; ???????} ???????.transition:hover{ ???????????width: 150px; ???????????height: 250px; ???????????background-color: green; ???????}上面这个例子的效果就是，把鼠标放到标签上，过1s后，样式会自动过度到transition:hover的样式上，如果没有定义transition: 1s，那么只要鼠标放在标签上，就会立刻切换到transition:hover的样式上

animation <style> ???????.animation{ ???????????width: 200px; ???????????height: 200px; ???????????border-color: blue; ???????????border-width: 1px; ???????????border-style: solid; ???????????position: relative; ???????????background-color: #dddddd; ???????????animation: example 10s; ???????} ???????@keyframes example { ???????????from{width: 200px; ???????????????height: 200px; ???????????????border-color: blue; ???????????????border-width: 1px; ???????????????left: 0px; ???????????????top: 0px; ???????????????background-color: #dddddd; ???????????} ???????????to { ???????????????width: 400px; ???????????????height: 400px; ???????????????border-color: red; ???????????????border-width: 10px; ???????????????left: 600px; ???????????????top: 100px; ???????????????background-color: palegreen; ???????????} ???????} ???</style>上面的例子的意思是，初始的样式为animation定义的样式，然后在10s完成切换，然后从keyframes example from切换到keyframes example to的状态

animation: example 4s infinite; ?这个的意思是4s完成切换，但是会一直切换，也就是无穷尽的执行

animation: example 4s ease-in-out alternate infinite;这个意思是无穷尽的切换，从from到to，然后从to到fromalternate的效果是从from到to，然后从to到frominfinite的效果是无穷尽的切换