CSS3美化网页元素（自己的学习分享）

一、CSS如何写注释

        /* */

二、关于字体地CSS

        font顺序：风格>粗细>大小>字体

三、文本样式

        1. 文本属性   

属性名	含义	举例
font-family	设置字体类型	font-family:"隶书";
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px "宋体";

        2. 文本段落

值	说明
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

        3. 文本修饰

值	说明
none	默认值，定义的标准文本
underline	设置文本的下划线
overline	设置文本的上划线
line-through	设置文本的删除线

        4. 字体的粗细

值	说明
normal	默认值，定义标准的字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100、200、300、400、500、600、700、800、900	定义由细到粗的字体 400等同于normal，700等同于bold

        5. 垂直对齐方式

                vertical-align属性：middle、top、bottom

        6. 文本阴影

<!-- color为阴影颜色；x-offset为x轴位移；y-offset为y轴位移；blur-radius为阴影模糊半径 -->
text-shadow: color x-offset y-offset blur-radius;

         7. 设置超链接

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

                 设置伪类的顺序：a:link->a:visited->a:hover->a:active

        8. 列表样式

值	说明	语法示例
none	无标记符号	list-style-type:none;
disc	实心圆，默认类型	list-style-type:disc;
circle	空心圆	list-style-type:circle;
square	实心正方形	list-style-type:square;
decimal	数字	list-style-type:decimal

        9. 设置背景图像

                9.1 背景颜色：background-color：；

                9.2 背景图像：background-image：url("图片路径"); 

                9.3 背景重复方式：

                        background-repeat属性

                                repeat：沿水平和垂直两个方向平铺

                                no-repeat：不平铺，即只显示一次

                                repeat-x：只沿水平方向平铺

                                repeat-y：只沿垂直方向平铺

                9.4 背景定位：

值	含义
Xpos  Ypos	单位：px， Xpos表示水平位置，Ypos表示垂直位置
X%  Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词： left、center、right 垂直方向的关键词： top、center、bottom

                 9.5 背景样式可以简写为：background：背景颜色 背景图像 背景定位 背景重复方式；

                 9.6  背景尺寸background-size

auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

四、CSS渐变

        渐变分为线性渐变和径向渐变：

                线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等 。

                径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合。

        语法：linear-gradient ( position,  color1,  color2,…)；  （position为渐变方向）

        注：渐变需要兼容不同浏览器的内核，比较繁琐，所以即使在工作中也很少用到。

点击进入下一节学习分享​​​​​​​