一、首先介绍如何使用css样式
1、内联样式
通过style属性来控制标签显示的样式
<h1 style="color: red;font-size: 20px">内联样式</h1>
2、内部样式表
在html的头部定义一个style的标签，定义某个标签的css的样式，比如可以定义
a、现在head中定义style标签<style>h2{ color: blue;font-size: 10px;}h3{ color: palevioletred;font-size: 20px;}h1{ color: aqua;}</style>b、在body中使用该css样式<h2>内部样式表</h2><h3>内部样式表</h3> 如果内部样式表和内联样式表有冲突，那么哪个会生效呢，实际测试，发现内联样式的生效优先级高于内部样式表
3、外联样式
定义一个stylesheet文件这个文件中定义某个标签的样式，然后在html文件中通过link去引入文件，这样html中对应的标签就会使用stylesheet文件中定义的样式
a、定义一个stylesheet文件，文件的内容如下div{ color: palevioletred;font-size: 20px;} h1{ color:green;font-size: 10px;}b、在html文件中使用<div>外联样式</div><link type="text/css" href="css.css" rel="stylesheet">
二、css的语法规则
div{
color: palevioletred;font-size: 20px;}选择器元素class声明属性名属性值
比如div这里就是选择器，color是属性名，palevioletred是属性值
.xdd{ color: palevioletred;font-size: 20px;}<p class="xdd"></p>比如这里的例子，定义个样式，名称为.xdd，然后在标签中通过class属性来设定该标签的样式
三、css的属性
1、css定义颜色
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | color定义字体的颜色 定义css样式 < style > .xxx{ color: red; } .yyy{ color: blue; } p{ color:brown; } </ style > 使用定义的样式 < p class="xxx">第一个段落1</ p > < p class="yyy">第一个段落2</ p > < p >第一个段落3</ p > < p >第一个段落4</ p > |
2、css定义背景
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < style > body{ 设置背景颜色 background: url("../1.ico"); 设置背景图片 background-repeat: no-repeat; 设置背景图片不重复 /*background-repeat: repeat-x;*/ 设置背景图片横向重复 /*background-repeat: repeat-y;*/ 设置背景图片纵向重复 /*background-repeat: repeat;*/ 设置备份图片横向纵向同时重复 background-position: right top; 设置背景图片的位置 /*background-position: 10px 20px;*/ 设置背景图片的位置，用像素的方式 /*background-position: 20% 30%;*/ 设置背景图片的位置，用百分比的方式 background-attachment: fixed; 设置背景图片固定 } </ style > |
3、css定义边框属性
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | css定义边框属性 p{ border-width: 4px; 设置边框的宽度 border-style: solid; 设置边框的风格类型 border-color: aquamarine; 设置边框的颜色 border-radius: 50px; 设置边框的圆角，像素越大，圆角越明显 } 设置四个框的的属性 div{ border-left-color: brown; border-left-style: solid; } 也可以单独设置某个边框的属性 css定义padding属性，设置文字举例内边框的距离 .xxx{ border-width: 20px; border-style: solid; border-color: aqua; padding: 20px; } 同时设置文字距离4个边框的长度 .yyy{ border-width: 20px; border-style: solid; border-color: aqua; padding-bottom: 10px; padding-left: 15px; padding-right: 20px; padding-top: 25px; } 分别设置文件距离4个内边框的距离 |
4、css定义margin属性，设置标签距离外部其他元素的距离
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | style> .cc{ border-color: red; border-style: solid; border-width: 2px; padding: 20px; margin: 40px; } </ style > 设置一个margin的属性为40px，那么引用cc的这个元素距离外部的元素的距离是40个像素 < h1 >测试margin</ h1 > < p class="cc">这是一个margin</ p > < h2 >测试margin</ h2 > 这个效果就是p标签距离h1和h2标签的距离都是40像素，同样，margin也可以分别设定上下左右的margin的属性值 |
5、css定义宽度和高度
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | < style > .cc{ border-style: solid; border-width: 2px; border-color: red; width: 50px; height: 100px; } </ style > 设置宽度和高度，这里设置了具体的值，也可以设置为百分比，这个百分比相当于body的百分比 < h1 class="cc">测试元素的宽度和高度</ h1 > < p class="cc">测试元素的宽度和高度</ p > < h2 class="cc">测试元素的高度和宽度</ h2 > css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面 < style > .cc{ border-width: 3px; border-style: solid; border-color: black; outline-color: blue; outline-style: solid; outline-width: 4px; } </ style > < p class="cc">css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面</ p > |
6、css定义文本相关样式
| 1 2 3 4 5 6 7 8 | color：设置字体颜色 text-align:设置文本的位置，靠左，靠右 text-docration:定义文本中线【line-throngh】，下划线【underline】，上线【overline】 text-transform: lowercase;定义文本中的字母都为小写，用来转换字母的属性 text-indent：设置文本内容缩行，设置文档的首行往里缩多少个像素 text-spacing：设置文本内容的字符的间隔 line-height:设置文本中的行间距，属性值是数字，是标准行间距的倍数，也可以设置像素值 |
7、css定义字体
| 1 2 3 4 | font-family:设置字体的类型 font-style：设置字体的风格，比如斜体 font-size：设置字体的大小，一般默认的字体大小是16个像素值 font-weight：设置字体的粗度的效果 |
8、css控制元素的显示状态display属性
| 1 2 3 4 | display：none 隐藏标签 display：block 显示标签，且会被行内标签调整为块级标签 display：inline 把块级标签调整为行内标签 visibility：hidden：隐藏元素，但是被隐藏的元素所占的高度和宽度还会继续保留，不会被其他元素占用，这个就是和display不一样的地方 |
9、
css定义元素的最大宽度
max-weith：
10、css定义元素位置
| 1 2 3 4 | position static，一般就是元素原来的位置，static和没有这个属性的效果是一样的，就算设置了left right top buttom都会不生效 relative,可以设置left right top buttom的值，意思就是距离左边多远，右边多远，上边多远，下边多远，相对于参数static时候的位置 fixed，他的效果和relative的效果一致，唯一的区别就是如果有滚动条，如果拉动滚动条，那么relative的的元素会变，而fix的元素位置是固定的 |
11、css定义元素层次
| 1 2 | z-index 如果有2个元素在一个位置，z-index就是定义哪个元素在上面显示哪个元素在下面显示，z-index的值越大，则显示的越在上面 |
12、css控制元素的溢出
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | overflow visible:如果一个元素在框中，而元素的内容已经超出元素的外框，那么元素就溢出，不会做任何处理 hidden：如果一个元素在框中，而元素的内容以及超出元素的外框，那么超出外框的元素就会被隐藏不会被显示 scroll：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框也有滚动的栏出现 auto：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框就不会有滚动的栏出现 .auto{ border-width: 2px; border-style: solid; border-color: pink; width: 300px; height: 100px; overflow: auto; } |
13、css控制元素浮动
| 1 2 3 4 5 | css控制元素浮动 float none left right |
14、css定义元素：把元素从水平方向摆放，如果浏览器变大，会自动向下摆放
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | inline-block < style > .cc{ border-width: 2px; border-style: solid; border-color: red; width: 440px; height: 80px; display: inline-block; } .bb{ border-width: 2px; border-style: solid; border-color: blue; } </ style > |
15、css定义元素的对齐方式
| 1 2 3 4 5 6 7 8 9 | 元素居中对齐 .cc{ border-color:red; border-style:solid; border-width:2px; width:50%; margin: auto; } 上面的办法可以实现元素居中显示，如果元素要居中，对已块级标签，则必须要有一定的宽度 |
| 1 2 3 4 5 6 7 8 9 10 | 文本的居中对齐 < style > .cc{ border-color:red; border-style:solid; border-width:2px; width:50%; text-align: center; } </ style > |
| 1 2 3 4 5 | 图片居中对齐 .pic{ display: block; margin: auto; } |
| 1 2 3 4 5 6 7 8 | 元素的左对齐，右对齐 .right{ width: 100px; height: 50px; position: absolute; right: 0; } |
16、css定义元素的透明度
| 1 2 3 4 5 | opacity .opacity{ opacity: 0.2; } |
17、css定义元素的阴影
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .box{ border-color: red; border-style: solid; border-width: 2px; width: 300px; height: 300px; color: green; box-shadow: 20px 15px 10px black } 20px 15px 10px black 20：定义x轴的宽度 15：定义y轴的宽度 10：定义虚幻的程度，这个可以不加，非必须的 black：阴影的颜色 |
18、css定义元素样式过度
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | transition .transition{ width: 100px; height: 200px; transition: 1s; } .transition:hover{ width: 150px; height: 250px; } 上面这个例子的效果就是，把鼠标放到标签上，过1s后，样式会自动过度到transition:hover的样式上，如果没有定义transition: 1s，那么只要鼠标放在标签上，就会立刻切换到 transition:hover的样式上 |
19、css定义元素动画效果
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | animation < style > .animation{ width: 200px; height: 200px; border-color: blue; border-width: 1px; border-style: solid; position: relative; animation: example 10s; } @keyframes example { from{width: 200px; height: 200px; border-color: blue; border-width: 1px; left: 0px; top: 0px; } to { width: 400px; height: 400px; border-color: red; border-width: 10px; left: 600px; top: 100px; } } </ style > 上面的例子的意思是，初始的样式为animation定义的样式，然后在10s完成切换，然后从keyframes example from切换到keyframes example to的状态 |
| 1 2 3 | animation: example 4s infinite; 这个的意思是4s完成切换，但是会一直切换，也就是无穷尽的执行 |
| 1 2 3 4 | animation: example 4s ease-in-out alternate infinite; 这个意思是无穷尽的切换，从from到to，然后从to到from alternate的效果是从from到to，然后从to到from infinite的效果是无穷尽的切换 |
四、最后介绍一下css的选择器
元素选择器
用标签的名称作为css的名称，去定义样式，如果有定义，那么该标签都会自动应用该样式类选择器以点“.”开头，然后在标签中通过class去应用该样式，就可以在该标签中应用该样式id选择器以“#”号开头，在标签中id为样式定义的id的标签会应用定义的样式组合选择器div p{ }这个意思是div中的p元素应用该样式，如果div中有个span，在span中又有一个p元素，这个p元素也会应用该样式div > p{ }这个意思只对div下的p元素生效，如果div中有个span，span中又有一个p，则该p不会应用该样式