CSS
- 什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
- CSS的特点:
- 样式表由样式规则组成,以告诉浏览器如何显示一个文档
- 每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式
- 每个元素可以定义多个属性,每个属性带有一个值,共同的描述选择符如何呈现
- CSS的样式
- 样式规则格式:
- 选择符{属性:值}
- 单一选择符的复合样式声明应该用分号分割:
- 选择符{属性1:值1; 属性2:值2}
- 样式规则格式:
- 位置
- css定义的位置,可以在head,也可以在body中
- 外部引入,在页面的外部创建的CSS文件,引入到html中
- <link href="css/demo03.css" type="text/css" rel="stylesheet"/>
- Css优先级
- 靠近原则:按照最靠近元素的定义来显示
- 如果两个css文件冲突,以后面的为准
- 注释:在CSS中要主要写好注释信息,每个模块,每个页面的功能点都要说明。
- 标签选择符
- 标签选择符
- 类选择符
- ID选择符
- 派生选择符
- 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。
- 字体属性:
- font-family 字体
- font-style 字体样式
- font-variant 小体大写
- font-weight 字体粗细
- font-size 字体大小
- color 字体颜色
- 颜色与背景属性
- Color 颜色
- Background-color 背景色
- Background-image 背景图案
- Background-repeat 背景图案重复方式
- Background-attachment 背景的滚动
- Background-position 背景图案初始位置
- 文本属性
- word-spacing 单词间距
- letter-spacing 字母间距
- text-decoration 装饰样式
- text-transform 转为其他形式
- text-align 对齐
- text-indent 缩进
- line-height 行高
- 伪类选择符
- 对链接的修饰
- A:link 未访问时的状态
- A:hover 鼠标划过时的状态
- A:active 鼠标点中不放时的状态
- A:visited 访问过后的状态
- 边距属性
- margin-top 上边距
- margin-right 右
- margin-bottom 下
- margin-left 左
- 填充属性
- padding-top 上填充
- padding-right 右
- padding-bottom 下
- padding-left 左
- 边框属性
- Border-top-width 上边框宽度
- Border-right-width 右
- Border-bottom-width 下
- Border-left-width 左
- Border-width 四边
- Border-color 边框颜色
- Border-style 边框样式
- Border-top |right|bottom|left 上(右|底|左)所有属性
- 边距、填充、边框
- 关系如下图所示
- 图文混排
- Width 宽度
- Height 高度
- Float 文字环绕列表属性
- 列表属性
- List-style-type 项目编号类型
- List-style-image 项目前图片
- List-style-position 第二行位置
- List-style 全部属性
- 鼠标属性
- Cursor
- 属性值:
- pointer 手形
- Move 移动
- Wait 沙漏
- Crosshair "+"
- 绝对定位
- 使用 position 属性进行左和右对齐
- 对齐元素的方法之一是使用绝对定位:
- 实例
-
.right{ position:absolute; right:0px; width:300px; background-color:cyan; }
-
- 提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
- 浮动
- CSS float 属性
- 在 CSS 中,我们通过 float 属性实现元素的浮动。
- 图像的透明度
- 定义透明效果的 CSS3 属性是 opacity。
- IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。
-
img{ opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ }
-
- 图像透明度 - Hover 效果
-
img{ opacity:0.4; } img:hover{ opacity:1.0; }
-
- 导航栏
- 熟练使用导航栏,对于任何网站都非常重要。
- 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
- 导航栏=链接列表
- 作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表,所以使用 <ul> 和 <li>元素非常有意义:
-
<ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li><a href="#about">关于</a></li> </ul>