CSS之美化页面

  <span></span> 标签

  <span>行内定义一个区域  就是说一行可以被<span>划分多个小区域,从而实现某种特定效果。<span>本身并不具备属性。

  <sapn>和<div> 是相似的  <span> 在从CSS中 属性行内元素    而<div>属于块级元素

  什么是行内元素:  “标签可以在一行内”。

  什么是块级元素:“标签自己独占一行”。

样式

  1.字体样式

  font-size      字体大小

  font-family     字体类型  属性值有:黑体,宋体,微软雅黑,以及英文vaesea

                  可以把多个字体名称作为一个   回退系统来保存,如果浏览器不支持第一个,就回退到第二,第三个....

  font-weight      字体粗细    例如:font-size:bold;加粗       bolder 强调加粗   可以用数字代表    400表示正常 。

  font-style      字体风格      normal   浏览器默认显示一个标准字体,  italic  倾斜字体      oblique  倾斜字体

  

  组合写法:字体风格-->字体风格-->字体粗细-->字体大小-->字体类型

    例如:font:oblique  bold  12px  "楷体";

  2.文本样式

  text-align    文本对齐方式    属性值:left    right    center     justify

  text-indent       文本首行缩进           属性值:2em,em 属于单位

  text-decoration  文本的装饰       属性值:underline   加下划线      none  去除下划线    overline  上划线     line-through:删除线     blink   文本闪烁  只有在firefox才行。

  text-shadow  文本阴影       属性值:5px  5px  5px  5px  gray;  分别是  横坐标  纵坐标  模糊程度   模糊范围  颜色

  3.鼠标形状

  default  默认光标

  pointer  超链接的指针

  wait   程序正在忙

  .....

  4.网页背景

  background-color     背景颜色

  background-image     背景图片

  background-repeat    背景重复方式      属性值:repeat  沿水平和垂直两方向平铺     no-repeat   不平铺     repeat-x    只沿水平平铺     repeat-y    只沿垂直平铺

  background-position   背景定位             属性值:x      y      水平和垂直         x:left    center     right         y:top      center    bottom

  组合写法:background: red  url()  50px  50px  no-repaet;         分别是  背景颜色   背景图片   背景定位    背景重复方式

  5.列表样式

  list-style-type    属性值:none;    取消标记,       disc  实心圆,     circle  空心圆 ,     square  实心正方形,   decimal   数字。

  list-position    属性值:inside    列表项目放置文本以内 ,且环绕文本根据标记对齐      outside    默认值    标记位于文本的左侧, 列表项目放置放置在文本以外 ,且环绕文本不根据标记对齐。

CSS之美化页面的更多相关文章

  1. CSS美化页面滚动条

    文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将 ...

  2. css美化页面

    css美化页面 如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal ...

  3. 使用css全面美化input标签

    做网站时经常有这样那样的需要,要美化input ,于是CSS的美化必不可少.和程序人生的站长交流,他发给我这个. 下面是CSS样式 input { border:1px solid #B3D6EF; ...

  4. CSS补充之--页面布局、js补充,dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  5. [课程设计]Scrum 3.5 多鱼点餐系统开发进度(修复Bug&美化页面)

    Scrum 3.5 多鱼点餐系统开发进度(修复Bug&美化页面) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅 ...

  6. CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...

  7. Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  8. js、css动态压缩页面代码

    1.js.css动态压缩页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...

  9. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

随机推荐

  1. [Silverlight][linq to sql]不能找到linq to sql自动生成类型

    最近在做Silverlight项目,结合使用了WCF RIA service,通过linq to sql自动生成model类型,使用起来非常方便.具体可见linq to sql之silverlight ...

  2. java语言编程实现两个时间相差多少天、多少小时、多少分、多少秒

    不多说,直接上干货! DateDistance.java package zhouls.bigdata.DataFeatureSelection.test; import java.text.Date ...

  3. Hadoop2.X分布式集群部署

    本博文集群搭建没有实现Hadoop HA,详细文档在后续给出,本次只是先给出大概逻辑思路. (一)hadoop2.x版本下载及安装 Hadoop 版本选择目前主要基于三个厂商(国外)如下所示: 基于A ...

  4. HDU 5592——ZYB's Premutation——————【线段树单点更新、单点查询】

    ZYB's Premutation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  5. 再次梳理css3动画部分知识

    1.transform: 适用于2D或3D转换的元素 transform-origin:元素的位置点 css3转换(2D转换和3D转换):可以对元素进行移动.缩放.转动.拉长或拉伸. 2D转换:tra ...

  6. git分支合并冲突

    合并冲突 如果你在两个不同的分支中,对同一个文件的同一个部分进行了不同的修改,Git 就没法干净的合并它们. 如果你对 #53 问题的修改和有关 hotfix 的修改都涉及到同一个文件的同一处,在合并 ...

  7. 《Head First 设计模式》之状态模式——糖果机

    状态模式(State) ——允许对象在内部状态时改变它的行为,对象看起来好像修改了它的类. 策略模式与状态模式的区别 状态主体(拥有者)持有状态对象,运行时可以通过动态指定状态对象来改变类的行为 策略 ...

  8. 弹性布局 Flexible Box

    页面中任何一个元素都可以指定为 弹性布局(Flex) 属性:display 取值: 1.flex     将块级元素变为弹性布局容器 2.inline-flex   将行内元素变为弹性布局容器 兼容性 ...

  9. 阿里前端笔试总结--H5面试题

    转载网址 https://blog.csdn.net/qq_20913021/article/details/51351801 1.有一个长度未知的数组a,如果它的长度为0就把数字1添加到数组里面,否 ...

  10. three.js一个简单demo学些和讲解

    叉口裁剪球体案例 二话不说先上效果图: 全部代码带注释 <!DOCTYPE html> <html lang="en"> <head> < ...