1 CSS:cascading stylesheet,级联(层叠)样式表
数据和表现分离,统一的样式控制
W3C
定义了CSS:统一使用CSS
的语法来定义所有元素的外观
没有使用CSS之前:将每个样式使用属性的方式来定义,不能统一控制,
不能实现数据和表现的分离
2
CSS
的基础语法
用于定义样式
样式属性的名称:值;样式属性的名称:值;...
color:red;font-size:20pt;
用来定义样式选择器
选择器
{样式定义}
3 CSS 的使用方式:
内联:将样式定义在 元素的 style
属性中
没有分离;没有重用,不好维护
内部样式表:将样式定义在页面的 head 元素里的 style
元素里
使用选择器;分离;仅限于当前页面的重用
外部样式表:样式定义在单独的文件(后缀为
css)里
页面引入样式表文件
4 CSS
优先级别
大多数样式可以继承,如果重复,以就近优先
<p>aa<span>span
text</span>bbb</p>
默认样式
内部或者外部样式表:就近,取决于先后顺序
内联样式
5
选择器的声明:将样式定义灵活的运用于页面元素
元素(名称)选择器:以元素的名称作为选择器的名称
必须合法的html
标记的名称
同一类标记实现样式定义;不能实现跨类别的,不能实现同一种元素中的细分
类选择器:
.className
{样式}
<元素 class="className"
>
分类选择器:同一种元素中细分
元素的名称.className
{样式}
<元素 class="">
元素 ID
选择器:将样式局限于页面上某一个元素使用
#元素id值 {样式}
<元素
id="">
群组选择器:对于多个选择器实现统一的定义
p,h1.first,#td1
{样式}
派生选择器:和元素的包含层次相关,以元素的顺序定义
p span {样式}
td.header a {color:red;}
td.left a
{}
td.right a
{}
<table>
<tr>
<td colspan="2"
class="header">
<a>login</a>
<a>register</a>
<a>login</a>
<a>register</a>
<a>login</a>
<a>register</a>
</td>
</tr>
</table>
伪类:元素有多种状态,每种状态定义样式
a:link:没有被访问过
a:hover:鼠标悬停,可用于其他元素
a:active:点下
a:visited:访问过的
input:hover
6 样式属性
尺寸的单位: px(像素) pt(磅) cm mm in %
颜色的单位:单词 #FFFFFF
7 尺寸(面积)的属性
width
height
8 边框的属性
综合定义 border:width style color;
单样式定义
border-width:1px;
border-style:solid;
border-color:red;
单边框定义:
border-left/right/top/bottom:1px
solid red;
9
显示属性
display:修改html元素原有的显示效果
none:不显示,不占用页面原有的空间
常和js一起实现页面的动态效果
inline:行内
block:块
html
元素分为两类:
块级元素(独占一行):div/p/hn/table/ul/ol
行内元素(共处一行):span/a/img/input,设置高和宽无用
10
定位属性
position:html文档中的元素默认按照流的方式布局
可以设置为static以外的其他值,脱离了原有的流布局模式
static:默认的流模式
relative:相对定位,偏移量相对于原位置而言
absolute:绝对定位,偏移量相对于父元素的边框而言
偏移属性:位置
top/bottom/left/right:
堆叠顺序:层数
z-index
11
文本属性:设置文本内容的样式
color
font-size
font-weight:粗体显示
font-family:字体的名称
text-decoration:none/underline
text-align:left/center/right
12
背景属性:设置元素的背景
background-color:
background-image:url(a.jpg);
background-repeat:repeat/repeat-x/repeat-y/no-repeat;
常用于实现特殊的背景效果,比如渐变色
background-position:value1
value2;
常用于实现在背景图像上的偏移
background-attachment:附着方式
scroll/fixed
类似于水印的效果
13 边距属性
box
模型
margin:外边距
margin-left/top/right/bottom
padding:内边距
padding-left/top/right/bottom
padding:10px;
简写的办法(精确的设置每个方向的边距):
padding:10px
30px 50px 5px;
top right bottom left
14
浮动属性:需要将多个块级元素位于同一行显示
float:left/right
元素脱离原有的流布局,浮动的停靠
可能会对后续元素的布局带来影响
clear:left/right/both
清除附近浮动元素带来的影响
15 列表的样式
list-style-type:none;