CSS美化网页

CSS美化网页

为什么使用CSS

1. 有效的传递页面信息
2. 使用CSS美化过的页面文本 ， 漂亮 ， 美观 ， 可以吸引用户
3. 可以很好的突出页面的主题内容 ， 使用户第一眼可以看到页面主要内容
4. 具有良好的用户体验

span 和 div

• span标签的作用
  能让某几个文字或者某个词语凸显出来
  行内元素
• udiv标签
  u块级元素
  案例：

    
    

    






享受西开教学服务
在西开学习 , 成就IT梦想
请选择 西开吧

字体样式

文本样式

案例：
css代码：

#author{
    font-family: 楷体;
}

#time{
    font-style: italic;
}

/* text-indent文本首行缩进 */
.sj{
    text-indent: 2em;
}

h1{
    text-shadow: aqua -1px 1px 10px;
}

    
    

    









公司简介

发布人: 阿里           时间: 20119-01-01

阿里技术中心是一家集教育培训、人才服务、服务外包、企业定制为一体的综合性软件技术服务机构。

公司成立十年以来，全心全意致力于“Linux&C、C++开发工程师”、“Linux系统运维工程师及运维研发工程师”、“Web前端开发工程师”、“Java开发工程师”的培训，以及C++开发、云计算、虚拟化、python自动化运维等综合性企业级职业技能培训。公司持续深耕主校区，并在各个大学开设分校区与咨询网点，借助高校区位优势，专注于Linux技术的培训，为大学毕业生开辟更为广泛的就业途径。
　　

公司拥有一支专业进取的教学师资团队，具有丰富的行业经验，参加过众多政府重大电子信息工程项目的研发。公司还具备体系完整并不断更新的独家课程体系和配套的题库考试系统，为学员学习保驾护航。经过十年的教育培训历程，公司已为腾讯、阿里、百度、京东、搜狐、新浪等一线互联网企业输送技术精英2000余人，得到用人单位和结业学员的一致好评。

　　

文本阴影

• text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持
  

超链接伪类

案例：
CSS代码：

a:visited{
    color: #ff5f5d;
}


/*产生事件的伪类在同一个元素只能绑定一个*/
a:active{
    color: cyan;
}

/*:hover鼠标悬停样式*/
a:hover{
    color: yellow;
}

    
    
    




点击进入...

列表样式

• list-style-type
• list-style-image
• list-style-position
• list-style
  
  案例：
  CSS代码：

ul li{
    /*none为空*/
    list-style-type: circle;
}

    
    
    





    
java
    
python
    
c/c++
    
Linux
    
Bash

网页背景

• 背景颜色
  background-color
• 背景图片
  background-image
• 背景定位
  background-position属性
• 背景重复方式
  background-repeat
• 简写
  background
  background:#C00 url(…/image/kuangshen.jpg) 205px 10px no-repeat;
  案例：
  Css代码：

body{
    background-image: url("../../resources/image/1.png");
    background-repeat: no-repeat;
}

背景尺寸

• 设计师如何对背景图片的大小进行控制呢 ？
• 背景尺寸 ： background-size
  

CSS3渐变

• 线性渐变
  颜色沿着一条直线过渡 ： 从左到右、从右到左、从上到下等
• 径向渐变
  圆形或椭圆形渐变 ， 颜色不再沿着一条直线变化， 而是从一个起点朝所有方向混合

线性渐变

• 语法
  
• u兼容Webkit内核的浏览器
  
  案例：