css 总结2： 一：css的引入： 1，行内引入样式 行内式是在标记的style属性中设定css样式。不推荐使用 案列：<p style="color: red">Hello world</p> 2，内部样式 是将css标签集中写在<head></head>标签对的<style></style>标签中 <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ } </style> </head> 3，外部样式 最标准的写法，推荐使用 就是将css写在一个单独的文件中，让后在页面中映入即可 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 二，css选择器 css选择器一 选择器优先级 1.选择器相同的情况下:就近原则 2.选择器不同的情况下: 行内>id选择器>类选择器>标签选择器 三，css属性相关 1，宽和高： width属性可以为元素设置宽度 height属性为元素设置高度 2，字体属性： font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值 案列：body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小：font-size：14px 字重（粗细）：font-weight 用来设置字体的字重（粗细） 字体颜色： 1，十六进制值 - 如: ＃FF0000 2，一个RGB值- 如: RGB(255,0,0) 3，样色单词：如 color: red; red就是字体颜色为红色 4，rgba(255,0,0,0.3) 最后一个参数表示透明度，范围是0.1—1； 3，文字属性 text-align 1，文字对齐： text-align 属性规定了文本的对齐方式，水平对齐方式 text-align:left; 左对齐 默认为左对齐 text-align: right; 右对齐 text-align:center: 居中对齐 text-align:justify; 两端对齐 4，文字装饰 text-decoration 属性用来给文字添加特殊效果 none: 默认。定义标准的文本 underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 定义穿过文本下的一条线 inherit 继承父元素的text-decoration属性的值 常用的为去除a标签默认的自划线 ******* a{text-decoration:none} 首行缩进 p { text-indent:32px;} ******** 5，背景属性： 背景颜色：background-color:red; 背景图片：background-image:url('111.png') 背景重复： 支持简写： background:#336699 url('1.png') no-repeat left top 背景图片不平铺：background-repeat: no-repeat; 背景位置：background-position: 200px 200px #第一个参数调节的是左右 第二个参数调节的上下 背景图片居中：background-position: center center; repeat(默认）：背景图片平铺满整个页面 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat: no-repeat; /*背景位置*/ background-position: left top; /*background-position: 200px 200px;*/ 案列 div { /*background-color: orange;*/ 背景颜色 height: 500px; width: 500px; /*background-image: url("111.png"); !*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*!*/ /*background-repeat: no-repeat;*/ /*background-repeat: repeat-x;*/ x轴平铺 /*background-repeat: repeat-y;*/ y轴平铺 /*background-position: center center;*/ 居中，此时图片居中 /*background-position: 10px 30px; !*第一个参数调节的是左右 第二个参数调节的上下*!*/ background: orange url("代码/111.png") no-repeat center center; 支持简写，简写方式} 6,边框属性（border） border-width 边框的粗细 border-style 边框的样式 border-color 变宽的样色 border-radius 边框变为圆形，及设置边框的偏平度 支持简写：border: 2px solid red; 也可单独为某一边设置：border-top-color: red; 上边为红色 border-top-style:dotted; 上边框为点状虚线 上;top 下:bottom 左:left 右：right 把中间的top换了就可以了 边框样式 border-style: solid ; 实线边框 none 无边框 dotted 点状虚线边框 dashed 矩形虚线边框 7，display属性 用于控制HTML元素的显示效果 display:"none" 意义是HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分 display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 display:"inline-block" 使元素同时具有行内元素和块级元素的特点。 注意： visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。 也就是说，该元素虽然被隐藏了，但仍然会影响布局。 display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了， 而且该元素原本占用的空间也会从页面布局中消失。 四,css盒子模型 margin: 盒子与盒子之间的距离，也称外边距 ，即标签与标签之间的距离 padding：盒子中的物体与盒子之间的距离，即 用于控制内容与边框之间的距离 ，也称内填充 border：盒子的厚度，即盒子外边与内边之间的距离 ，也称边框 content（内容）：盒子里的内容或者物体， 即显示文本和图像 推荐使用简写： 顺序：上下左右 .margin-test {margin: 5px 10px 15px 20px;} .mycenter{ margin:0 auto;} 分步写: .padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; } padding内填充 顺序：上右下左 推荐使用简写：.padding-test {padding: 5px 10px 15px 20px;} .padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; } 补充padding的常用简写方式： 提供一个，用于四边； 提供两个，第一个用于上－下，第二个用于左－右； 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下； 提供四个参数值，将按上－右－下－左的顺序作用于四边； 五：float ：浮动属性 属性:值； 在css中 任何元素都可以浮动 浮动元素会生成一个块级框，而不论它本身是何种元素 关于浮动的两个特点： 浮动的元素 是脱离正常文档流的 也就意味着没有独占一行一说 也不再占用原来的位置 浮动的框可以向左或者向右移动，直到他的边缘碰到包含框或者另一个浮动框的边框为止： 由于浮动框不在文档流中，所以文档的普通流中的块框表现的就像浮动框不存在一样。 三种取值 left：向左浮动 right：向右浮动 none: 默认值，不浮动 clear（清除） clear属性规定元素的那一侧不允许其他浮动元素 属性:值； 值： left 在左侧不允许浮动元素 right 在右侧不允许浮动元素 both 在左右两侧都不允许浮动元素 none 默认值。允许浮动元素出现在两侧 注意：clear属性只会对自身起作用，而不会影响其他元素 浮动造成的问题：父标签塌陷问题 清除浮动造成的问题：******************* .clearfix:after { content: ""; display: block; clear: both; } 六：overflow 溢出属性 属性:值； 案例overflow:visible; 值 ：visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 八：定位： static 默认值，无定位，不能当作绝对定位的参照物，标签都是静态的。 并且设置标签对象的left、top等值是不起作用的。 !*position: static; 默认是静态的 不能动位置 !*position: relative; 相对定位 !*position: absolute; 绝对定位 重点：所有的标签默认都是静态的 无法直接调节位置 你需要先将其设置成可定位状态 相对定位：relative 相对于标签自身原来的位置 绝对定位：absolute 相对于已经定位过的父标签 (注意：一定是已经定义过得父标签） 但只给你一个父标签的长宽 让你做定位 固定定位：fixed 相对于浏览器窗口 固定在某个位置 浏览器会优先展示文本内容 九：是否脱离文档流 脱离文档流： 绝对定位 固定定位 不脱离文档流： 相对定位 十：z-index 设置对象的层叠顺序。 z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样， 那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 从父现象：父亲怂了，儿子再牛逼也没用 opacity 用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。 去除ul标签丑陋的部分： ul { list-style-type: none; padding: 0; }
转载于:https://www.cnblogs.com/Fzhiyuan/p/11481127.html
