font-family 字体类型 font-family:“隶书"
font-size 字体大小 font-size:12px
font-style 字体风格 font-style:italic italic:倾斜的字体
font-weight 字体粗细 font-weight:bold
顺序不能变:font:italic bold 36px :”宋体“
字体大小:font-size
font-weight:
字体风格:font-style
font-style:normal 正常字体 默认值
font-style:oblique 斜体
font-style:italic 倾斜的字体
字体的粗细:font-weight
font-weight:bold 粗体
font-weight:100-900中的任意一个数字
字体的类型:font-family 'Times New Roman ',宋体
font-family: 英文字体 中文字体
如果只写一个 说明中英文是一个字体
文本属性
颜色:color
水平对齐方式:text-align:center(可以给所有的块级标签使用)
text-align:center 居中对齐
text-align:left 左对齐 默认
text-align:right 右对齐
text-align:justify 两端对齐
垂直方向上的对齐:vertical-align:middle(只能用在图片上 img)
vertical-align:middle 居中
vertical-align:top 垂直方向上靠上
vertical-align:bottom 垂直方向上靠下
首行缩进:text-indent:2em(2em:2个字)
text-indent:2em
行高:line-height(所有块级标签才能设置)
line-height:200px
文本装饰:text-decoration
text-decoration:underline(下划线)
text-decoration:overline(上划线)
text-decoration:line-through(删除线)
去掉超链接的下划线:text-decoration:none
text-decoration:none
给所有块级元素中的文字加阴影:text-shadow:blue
第一个参数blue 阴影颜色
第二个参数 阴影和实际文字水平方向上的距离(+-)
第三个参数 阴影和实际文字垂直方向上的距离(+靠上-靠下)
第四个参数 阴影向外扩散的范围
text-shadow:blue 10px 20px 5px
超链接伪类(执行顺序:来放点执行 写的顺序不能乱)
超链接最初的样子
a{font-size:10px;
text-decoration: none;}
超链接被点击之后的效果
a:visited{colir:pink;}
鼠标放在超链接上面
a:hover{color:palevioletred;(字体颜色)
font-size: 30px;(字体大小)
text-decoration: underline;}( 字体下划线)
鼠标点击未释放
a:active{color:yellow;}
列表样式:
去掉无序列表前面的黑圈圈:li{list-style-type:none}
块级标签加背景颜色:background-color
块级标签加背景图片:background-image:url('')
背景图片不让重复:background-repeat:no-repeat;
背景图片横的重复:background-repeat:repeat-x;
背景图片竖的重复:background-repeat:repeat-y;
插入了一张图片 设置了不重复 默认这张图片在左上角
现在我想把它移动到别的位置:
第一个参数的意思 20px 这个背景图片距离最左边的距离
第二个参数的意思
background-position:20px 30px;
渐变色:linear-gradient(position,color1,color2)
-webkit-linear-gradient(position,color1,color2)
position:渐变方向
color1:第一种颜色值
color2:第二种颜色
background:linear-gradient(to bottom)去下边 从上去下
linear-gradient(to top)去上边 从下去上
linear-gradient(to left)从右往左
background:linear-gradient(to right)从左向右
css3属性制作动画
变形函数:translate平移
scale 缩放
rotate 旋转
skew 倾斜
transform:tra