CSS(cascading style sheet,层叠样式表)是描述文档怎么样被呈现的语言,使用CSS可以对HTML文档进行描述。
html:素颜
css:化妆
CSS在网页中的使用
1)内联式 style="css"
每个HTML元素都包含有一个style属性,使用该属性可以直接指定样式
<开始标签1 style=“样式名1:值1;样式名2:值2”>
<开始标签2 style=“样式名1:值1;样式名2:值2”>
存在问题:
1.不方便修改
2.结构与显示不能很好的分离
3.建议在测试或个别情况下使用
2)嵌入式
CSS样式定义内容位于style元素之间,其type属性必须被定义为text/css,可以让不同网页位置的文字等内容有统一的格式。(同一个网页,不同的元素)
<head>
<style type="text/css">
选择器{
样式名1:值1;
样式名2:值2;
}
</tyle>
</head>
3)外部引用式
可以在多个文档间共享样式表,提高效率;可以改变样式表而无须改变HTML文档。
外部式css样式把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内
<head>
<link href="css文件位置" rel="stylesheet" type="text/css">
</head>
css文件中其他样式的导入
@import url(css文件路径);
语法:
1)CSS属性和值之间用冒号分隔
2)CSS属性之间用分号分隔(建议每个属性后都书写分号)
3)CSS的值有多个的时候使用空格分隔
4)注释:/*注释内容*/
三种方法的优先级:
当对于同一个元素同时用了三种方法设置css样式时:
内联式>嵌入式>外部引用式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。即<link href="style.css" ...>的这段引用代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。后设置的离目标属性更近,会覆盖前面设置的,总结就是:就近原则。
注:指其他条件都一样的情况下(权值)
4. CSS基本语法规则
选择器{css属性1:css值1; css属性2:css值2;}
1)选择器
用于选择html中的元素
标签选择器(html选择器)
即html标签,任何一个HTML元素的标签名都可以是css的选择器
p{ text-indent:10px} /*段落第一行缩进10像素*/
h1{ color:red}
类选择器
class属性
.类名(类名不能使用数字开头,不能使用关键字来命名)
.rr{ color :red}
使用class属性来调用类名称
<p class="rr r2">one</p>
<p class="rr">two</p>
<p class="rr">three</p>
ID选择器
id属性
#id名
#two{
background-color:green;
}
id不可重复
<p class="rr">one</p>
<p id="two" class="rr">two</p>
<p class="rr">three</p>
子选择器
使用大于符号(>),用于选择指定元素中符合条件的第一代子元素。
.p1>span
#d1>.p1
后代选择器(包含选择器)
用一个空格隔开的两个或者多个单一选择器组成的字符串
它们的优先级比单一的选择器大。用于选择指定元素中符合条件的所有后代元素。
table a{color:red}
定义了table中的a样式,而对table外的a样式不做改变
通用选择器
使用符号*指定,作用是匹配html中所有的标签元素。
*{color:red;}
组合选择器
使用逗号,隔开选择器,可以减少样式表的重复声明
h1,h2,h3,h4{color:red}
伪元素选择器(伪类选择器)
允许给html不存在的标签,对同HTML元素的不同状态设置样式。
HTML标签:伪元素{}
a:link{color:gray;} 超链接没有任何动作前的状态
a:hover{...} 光标移动到超链接上的状态
a:active{} 选中超链接时的状态
a:visited{} 访问过超链接的状态
text-decoration:none 去掉下划线
继承:
CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。
比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。
p{color:red;}
<p>文本属性<span>可以被</span>继承。</p>
span中的文字也会显示红色
/* 当然不是所有的CSS属性都有继承性,文本属性(color、font、line-height、text-align...)是具有继承性的,而自身属性(width、height、margin、padding、border、background)和显示属性(display、position、float、list-style)是不具有继承性的(等....)。*/
2)选择器优先级
多个CSS选择器同时作用于同一个html时,如果声明的是相同的属性,则以优先级高的为主。
p{color:red;}
.first{color:green;}
<p class="first">css<span>优先级</span>判断。</p>
p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
内联样式,如: style=””,权值为1000。通配符、子选择器、相邻选择器等的。虽然权值为0000,但是也比继承的样式优先。
<style>
*{ color:red;}
.blue{ color:blue;}
</style>
<body>
<p class="blue">这里的文字<em>hello</em></p>
</body>
结果是 这里的文字 是蓝色,hello显示为红色。
.blue是类选择器,所以“这里的文字”权值为10,最大。“hello”为继承,但通用选择器也定义了“hello”,因为继承的权值最低,所以显示的是通用选择器定义的红色。
内嵌式
> 关联选择器(后代,子代,组合(且))
> ID选择器
> 类选择器
> HTML选择器
层叠:当权值相同时,后者覆盖前者,就近原则
重要性:当有特殊的情况,需要为某些样式设置具有最高权值的时候我们可以使用!important来解决。拥有最高权重。
p{color:red!important;}
p{color:green;}
<p class="first">你好<span>最高权值</span>!important。</p>
p 段落中的文本会显示的red红色。
注意:!important要写在分号的前面
3)样式
样式是零个或多个以分号分割的【属性名:属性值】列表
4)规则集
选择器 样式
选择器{属性名:属性值;属性名:属性值}
5)注释
/*
注释内容
*/
5.css盒模型
1)元素分类。
1.1常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
块级元素特点:
①每个块级元素都从新的一行开始,并且其后的元素也另起一行。(比较霸道,一个块级元素独占一行
②元素的高度、宽度、行高以及顶和底边距都可设置。
③元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
设置display:block就是将元素显示为块级元素,如:a{display:block;}
1.2常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素特点:
①和其他元素都在一行上;
②元素的高度、宽度不可设置;
③元素的宽度就是它包含的文字或图片的宽度,不可改变。
块状元素可以通过代码display:inline将元素设置为内联元素,如div{display:inline;}
1.3常用的内联块状元素有:
<img>、<input>
内联-块状元素特点:
①和其他元素都在一行上;
②元素的高度、宽度、行高以及顶和底边距都可设置。
同时具备内联元素、块状元素的特点。
display:inline-block就是将元素设置为内联块状元素,如a{display:inline-block;}
2)盒模型
margin,border,padding
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。
因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。高度也是一样。
div+css
div+css是一种网页的布局方法。
标签div span无特殊含义,配合css才具有特殊的样式
网页就是由许多个盒子通过不同的排列方式堆积而成,网页上每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容,填充,边框,边界组成。默认盒子边框无,背景色透明,默认看不到盒子
2.1 盒子模型
margin 外边距,定义区块外边界与上级元素距离的属性,值为长度
padding 内边距(填充),是设置区块的内边距的属性,边框和元素内容之间的间隔距离
border 边框,在一个声明设置所有的边框属性。
width 盒子的宽度
height 盒子的高度
内容 盒子里面所包含的元素和内容
margin、padding、border的top、right、bottom、left的缩写:
1个:上下左右都是该值
2个:前者表示上下的值,后者表示左右的值
3个:前者表示上边的值,中间表示左右的值,后者表示下边的值
4个:上右下左,顺时针排序
2) 不同浏览器解析盒子模型的差异:
IE5盒子 width = 内容 + border + padding
盒子占据的宽度 = margin*2+width
盒子占据的高度 = margin*2+height
盒子实际的宽度 = width
盒子实际的高度 = height
W3C盒子 width = 内容
盒子占据的宽度 = margin*2+border*2+padding*2+width
盒子占据的高度 = margin*2+border*2+padding*2+height
盒子实际的宽度 = border*2+padding*2+width
盒子实际的高度 = border*2+padding*2+height
3)其他属性
border-width 边框高度
border-color 边框颜色
border-style 边框样式
none 无样式
dotted 点线
dashed 虚线
solid 实线
double 双线
groove 槽线
ridge 脊线
inset 内凹
outset 外凸
4)关于填充和边框的常见问题
1. 大部分的html元素的盒子属性(margin,padding)默认值为0,有少数html元素的(marigin,padding不为0)例如:body,p,ul,li,form等标签,有时需要将其先设置为0
2. 相邻两个兄弟元素的外边框会发生合并,一般布局会设定他们的外边距
3. 如果没有设置父级元素的内边距或边框,那么它的子元素的边界会和其合并。
4. 设置一个块元素居中: margin:0 auto;
5. margin可以设置负值,padding不可以设置
6. 行内元素的margin值,只有左右值,没有上下值
6. 基本布局模型
在网页中,元素有三种布局模型:
1、流动模型(Flow)
流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
特点:
①块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%,也就是独占一行。
②内联元素都会在所处的包含元素内从左到右水平分布显示。
2、浮动模型 (Float)
任何元素都可以浮动,可以改变普通文档流的排列方式,可以使得块元素在同一行中排列,使我们的布局更加方便,浮动是脱离文档流的,也就是其他元素视而不见。
float:left/right
浮动何时停止?
1. 当遇到一个浮动元素后
2. 当遇到父级元素后
多个盒子都浮动后,就产生了块级元素水平排列的效果
多个浮动元素不会相互覆盖
若包含的容器太窄,无法容纳水平排列的多个浮动元素,那么最后的浮动盒子会向下移动,但如果浮动元素的高度不同,那么它们向下移动时可能会被卡住
清理浮动
clear
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
margin上下值在行布局时共用,浮动后不再共用
3、层模型(Layer)
让html元素在网页中精确定位。position
定位属性:
绝对定位 position:absolute
是元素完全脱离文档流,将其从文档流中拖出来,页面中的其他元素视它不存在,绝对定位元素不会影响到其他元素。使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位,如果父级(祖级)不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
相对定位 position:relative
参照元素原来的位置进行移动,元素原来所在的空间位置保留不变,下面的元素不会填充上来,元素在移动后会覆盖其他元素,参考浮动。
固定定位 position:fixed
将元素固定在窗口(屏幕视图)中的某个位置,绝对定位是相对于元素的,固定定位是相对于窗口的,由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,随着窗口的移动而移动。在低版本IE中不支持该属性。
默认定位 position:static
默认属性,指定了元素按照常规的文档流进行定位,静态定位元素不允许使用top,left和类似其他属性定位。position的值为static为非定位元素,为其他值时候为定位元素。
CSS常见的样式属性和值
1)CSS 尺寸属性
height 设置元素高度。
width 设置元素的宽度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
2) 字体属性
font-family字体族科
宋体 SimSun 黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。
font-size 字体大小
font-style 字体风格
normal 正常; italic 斜体; oblique 倾斜
font-weight字体加粗
normal 正常; bold 粗体; bolder 更粗; lighter 更细
text-decoration 规定添加到文本的修饰 :
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink 定义闪烁的文本。
段落文本格式(p标签)
段落缩进:text-indent:2em; 2em意思就是文字的2倍大小。
行间距:line-height:1.5em; 1.5em段落行间距为1.5倍。
文字间隔或字母间隔:letter-spacing:2px;
英文单词之间间距:word-spacing:50px;
块状元素中的文本/图片居中:
text-align:center; /left/right
3) 颜色
color 设定文本的颜色
opcity 设置透明度
所有浏览器都支持 opacity 属性。
注释:IE8 以及更早的版本支持替代的 filter 属性。
例如:filter:Alpha(opacity=50)。
一般两个属性一起写,保证兼容性
opacity:0.5;
filter:Alpha(opacity=50)
4) 背景
设置元素的背景颜色。background-color:#CCC;
background-image
设置元素的背景图像。
url(bgimage.gif);
background-repeat
设置是否及如何重复背景图像。
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
fixed 固定
scroll 滚动
background-position
设置背景图像的开始位置。这个属性设置背景原图像(由 background-image 定义)的位置, 背景图像如果要重复,将从这一点开始。您需要把 background-attachment属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
横向关键字: left center right
纵向关键字: top center bottom
百分比:
左上角是 0% 0%。右下角是 100% 100%。
background
简写属性在一个声明中设置所有的背景属性。如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
5) 边框属性
border-style 设置4个边框的样式
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
none 定义无边框
...
如果4个值都给定了,分别应用于上,右,下;
左如果给定1个值,应用于各边;
如果给定2个值,第一个值应用于上下边,第二个值应用于左右边
border-width 设置4个边框的宽度
值为关键字或者长度 medium,thin,thick
border-color 设置边框颜色
border 在一个声明设置所有的边框属性。
border:1px solid #ff0000
6) 鼠标光标属性
cursor 属性规定要显示的光标的类型(形状)。
none 无
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针(一只手)
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。
7) 列表属性
list-style 在一个声明中设置所有的列表属性。
list-style: squalistre inside url('/i/eg_arrow.gif')
list-style-image 将图象设置为列表项标记。
list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置。
inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标
记放置在文本以外,且环绕文本不根据标记对齐。
list-style-type 设置列表项标记的类型。
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)