1. css概念
CSS(Cascading Style Sheets) 层叠样式表(结构,表现,行为)中的表现
2. CSS引入方式*
2.1.行内样式
在开始标签上加style属性,样式值是style的属性值
直接使用标记的style属性
<div style=" width:100px; height:100px; background-color:#F00;”>hi</div>
2.2 内嵌式
所有的样式都写在<style></style>内,<style></style>一般放在<head></head>内
2.3 外链式
所有的样式均写到一个单独的文件内(该文件后缀名.css),通过
<link rel="stylesheet" href="文件.css" type=”text/css”>
来连接到html文件里。link标签一般放到head标签内部
2.4 导入式(了解)
使用@import指令可以将css文件中的css样式导入到不同的地方
a. 导入式的结果和直接书写是同样的效果
b.导入式可以共享样式代码
c.可以在内嵌式里使用导入,也可在css文件中使用
d.导入样式的使用方法
@import url(“sheet1.css”);
@import“sheet1.css”;
3. 样式优先级:(就近原则)
原则:谁离标签近,谁的优先级高
CSS语法规则
选择器{
样式属性名 : 属性值 ;
...
}
4. CSS 选择器
基础选择器
- 1.标签(元素)选择器
标签名{ } ----------p{ } a{ } - 2.类选择器
.类名{ }------------ .class{ } - 3.id选择器
id值{ } ------------#id{ } - 4.通配符选择器(选择所有)
*{ }
复合选择器
- 5.后代选择器(包含选择器)
选择符a 选择符b {规则} -----a b{ } - 6.直接后代(子元素)选择器
选择器 a > 选择器b(选择器b必须是选择器a的子)
.box>span - 7.分组选择器(逗号分开)
div,span,p{ } - 相邻兄弟选择器(+)
<style type="text/css">
.main h1+p{
background-color: #7FFFD4;
}
</style>
<div class="main">
<p>1</p>
<h1>2</h1>
<p>3</p> //选中
<h1>4</h1>
<p>5</p> //选中
<p>6</p>
</div>
- 9.伪类选择器
a:link{color: #000000;} 访问前
a:visited{color: #0000FF;} 访问后状态
a:hover{ color: #00FF00;} 鼠标悬停状态
a:active{color: #8A2BE2;} 鼠标激活状态
5. 选择器优先级:
权重:
着重! important;(10000)>内联样式(1000)>id(100)> class (10)>标签(元素选择器)(1)> 通配符(0.5)
! important;
易忘的css属性
div {
cursor: pointer;
}
6. css长度单位
px和em
- px,像素
根据显示器分辨率的不同,像素的大小也是不同的 - em,以当前字符的高度为基准
如果当前字体的高度为12px,那么1em就是12px
注意:一般以font-size为准,如果没有定义font-size,则以浏览器默认大小(16px)为准 - cm/mm/pt/pc
主要用在非显示器输出上,如打印
如果网页在显示器上显示,则这些单位将转换为一定的像素显示,即长度也是依靠显示器分辨率的
7. css中颜色的表示
网页中颜色采用RGB模式显示(显示器)
1.RGB颜色在CSS中的表达方式
A.直接使用颜色的英文单词,如red
注意:很多浏览器不支持颜色的单词表示
1. 使用三色的数值,如rgb(120,222,100)
注意:数值在0~255之间
使用三色的百分比,如rgb(10%,20%,100%)
red rgb(255,0,0) blue rgb(0,0,255) black(0,0,0)
green rgb(0,255,0) white rgb(255,255,255)
2. 使用三色数值的十六进制,如#0000ff
注意:推荐使用这种方式,十六进制值前加#
rgb red #ff0000 #f00 blue #0000ff #00f black #000000 #000
8. css中字体样式 ( font )
1. font-family
指定字体
可以为文字指定多个字体,不同字体间用“,”隔开
字体名字中间有空格的,要用双引号引起来
2. font-size
字体大小
多用px/em单位
3. font-style
字体倾斜效果
normal不倾斜、oblique和italic****倾斜
Italic是使用文字的斜体,Oblique是让没有斜体属性的文字强制倾斜!
4. font-weight
字体粗细
大多浏览器可以实现:正常和加粗效果
9. 文本属性
1. text-indent
段落内容首行缩进(悬挂缩进)
2.字词间距
- 英文文本
letter-spacing 字母和字母间距 : normal / 数值
word-spacing 单词和单词间距 - 中文文本
letter-spacing 字和字之间的间距
3. text-align
文本的水平位置
- left,左对齐(默认值)
- right,右对齐
- center,居中对齐
- justify,两端对齐
- justify对于主要用于英文
只能对多行中的非最后一行进行两端对齐
4. vertical-align
baseline/top/text-top/middle/bottom/.. 垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
- text-transform
5.英文字母大小写转换
- uppercase 全大写
- lowercase 全小写
- capitalize 首字母大写
6.text-decoration(下划线/中划线上划线)
文本的装饰效果
- none 无修饰
- underline 下划线
- line-through 中划线/删除线
- overline 上划线
7. overflow:
内容溢出处理
overflow: visible(默认)/ 溢出部分 可见
hidden(超出部分隐藏)/
scroll(出现滚动条)/
auto(浏览器自动处理)
text-overflow:clip(不显示省略标记,简单裁切) | ellipsis(文本溢出显示省略标记)文本溢出处理
white-space: normal / pre(空白被保留)/nowrap(不换行)/pre-wrap(只对中文起作用,强制换行)....
word-break:break-all(只对英文起作用,以字母作为依据,强制换行)/break-word(只对英文起作用,以单词作为依据,强制换行)
元素空白的处理
overflow-x:hidden;
overflow-y:scroll;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
1.单行超出隐藏
div {
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //用省略号显示
white-space:nowrap; //不换行
}
2.多行超出隐藏
div{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 从上到下垂直排列子元素
-webkit-line-clamp:2; //显示的行数
}
3.表格中单行超出隐藏
table{width:100%;table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */}
td{
width:100%;
word-break:keep-all; // 不换行
white-space:nowrap; // 不换行
overflow:hidden;
text-overflow:ellipsis;
}
4.css多行文本省略号,字母,数字不能变为省略号
在多行文本省略号的基础上添加 word-wrap:break-word;
( 通知浏览器不按单词处理元素)
b.兼容各种浏览器的方法
(1)利用伪类(IE6/IE7不支持)
<style>
.content {
display: inline-block;
width: 400px;
height: 56px;
line-height: 28px;
margin: 50px 0 0 50px;
border: 1px solid red
overflow: hidden;
}
.ellipsis::after{
content: "...";
display: inline;
}
</style>
</head>
<body>
<div class="app">
<span class="content">你问我为何时常沉默,有的人无话可说,有的话无人可说.你问我为何时常沉默,有的人无话可说,有的话无人可说.
</span>
<span class="ellipsis"></span>
</div>
</body>
(2)利用定位和padding-right
<style>
.content {
width: 400px;
height: 56px;
line-height: 28px;
margin: 50px 0 0 50px;
border: 1px solid red;
overflow: hidden;
padding-right: 12px; /* 留出省略号位置 */
position: relative;
}
.ellipsis{
position: absolute;
right:10px;
bottom: 0;
}
</style>
</head>
<body>
<div class="content">你问我为何时常沉默,有的人无话可说,有的话无人可说.你问我为何时常沉默,有的人无话可说,有的话无人可说.
<span class="ellipsis">...</span>
</div>
滚动条设置
/* 滚动条整体宽度 */
::-webkit-scrollbar {
width: 30px; /*对垂直流动条有效*/
height: 20px; /*对水平流动条有效*/
}
/* 滚动条背景样式 */
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3);
background-color: red;
border-radius: 8px;
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
border-radius: 7px;
webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E8E8E8;
}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
height: 5px;
width: 10px;
background-color:cyan;
}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
/* border-radius: 50%; */
background:khaki;
}
10. 伪类
- :link 未访问状态
- :visited 访问后状态
- :hover 鼠标悬停状态
- :active 鼠标激活状态
原则:
LoVe HAte 爱恨原则
11. display & visibility
display
CSS使用display设置的标签的显示方式
- block ------- “块”元素(独占一行,可设置宽高)
- inline -------- “行内”元素(多个元素占一行,不能设置宽高)
- inline-block ------ 行内块元素(多个元素占一行,可以设置宽高)
- none ------ 隐藏(空间释放)
<div>主要用于HTML文档中独立的“大块”内容
<span>主要用于HTML文档中需要特别定义的内容
visibility
visibility:hidden(元素不可见,但空间依然被占用)
visibility:visible(元素可见)
12. 盒子模型
a. border
边框的三个方面(webkit、firefox和ie)
- border-width 边框宽度
- border-color 边框颜色
- border-style 边框样式
none 无边框
solid 实线
dotted 点状线
dashed 虚线
double 双实线
缩写:
border : border-width值 border-style值 border-color值 ;
border-top
border-bottom
border-left
border-right
分开单独设置:
border-left-width:1px;
border-left-color:#00F;
border-left-style:solid;
使用综合属性
border-left:1px #00F solid;
注意:三个值没有先后顺序,中间用空格隔开
b. padding(内边距)
边框和内容之间的空白宽度
缩写:
padding : 值 ;------ 四个内边距一样
padding : 值1 值2 ; -----值1代表上、下内边距,值2代表左、右内边距
padding :值1 值2 值3 ;--值1代表上内边距,值2代表左右内边距,值3代表下内边距
padding : 值1 值2 值3 值4 ; 值1代表上内边距,值2代表右内边距,值3代表下内边距,值4代表左内边距,按照顺时针方向,上右下左。
注意:这个部分只有空白,不能设置外观样式,颜色等,只能设置空白的宽度
padding的综合设置
例:padding:2px;(四个内边距都为2px)
padding的单边设置
例:padding-left:2px;(左边的边框和内容之间的距离为2px)
c. margin(外边距)
缩写: 同padding
margin : 值;
margin : 值1 值2;
margin : 值1 值2 值3;
margin : 值1 值2 值3 值4;
margin:0 auto; 块元素水平居中标签和它相邻的标签之间的空白宽度
外边距的设置是相叠加的
margin的综合设置
例:margin:10px;(和四边临近的标签的距离都为10px)
margin的单边设置
例:margin-left:10px;(标签距左边10px)
特别
<body>标签的margin代表内容与浏览器边框的距离
两个行内元素的margin-right和margin-left,采用“和”
两个块元素的marign-top和margin-bottom,采用“最大值”
13. background
a. background-color
定义标签的背景颜色
b. background-image
定义背景图片,可定义多背景
background-image: url(images/bg-hotlink.png);
background:red url(xx.png) no-repeat -200px 300px;
backgroung-color:red;
background-image: url(xxx.png);
background-repeat:no-repeat;
background-position:-200px 300px;
c. background-repeat
定义背景图片的显示方式
repeat,图片重复
repeat-x,图片横向重复
repeat-y,图片纵向重复
no-repeat,图片不重复
d. background-position
定义背景图片的位置
直接使用两个定位单词,例:background-position: right top;
使用x、y坐标,例:background-position: 20px 30px;
e. background-size
定义背景图片的大小
background-size: length | percentage | cover | contain;
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。(可能会裁剪图片)
contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。(可能会出现空白)
f. background-origin
定义背景图片的渲染位置
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
g. background-attachment
定义背景图片是否固定或者随着页面的其余部分滚动
background-attachment:fixed(固定)| scroll(默认)
14. 文档流
标准文档流”
Normal Document Stream
浏览器解析HTML代码的基本方式,根据标签的不同“display”来确定标签的定位和显示方式
15. Folat(浮动)
float:造成标签“浮动”,影响“文档流”的空间
float:left;“左浮动”
float:right;”右浮动”
none 默认 不浮动
folat浮动之后display自动变为block
对span元素添加一个float:left,span元素已经“块”化。
16. position(定位)
除了基于“文档流”的定位,CSS还定义了标签的其他定位方式,CSS使用position属性指定标签的定位方式
position的值
static 默认值,即使用基于“文档流”的定位
relative 相对定位,即在“文档流”的基础上,结合left和top属性,相对定位
absolute 绝对定位,即脱离“文档流”,并基于它的“包含框”,使用left和top属性来定位
fixed 固定定位,即特殊的绝对定位,即它的“包含框”为浏览器
a. position:relative;
relative 相对定位:相对于原来正常文档流的自己定位
注意
相对与原来的位置,使用left,right进行偏移
原来的位置对于后继元素的定位(float)依然有效
对于使用float的元素,realative也同样起作用
b. position:absolute;
absolute 绝对定位
注意:
绝对定位脱离了”文档流“,
使用绝对定位时,注意找准”包含框“,即包含该标签,并且距它最近的父,position不等于static的标签
如果没有,那么将以浏览器左上角为准来定位
特点:
只定义position:absolute;没设置left和top,标签位置仍安“文档流”定位,但已经“脱离文档流”
b. position:fixed;
fixed(固定定位)
fixed 固定定位
始终相对于浏览器定位
17. 清除浮动
浮动的元素会脱离正常文档流,释放空间不占用高度而浮于文档上方,使其父元素高度坍塌。常见情况有,下面的元素向顶部移动以及浮动导致父元素高度为零,这时就需要清除浮动。
清除浮动的4种方法:
- 给父元素手动添加 height
- 给父元素加overflow:hidden( 原理是voerflow会触发BFC(块级格式化上下文),BFC渲染页面的规则中,浮动元素也占用高度)
- 在所有有浮动的元素后加一个空元素,给此空元素加样式
clear:both / left / right / none
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左右浮动
clear:none 不浮动
- 给父元素加伪元素 ::after(给需要清除浮动的父元素,添加类名clearfix,在css中添加伪类)
.clearfix::after{ display:block; content:""; clear:both ; }
clear清除浮动
例:
<style>
.box{
width:300px;
height: 200px;
background-color: #ccc;
}
.box::before{
display: block;
content:"哈哈哈哈";
}
.box::after{
display:block;
content:"呵呵呵";
}
伪元素清除浮动
.box{
width:1000px;
margin:0 auto;
background-color: #ccc;
/*orerflow:hidden;*/
}
.box .left{
float: left;
width:300px;
height: 200px;
background-color: #f00;
}
.box .box2{
float: left;
width:500px;
height: 100px;
background-color: #00f;
}
.clearfix::after{
display: block;
content:"";
clear:both;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="left"></div>
<div class="box2"></div>
</div>
</body>
18. 列表样式
list-style
list-style-type 列表样式类型
- none 无列表样式
- disc 实心圆
- circle 空心圆
- square 实心方块
- decimal 数字
list-style-image
列表样式图片
url("图片路径")
list-style-position
列表样式位置
outside 样式在外侧
inside 样式在内部
缩写
list-style:none
opacity 不透明度
rgba(0,0,0,0.5)【只透明背景】
opacity【文字图片都透明】
取值范围 0-1
兼容ie8以下版本
filter:alpha(opacity=数值) 数值取值范围0-100
.box{
/*display: none;*/
/*opacity: 0;*/
/*visibility: visible;*/
visibility: hidden;
width: 500px;
height: 300px;
background-color: rgb(255,0,0);
}
.box:hover{
/*background-color: rgba(255,0,0,.4);*/
opacity: 0.4;
filter:alpha(opacity=40);
}
/*img{
opacity:0.4;
}*/
列表样式
- list-style-type: disc;实心圆
- list-style-type: circle; 空心圆
- list-style-type: none; 无样式
- list-style-type: square; 实心方块
- list-style-type: decimal; 阿拉伯数字
- list-style-image:url("images/chui.png"); 列表样式图片
- list-style-position: inside;
- list-style:none;
盒子模型
W3C 盒子模型:
W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 IE 盒子模型的范围也包括 margin、border、padding、content
IE 盒子模型:
和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding。
box-sizing的使用
如果想要切换盒模型也很简单,这里需要借助css3的box-sizing属性
box-sizing: content-box --------是W3C标准盒子模型
box-sizing: border-box ---------是IE盒子模型
inherit:继承父元素的box-sizingbox-sizing的默认属性是content-box
弹幕标签marquee
marquee的作用是创建一个滚动的文本字幕
语法:<marquee>...</marquee>; 在标记“…”之间添加要进行滚动的内容。
重要属性:
1.滚动方向direction(包括4个值:up、 down、 left和 right)
语法:<marquee direction="滚动方向">...</marquee>
2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)
语法:<marquee behavior="滚动方式">...</marquee>
3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)
语法:<marquee scrollamount="5">...</marquee>
4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)
语法:<marquee scrolldelay="100">...</marquee>
5.滚动循环loop(默认值是-1,滚动会不断的循环下去)
语法:<marquee loop="2">...</marquee>
6.滚动范围width、height
7.滚动背景颜色bgcolor
8.空白空间hspace、vspace
<html>
<head>
<style type="text/css">
#dynamic_text
{
width:740px;
height:32px;
margin:20px auto 10px auto;
border:1px solid gray;
float:left;
}
</style>
</head>
<body>
<div id="dynamic_text">
<marquee align="left" behavior="scroll" bgcolor="white" direction="left" hspace="0" vspace="0" weith="800" height="27" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
<p style="color:#1F202B;font-size:12px;font-family:宋体;">国务院教育督导委员会办公室主任、教育部教育督导局局长何秀超,教育部基础教育一司司长吕玉刚,湖南省人民政府副省长、秘书长向力力,中南大学党委书记高文兵、校长张尧学,教育部和湖南省相关部门负责人参加督查。</p>
</marquee>
</div>
</body>
</html>