Web前端学习（二）——CSS3

CSS介绍

CSS概述

• CSS指层叠样式表
• CSS样式表极大地提高了工作效率

CSS基础语法

• 如果属性大于1个之后，属性之间用分号隔开
• 如果值大于1个单词，则需要加上引号

属性选择器{
		属性：属性值
		}
selector{
		property: value
		}
eg:
h1{color:red;font-size:14px}
p{font-family:"sans serif";}

CSS高级语法

• 选择器分组

h1,h2, h3, h4, h5, h6{color:red;}

• 继承

body{
	color:green;
	}

CSS派生选择器

• 通过依据元素在其位置的上下文关系来定义样式

CSSid选择器

• id选择器可以为标有id的HTML元素指定特定的样式
• id选择器以"#"来定义
• id选择器常常用来建立派生选择器器

CSS类选择器

• 类选择器以一个点来显示
• class也可以用作派生选择器

CSS属性选择器

• 对带有指定属性的HTML元素设置样式

CSS样式

CSS背景

• 允许应用纯色、背景图像、以及创建相当复杂效果作为背景

属性	描述
background-attachment	背景图像是否固定或者随着页面的其余部份滚动
background-color	设置元素的背景颜色
background-image	把图片设置为背景
background-position	设置背景图片的其实位置
background-repeat	设置背景图片是否及如何重复
background-size	规定背景图片的尺寸
background-origin	规定背景图片的定位区域
background-clip	规定背景的绘制区域

CSS文本

• CSS文本属性可定义文本外观
• 通过文本属性，可以改变文本的颜色、字符间距、对其文本、装饰文本、对文本缩进

属性	描述
color	文本颜色
direction	文本方向
line-height	行高
text-align	对齐元素中的文本
letter-spacing	字符间距
text-decoration	向文本添加修饰
text-indent	增进元素中文本的首行
text-transform	元素中的字母
unicode-bidi	设置文本的方向
white-space	元素中空白的处理方式
word-spacing	字间距

• CSS3文本效果

  • text-shadow:像文本添加阴影(距左距离，向上距离，清晰度，颜色）

p{
	text-shadow: 5px 5px 5px red;
}

• word-wrap:规定文本的换行规则

CSS字体

字体属性定义文本的字体系列、大小、加粗、风格和变形

属性	描述
font-family	设置字体系列
font-size	设置字体尺寸
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细

/*字体引用*/
@font-face{
	font-family:myfont;
	src:url( );
}
div{
	font-family:myfont;
}

CSS链接

CSS链接的四种状态：

• link 普通的、未被访问的链接
• visited 用户已访问的链接
• hover 鼠标指针位于链接的上方
• active 链接被点击的时刻

常见的链接样式：

• text-decoration 属性大多用于去掉链接中的下划线

设置背景颜色：

• background-color

CSS列表

CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志

属性	描述
list-style	简写列表项
list-style-image	列表项图像
list-style-position	列表标志位置
list-style-type	列表类型

CSS表格

1：CSS表格

• CSS表格属性可以帮助我们极大的改善表格的外观

2：折叠边框
3：表格边框
4：表格宽度
5：表格文本对齐
6：表格内边距
7：表格颜色

#tb td,#tb th{
    border: 1px solid greenyellow;
    padding: 5px;
}
#tb{
    width: 500px;
    /*height: 100px;*/
    text-align-last: center;
    border-collapse: collapse;
}
#tb th{
    text-align: center;
    background-color: yellow;
    color: #0C0C0C;
}

#tb tr.alt td{
    text-align-last: center;
    color: black;
    background-color: lawngreen;
}

CSS轮廓

突出元素的作用

属性	描述
outline	设置轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

CSS定位

CSS定位

• 改变元素在页面上的位置

• css定位机制：

  • 普通流：元素按照其在HTML中的位置顺序决定排布的过程
  • 浮动
  • 绝对布局

• CSS定位属性

属性	描述
position	把元素放在一个静态的、相对的、绝对的、或固定的位置中
top	元素向上的偏移量
left	元素向左的偏移量
right	元素向右的偏移量
bottom	元素向下的偏移量
overflow	设置元素溢出区域发生的事情
clip	设置元素显示的形状
vertical-align	设置元素垂直对齐方式
z-index	设置元素的堆叠顺序

• CSS position属性：

  • static
  • relative
  • absolute
  • fixed

CSS浮动

浮动：
float 属性可用的值：

• left
• right
• none：元素不浮动
• inherit：从父季继承浮动属性

clear属性：

• 去掉浮动属性（包括继承来的属性）

• clear属性值：

  • left 、right：去掉元素向左、有浮动
  • both：左右两侧均去掉浮动
  • inherit：从父季继承来clear的值

CSS3盒子模型

CSS盒子模型概述

• 盒子模型的内容范围包括：

  • margin（外边距） 、border（边框） 、padding（内边距）、content部份组成
    

CSS内边距

• content外，边框内
• 内边距属性

属性	描述
padding	设置所有边距
padding-bottom	设置底部边距
padding-left	设置左边距
padding-right	设置有边距
padding-top	设置上边距

CSS边框

边框的样式 border-style:定义了10个不同的非继承样式，包括none
边框的单边样式：

• border-top-style
• border-left-style
• border-right-style
• border-bottom-style

CSS3边框：

• boredr-radius：圆角边框
• box-shadow：边框阴影
• border-image：边框图片

 box-shadow: 10px 10px 5px green;

CSS外边距

• 围绕在内容边框的区域
• 常用属性

属性	描述
margin	设置所有边距
margin-bottom	设置底边
margin-left	设置左边距
margin-right	设置右边距
margin-top	设置上边距

CSS外边距合并

极客学院网页盒子模型复原

初步复原还OK

CSS常用操作

对其操作

• 使用margin 属性进行水平对齐
• 使用position属性进行左右对齐
• 使用float属性进行左右对齐

尺寸操作

• 属性

属性	描述
height	设置元素高度
line-height	设置行高
max-height	设置元素最大高度
max-width	设置元素最大宽度
min-width	设置元素最小宽度
min-height	设置元素最小高度
width	设置元素宽度

分类操作

属性	描述
clear	设置一个元素的侧面是否允许其它浮动元素
cursor	规定当指向某元素之上时显示的指针类型
display	设置是否及如何显示元素
float	定义元素在哪个方向浮动
position	把元素放置到一个静态的、相对的、绝对的、固定的位置
visibility	设置元素是否可见或不可见

导航栏

图片操作