什么是CSS
CSS 指层叠样式表(Cascading Style Sheets)。用于表现HTML的语言
创建CSS的三种方法
- 使用元素内嵌样式表
- <a style = " "></a>
- 使用文件内嵌样式表,需要写在head中
<style type="text/css">
a{
.....
}
</style>
- 使用外部样式表,需要创建xxx.css文件,然后在head中用一下代码导入
<link rel="stylesheet" type="text.css" href="xxx.css" />
a{
.....
}
</style>
外部样式表可以极大提高工作效率
CSS基本选择器
- 选择所有元素
* {
...
}
- 类型选择器
a {
...
}
- 类选择器(全局属性)
.classname {
...
}
- ID选择器(不建议重复用,id为唯一标识)
#idname {
...
}
- 属性选择器
[属性] {
...
}
- :选择器
a:hover {
...
}
CSS文本样式
- 边框
- 背景
- 文本对齐
- 文本方向
- 字母间距,单词间距,行高
- 首行缩进
- 文本装饰
- 大小写转换
- 字体名称
- 字体大小
- 字体样式
- 字体粗细
- 文本阴影
p {
text-align: center;
direction: rtl;
letter-spacing: 10px;/*字母间距*/
word-spacing: 10px;/*单词间距*/
line-height: 10px;/*行高*/
text-indent: 10px;/*首行缩进*/
text-decoration: underline;/*文本装饰*/
text-transform: capitalize;/*大小写转换,该样例是单词首字母大写*/
font-family: 微软雅黑; /*字体名称*/
font-size: 10px; /*字体大小*/
font-style: italic; /*字体样式*/
font-weight: bold; /*字体粗细*/
text-shadow: 10px 10px 10px aliceblue;/*文本阴影,参数:水平偏移 垂直偏移 模糊程度 颜色*/
}
CSS使用过渡
transition属性,如delay延迟响应,duration变化时间
CSS使用动画
animation的属性,与过渡不同的是,需要设定名称。动画会播放完后回到from,需要设定属性
然后需要用到
@keyframes name {
from{
...
}//可不写
50%{
...
}//可设定过程
to{
...
}
CSS使用变换
tansform属性的使用
CSS盒子模型
常用到的属性名:内容(content),填充(padding),边框(border),边界(margin)。