今日css基础

一.文字样式

 2color

文字颜色 font-size

文字大小 font-family: 楷体; 文字字体  font-style:italic文字倾斜  font-weight: bold;文本加粗

@font-face {        font-family: ;        src: url();    }

二：文本样式

color text-shadow:2px 2px 2px gray;

文本阴影 属性值:水平方向,竖直方向,模糊,颜色  text-decoration: line-through underline;

文本样式加线 text-transform: capitalize;

英语单词首字母大写  text-indent: 2em;

针对于段落标签文本缩进 text-align: center;

文本位置对齐方式  左:left 右right  中:center

 text-align: center; 文本水平居中  line-height: 60px;

文本竖直位置居中

 font-variant: small-caps;小型大写字母  

三：背景  

background-color: pink;背景颜色

 background-image:url(./2.png);背景图片

background-repeat: no-repeat; 背景不重复

  background-size: cover;背景尺寸（ cover沾满整个容器 contain/100照片完全显示出来 ） 

background-position: center;（背景定位, 属性值有两位只写一个的情况下另外一个默认的中间 ）

background-attachment: fixed;背景固定  

background-clip: border-box;（默认背景位置从边框线开始 背景重复用clip,不重复用origin padding-box 位置从内填充开始ontent-box 位置从内容区域开始）

  四：边框

综合属性:线宽 样式 颜色  border: 1px solid black; border-width: 100px;边框线宽  border-style: solid;样式 border-color: 颜色 border-radius 边框圆角 box-shadow: 水平 竖直 模糊度 颜色;

练习案例：

 代码如下：