CSS学习笔记
1.CSS全称为“层叠样式表(Cascading Style Sheets)”,他主要用于定义 HTML内容在浏览器中的样式
2.CSS样式由选择符和声明(选择器)组成,而声明又由属性和值组成
3.CSS注释格式:/**/
4.CSS代码插入形势:内联式,嵌入式,外部式(<link href="mystyle.css" rel="stylesheet" type="text/css"/>)(优先级:内联式>嵌入式>外部式)
5.选择器:a.标签选择器(标签名) b.类选择器([标签名]'.'+类名)c.ID选择器('#'+id) d.子选择器(选择器'>'第一代子元素)e.包含选择器(选择器' '后辈元素)f.通用选择器('*')g.伪类选择器(标签名':'该标签的某种状态)h.分组选择符(可以用','分割为多个声明,设置同一样式)
6.类选择器和id选择器的异同:a.页面上一个id只能出现一次,一个类可以重复出现
b.一个标签只能有一个id值,却可以并列有多个class值
7.继承:CSS的某些样式是具有继承性的,继承是一种规则,它允许样式不仅用于某个特定的html标签元素,而且应用于其后代。
8.权值:当一个标签的样式冲突时,浏览器根据权值判断使用哪种样式(标签的权值为1,类选择符的权值为10,ID选择符的权值为100,继承也有权值但很低)
9.层叠:当同一个标签的不同样式权值也一样时,后面的样式会覆盖前边的样式
10.重要性:有些特殊情况需要为某些样式设置具有最高权值,这时候可以使用!important来解决,(!important要写在分号前边)
11.元素分类:块状元素、内联元素(行内元素|inline)、内联块状元素
常用的块状元素:<div>,<p>,<h1>,<ol>,<ul>,<dl>,<table>,<address>,<blockqute>,<form>
常用的内联元素:<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
常用的内敛块状元素:<img>,<input>
12.块级元素特点:(display:block;将内联元素转换为块级元素)
a.每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行)
b.元素的高度,宽度,行高以及顶和底边距都可设置。
c.元素的宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。
13.内联元素特点(display:inline;将元素设置为内联元素):
a.和其他元素都在一行上。
b.元素的高度宽度已经顶部和底部的边距不可设置。
c.元素的高度就是它包含的文字或图片的宽度,不可改变。
14.内联块状元素特点:(display:inline-block;将元素设置为内联块状元素)
a.和其他元素都在一行上;
b.元素的高度、宽度、行高以及顶部和底部边距都可设置。
15.CSS布局模型:流动模型(Flow)、浮动模型(Float)、层模型(Layer)
16.流动模型(是默认的网页布局模式):
a.块状元素都会在包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下块状元素的宽度都为100%.
b.内联元素都会在所处的包含元素内从左到右水平分布显示。
17.浮动模型(可以用(float:left/right;)将部分元素定义为浮动):
18.层模型(可以使每个图层能够精确定位):
a.绝对定位:position:absolute;这条语句的作用将元素从文档流中拖出来,然后使用left,right,top,bottom,属性相对于其最近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
b.相对定位:position:relative;它通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置。相对定位完成过的过程是首先按照static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的移动位置,移动的方向和幅度由left,right,top,bottom属性确定,偏移前的位置保持不动。
c.固定定位:position:fixed;表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的位置,或者改变浏览器窗口的显示大小,因此固定的定位的元素始终位于浏览器窗口视图内的某个位置,不会受文档流的影响,这与background-attachment:fixed;属性功能相同。
19.margin,padding,border值缩写:
a.margin:10px 10px 10px 10px; -->margin:10px;
b.margin:10px 10px 20px 20px; -->margin:10px 20px;
c.margin:10px 20px 30px 20px; -->margin:10px 20px 30px;
20.css十六进制表示的颜色也可以缩写:如果每两位的值相同,可以缩写一半(#cccccc --> #ccc)
21.颜色设置的三种方式:
a.英文命令设置颜色:p{color:red;}
b.RGB颜色:p{color:rgb(133,45,200);}
c.十六进制颜色(常用):p{color:#00ffff;}
22.CSS长度值单位(px,em,%):
ps:a.em就是本元素给定字体的font-size值,如果元素的font-size为14px那么1em=14px;但当给font-size设置的单位是em时,此时甲酸的标准以父元素的font-size为基础。
23.水平居中设置
a.内联元素:给父元素设置(text-align:center;)来实现。
b.定宽块状元素:满足定宽和块状两个条件的元素是可以通过设置"左右margin"值为"auto"来实现居中。(margin:20px auto;或者 margin-left:auto;margin-right:auto;)
c.不定宽块状元素:三种方法,一是加入table标签(为table标签设置margin:0 auto;);二是设置display:inline;(将元素显示类型设置为内联元素,给父元素设置text-align:center;);三是设置position:relative;和;left:50%(利用相对定位的方式,将元素向左偏移50%,即达到居中的目的。)
24.垂直居中-父元素高度确定的单行文本:设置父元素height和line-height(行间距)高度一致。(弊端:当文字内容长度大于块的宽度时,就有内容脱离了块。)
25.垂直居中-父元素高度确定的多行文本:
a.方法一:使用插入table(包括tbody,tr,td)标签,同时设置vertical-align:middle。CSS中有一个用于竖直居中的属性vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。
b.方法二:chrome,firefox,及IE8以上的浏览器可以设置块级元素的display:table-cell;(设置为表格单元显示),激活vertical-align;属性。
26.隐性改变display类型:当为元素(不论之前是什么类型元素,display:none除外)设置(position:absolute;或者float:left/right;)之一时,元素display类型就会自动变为display:inline-block;的方式显示,可以设置宽高,同时默认宽度不占满父元素。
常用具体样式
1.文字排版:
p{
font-size:12px;/*字号*/
color:red;/*文字颜色*/
font-weight:bold;/*加粗*/
font-family:"Microsoft Yahei";/*字体*/
font-style:italic;/*斜体*/
text-decoration:underline;/*下划线*/
text-decotation:line-through;/*横穿的线,删除线*/
text-indent:2em;/*缩进2个字符*/
line-height:1.5em;/*1.5倍行间距*/
letter-spacing:2px;/*字母间距*/
word-spacing:5px;/*单词间距*/
}
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句:
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
ps:
a.使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
b.在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
2.段落排版:
h1{
text-align:center;/*居中*/(lift,right)
}
3.盒模型样式(块级元素):
div{
width:200px;/*宽度*/
height:200px;/*高度*/
padding:10px 10px 10px 10px;/*内边距(上 右 下 左)*/
maigin:10px 10px;/*外边(上下 左右)*/
border:2px solid red;/*边框的粗细,样式(dashed,datted,solid),颜色*/
}
4.浮动模型样式:
div{
float:left/right;
}
5.层模型-绝对定位:
div{
width:200px;
height:200px;
border:2px solid red;
left:100px;
top:50px;
}
6.层模型-相对定位:
div{
width:200px;
height:200px;
border:2px solid red;
position:relative;
left:100px;
top:50px;
}
7.层模型-固定定位:
div{
width:200px;
height:200px;
border:2px solid red;
position:fixed;
left:100px;
top:50px;
}
8.不定宽块状元素居中-方法一(table):
为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
举例如下:
html代码:
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css代码:
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
9.不定宽块状元素居中-方法二();
改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。如下例子:
html代码:
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码:
<style>
.container{
text-align:center;
}
/* margin:0;padding:0(消除文本与div边框之间的间隙)*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px(设置li文本之间的间隔)*/
.container li{
margin-right:8px;
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
10.不定宽块状元素居中-方法三(position:relative;):
通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。
代码如下:
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码:
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{
float:left;
display:inline;
margin-right:8px;
}
</style>
11.垂直居中-父元素高度确定的单行文本:
line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。
如下代码:
<div class="container">
hi,imooc!
</div>
css代码:
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
12.垂直居中-父元素高度确定的多行文本(方法一):
css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。下面看一下例子:
html代码:
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码:
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
13.垂直居中-父元素高度确定的多行文本(方法二):
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码:
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代码:
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7而且这样修改display的block变成了table-cell,破坏了原有的块状元素的性质。