前端三把利器之CSS总结

现在的位置: 首页 > web前端 > 正文

RSS

上篇下篇

前端三把利器之CSS总结

2020年02月12日 ⁄ web前端 ⁄ 共 12475字 ⁄ 字号小中大 ⁄ 评论关闭

上一篇：前端三把利器之HTML总结点击跳转目录篇：前端(html,css,js)目录篇点击跳转下一篇：前端三把利器之javascript总结点击跳转

CSS 美化网页控件的代码（层叠样式表）

1）编写CSS几种方式：

2）标签常用属性

3）float：让标签狼起来，块级标签页可以堆叠

4）display：块级标签和行内(内联)标签转换转换

5）margin、padding边距

6）position内部属性（固定页面标签）fixed、absolute、relative

7）overflow

8) :hover 当样式后面加上:hover，那么鼠标移到装饰该样式的标签，该:hover样式生效

9) background-image：背景图片

CSS 美化网页控件的代码（层叠样式表）

1）编写CSS几种方式：

1.1标签的style属性实现标签装饰（装饰功能不能重复使用：极少用到）

1

1.2（标准名称：id选择器）

<head> <style> #i1{ background-color: #2459a2; height: 48px; } </style></head><body> 2</body></html>

 1.3（标准名称：class选择器）

 <head> <style> .c1{ background-color: #2459a2; height: 48px; } </style></head><body> 3</body></html>

 1.4 (标准名称：标签选择器)

<head> <style> p{ background-color: #2459a2; height: 48px; } </style></head><body> 4</body></html>

 1.5(标准名称：层级(关联)选择器，使用空格区分)

<head> <style> span p{ background-color: #2459a2; height: 48px; } .c2{ background-color: #2459a2; height: 48px; } .c2 p{ background-color: #2459a2; height: 48px; } </style></head><body> 5</body>



 1.6(标准名称：组合选择器,使用逗号区分)

<head> <style> #i1,#i2 { background-color: #2459a2; height: 48px; } .c3,.i3 { background-color: #2459a2; height: 48px; } </style></head><body> 6 7 6 7</body>

 1.7(标准名称：属性选择器)

<head> <style> input[type="test"] { width:200px; height:30px; }input[type="password"] { width:60px; height:20px; }input[value="burgess"] { width:400px; height:30px; }.c1[type="password"] { width:60px; height:30px; } </style></head><body> <input class="c1" type="test" value="burgess" ><input class="c1" type="password" ></body>

 1.8 style标签下的注释格式：/*注释说明*/

 1.9 style优先级：标签上style优先，通过选择器，就近原则

1.10 style装饰功能可以写在单独的css文件上，然后通过在head标签下添加link标签引用该文件装饰功能



<head> <link rel="stylesheet" href="css/commons.css" /></head><body> asdf</body>

2）标签常用属性

2.1 height：48px 高度

2.2 border:边框(属性:宽，样式，颜色)

2.3 width：%80 宽度(写法：像素：百分比)

2.4 font-size:16px 字体大小

2.5 text-align:center 居中

2.6 line-height:48px 字符串放在像素大小的中间

2.7 font-weight:bold 字体加粗

3）float：让标签狼起来，块级标签页可以堆叠

1 如：p标签是块级白板标签所以一个块级标签不管字符串多少就占据一行

如果想在一行里面使用2个块级标签以上的话：

必须使用float内部属性：这样就可以让块级标签变成行内标签了

folat:left让块级标签变成行内标签，往左靠

folat:right让块级标签变成行内标签，往右靠

（注：需大于2个并且紧挨着标签，同时使用folat)

超过100%宽度就另起一行-->

格式：

<body> 1 2 1 2 1 2 1 1 2</body>

2 如果子标签使用foalt，那么该子标签的父级标签有边框，

就需要在子标签最后增加多一个： <p style="clear:both">>

(撑开父标签高度)

格式：

 >

4）display：块级标签和行内(内联)标签转换转换

   1. display:inline 块级转行内

   2. display:block 行内转块级

3. display:inline-block; 具备块级和行内标签的属性：使行内标签具备可设置性如：（高度，宽度，padding margin）

   4. display=none 让标签消失(学习了js，你可以弄个按钮，点下就显示，在点下就消失。如有一些网站有灯的，点下就亮，在点下就不亮) ********

   5. 块级标签：设置高度，宽度，padding margin

   6. 行内标签：无法设置高度，宽度，padding margin

5）margin、padding边距

1.margin 外边距

格式：

<body> 123 123 <!-margin-top:外边距，默认(margin-top:0子标签的高度占据父标签边框的顶部)margin-top:0的时候，如:子标签高度：50px，宽度600px 该子标签的高度占据的是父标签边框的顶部,宽度是占据父标签最左边margin-top:10的时候，margin-left:150的时候 该子标签的高度占据的是父标签边框的顶部往下移动10像素 该子标签的宽度占据的是父标签边框最左边往右移动150像素同理：margin-bottom 和 margin-top方向相反同理：margin-right 和 margin-left方向相反--></body>

2.padding 内边距

格式：

<body> 123 123 </body>

6）position内部属性（固定页面标签）fixed、absolute、relative

1.position: fixed; 固定在页面某个位置，，浏览器滚动，跟着滚动

2.position:absolute; 绝对固定在页面某个位置，浏览器滚动，不跟着滚动（应用场景不多，但是如果和absolute+relative那么可以应用很多场景）

3.position:relative;单独使用没有任何效果配合absolute使用（标签有position:relative;那么该标签下的标签有position:absolute;这个时候：absolute标签固定在relative标签的某个位置）

4.pisition多层：应用场景当点击一个按钮的时候，跳出一个框，值可以对该框进行操作

需要使用两个内部属性配合:

z-index:9；区别层级，谁的数字大，谁就在最上层

opacity: 0.5; 透明度，0到1，0完全透明 1完全遮住

position: fixed应用场景：

 1.1滚动页面的时候不管如何页面往下滚动会出现一个返回顶部

格式：

<body> 返回顶部  asdfasdf <script> function GoTop(){ document.body.scrollTop = 0; } </script></body></html> position: fixed应用场景

 1.2.不管页面如何滚动，上面的菜单永远在顶部

格式：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header01{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; }/*position: fixed; 固定页面的位置，并且把该p从背景层（底层）变底层上层固定在 top right left:距离顶部、左、右 0px距离这样以后就不管你页面往下滚动，该p一直存在该浏览器页面的顶部*/ .pg-body01{ background-color: #dddddd; height: 5000px; margin-top: 50px; }/*背景层（底层）试验position写的装饰功能margin-top偏离顶部50px这样才不会被盖住（后期就不需要了，因为可以利用display隐藏固定p*/ </style></head><body> 头部 内容</body></html>

position:relative;配合position:absolute应用场景：

 absolute标签依据relative标签进行固定位置

格式：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> </body></html>

position多层应用场景

当点击一个按钮的时候，跳出一个框，值可以对该框进行操作

格式：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="text" /> <input type="text" /> <input type="text" />   asdfasdf </body></html>

7）overflow

overflow: hidden放置的图片，超过标签定义的高度和宽度，超过的隐藏

overflow: auto：放置的图片，超过定义标签的高度和宽度，超过出现滚动条

格式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <img src="1.jpg">  <img src="1.jpg">  <img src="1.jpg" style="height: 200px;width: 300px"> </body></html>

8) :hover 当样式后面加上:hover，那么鼠标移到装饰该样式的标签，该:hover样式生效

格式

<style> .menu{ display: inline-block; padding: 0 10px 0 10px; color: white; }/*display: inline-block; 行内标签转块级标签（a标签就可以设置左右上下宽度）padding: 10px （上下左右+10px）padding:0 10px （上下+0px 、左右+10px）padding: 0 10px 0 10px （上+0px 、右+10px 、下+0px 、左+10px）*/ .menu:hover{ background-color: blue; }/*menu:hover:当鼠标移动到当前menu标签上时，该hover属性才生效*/ </style></head><body> <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">1024</a> </body>

9) background-image：背景图片

background-image: url(icon_18_118.png) 添加背景图片；（默认图片横竖平铺该p空间）

background-repeat:repeat-y; 图片竖平铺，

background-repeat:repeat-x; 图片横平铺，

background-repeat:no-repeat; 不平铺，

background-position-x:0px;横向移动框内背景图片

background-position-y:-140px;竖向移动框内背景图片

background-position:0 -140px ;上面两个综合简写

格式

上一篇：前端三把利器之HTML总结点击跳转目录篇：前端(html,css,js)目录篇点击跳转下一篇：前端三把利器之javascript总结点击跳转

以上就上有关前端三把利器之CSS总结的相关介绍，要了解更多php教程_php自学_php视频教程下载 - 绵阳技术博客内容请登录学步园。

【上篇】基于SVG路径运动的js内容切换插件path-slider
【下篇】几款数据可视化的工具介绍

作者: admin

该日志由 admin 于4年前发表在web前端分类下，最后更新于 2020年02月12日.
转载请注明: 前端三把利器之CSS总结 | 学步园 +复制链接
关键字: php教程_php自学_php视频教程下载 - 绵阳技术博客

抱歉!评论已关闭.

学步园

前端三把利器之CSS总结

CSS 美化网页控件的代码（层叠样式表）

1）编写CSS几种方式：

2）标签常用属性

3）float：让标签狼起来，块级标签页可以堆叠

4）display：块级标签和行内(内联)标签转换转换

5）margin、padding边距

6）position内部属性（固定页面标签）fixed、absolute、relative

7）overflow

8) :hover 当样式后面加上:hover，那么鼠标移到装饰该样式的标签，该:hover样式生效

9) background-image：背景图片

作者: admin

书签

最新文章New

本站推荐

返回首页

学步园

前端三把利器之CSS总结

CSS 美化网页控件的代码 （层叠样式表）

1）编写CSS几种方式：

2）标签常用属性

3）float：让标签狼起来，块级标签页可以堆叠

4）display：块级标签和行内(内联)标签转换转换

5）margin、padding边距

6）position内部属性（固定页面标签 ）fixed、absolute、relative

7）overflow

8) :hover 当样式后面加上:hover，那么鼠标移到装饰该样式的标签，该:hover样式生效

9) background-image：背景图片

作者: admin

书签

最新文章New

本站推荐

返回首页

CSS 美化网页控件的代码（层叠样式表）

6）position内部属性（固定页面标签）fixed、absolute、relative