前言: 关于前端的第二篇博客,会写关于 css 的,内容比较基础。写完这篇博客,会做一个类似的界面。good luck to me~
- 1 <body>
- 2 <div style="background-color: #2459a2;height: 48px;">第一层</div>
- 3 <div style="background-color: #2459a2;height: 48px;">第二层</div>
- 4 <div style="background-color: #2459a2;height: 48px;">第三层</div>
- 5 </body>
引用样式的三种方式:
第一种: 在 <body> 直接定义与引用样式
- 1 <div style="color: red;font-size: 18px;">aa</div>
第二种: 在 <head> 头部加上下面代码 (类似全局变量),然后在 <body> 引用: <div class="cc">c1</div>。PS:(如果 class="cc", 那它就会去全局里找. cc 样式。)
- 1 < style > 2.cc {
- 3 color: red;
- 4 font - size: 50px;
- 5
- }
- 6.ccc {
- 7 color: green;
- 8
- }
- 9 < /style>/
第三种:将需要引用的样式存放在其它文件 (eg:commons.css 文件) 中
然后在 head 头部导入样式: <link rel="stylesheet"href="commons.css"/>, 再在 body 调用样式: <div class="cc">c1</div>
关于优先级,第一种最高 (在 body 直接定义引用样式),推存使用第三种。如果在 head 头部定义并且在 body 引用了两种样式,如下:
- 1 <head>
- 2 <meta charset="UTF-8">
- 3 <title>Title</title>
- 4 <style>
- 5 .cc{
- 6 background-color: blue;
- 7 }
- 8 .ccc{
- 9 background-color: yellow;
- 10 }
- 11 </style>
- 12 </head>
- 13 <body>
- 14 <div class="cc ccc">
- 15 AA
- 16 </div>
- 17 </body>
如果样式不冲突,则样式 cc 和 ccc 都应用,如果样式有冲突,那是优先应用 cc 还是 ccc 样式??
当引用了两种有冲突样式,两种样式都是在 head 定义的,head 头部中后一种定义的样式会把前一种覆盖,故上面代码引用的是 ccc 样式!! 就算把第 14 行改为,仍是引用 ccc 样式。
运行界面:
1、class 选择器(推荐)
- 1 <head>
- 2 <meta charset="UTF-8">
- 3 <title>Title</title>
- 4 <style>
- 5 .c1{
- 6 background-color: #2459a2;
- 7 height: 48px;
- 8 }
- 9 </style>
- 10 </head>
- 11 <body>
- 12 <div class="c1">第一层</div>
- 13 <div class="c1">第二层</div>
- 14 <div class="c1">第三层</div>
- 15 </body>
- 1 <head>
- 2 <meta charset="UTF-8">
- 3 <title>Title</title>
- 4 <style>
- 5 div{
- 6 background-color: #2459a2;
- 7 height: 48px;
- 8 }
- 9 </style>
- 10 </head>
- 11 <body>
- 12 <div >第一层</div>
- 13 <div >第二层</div>
- 14 <div >第三层</div>
- 15 </body>
3、id 选择器
- 1 <head>
- 2 <meta charset="UTF-8">
- 3 <title>Title</title>
- 4 <style>
- 5 #i1{
- 6 background-color: #2459a2;
- 7 height: 48px;
- 8 }
- 9 </style>
- 10 </head>
- 11 <body>
- 12 <div id="i1">第一层</div>
- 13 </body>
把样式写到 head 里面,以 #开头命名,调用对应样式在 div 里用 id 属性指定相应的 id 名。
4、层级选择器
- 1 <head>
- 2 <meta charset="UTF-8">
- 3 <title>Title</title>
- 4 <style>
- 5 span div{
- 6 background-color: #2459a2;
- 7 height: 48px;
- 8 }
- 9 </style>
- 10 </head>
- 11 <body>
- 12 <div >第一层</div>
- 13 <span>
- 14 <div >span里的div</div>
- 15 </span>
- 16 <div >第三层</div>
- 17 </body>
5、组合选择器
- 1 <head>
- 2 <meta charset="UTF-8">
- 3 <title>Title</title>
- 4 <style>
- 5 a,p{
- 6 background-color: cadetblue;
- 7 }
- 8 </style>
- 9 </head>
- 10 <body>
- 11 <a>A</a>
- 12 <p>P</p>
- 13 </body>
运行界面:
6、属性选择器
- 1 <head>
- 2 <meta charset="UTF-8">
- 3 <title>Title</title>
- 4 <style>
- 5 input[name="James"]{width: 20px;height: 20px;}
- 6 </style>
- 7 </head>
- 8 <body>
- 9 <input type="text" name="James">
- 10 <input type="text">
- 11 <input type="password">
- 12 </body>
1、border
- 1 <body>
- 2 <div style="border: 1px dotted red;">
- 3 第一层边框
- 4 </div>
- 5 <!--border:边框宽度 solid:边框样式实线(dotted虚线)颜色:red-->
- 6 </body>
边框其他样式
- 1 <body>
- 2 <div style="height: 48px;
- 3 width: 80%;
- 4 border: 1px solid brown;
- 5 font-size: 16px;
- 6 text-align: center;
- 7 line-height: 48px;
- 8 ">第二层边框</div>
- 9
- 10 <!--height: 48px 边框高度-->
- 11 <!--width: 80% 宽度页面的80%-->
- 12 <!--border: 1px solid brown 边框宽度、样式、颜色-->
- 13 <!--font-size: 16px; 字体大小-->
- 14 <!--text-align: center; 水平居中-->
- 15 <!--line-height: 48px; 垂直居中-->
- 16 </body>
运行界面:
2、float
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
- 1 <body>
- 2 <div style="width:500px;">
- 3 <div style="background-color:red;float:left;width:20%;">123</div>
- 4 <div style="background-color:green;float:left;width:50%">123</div>
- 5 <div style="background-color:yellow;float:right;width:20%">123</div>
- 6 </div>
- 7 </body>
里面的 div 的宽度是以上一层 div 的宽度的标准的。
运行界面:
可以加上 <divstyle="clear:both;"></div>
- 1 <div style="width:500px;background-color:blue;">
- 2 <div style="background-color:red;float:left;width:20%;">123</div>
- 3 <div style="background-color:green;float:left;width:50%">123</div>
- 4 <div style="background-color:yellow;float:right;width:20%">123</div>
- 5 <div style="clear:both;"></div>
- 6 </div>
运行界面:
3、display
- 1 <body>
- 2 <div style="background-color: red;display: inline">块级</div>
- 3 <span style="background-color: #2459a2;display: block">行内</span>
- 4 </body>
运行界面:
- 1 <body>
- 2 <span style="background-color: yellow;display: inline-block;height: 50px;width: 70px">行内</span>
- 3 <div style="background-color: red;display: inline">块级</div>
- 4 </body>
注:display:inline-block 既有 inline 的属性(默认自己有多少占多少)又有 block 的属性(可以设置高度、宽度、padding、margin)
运行界面:
4、margin,padding
margin 外边距 margin-top:上边距
padding 内边距
padding:20px 上下左右边距都是 20px
margin:10px 20px 10px 10px 分别指上右下左
padding:10px 20px 指上下与左右)
margin: 同上
- 1 <div style="height:80px;border:1px solid red;">
- 2 <div style="height:60px;background-color:blue;margin: 10px;"></div>
- 3 </div>
运行示意图:
5、position
fixed 固定到浏览器界面某个位置
返回顶部按钮: 好多页面都有返回顶部的按钮,随着你页面的下拉,按钮永远在页面的右下角,下面就来实现:
View Code
- 1 <body>
- 2 <div style="width: 50px;height: 50px;background-color: black;color: white;
- 3 position: fixed;
- 4 bottom: 20px;
- 5 right: 20px;
- 6 ">返回顶部</div>
- 7 <div style="height: 5000px;background-color: #dddddd";>
- 8 </div>
- 9 </body>
实现动态效果,点击返回顶部:
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Title</title>
- 6 </head>
- 7 <body style="margin: auto">
- 8 <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
- 9 position: fixed;
- 10 bottom: 20px;
- 11 right: 20px;">
- 12 返回顶部
- 13 </div>
- 14 <div style="height: 5000px;background-color: #dddddd;margin: auto;">
- 15 ddddddddddddd
- 16 </div>
- 17
- 18 <script>
- 19 function GoTop() {
- 20 document.body.scrollTop=0;
- 21 }
- 22 </script>
- 23 </body>
- 24 </html>
固定菜单栏:
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Title</title>
- 6 <style>
- 7 .pg-header{
- 8 height: 48px;
- 9 background-color: darkorange;
- 10 color: #dddddd;
- 11 position: fixed;
- 12 top:0;
- 13 right: 0;
- 14 left: 0;
- 15 }
- 16 .pg-body{
- 17 background-color: #dddddd;
- 18 height: 5000px;
- 19 margin-top: 50px;
- 20 }
- 21 </style>
- 22 </head>
- 23 <body style="margin: 0">
- 24 <div class="pg-header">固定头部</div>
- 25 <div class="pg-body">内容</div>
- 26 </body>
- 27 </html>
运行界面:
relative+absolute(相对与 relative 固定路径)
- 1 <div style="position:relative;background:green;height:400px;width:500px;">
- 2 <div style="position:absolute;bottom:30px;right:30px;">123</div>
- 3 </div>
运行界面:
6、多层模态
用了 position 样式实现三层页面: 当页面整个浮动在上面的时候,如果想让页面整体覆盖底层页面,要用到 top,right,left,bottom 属性,而非 margin-top、margin-left....
opacity: 设置透明度(0~1 之间)
z-index: 设置层级(z-index 越大,越放在顶层)
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Title</title>
- 6 </head>
- 7 <body>
- 8 <div style="z-index:10;position: fixed;top: 50%;left: 50%;
- 9 margin-left:-250px;margin-top:-250px;background-color: wheat;
- 10 height: 500px;width: 500px"></div>
- 11
- 12 <div style="z-index:9;position: fixed;background-color: black;
- 13 top: 0;
- 14 right: 0;
- 15 left: 0;
- 16 bottom: 0;
- 17 opacity: 0.5"></div>
- 18
- 19 <div style="height: 5000px;background-color: green"></div>
- 20 </body>
- 21 </html>
运行界面 (top: 50%;left: 50%;margin-left:-250px;margin-top:-250 px 是对最顶层的 div 进行居中处理;):
7、hover
可以看一下的顶部条栏,当鼠标移动到选项栏时,背景颜色会出现变化;下面就来试试搞一下这个
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Title</title>
- 6 <style>
- 7 .pg-header{
- 8 position: fixed;
- 9 right: 0;
- 10 left: 0;
- 11 top: 0;
- 12 height: 48px;
- 13 background-color: #2459a2;
- 14 line-height: 48px;
- 15 color: white;
- 16 }
- 17 .pg-body{
- 18 margin-top: 50px;
- 19 }
- 20 .w{
- 21 width: 980px;
- 22 margin: auto;
- 23 }
- 24 .pg-header .menu{
- 25 display:inline-block;
- 26 padding: 0 10px 0 10px;
- 27 }
- 28 .pg-header .menu:hover{
- 29 background-color: #BF1919;
- 30 }
- 31 </style>
- 32 </head>
- 33 <body>
- 34 <div class="pg-header">
- 35 <div class="w">
- 36 <a >LOGO</a>
- 37 <a class="menu">全部</a>
- 38 <a class="menu">42区</a>
- 39 <a class="menu">段子</a>
- 40 <a class="menu">1024</a>
- 41 <a class="menu">爆文</a>
- 42 </div>
- 43 </div>
- 44 <div class="pg-body">
- 45 </div>
- 46 </body>
- 47 </html>
其中. pg-header .menu:hover{background-color: #BF1919} 指定当鼠标滑过引用. menu 字段时,字段样式变成新定义的样式
运行界面:
8、background
background-image
之前一直在用 backgroud 样式基本上都是设置背景颜色什么,其实 background 还可以设置背景为图片.
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>Title</title>
- 6 </head>
- 7 <body>
- 8 <div style="background-image: url('bg.png');height:600px;width: 600px;
- 9 border: 1px solid red;"></div>
- 10 </body>
- 11 </html>
运行示意图 (实际图片只有 3 X 789):
background-repeat
background-repeat 有四个属性 repeat(默认,重复占满)、no-repeat(不重复)、repeat-x(只横着重复放)、repeat-y(只竖着重复放)
默认情况下 background-image 属性会在页面的水平与垂直方向平铺。一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示:
View Code
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head>
- 4 <meta charset="utf-8">
- 5 <title>菜鸟教程(runoob.com)</title>
- 6 <style>
- 7 body
- 8 {
- 9 background-image:url('gradient2.png');
- 10 }
- 11 </style>
- 12 </head>
- 13
- 14 <body>
- 15 <h1>Hello World!</h1>
- 16 </body>
- 17
- 18 </html>
运行示意图:
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
View Code
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head>
- 4 <meta charset="utf-8">
- 5 <title>菜鸟教程(runoob.com)</title>
- 6 <style>
- 7 body
- 8 {
- 9 background-image:url('gradient2.png');
- 10 background-repeat:repeat-x;
- 11 }
- 12 </style>
- 13 </head>
- 14
- 15 <body>
- 16 <h1>Hello World!</h1>
- 17 </body>
- 18
- 19 </html>
运行示意图:
background-position-x、background-position-y
为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。可以利用 background-position 属性改变图像在背景中的位置:
- 1 <body>
- 2 <div style="background-image: url('icon.png');height: 20px;width: 20px;
- 3 border: 1px solid red;background-position-x:20px;background-position-y: 40px"></div>
- 4 </body>
background-position-x 表示看背景图片的窗口水平方向向右移动,background-position-y 表示看背景图片的窗口垂直向下移动
CSS 背景属性总结
Property | 描述 |
---|---|
简写属性,作用是将背景属性设置在一个声明中。 | |
背景图像是否固定或者随着页面的其余部分滚动。 | |
设置元素的背景颜色。 | |
把图像设置为背景。 | |
设置背景图像的起始位置。 | |
设置背景图像是否及如何重复。 |
本博文参考自:
博主的 OneNote 笔记
博客:
菜鸟教程:
昨天就开始写了,昨晚开始做些简单的排版,发现一些漏的知识,于是去参考了菜鸟教程。写完之后发现挺多的,能截图的我已经尽量截图了~~
转发注明出处:
来源: