CSS
- 页面美化和布局控制
-
**概念**:
cascading style sheets 层叠样式表- 层叠:多个样式可以作用在同一个
html
的元素上,同时生效
- 层叠:多个样式可以作用在同一个
-
好处︰
1.功能强大
2.将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
样式
-
内联样式:
-
在标签内使用style属性指定css代码
如:<div style="color : red; " >hello css</div>
-
-
内部样式
-
在 head 标签内,定义 style 标签,style 标签的标签体内容就是 css 代码
-
可以指定这个页面的所有 div 标签样式
<head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: blue; } </style> </head> <body> <div> hello css </div> <br> <div> zjz </div> </body>
-
-
外部样式
-
定义 css 资源文件
-
link 标签引入 css 资源文件, herf 指定 css 文件位置
<link rel="stylesheet" href="css_resources/a.css"> <!-- 或写为(不常用) --> <style> @import "css_resources/a.css"; </style> <!-- a.css --> div{ color: green; }
-
基本语法
-
格式:
选择器 { 属性名1:属性值1; 属性名2:属性值2; ... }
-
选择器:
-
筛选有相似特征的元素
-
分类
-
基础选择器
- id选择器︰选择具体的id属性值的元素.建议在一个html页面中id值唯一
语法∶#id属性值{} - 元素选择器:选择具有相同标签名称的元素
- 语法:标签名称{}
- 注意:id选择器优先级高于元素选择器
- 类选择器:选择具有相同的class属性值的元素。
- 语法: .class属性值{}
注意:类选择器选择器优先级高于元素选择器
- 语法: .class属性值{}
- id选择器︰选择具体的id属性值的元素.建议在一个html页面中id值唯一
-
扩展选择器:
-
选择所有元素
*{}
-
并集选择器
选择器1,选择器2{}
: 选中 标签1和标签2
-
子选择器
选择器1 选择器2{}
: 选中 标签1下的标签2
-
父选择器
选择器1 > 选择器2{}
: 选择 标签2 上的标签1
-
属性选择器
-
元素名称[属性名=属性值]
input[type="text"]{ border: 5px solid; }
-
-
伪类选择器
-
元素:状态{}
-
如
a:link{ color: brown; }
-
状态:
- link: 初始状态
- visited:被访问过
- actice:正在访问
- hover:鼠标悬浮
-
-
-
-
每一对属性用分号
;
隔开,属性名和值用冒号:
隔开
-
-
属性
-
字体、文本
font-size
: 字体大小color
:文本颜色text-align
:对齐方式line-height
: 行高
-
背景
-
background
:/* 背景可以是颜色或图片 url 指定路径 no-repeat 图片不重复填充 center 图片居中显示 */background: url("css_resources/B.jpg") no-repeat center;
-
-
边框
border
:设置边框,复合属性
-
尺寸
width
: 宽度height
:高度
-
盒子模型 : 控制布局
margin
:外边距padding
: 内边距- 默认情况下内边距会影响整个盒子大小
box-sizing:border-box
:设置盒子属性,锁定盒子大小为 width 和 height
float
: 浮动- left
- right
-
常用辅助标签
div
:- 定义 HTML 文档中的一个分隔区块或者一个区域部分,不会产生任何样式。
- 常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。
文本
文字溢出
文字溢出
CSS text-overflow
属性规定应如何向用户呈现未显示的溢出内容。
可以被裁剪:
这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本
也可以将其呈现为省略号(…):
这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本
CSS 代码如下:
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
div.test1:hover {
overflow: visible;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>text-overflow 属性</h1>
<p>以下两段包含不适合其框的长文本。</p>
<h2>text-overflow: clip:</h2>
<p class="test1">这里有一些无法容纳在框中的长文本</p>
<h2>text-overflow: ellipsis:</h2>
<p class="test2">这里有一些无法容纳在框中的长文本</p>
</body>
</html>
换行规则
word-break
属性指定换行规则。
p.test1 {
word-break: keep-all; /* 此行将连字符打断 */
}
p.test2 {
word-break: break-all; /* 这些行将在任何字符处中断 */
}
书写模式
writing-mode
属性规定文本行是水平放置还是垂直放置。
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode: vertical-rl;
}
属性 | 描述 |
---|---|
text-align-last | 指定如何对齐文本的最后一行。 |
text-justify | 指定对齐的文本应如何对齐和间隔。 |
text-overflow | 指定应如何向用户呈现未显示的溢出内容。 |
word-break | 指定非 CJK 脚本的换行规则。 |
word-wrap | 允许长单词被打断并换到下一行。 |
writing-mode | 指定文本行是水平放置还是垂直放置。 |
过渡
CSS 允许平滑地改变属性
如需创建过渡效果,必须明确两件事:
- 要添加效果的 CSS 属性
- 效果的持续时间
注意:如果未规定持续时间部分,则过渡不会有效果,因为默认值为 0。
下面的例子展示了 100px * 100px 的红色 < div> 元素。 < div> 元素还为 width 属性指定了过渡效果,持续时间为 2 秒:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
当指定的 CSS 属性(width)值发生变化时,将开始过渡效果。
现在,为 width 属性指定一个鼠标悬停在 < div> 元素上时的新值:
div:hover {
width: 300px;
}
实例
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>transition 属性</h1>
<p>请把鼠标悬停在下面的 div 元素上,来查看过渡效果:</p>
<div></div>
<p><b>注释:</b>该效果在 Internet Explorer 9 和更早版本中不起作用。</p>
</body>
</html>
指定过渡的速度曲线
transition-timing-function
属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值:
ease
- 规定过渡效果,先缓慢地开始,然后加速,然后缓慢地结束(默认)linear
- 规定从开始到结束具有相同速度的过渡效果ease-in
-规定缓慢开始的过渡效果ease-out
- 规定缓慢结束的过渡效果ease-in-out
- 规定开始和结束较慢的过渡效果cubic-bezier(n,n,n,n)
- 允许您在三次贝塞尔函数中定义自己的值
下面的例子展示了可以使用的一些不同的速度曲线:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
延迟过渡效果
transition-delay
属性规定过渡效果的延迟(以秒计)。
下例在启动之前有 1 秒的延迟:
div {
transition-delay: 1s;
}
过渡 + 转换
下例为转换添加过渡效果:
div {
transition: width 2s, height 2s, transform 2s;
}
过渡属性
属性 | 描述 |
---|---|
transition | 简写属性,用于将四个过渡属性设置为单一属性。 |
transition-delay | 规定过渡效果的延迟(以秒计)。 |
transition-duration | 规定过渡效果要持续多少秒或毫秒。 |
transition-property | 规定过渡效果所针对的 CSS 属性的名称。 |
transition-timing-function | 规定过渡效果的速度曲线。 |
背景
背景附着
background-attachment
属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动):
实例
指定应该固定背景图像:
body {
background-image: url("test.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
实例
指定背景图像应随页面的其余部分一起滚动:
body {
background-image: url("test.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}