CSS样式表
CSS样式表的样式主要可以分为大小,背景,字体,对齐方式,边界边框,列表方块,格式布局等。
元素的大小:
#div1{
width:300px;
height:1000px;
}
width:宽度,单位可以使用百分比或者像素
height:高度,单位可以使用百分比或者像素
如果没有内容且不设置高度和宽度在页面是看不到。
背景:
#div1{
width:300px;
height:1000px;
background-color:#0C0;
background-image:url(preview.jpg);
background-repeat:no-repeat;
background-position:center;
background-attachment:scroll;
background-size:200px 250px;
}
background-color:背景颜色
background-image:背景图片,在页面中背景图在背景颜色上边
background-repeat:背景图片的平铺方式
常用的有:
background-repeat:repeat;平铺,默认选项
:no-repeat;不平铺
:repeat-x;横向平铺
:repeat-y;纵向平铺
background-position:背景图的位置,图片默认出现在左上角
常用的有:
background-position:top;上
:bottom;下
:left;左
:right;右
:center;居中
background-position还可以使用空格和像素来达到靠右下角并且留有一定距离的效果
#div1{
background-position:bottom 20px right 20px;
}
background-attachment:背景图是否随着滚动条滚动
主要有:
background-attachment:fixed;不滚动
:scroll;滚动
background-size:背景图的大小,可以自己设置像素大小,也可以根据提示这只自动等
文字:
#div1{
font-family:微软雅黑;
font-size:.5em;
font-style:italic;
font-weight:bold;
text-decoration:line-through;
color:#666;
text-indent:-5em;
}
font-size:字体大小,可以用像素表示,普通正文一般用14px,页脚一般用12px,也可以用百分比或者em表示,200%是默认字体的两倍,.5是默认字体的0.5倍
font-family:字体样式,原则上不能使用太过花哨特殊的字体,因为用户电脑上可能没有,特殊情况可以使用图片代替
color:文字颜色
font-weight:bold;加粗
font-style:italic;倾斜
text-decoration:underline;下划线
none;去掉下划线
line-through;删除线
text-indent:首行缩进,特殊情况可以使用负号
文字对齐方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
height:50px;
background-color:#9CC;
text-align:center;}
#div2{
height:50px;
background-color:#666;
text-align:right;
vertical-align:center;
line-height:50px;
}
</style>
</head>
<body>
<div id="div1">这是第一个div中的文字</div>
<div id="div2">这是第二个div中的文字</div>
</body>
</html>
text-align:水平对齐方式
center;居中
left;左
right;右
vertical-align:垂直对齐方式,单独设置没有效果,需要和行高配合使用
middle;居中
top;上
bottom;下
line-height:行高
边界与边框:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
height:100px;
width:100px;
border:1px #000033 solid;
margin:10px 20px 30px 40px;
padding:10px 20px 30px 40px;}
#div2{
height:30px;
width:20px;
border:1px #00FF00 solid;}
</style>
</head>
<body>
<div id="div1">
<div id="div2"> </div>
</div>
</body>
</html>
margin:外边距,用像素表示,顺序依次为上右下左,顺时针方向,也可以分别用margin-top/right/bottom/left来设置,如果只写一个表示四个方向的距离均为此值。
padding:内边距,和margin相同,都是用像素,上右下左,也可以分别设置,如果使用了padding,该元素会相应变大
border:边框,可以同时设置宽度,颜色,边框线,用空格隔开,也可以单独设置,border也可以单独设置上/下/左/右边框,边框的大小也是包含元素里面的
关于border,还有很多用法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
width:0px;
height:0px;
border-top:100px solid #000;
border-right:100px solid #FFF;
border-bottom:100px solid #FFF;
border-left:100px solid #FFF;}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
可以利用border的特性制作一些不规则的形状。
列表与方块:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#ol1{
list-style:none;}
#ol2{
list-style-image:url(%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA7.gif)}
</style>
</head>
<body>
<ol id="ol1">
<li>第一项</li>
<li>第二袭</li>
<li>第三幕</li>
<li>第四部</li>
</ol>
<ol id="ol2">
<li>第一项</li>
<li>第二袭</li>
<li>第三幕</li>
<li>第四部</li>
</ol>
</body>
</html>
list-style:列表符号的样式
inside 符号在元素里面
outside 符号在元素外部
none 没有符号
list-style-image:列表前面加图片作为排序符号
格式与布局:
格式与布局比较复杂难以理解
position:
下面举例来说明:
absolute; 绝对定位(相对于浏览器边界)
选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。简单来说,如果div中没有设置定位,他里面再套一个div设置绝对定位,里面的div不会出现在外面div里面。如果两个div都设置absolute,里面的div就是相对外div来进行定位的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
height:200px;
width:200px;
background-color:#006;
position:absolute;
top:20px;
right:30px;
}
.d1{
width:100px;
height:500px;}
</style>
</head>
<body>
<div id="div1">
</div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
</body>
</html>
拉动滚动条,位置随之改变。
fixed 固定位置:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
height:200px;
width:200px;
background-color:#006;
position:fixed;
top:20px;
right:30px;
}
.d1{
width:100px;
height:500px;}
</style>
</head>
<body>
<div id="div1">
</div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
</body>
</html>
拉动滚动条,位置不变。
relative 相对定位,相对于该元素本该出现的位置:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
background-color:#0F0;
position:relative;
top:20px;
left:30px;
}
</style>
</head>
<body>
这是一段文字
<div>这是div中的文字</div>
<div id="div1">
这是相对定位div中的文字
</div>
</body>
</html>
在原本应该出现的位置偏移。
需注意的是,只要加了position,该元素就和其他元素不在同一层了,原本被挤下去下面的元素就会浮上来。
设置居中:margin:0px auto;
流式布局:
做网页布局。可以让元素流动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1{
margin:10px;
width:100px;
float:right;
background-color:#999;}
#nr{
height:300px;
width:100%;
background-color:#063;}
</style>
</head>
<body>
<div class="div1">首页</div>
<div class="div1">产品介绍</div>
<div class="div1">发展历史</div>
<div class="div1">个人中心</div>
<div class="div1">相关内容</div>
<div class="div1">联系我们</div>
<div style="clear:both"></div>
<ul style="list-style:none;">
<li class="div1">首页</li>
<li class="div1">首页</li>
<li class="div1">首页</li>
<li class="div1">首页</li>
<li class="div1">首页</li>
<li class="div1">首页</li>
</ul>
<div style="clear:both"></div>
<div id="nr"></div>
</body>
</html>
float:left/ight; 向左/右流,会随着浏览器大小适应
截断流:<div style="clear:both"></div>
z-index:给元素设置一个层级,数字越大越靠上
其他:
HTML和css使用的注释不同,在HTML代码中使用<!-- -->,但是在css中该注释无效,应使用/* */。
:hover鼠标移上的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
margin: 10px;
height:200px;
width:200px;
background-color:#333;
border-radius:15px;}
#div1:hover{
background-color:#030;
cursor:pointer;
box-shadow: 10px 10px 10px blue;
border-radius:15px;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div1"></div>
</body>
</html>
如图,两个方块应用的是同样的样式,下面方块是鼠标移上去的效果。应用方法是在选择器:hover,然后正常应用各种样式就好。
cursor:pointer; 鼠标的光标变成手
border-radius:5px;圆角,像素的多少代表圆角的弧度
box-shadow:0 0 5px white; 阴影效果,每个方向阴影的大小以及颜色
display:none隐藏 block显示 隐藏不占位置
visibility:hidden 隐藏 visible 显示 隐藏占位置 overflow:hidden; 超出部分隐藏
需要注意的是,<sapn>标签的大小是由内容决定的,单独设置标签的大小没有意义,但是,如果给它display:block使它块状显示,就可以,会达到和<div>相似的效果。
透明效果:
opacity:0.2;
-moz-opacity:0.2;
filter:alpha(opacity=20);
这三种方式均可达到透明效果,是不同CSS标准的写法,由于有些不同浏览器支持不同的标准,所以最好全部写上。
- Ubuntu12.04安装QQ for Linux
- 树莓派:最好的安排
- idea 高级调试技巧
- JS魔法堂:彻底理解0.1 + 0.2 === 0.30000000000000004的背后
- mybatis: 利用多数据源实现分库存储
- 树莓派:文本编辑器与文件
- Java常用类(三)之StringBuffer与StringBuidler
- 使用监听器:定时清除map缓存
- 树莓派:光阴的故事
- lombok在IntelliJ IDEA下的使用
- 基础野:细说浮点数
- 微信开发如何保证access_token/jsapi_ticket长期有效
- struts2(五)之struts2拦截器与自定义拦截器
- 自定义的html radio button的样式
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- dotnet tool 工具安装提示 Could not find a part of the path 安装失败
- dotnet core 进行 XML 序列化抛出 XmlSerializers dll 文件找不到
- C# dotnet 高性能多线程工具 ExecuteOnceAwaiter 只执行一次的任务
- 一道Postgresql递归树题
- 突击并发编程JUC系列-JDK1.8 扩展类型 LongAdder
- 利用tensorflow训练简单的生成对抗网络GAN
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.7):运算符(基本算数运算符、原码、反码、补码)
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.6):基本数据类型及字符集编码(字符编码和char型)
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.6):基本数据类型及字符集编码(整型、浮点型、布尔型)
- 多图详解Spring框架的设计理念与设计模式
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.2-3.5):标识符、关键字、注释、变量及常量
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.1):一个简单的例子
- 详解Java解析XML的四种方法
- 《Java从入门到失业》第四章:类和对象(4.6):类路径
- 《Java从入门到失业》第四章:类和对象(4.5):包