一、CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
这是一种分层设计的思想,css把和颜色,大小位置等信息剥离到<style>中,而html只用关心提供什么样的内容就行了。
二、设计使用
语法:selector {property: value}
即 选择器{属性:值}
选择所有的<p>标签:<style> p{ color:red; } </style>
直接在某一个元素上增加style属性即可达到css一样的效果<p style="color:red">红色的标签</p>
选择器:
元素选择器 :(标签)通过标签名选择元素 p
id选择器 :(id)通过id选择元素 #p
注: 一个元素的id应该是唯一的。另一个元素不应该重复使用
类选择器:(class)当需要多个元素,都使用同样的css的时候,就会使用类选择器 .p
混合选择器:同时根据元素名和class来选择 p.blue
注释style样式:/* */
尺寸大小:属性width,height 值:可以是百分比或者像素
背景颜色:属性名background-color
颜色的值可以采用3种方式
1. 预定义的颜色名字
比如red,gray,white,black,pink,参考颜色速查手册
2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的,没有绿色,蓝色是满的,即红色和蓝色混合在一起:紫色
3. 16进制的表示
#00ff00 等同于 rgb(0,255,0)
<
style
>
p.gray {background-color: gray;}
h1 {background-color: transparent}
h2 {background-color: rgb(250,0,255)}
h3 {background-color: #00ff00}
</
style
>
背景图片:
<style>
div#test
{
background-image:url(/study/background.jpg);
width:200px;
height:100px;
}
</style>
背景重复:background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复
背景平铺:属性:background-size 背景平铺,通过拉伸实现,会有失真
值:contain
文本颜色:属性名color
颜色的值可以采用3种方式
1. 预定义的颜色名字
比如red,gray,white,black,pink
2. rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的,没有绿色,蓝色是满的,即红色和蓝色混合在一起:紫色
3. 16进制的表示
#00ff00 等同于 rgb(0,255,0)
文本对齐:属性:text-align
值:left,right,center
div是块级元素,其默认宽度是100%,所以文本有对齐的空间前提。
但是,span却看不出右对齐效果,为什么呢?
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经粑在其边框上了,对齐是看不出效果来的
文本修饰:属性:text-decoration
值: overline上划线,line-througn删除线,underline下划线,blink闪烁效果,大部分浏览器已取消此效果,none(可用来去除超链接的下划线)
文本行间距:属性:line-height
值:数字或者百分比
字符间距:属性:letter-spacing
值: 数字
单词间距:属性:word-spacing
值: 数字
首行缩进:属性:text-indent
值: 数字
大小写:属性:text-transform
值:
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写
空白格:属性:white-space
值:
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器,会换行。
nowrap 一直不换行,直到使用br
字体尺寸:属性:font-size
值:数字或者百分比
<style>
p.big{
font-size:30px;
}
p.small{
font-size:50%;
}
p.small2{
font-size:0.5em;
}
</style>
<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同于 50%比例的文字</p>
字体风格:font-style:
normal 标准字体
italic 斜体
字体粗细:属性 font-weight
normal 标准粗细
bold 粗一点
字体库:属性font-family
<style>
p.f1{
font-family:"Times New Roman";
}
p.f2{
font-family:Arial;
}
p.f3{
font-family:宋体;
}
p.f4{
font-family:黑体;
}
p.f5{
font-family:楷体;
}
p.f6{
font-family:微软雅黑;
}
</style>
<p >默认字库 font family:default </p>
<p class="f1">设置字库 font-family: Times New Roman</p>
<p class="f2">设置字库 font-family: Arial</p>
<p class="f3">设置字库 font-family: 宋体, 这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family: 黑体</p>
<p class="f5">设置字库 font-family: 楷体</p>
<p class="f6">设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体</p>
字体样式混合设置:font
<style>
p.all{
font:italic bold 30px "Times New Roman";
}
</style>
<p>默认字体</p>
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>
鼠标样式:属性 cursor 鼠标光标属性值一览表http://www.w3school.com.cn/cssref/pr_class_cursor.asp
default | 默认光标(通常是一个箭头) |
auto | 默认。浏览器设置的光标。 |
crosshair | 光标呈现为十字线。 |
pointer | 光标呈现为指示链接的指针(一只手) |
move | 此光标指示某对象可被移动。 |
表格布局:属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
注:只对连续的英文字母起作用,如果使用中文就看不到效果
表格边框:属性:border-collapse
值:
separate:边框分隔
collapse:边框合并
边框风格:属性: border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
边框颜色:属性:border-color
值:red,#ff0000,rgb(255,0,0)
边框宽度:属性:border-width
值:数字
边框样式:属性:border
值:颜色 风格 宽度
边框分设:只有一个方向有边框 通过制定位置,可以只给一个方向设置边框风格,颜色和宽度
top,bottom,left,right 分别对应上下左右
<style>
div{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
background-color:lightgray;
}
</style>
<div>
只有上面有边框
</div>
边框交界:当有交界的边同时出现边框的时候,就会以倾斜的形式表现交界线
<style>
div.lefttop{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
background-color:lightgray;
}
div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>
<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框
</div>
块级元素和内联元素的边框区别:
块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等
<style>
.red{
border:1px solid red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<span class="red"> 实线红色细边框 </span><br/>
待练习:表格斑马线,美人尖(倒三角),间断下划线
元素内边距:指的是元素里的内容与边框之间的距离
属性:
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左
属性:padding
值:如果只写一个,即四个方向的值
值:如果写四个,即四个方向的值
上 右 下 左,依顺时针的方向依次赋值
如果缺少左内边距的值,则使用右内边距的值。
如果缺少下内边距的值,则使用上内边距的值。
如果缺少右内边距的值,则使用上内边距的值
元素外边距:指的是元素边框和元素边框之间的距离
属性:
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距
像span这样的内联元素,默认情况下,只有左右外边距,没有上下外边距。 为了观察上下外边距的效果,可以采用块级元素
边框模型:真正决定一个元素的表现形式,是由其边框模型决定的
由图所示
蓝色框即为内容
width:70px 表示内容的大小
红色框即为边框
内容到边框之间的距离,即为内边距 5px
灰色框,是指边框与其他元素之间的距离,即为外边距:10px
.box{
width:70px;
padding:5px;
margin: 10px;
}
超链接状态:超链状态有4种 (去除超链接的下划线:text-decoration:none)
link - 初始状态,从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去,但是尚未弹起的时候
需要使用到伪类选择器(http://www.w3school.com.cn/css/css_pseudo_classes.asp)
<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
<a href="http://www.12306.com">超链的不同状态</a>
待练习:下拉菜单风格
元素隐藏:有两种方式
display:none;
visibility:hidden;
使用display:none; 隐藏一个元素,这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素,这个元素继续占有原空间,只是“看不见”
CSS文件:如果把所有的css都写在html文件里面,一旦样式比较多的时候,就会显得不易维护
这个时候就会选择把所有的css内容,放在一个独立文件里
然后在html中引用该文件
通常这个文件会被命名为style.css
在测试的时候,大家写的css文件都是放在本地的,比如d:/style.css
这时就应该写成
href="file://d:/style.css"
<link rel="stylesheet" type="text/css" href="/study/style.css" />
样式优先级:就近原则
style属性>style标签>外部css样式属性
如果样式上增加了!important,则优先级最高,甚至高于style属性
<style>
.p1{
color:green !important;
}
</style>
<p class="p1" style="color:red">p1 颜色是绿色,优先使用!important样式</p>
绝对定位:属性:position
值: absolute
通过指定left,top绝对定位一个元素
设置了绝对定位的元素,相当于该元素被从原文档中删除了 不影响后续文本的显示
绝对定位是基于最近的一个定位了的父容器
.absdiv{
position: absolute;
left: 150px;
top: 50px;
width:215px;
border: 1px solid blue;
}
如果没有定位了的父容器,它的”最近的一个定位了的父容器” 即body
定位覆盖:通过绝对定位可以把一个元素放在另一个元素上,这样位置就重复了。
重复了,就存在一个谁掩盖谁的问题。 这个时候就可以使用
z-index属性, 当z-index的值越大,就表示放上面,z-index:越小就表示放下面。
<style>
img#i1{
position: absolute;
left: 60px;
top: 20px;
z-index:1;
}
img#i2{
position: absolute;
left: 60px;
top: 120px;
z-index:-1;
}
</style>
相对定位:属性:position
值:relative
与绝对定位不同的是,相对定位不会把该元素从原文档删除掉,而是在原文档的位置的基础上,移动一定的距离
待练习:相对定位,但是又不占用位置,结合相对定位和绝对定位实现
浮动:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
属性:float
值: left,right
文字向右浮动
浮动后,原来的“坑”就让出来了
并且是在原来的高度的基础上,向右浮动
文字向左浮动
首先,向左浮动后,会把“坑”让出来,这个时候"正常的文字4“ 就会过来试图占这个坑,但是,发现 “浮动的文字”并没有走,结果,就只好排在它后面了
文字围绕图片:当图片不浮动时,文字就会换行出现在下面
当图片浮动时,文字围绕着图片 ,当图片浮动的时候,就会让出这个“坑”出来,这个时候文字就试图去填补这个“坑”,结果发现,**,图片没走,那就只好围绕图片摆放了
文字不围绕图片:不允许出现浮动元素
属性:clear
值: left right both none
设置clear:left 即达到不允许浮动元素出现在左边的效果
水平排列div:默认的div排列是会换行的
如果使用float就可以达到水平排列的效果,通常会用在菜单,导航栏等地方
如果超出了父容器,还会有自动换行的效果
留意:div#floatingDiv div{ 后代选择器
<style>
div#floatingDiv{
width:200px;
}
div#floatingDiv div{
float:left;
}
</style>
默认的div排列是会换行的
<div>
菜单1
</div>
<div>
菜单2
</div>
<div>
菜单3
</div>
如果使用float就可以达到水平排列的效果,通常会用在菜单,导航栏等地方
如果超出了父容器,还会有自动换行的效果
<div id="floatingDiv">
<div>
菜单1
</div>
<div>
菜单2
</div>
<div>
菜单3
</div>
<div>
菜单4
</div>
<div>
菜单5
</div>
<div>
菜单6
</div>
</div>
元素显示方式:元素的display显示方式有多种,隐藏none、块级block、内联inline、内联-块级inline-block
元素隐藏:display:none; 使得被选择的元素隐藏,并且不占用原来的位置
块级元素:display:block; 表示块级元素
块级元素会自动在前面和后面加上换行,并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
内联元素:display:inline; 表示内联元素
内联元素前后没有换行,并且在其上的width和height也无效。 其大小由其中的内容决定
内联-块级:display: inline-block; 元素处于同一行,同时还能指定大小
内联是不换行,但是不能指定大小
块级时能指定大小,但是会换行
内容居中:通过设置属性align="center" 居中
通过样式style="text-align:center" 居中
元素居中:
<style>
div{
border: solid 1px lightgray;
margin: 10px;
}
span{
border: solid 1px lightskyblue;
}
</style>
<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>
<div style="width:300px;margin:0 auto">
设置本div的宽度,然后再使用样式 margin: 0 auto来使得元素居中</div>
<span style="width:300px;margin:0 auto">
span 是内联元素,无法设置宽度,所以不能通过margin:0 auto居中</span>
<div style="text-align:center">
<span>span的居中可以通过放置在div中,然后让div text-align实现居中</span>
</div>
左侧固定,右边自动占满:
<style>
.left{
width:200px;
float:left;
background-color:pink
}
.right{
overflow:hidden;
background-color:lightskyblue;
}
</style>
<div class="left">左边固定宽度</div>
<div class="right">右边自动填满</div>
垂直居中:
line-height方式 :#d { line-height: 100px; } 适合单独一行垂直居中
内边距方式 : #d { padding: 30px 0;} 借助设置相同的上下内边距,实现垂直居中效果,可以用在多行文本上
table方式 :首先通过display: table-cell;把div用单元格的形式显示,后借用单元格的垂直居中vertical-align: middle; 达到效果。
这样对图片也可以居中,上一步 line-height就不能对图片居中。
<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">
<img src="a.gif">
</div>
左右固定,中间自适应的布局:
<style>
.left{
width:200px;
float:left;
background-color:pink
}
.right{
width:200px;
float:right;
background-color:pink
}
.center {margin:0 200px; background-color:lightblue}
</style>
<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
<div class="center">中间自适应</div>
</head>
<body>
</html>
一个div始终贴在下方:
首先把蓝色div设置为相对定位
然后把内部的绿色div设置为绝对定位, bottom: 0表示贴在下面
<style>
#div1
{
position: relative;
height: 300px;
width: 90%;
background-color: skyblue;
}
#div2
{
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
background-color: lightgreen;
}
</style>
<div id="div1">
<div id="div2"> 无论蓝色div高度如何变化,绿色div都会贴在下面
</div>
</div>
块之间有空格:
使用float来解决。
float使用完毕之后,记得在下面加上 <div style="clear:both"></div> 用于使得后续的元素,不会和这些span重复在一起
<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
float:left;
}
</style>
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
<div style="clear:both"></div>
<div>后续的内容</div>