前端- css - 总结
1.css层叠样式表
1.什么是CSS?
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。 也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
2.css的优势
1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使页面布局更加灵活 4.减少网页的代码量，增加网页浏览器速度，节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录
2.css的引入方式
1.内嵌式 一般不写内嵌式，以后不好维护 <h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1> 2.内链式 <style type="text/css"> h2{font-size:30px;color:red;} </style> 3.外链式 链接式 link css 同时加载的！ <link rel="stylesheet" type="text/css" href="./css/index.css"> 导入式 实际用的很少，先加载html，在加载css import 是css2.1特有的，对于不兼容css2.1的浏览器是无效的eg:IE5以下 <style type="text/css"> @import url('./css/index.css'); </style> 注意：@import url()必须写在文件最开始的位置。 链接式与导入式的区别： 1、<link/>标签属于XHTML,@import是属性css2.1 2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示 3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中 4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的 生效优先级：内嵌式 > 内链式 > 外链式
css样式优先级： 行内样式 > 内部样式表 > 外部样式表 ID选择器 > 类选择器 > 标签选择器
3.基本选择器
/*1.标签选择器 p { color: red; }
/*2.id选择器：
#user { background-color: yellow; } /*3.类选择器 .c1 { color: blue; } .c2{ background-color: red; } .c3{ font-size: 12px; } /*4.通配符选择器*/ *{ margin: 0; padding: 0; }
4、高级选择器
/*5.子代选择器 (选择器之间用 > )*/ ul > li { color: red; } /*6.后代选择器 (选择器之间用 空格)*/ ul a { color: green; } /*7.群组选择器 (中间用,)*/ .title, .content, .footer { width: 900px; margin: 0 auto; background-color: red; border: 1px solid red; } /*8.交集选择器 (选择器之间不能有空格，第一个标签必须是标签选择器，第二个标签可以是id或者类选择器)*/ p.p1 { color: red; } p#title1 { font-size: 30px; color: red; } /*9.毗邻选择器 (选择器之间用 + 紧跟着h3标题的标签)*/ h3 + p { color: red; } /*10.兄弟选择器 (选择器之间用~)*/ h3 ~ p { color: red; }
5.属性选择器
^ 以...开头，
$ 以...结尾,
* 包含...,
~ 有多个值中的其中一个
[class="baidu"]{ color:red; } [class^="btn"]{ color:yellow; font-size:12px; } [class$="ault"]{ font-size:12px; color:red; } [class]{ color:red; } [class*='baidu']{ color:red; } [class~='baidu']{ color:red; } input[input="text"]{ background-color:red; }
6、伪类选择器
a标签的 lover hate
a:link{ } 超链接 未被访问时的状态 a:hover{ color: green;} 鼠标悬停时的状态 a:visited{ color: yellow;} 鼠标单击时的状态 a:active{ color:blue;} 鼠标不松手的状态 input:focus{ background-color:red;} 获取焦点时的状态
nth-child（n）
div ul li:first-child{color: red;} /*选中第一个元素*/ div ul li:last-child{color: yellow;} /*选中最后一个元素*/ div ul li:nth-child(3){color: purple;} /*选中当前指定的元素 数值从1开始*/ div ul li:nth-child(n){color: red;} /*n表示选中所有 从0开始的 0的时候表示没有选中*/ div ul li:nth-child(2n){color: gold;} /*偶数*/ div ul li:nth-child(2n-1){color: yellow;} /*奇数*/ div ul li:nth-child(5n+1){color: red;} /*隔几换色 隔行换色*/
7、伪元素选择器
p:first-letter{ font-size:30px;} p段落 为文本的首字母设置特殊样式 p:before{ 用于在元素的内容前面插入新内容 content:"开头"; color:red; } p:after{ 用于在元素的内容后面插入新内容（清除浮动） content:"结尾"; color:green; } 使用此伪元素选择器一定要结合content属性
8、字体样式，文本属性，背景图片
（1）字体样式
默认字体大小： 16px = 1em 12px = 0.75em 1) font-size:30px; 注：文字大小：如果设置成inherit表示继承父元素的字体大小值。 2) font-style:oblique; 注：文字的样式：italic 也表示斜体； 推荐设置斜体的时候使用oblique 3) font-weight:bolder; 字体的粗细 注： 文字的粗细：normal 默认值，标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值 4) font-family:"微软雅黑"; font-family: "Microsoft Yahei", "微软雅黑", "Arial", "sans-serif"; 注：文字的类型： 如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 如果设置成inherit，则表示继承父元素的字体。 5) color:red; 注：文字颜色：支持三种颜色值： #FF0000 RGB(255,0,0) red
（2）文本属性
(1)# text-decoration:underline; 注：线：overline 上 line-through 中 underline 下 none 无（默认 定义标准的文本） inherit 继承父元素的text-decoration属性的值。 (2)# text-indent:20px; 注：首行缩进：20px (3)# text-align:center; 注：文本对齐可水平居中：left（默认值） right center justify(两端对齐只针对英文) (4)# text-shadow: 10px 10px 0.5px #fff; 注：阴影：左右，上下，0-1，颜色 (5)# cursor:pointer; 注： 鼠标形状：pointer 指针， cell 十字， default 鼠标 (6)# height:200px; # line-height:200px; 注：文本垂直居中：height = line-height
（3）背景属性
(1)# background-color:red; 注：背景颜色。 (2)# background-image:url("./images/***.png"); 注：背景图像 (3)# background-size: 300px 300px; 注：背景图片的尺寸 (4)# background-repeat:no-repeat; 注： 如何重复背景图像 repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承background-repeat属性的设置。 (5)# background-attachment:fixed; 注： 背景图像是否固定或者滚动 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承background-attachment属性的设置。 (6)# background-position:10px 20px; 注： 背景图像的位置 top left 如果只设置了一个关键词，那么第二个值就是"center"。 top center top right center left center center center right bottom left bottom center bottom right
background: green; background: url("./homesmall1.png") no-repeat 10px 12px red; background: url("./homesmall1.png") no-repeat center red fixed; 注： 简写 body { background-color: red; backgraound-image: url(xx.png); background-size: 300px 300px; background-repeat: no-repeat; background-position: center }
body { background: red url(xx.png) no-repeat fixed center/300px 300px; }
9.盒子模型
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。
盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域）
（1）padding
内边距：控制内容到边框的距离,内边距会扩大元素所在的区域,width+padding;
注意：为元素设置内边距，只能影响自己，不会影响其他的元素，padding不支持负值。
/*小属性设置*/ padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; /*上 右 下 左*/ padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px;
（2） border
border-top-width: 5px;
border-bottom-width: 10px;
border-left-width: 15px;
border-right-width: 20px;
border-top-color: red;
border-bottom-color: yellowgreen;
border-left-color: yellow;
border-right-color: blue;
border-top-style: solid; 实线
border-bottom-style: dashed; 矩形虚线边框
border-left-style: dotted; 点状虚线边框
border-right-style: double; 两条实线
简写：
border: none 无边框
border: 10px solid yellow;
border-radius: 50%; # 设置圆
border-radius: 10px 20px 30px 40px; # 设置边角
/*小三角 箭头指向下方*/ div{ width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; }
（3）margin
外边距: 控制元素与元素之间的距离
注意：margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，但是也属于盒子的一部分。
margin-top: 20px; margin-left: 40px; margin-bottom: 20px; margin-right: 40px; #上 右 下 左 margin: 20px 30px 40px 50px; #上 左右 下 margin: 20px 30px 40px; #上下 左右 margin: 20px 40px; #上下左右 margin-bottom: 50px; #水平居中 盒子元素 margin: 0 auto;
注意：
margin塌陷：当给两个兄弟盒子 设置垂直方向上的margin 那么以较大的为准，那么我们称这种现象叫塌陷
善用父级的padding，而不是使用margin ：因为父亲没有border，那么儿子margin实际上踹的是“流” 踹的是行
所以父亲就掉下来
10、display visibility 属性
# dispaly 1.控制HTML元素的显示和隐藏
2.块级元素与行内元素的转换。
display:block display:inline display:inline-block display：none # visibility visibility:hidden # 区别 visibility：hidden----将元素隐藏，但是还占着位置，影响页面布局 display：none----将元素的显示设为无，不占任何的位置，不影响
11、float浮动
文档流：指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
浮动特性
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素有“字围”效果
4.收缩的效果
浮动影响：
浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止。
float:left：左浮动 左侧为起始，从左向右排列
float:right：右浮动 右侧为起始，从右向左排列
float:none ：不浮动，默认不浮动
浮动效果：
1.浮动可以使元素脱离文档流，不占位置
脱离文档流，也就是将元素从普通的布局排版中拿走，
其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
2.浮动会使元素提升层级
3.浮动可以使块元素在一行内排列，不设置宽高时，可以使元素适应内容
4.浮动可以使行内元素支持宽高
# 浮动产生的问题： 父元素不设置高度时，子元素设置了浮动，不会撑开父元素的高度，此时父盒子没有高度了。因为子元素不占位置了！ 如果在父盒子下面还有一个标准流的盒子，那么就会影响页面的布局。------清除浮动 # 解决办法： 1.给父盒子设定固定高度；缺点：不灵活； 2.给浮动元素最后一个加一个空的块级元素，且该元素为不浮动float:none，设置clear:both,就会撑开盒子。 缺点：结构冗余 3.官方推荐：推荐使用： .wrap:after{ content: '.'; display: block; height: 0; visibility: hidden; clear: both; } 4.推荐使用：给父元素添加overflow:hidden eg: .warp{overflow: hidden;}
12、position、z-index 属性
（1）position
position: absolute; top: 20px; bottom: 10px; left: 20px; right: 0px; static ： 默认值 relative : 相对定位 有bug 1. 不设置偏移量的时候，对元素没有任何影响。 2. 相对定位可以提升层级关系。 3. 相对定位是相对于自身定位。 absolute : 绝对定位 1. 可以提升层级关系。 2. 脱离文档流。 3. 在没有父级元素定位时，以浏览器的左上角为基准定位的。 4. 有父级的情况下，父级设置相对定位，子集设置绝对定位，是以父盒子进行定位的。 （父相子绝） 来进行位置的调整 fixed : 固定定位(返回顶部)
父相子绝
.box{ width: 300px; height: 300px; border: 5px solid red; margin: 100px; /*父盒子设置相对定位*/ position: relative; padding: 50px; } .box p{ width: 100px; height: 100px; background-color: pink; /*子元素设置了绝对定位*/ position: absolute; top: 10px; left: 20px; }
绝对定位盒子居中
.box .c{ width: 960px; height: 69px; background-color: pink; /*margin: 0 auto;*/ position: relative; left: 50%; margin-left: -480px; /*设置绝对定位之后，margin:0 auto;不起任何作用， 如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位， 然后left:50%; margin-left等于元素宽度的一半， 实现绝对定位盒子居中*/ }
（2）z-index
position: absolute;
z-index: 3;
z-index: 1000;
注：
数字大的压着数字小的，默认为0
从父现象
13、网页布局
网页布局：
上下 结构
上中下 结构
上左右下 结构： 1-2-1 结构
上左中右下 结构： 1-3-1 结构
一般css先这样写：
*{padding:0;margin:0;}
ul>li{list-style:none;}
a{text-decoration:none;}
.wrap{width:100%;}
.header{}
.content{}
.footer{}
...
...
