- CSS的单位
- 字体属性
- 文本属性
- 定位属性:position、float、overflow等
文章目录
1.CSS的单位
html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。 CSS中的单位是必须要写的,因为它没有默认单位。
# 绝对单位
1 in
=2.54cm
=25.4mm
=72pt
=6pc
。
各种单位的含义:
in
:英寸Inches (1 英寸 = 2.54 厘米)cm
:厘米Centimetersmm
:毫米Millimeterspt
:点Points,或者叫英镑 (1点 = 1/72英寸)pc
:皮卡Picas (1 皮卡 = 12 点)
# 相对单位
px
:像素 em
:印刷单位相当于12个点 %
:百分比,相对周围的文字的大小
为什么说像素px是一个相对单位呢,这也很好理解。比如说,电脑屏幕的的尺寸是不变的,但是我们可以让其显示不同的分辨率,在不同的分辨率下,单个像素的长度肯定是不一样的啦。
百分比%
这个相对单位要怎么用呢?这里也举个例子:
详细内容:千古前端的css基础讲解
2.文本属性(就是自定义文本样式)
CSS样式中,常见的文本属性有以下几种:
letter-spacing: 0.5cm ;
单个字母之间的间距word-spacing: 1cm;
单词之间的间距text-decoration: none;
字体修饰:none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线text-transform: lowercase;
单词字体大小写。uppercase大写、lowercase小写color:red;
字体颜色text-align: center;
在当前容器中的对齐方式。属性值可以是:left、right、center(在当前容器的中间)、justifytext-transform: lowercase;
单词的字体大小写。属性值可以是:uppercase
(单词大写)、lowercase
(单词小写)、capitalize
(每个单词的首字母大写)
这里来一张表格的图片吧,一览无遗:
3.列表属性 (就是如列表一样进行页面布局)
ul li{
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
margin-left:80px; /*公有属性*/
}
另外还有一个简写属性叫做list-style
,它的作用是:将上面的多个属性写在一个声明中。
我们来看一下list-style-image
属性的效果:
给列表前面的图片加个边距吧,不然显示不完整:
这里来一张表格的图片吧,一览无遗:
3.overflow属性 (就是超出一个自定义区域的文字内容或者其他内容的处理方式,如滚轴滑动页面展示隐藏的内容)
overflow
属性的属性值可以是:
visible
:默认值。多余的内容不剪切也不添加滚动条,会全部显示出来。hidden
:不显示超过对象尺寸的内容。auto
:如果内容不超出,则不显示滚动条;如果内容超出,则显示滚动条。scroll
:Windows 平台下,无论内容是否超出,总是显示滚动条。Mac 平台下,和auto
属性相同。
4.鼠标的属性cursor
就是鼠标图标的效果,在不同情况下鼠标会变成手指,或者漏斗,或者其他一些图片
鼠标的属性cursor
有以下几个属性值:(常见样式)
auto
:默认值。浏览器根据当前情况自动确定鼠标光标类型。pointer
:IE6.0,竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。hand
:和pointer
的作用一样:竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
比如说,我想让鼠标放在那个标签上时,光标显示手状,代码如下:
p:hover{
cursor: pointer;
}
另外还有以下的属性:(不用记,需要的时候查一下就行了)
- all-scroll : IE6.0 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
- col-resize : IE6.0 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
- crosshair : 简单的十字线光标。
- default : 客户端平台的默认光标。通常是一个箭头。
- hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
- move : 十字箭头光标。用于标示对象可被移动。
- help : 带有问号标记的箭头。用于标示有帮助信息存在。
- no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
- not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
- progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
- row-resize : IE6.0 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
- text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
- vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
- wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
- *-resize : 用于标示对象可被改变尺寸方向的箭头光标。
-
w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
- url ( url ) : IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
5.滤镜(用的不多)
这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果,可以这样设置滤镜:
<img src="3.jpg" style="filter:gray()">
举例代码:
<body>
<table>
<tr>
<td>原始图片</td>
<td>图片加入黑白效果</td>
</tr>
<tr>
<td><img src="3.jpg"></td>
<td><img src="3.jpg" style="filter:gray()"></td> /*滤镜:设置图片为灰白效果*/
</tr>
</table>
</body>
效果如下:(IE有效果,google浏览器无效果)
延伸: 滤镜本身是平面设计中的知识。如果你懂一点PS的话···打开PS看看吧:
导航栏的制作(本段内容请忽略,因为很粗糙辣眼睛)
现在,我们利用float浮动属性来把无序列表做成一个简单的导航栏吧,效果如下:
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;/*去掉列表前面的圆点*/
width: 420px;
height: 60px;
background-color: black;/*设置整个导航栏的背景为灰色*/
}
li{
float: left;/*平铺*/
margin-right: 30px;
margin-top: 16px;
}
a{
text-decoration: none;/*去掉超链的下划线*/
font-size: 20px;
color: #BBBBBB;/*设置超链的字体为黑色*/
font-family:微软雅黑;
}
</style>
</head>
<body>
<ul>
<li><a href="">博客园</a></li>
<li><a href="">新随笔</a></li>
<li><a href="">联系</a></li>
<li><a href="">订阅</a></li>
<li><a href="">管理</a></li>
</ul>
</body>
</html>
实现效果如下: