CSS学习笔记一

什么是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）。