CSS-1
CSS 层叠样式表，用于网页布局和设置网页样式
行内 (内联样式表) <标签名 style="属性1:值1;属性2=值2;..."></标签名>
内部(内嵌样式表)
<head> <style> 选择器{ 属性:值; } </style> </head>
外部 (外联样式表)
<head> <link rel="stylesheet" href="css文件路径" / </head>
/* css文件格式 */ 选择器{ 属性:值; }
选择器 用于选择网页中的元素
基础选择器
标签选择器 标签名{属性:值}
类选择器 .类名{属性:值} <标签名 class="类名1 类名2 ..."></标签名>
ID选择器 #id{属性:值} <标签名 id="值"></标签名> id值需要是整个页面中唯一的
通配符选择器 *{属性:值} 选择所有标签
*{ margin:0; padding:0; }
字体样式
选择器{ font-size:10px; /*字体大小 px 像素，常用 em 相对当前页面内文本字体大小 */ font-family:字体1,字体2,...; /*中文字体名称和带空格的字体名称需要引号引起来*/ /*unicode字体 例：微软雅黑 英文名称: “Microsoft YaHei” unicode: “\5FAE\8F6F\96C5\9ED1” */ font-weight:字体粗细; /*normal bold 100-900 其中 400等同于normal 700等同于bold*/ font-style:字体风格; /*normal italic*/ } 选择器{ /*综合写法,需严格按照顺序，font-size font-family是必须的，其它的可选*/ font:font-style font-weight font-size/line-height font-family; }
外观样式
选择器{ color:颜色值|十六进制|RGB; /*文本颜色*/ text-align:left | center | right; /*文本水平对齐方式*/ line-height:行间距; /*行与行之间的垂直距离，也称行高*/ text-indent:2em; /* 首行缩进,常用 em 作为单位 相当于字符宽度的倍数*/ text-decoration:none | underline | overline | line-through; /*文本装饰*/ }
截图、拾色工具 Snipaste
chorme开发者工具 F12 ctrl+shift+i 右键-检查
复原浏览器网页大小 ctrl+0
复合选择器 更准确更精细的选择目标元素
后代选择器 外层标签 内层标签{属性:值;}
子元素选择器 父标签>子标签{属性:值}
交集选择器 标签名.类名{属性:值}
并集选择器 选择器1,选择器2,...{属性:值;}
链接伪类选择器 (顺序不能颠倒)
a:link{属性:值} /*未访问*/
a:visited{属性:值} /*已访问*/
a:hover{属性:值} /*鼠标悬停*/
a:active{属性:值} /*选定*/
标签显示模式
display:inline | block | inline-block;
行内元素(一行可以显示多个，不可控制宽高，自身宽高由内容撑开)
块元素(独占一行，可设置宽高及内外边距,默认宽度为父元素的100%)
行内块元素(一行可以显示多个，但是元素之间会有空白间隙，可设置宽度及内外边距，默认宽度为其内容宽度)
行高 line-height
行高的测量方式： 行高（顶线、中线、基线、底线）等于 基线与基线的距离
行高的组成：行高=上方距离+内容高度+下方距离 (其中上方距离等于下方距离,默认内容在行高中处于居中位置)
单行文本垂直居中 文字行高=盒子高度
行高与盒子高度的关系 行高=盒子高度，文字会垂直居中 ;行高大于盒子高度，文字会偏下 ;行高小于盒子高度，文字会偏上 ;
默认情况下文字是相对于行高垂直居中的，行高的变化影响文字相对于盒子上方的距离，这就是出现以上关系的原因。
例：行高60px 文字大小 30px 上方距离=(行高60px-文字大小30px)/2 = 15px;
若盒子高度等于行高 如60px, 文字距离盒子上方距离为15px时，文字相处于盒子中的垂直位置是居中的。
若盒子高度小于行高 如40px,要想文字在盒子中垂直居中，其实上方距离需要是(40-30px)/2=5px才会垂直居中，但是现在文字离盒子上方是15px,所以文字会偏下。
若盒子高度大于行高 如80px,要想文字在盒子中垂直居中，其实上方距离需要是(80-30px)/2=25px才会垂直居中，但是现在文字离盒子上方是15px,所以文字会偏上。
背景
选择器{
/*简写形式 background:背景颜色 背景图片 背景平铺 背景附着 背景位置*/ background-color:英文名|十六进制|rgb; /*背景颜色,默认 transparent 透明 */ background-image:url(图片地址); /*背景图片,图片地址无需加引号*/ background-repeat:repeat|no-repeat;repeat-x;repeat-y; /*背景平铺*/ background-position:x坐标 y坐标; /*背景位置,必须先设置背景图片*/
background-attachment:scroll | fixed; /*背景附着 : 滚动 | 固定*/
}
选择器{ /*背景透明 CSS3*/ background:rgba(红,绿，蓝,透明度); /*透明度取值范围 0~1*/ }
三大特性
层叠性 : 多种CSS样式的叠加，样式冲突遵循就近原则。
继承性：子标签会继承父标签的部分样式，例如：文本颜色、字体大小等。
优先级: 多个样式应用在同一个元素时，选择器相同，执行层叠性中的就近原则。选择器不同的，遵循优先级，此时需计算权重。
权重计算：
基础选择器:单个权重
继承 或 * 0,0,0,0 (父元素的样式是否会影响到子元素样式的应用，主要看父元素选择器是否有选中子元素)
标签选择器 0,0,0,1
类选择器 或 伪类 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
!important 无穷大
复合选择器：权重叠加
注释
/*注释*/
盒子模型 ：元素内容、内边距(padding)、边框(border)、外边距(margin)
盒子边框 border : border-width | border-style | border-color; 边框也可以 分为4个边，border-top、border-right、border-bottom、border-left
table,th,td{ /*表格细边框*/ border-collapse:collapse; }
内边距 padding , 也可以分为4个方向， padding-top、padding-right、padding-bottom 、 padding-left ，若给盒子指定了宽高，设置了padding会撑开盒子,影响盒子大小。若未给盒子设置宽高，则设置padding不会影响盒子大小。
盒子实际大小=元素宽度或高度+内边距+边框
外边距 margin ,也可以分为4个方向，margin-top,margin-right,margin-bottom,margin-left, 行内元素只设置左右外边距，不要设置上下外边距(因为没用，不会生效)。
垂直外边距合并 (塌陷) :
兄弟关系：上面元素的margin-bottom不会与下面的元素的margin-top相加，两者只会取其中较大的值 。解决方案：只给其中一个元素添加想要的外边距。
父子关系： 父元素的 margin-top 会与 子元素的margin-top合并，取其中较大值。解决方案1：给父元素添加上边框，边框颜色设置成透明。 解决方案2：给父元素添加上内边距(注意会撑开盒子，需通过减去相应的高度) 。解决方案3：为父元素添加overflow:hidden;
div{ margin:0 auto; /*块级盒子水平居中,盒子必须要有宽度*/ }
*{ /*清除元素默认内外边距*/ padding:0; margin:0; }
PS基础操作
ctrl+n 新建 ctrl+o 打开 ctrl+r 标尺 ctrl+加号/减号 放大/缩小 按住ctrl 鼠标变小手形状 ctrl+d 取消选区
综合案例：文章列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文章列表</title> <style> *{margin:0;padding:0;} div{ width:360px; /*380-10*2=360*/ height:260px; border:1px solid #ccc; /*线性渐变背景颜色*/ background-image:linear-gradient(#eff0ef,#fdfefd); margin:100px auto; /*水平居中*/ padding:0 10px; /*会撑开盒子，width属性需减去相应的值*/ } h3{ font-size:16px; height:50px; /* 调整行高：实现文字离下边框8px的间距 行高计算方法： 先算上内边距：50高度-16字体高度-8下内边距=26px(上内边距) 最后算行高： 16字体高度 + 26*2(上下内边距) = 68px */ line-height:68px; border-bottom:2px solid #ccc; } ul{ margin-top:15px; } li{ /*去除列表项样式*/ list-style:none; height:30px; line-height:30px; /*行高=高度 文本垂直居中*/ border-bottom:1px dashed #ccc; background-size:10px 10px; background-image:url(arrow.png); background-repeat: no-repeat; background-position:left center; /*背景垂直居中*/ } a{ text-decoration:none; /*去除下划线*/ color:#000; margin-left:15px; } a:hover{ text-decoration:underline; /*鼠标悬停添加下划线*/ } </style> </head> <body> <div> <h3>最新文章/New Articles</h3> <ul> <li><a href="#">文章1</a></li> <li><a href="#">文章2</a></li> <li><a href="#">文章3</a></li> <li><a href="#">文章4</a></li> <li><a href="#">文章5</a></li> </ul> </div> </body> </html>
圆角边框 CSS3
选择器{ border-radius:length; /*正圆可以设置为50%*/ }
盒子阴影 CSS3
选择器{ box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影; }
书写规范
选择器 与 { 之间必须有空格。
属性 与 : 之间不允许有空格 : 与 值之间必须包含空格。
并集选择器，每个选择器声明必须独占一行
布局机制
普通流/标准流 : 块级元素独占一行，顺序从上到下，行内元素按照顺序从左到右排，碰到父元素边缘自动换行。
浮动 ： 脱离标准流，浮在标准流上面，不占用原来的位置，会改变元素的display属性，变为类似于行内块元素(但元素之间没有空白间隙)，主要作用让多个块级盒子排列在同一行
定位 : 脱离普通流，将盒子定在浏览器某个位置
浮动
选择器 { float:none | left | right; }
文字环绕图片效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jason</title> <style> * {margin:0;padding:0;} p { text-indent: 2em; } img { width: 100px; float:right; margin:5px; } </style> </head> <body> <p>杰森·斯坦森（Jason Statham），1967年7月26日出生于英国伦敦，英国影视男演员。 早年学习咏春拳、空手道和跆拳道。[1] </p> <img src="jason.jpg" alt=""> <p>1992年，杰森·斯坦森作为英国国家跳水队运动员代表英国参加了第十二届世界跳水冠军赛，获得了第12名 [2] 。1998年，杰森出演了盖伊·里奇的犯罪电影《两杆大烟枪》，进入演艺圈。2002年，杰森开始担任电影《非常人贩》系列电影的男主角。2008年，他加盟了电影《敢死队》。2013年4月，全球健美杂志《Men's Health》公布“好莱坞最健美男星排行榜”，杰森·斯坦森获得冠军。2015年4月，杰森出演的《速度与激情7》上映。2015年，确认回归《速度与激情8》 [3] 。2016年，出演中美合拍电影《巨齿鲨》 [4] 。</p> </body> </html>
子盒子的浮动与父盒子的关系
子盒子浮动参照父盒子对齐，不会与父盒子边框重叠，也不会超过父盒子的内边距
浮动盒子与兄弟盒子的关系
如果浮动盒子前一个盒子也是浮动的，那么当前浮动盒子会与前一个盒子顶部对齐。
如果浮动盒子前一个盒子是标准流，那么当前浮动盒子会在前一个盒子的下方。
浮动盒子只会影响当前或后面的盒子，不会影响前面的标准流盒子。
为什么要清除浮动
很多时候父盒子不方便给高度，此时父盒子的高度等于标准流子盒子的高度，当标准流子盒子设置浮动时，会脱离标准流，不占有原来的位置，那么父元素的高度会变为0，此时下面的标准流盒子就会受到影响，会往上跑！
清除浮动后，父元素会自动拥有浮动子盒子的高度，避免下面的标准流盒子受到影响。
选择器{ clear:left | right | both; /*清除浮动，常用 both*/ }
方法一：在浮动元素末尾添加一个空标签，例: <div style="clear:both;"></div> ，缺点：添加了额外的无意义标签。
方法二：父元素添加 overflow:hidden | auto | scroll;都可以 缺点：当使用hidden，内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要被溢出的元素。
方法三：父元素使用after伪元素
.clearfix:after{ content:''; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ *zoom:1; /*IE6 7专用*/ }
方法四：父元素使用双伪元素
.clearfix:before,.clearfix:after{ content:''; display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom 1; /*ie6 7 专用*/ }
定位 position
将盒子定在某个位置，自由的漂浮在其他盒子(包括标准流盒子和浮动的盒子)上面
定位 = 定位模式 + 边偏移
选择器 { /*定位模式*/ position: static | relative | absolute | fixed; /*边偏移: top | bottom | left | right*/ }
静态定位：默认模式，按标准流摆放位置，没有边偏移。
相对定位：相对元素自身原来在标准流的位置进行边偏移。脱离标准流，原标准流位置仍会保留。
绝对定位：以带有定位(除static之外)的父级元素来进行边偏移，若父元素没有定位，继承往上一级找，直到最后以浏览器定位。脱离标准流，原标准流位置不会保留。
子绝父相：子元素绝对定位，父元素相对定位。
固定定位：相对于浏览器可视窗口进行边偏移。脱离标准流，不占原标准流位置，不随滚动条滚动。
绝对定位与固定定位会让元素转换成类似于行内块，可设置宽高，也不会产生垂直外边距合并的问题。
绝对定位的盒子居中
绝对定位 或 固定定位 的盒子，不能通过设置 margin:auto; 来实现水平居中。
解决方法： left:50%: margin-left: - (width/2)px; 让盒子左移到父盒子的水平中心位置，然后再往左回退盒子一半宽度的距离。
三种定位机制的上下顺序
定位 > 浮动 > 标准流
堆叠顺序
选择器{ z-index:正整数 | 0 | 负整数; /*只能应用于相对定位 绝对定位 固定定位的元素中*/ }
综合案例：轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> /*清除所有元素的默认内外边距*/ * {margin:0;padding:0;} /*父盒子*/ div { position:relative; /*相对定位*/ top:100px; /*水平居中*/ left:50%; margin-left: -260px; width:520px; height:280px; } /*左右箭头相同样式*/ .al, .ar { position:absolute; /*绝对定位*/ /*垂直居中*/ top:50%; margin-top:-15px; width:30px; height:30px; /*文本水平垂直居中*/ text-align:center; line-height:30px; background-color:rgba(0,0,0,.3); /*带透明度背景色*/ color:white; font-size:18px; } /*左箭头*/ .al { left:0; border-radius:0 50% 50% 0; } /*右箭头，绝对定位，透明背景*/ .ar{ right:0; border-radius:50% 0 0 50%; } ul{ position:absolute; /*绝对定位*/ bottom:20px; /*水平居中*/ left:50%; margin-left:-80px; width:125px; /*160盒子实际大小-35左内边距*/ height:20px; background-color:rgba(0,0,0,0.3); border-radius:80px; padding-left:35px; } li{ list-style:none; /*去除列表项样式*/ float:left; width:10px; height:10px; background-color:#fff; margin-right:6px; margin-top:5px; border-radius:50%; /*正圆*/ } </style> </head> <body> <div> <img src="1.jpg" alt="产品图片" /> <span class="al"><</span> <span class="ar">></span> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
CSS属性书写顺序
布局属性 > 自身属性 > 文本属性 > 其他属性
浙公网安备 33010602011771号