CSS----简笔随文(2)

美化网页元素

作用：

• 有效传递网页信息
• 美化网页
• 凸显页面的主题
• 提高用户体验

文字样式
font-family :字体系列
font-size:字体大小
line-height:行高
文本样式
RGB:0-F
RGBA  A的取值范围是:0-1;它指的是透明度
文本对齐方式:text-alingn:
首行缩进:text-indent:2em 一般设置为2em,文章开头都是空两格
line-height:行高,当时line-hight=hight时高度就课上下居中
装饰:text-decoration:设置  上中下  划线
文本图片对齐:vertical-aligh:

超链接伪类

a:hover 鼠标悬停时的状态
a:active 鼠标点击是的状态
a:visited 鼠标点击完访问后的状态

列表

ul li{
list-style:none 没有样式
}

background-image:url("");  默认为全部平铺
background-repeat:repeat-x;   水平平铺
background-repeat:repeat-y;  垂直平铺
background-repeat:repeat-no-repeat;  没有平铺只有自己一个
background-position:110px 100px
正数为水平向左,和水平向下
负数为水平向右,和水平向上

颜色渐变问题

渐变分为镜像渐变和原型渐变
给大家提供一个网址,上边有个中渐变的样式,我们要是使用了,直接从上面复制粘贴就行了。

https://www.grabient.com/

点击copy css就能复制到了

盒子模型DIV

一般我们的HTML代码都在盒子里边，进行区域化，方便操作
body  h  ul等标签都有一个初始值

一般我们都会把这些默认值给除去掉
我们需设置对应的一些属性为0
margin：0
padding：0
text-decoration：none

我们一般在div中设置一些基本的属性，比如border
这里记住一个简单的应用
border ：3px solid red
边框是一个 3像素 实线 红色 的边框

内外边距

外边距:margin
内边距:padding
margin:0 0 0 0;
他们分别是:左上,右上,右下,左下

盒子的计算方式

margin+border+padding+内容宽度=规定的空间

圆角表框

border-radius

盒子阴影

box-shadow:1px  1px  1px red

浮动

display:inline-block
float:左右浮动
我们大多数情况下是用float