CSS的使用
方式1：内联样式：不推荐使用，因为代码复用度太差，代码书写凌乱
方式2：内部样式：推荐使用，可以提高CSS代码的复用性
要是使用内部样式：得了解一个概念叫做选择器
方式3：外部样式：复用度更高，开发首选
内联样式：每个HTML标签 ，都有一个style属性，style属性值，就可以书写CSS代码,那么书写的CSS代码就会对这个标签起作用，一次只能控制这个一个标签
CSS代码的语法风格：属性名：属性值；属性名2：值2
HTML文件头部使用CSS
New Document
在html文件的头部使用css
在html文件头部应用css(层叠样式表)
在HTML的标记的内部使用CSS
基本语法：
New Document
标签内部使用css
在html标记的内部使用css
使用外部CSS文件
基本语法：
rel="stylesheet" 是指在html文件中使用的是外部样式表文件
type="text/css" 指明该文件的类型是样式表文件
href="css样式表文件的存放位置" 样式表文件的地址(绝对路径或相对路径)
第一 编写外部css文件(后缀名【.css】)
h3{color:red; font-size:35px;font-family:黑体}
p{ background:yellow; color:red;font-family:宋体}
第二
New Document
使用外部css
在html文件使用外部css(层叠样式表)
字体的设置
1.font-family------设置字体
New Document
设置字体
使用css来设置字体
font-size 设置字体的大小
font-size:绝对尺寸/关键字/相对尺寸/百分比
关键字:xx-small(极小),x-small(较小),smaller,small(小),medium(标准),large(大)
New Document
font-size 设置字体
font-style 设置字体的样式(设置字体是否为斜体字)
normal----正常显示字体
italic---斜体字
oblique--歪斜体(倾斜角度大一点)
font-weight 设置字体的加粗
取值：
normal ---- 正常显示
bold ----粗体(数字700粗细值)
bolder ---加粗
lighter ---细体(比正常字体稍微细一点)
number ----数字型(一般整百设置，有9个级别(100----900)数字取值越大越粗)
font-variant 设置字体的变体
small-caps 表示英文字母显示为小型的大写字母,主要用于设置英文字体
text-shadow 设置字体阴影
text-shadow设置字体的阴影
规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
text-shadow: 5px 5px 5px #FF0000;
颜色的设置
1、color
关键字 英文单词来设置颜色“red” 红色
RGB值 颜色码
2、设置背景颜色
background-color
3、设置背景图片
background-image
背景的设置和边框的设置
背景附件的设置
background-attachment
是指设置背景图片是否随着滚动条的移动而移动
scroll ---表示背景图片随着滚动条的移动而移动
fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动
设置背景图片的重复
background-repeat
设置背景图片总是在水平和垂直方向重复显示铺平整个网页。
repeat 背景图片在水平和垂直方向平铺
repeat-x 背景图片在水平方向平铺
repeat-y 背景图片在垂直方向平铺
no-repeat 背景图片不平铺
背景图片的位置设置
background-position
关键字 百分比 位置说明
top left 0% 0% 左上位置
top center 50% 0% 靠上居中
top right 100% 0% 右上位置
left center 0% 50% 靠左居中
center center 50% 50% 正中位置
right center 100% 50% 靠右居中
bottom left 0% 100% 左下位置
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下位置
边框的设置
边框的样式
border-style
基本语法
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
取值：
none 没有边框
dotted 点线
dashed 虚线
solid 实线
double 双实线
groove 凹型线
ridge 凸型线
inset 嵌入式
outset 嵌出式
取同一个值：四条边框线是同一个线型
取两个值：上下边框使用第一个取值，左右边框使用第二个取值
取三个值： 上边框取第一个值，左右取第二个值，下边框取第三个值
取4个值：上第一个值，右取第二个值，下取第三个值，左取第四个值
边框的属性设置和边距/填充
边框的宽度
border-width
基本语句：
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
取值：
thin ----细边框
medium ---中等边框
thick--粗边框
长度---数字
边框的颜色
border-color
基本设置语法：
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
取值
英文单词 “red”代表红色
RGB 颜色码
边框的综合设置和边距
border
边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离
上边距 margin-top
下边距 margin-bottom
左边距 margin-left
右边距 margin-right
复合设置 margin
取值：
数字----长度
百分比---是相对于上一级元素的百分比，允许是负数
auto ---自动提取边框的值，默认值
边框的圆角
border-radius设置边框圆角
border-radius:50px;
先把边框设置后再设置圆角
div { border:2px solid; border-radius:25px; }
边框的阴影
box-shadow: 10px 10px 5px #888888;//添加阴影
X方向的偏移像素
Y方向的偏移像素
模糊的像素值
阴影颜色
填充
用来设置边框和其内部的元素之间的空白距离
上边距 padding-top
下边距 padding-bottom
左边距 padding-left
右边距 padding-right
复合设置 padding
取值：
数字---长度
百分比
CSS对文字的排版
调整字符间距
letter-spacing
用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。
取值：
normal ---表示正常显示(默认)
长度--可以使用负数，带上单位
单位px(像素)
添加文字的修饰
为文字添加如下划线，删除线等修饰
text-decoration
属性的取值：
underline----添加下划线
overline---添加上划线
line-through--添加删除线
blink---添加闪烁效果(只能在Netscape的浏览器中正常显示)
none--没有任何的修饰
文本的对齐方式
text-align
用来控制文本的排列和对齐方式
属性的取值：
left--左对齐
right--右对齐
center--居中对齐
justify--两端对齐
段落的缩进设置
text-indent
用来控制每个段落的首行缩进的距离。
属性取值：
长度(数字)带上单位
百分比相对于上一级元素的宽度
行高的设置
line-height
用来控制文本内容之间行间距
属性取值
normal---浏览器默认的行高
数字--设置行高带上单位
百分比----表示行高是该元素字体大小的百分比
放大缩小位移
Transform
transform:rotate(30deg);//旋转30度
transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素
transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
transform:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
动画
Animation
格式：animation:myfirst 5s;(myfirst动画名，5s动画时间)
@keyframes myfirst
{ 0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;} }
@keyframes myfirst
{ from {background: red;}
to {background: yellow;}}
过渡动画
transition
格式：transition: width 2s; (应用于宽度，时间2秒)
div{transition:width 5s;
width:100px;height:100px;
background:red;}
div:hover { width:300px; } 先定义一个层的hover 鼠标进入后把宽度改为300px 则就会看到过渡动画
自定义动画
Animation
格式：animation:myfirst 5s;(myfirst动画名，5s动画时间)
@keyframes myfirst
{ 0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;} }
@keyframes myfirst
{ from {background: red;}
to {background: yellow;}}
自定义动画详细属性
混合调用语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
单个使用属性
animation-name指定要绑定到选择器的关键帧的名称
animation-duration动画指定需要多少秒或毫秒完成
animation-timing-function设置动画将如何完成一个周期
animation-delay设置动画在启动前的延迟间隔。
animation-iteration-count定义动画的播放次数。 infinite无限次
animation-direction指定是否应该轮流反向播放动画。
animation-fill-mode规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式。
animation-play-state指定动画是否正在运行或已暂停。
盒子模型
顺序排列，用于div设置显示方式为盒子模型给父布局设置，其子元素按父元素设置的效果排列：
//设置盒子模型
display: flex;
// 排列方式横向或竖向 后面加上wrap可自动控制宽高
flex-direction: row | row-reverse | column | column-reverse
justify-content:flex-start | flex-end | center;按方向居开始 中间 末尾
flex-flow:和上面的属性值相同 加上warp可以换行或换列
例子：flex-flow:row wrap; 横向排列 如果排不下 自动换到下一行
flex-flow:column wrap; 竖向排列 排不下 自动换列
flex-wrap:wrap;//自动换行 或换列
设置盒子模型display: flex;后给其子元素设置margin:auto;为自动居中
例子：margin:auto; 盒子的层上下左右都居中
margin:10px auto; 盒子的层 距离顶部10px 左右居中
设置多个控件排列顺序：order:1;
浏览器兼容问题
//不同浏览器不同写法
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
