CSS之美化页面
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之美化页面的更多相关文章
- CSS美化页面滚动条
文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将 ...
- css美化页面
css美化页面 如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal ...
- 使用css全面美化input标签
做网站时经常有这样那样的需要,要美化input ,于是CSS的美化必不可少.和程序人生的站长交流,他发给我这个. 下面是CSS样式 input { border:1px solid #B3D6EF; ...
- CSS补充之--页面布局、js补充,dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
- [课程设计]Scrum 3.5 多鱼点餐系统开发进度(修复Bug&美化页面)
Scrum 3.5 多鱼点餐系统开发进度(修复Bug&美化页面) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅 ...
- CSS 控制Html页面高度导致抖动问题的原因
CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...
- Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析
加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景 在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...
- js、css动态压缩页面代码
1.js.css动态压缩页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
- TMS WEB CORE直接从HTML&CSS设计的页面布局
TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...
随机推荐
- ubuntu下安装录屏软件
sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder sudo apt-get update sudo apt-get inst ...
- Tomcat安装和配置过程
tomcat的下载.配置.启动方法.网上教程乱七八糟,还是自己mark一下备用吧. 一.官网下载Tomcat的压缩包 Tomcat是Apache软件基金会的一个开源项目.登录Apache官网即可找到下 ...
- [Java][Liferay] 解决在Linux系统中liferay-ext项目无法卸载的问题
今天遇到liferay-ext无法卸载,log中显示卸载了,但是在App Manager中依然可以看到安装过的ext,其中一个原因是webapps下面的**-ext文件夹的权限只有root才能修改,将 ...
- hibernate课程 初探一对多映射2-1 一对多映射简介
1 在数据库中用主外键的形式实现一对多的映射关系 2 hibernate 在一方设置集合set,表示多方
- mongodb客户端操作常用命令
一启动mongodb数据库mongod --dbpath E:\mongo\data\db(这里些自己的mongodb数据库存放目录)二客户端操作1.显示数据库集合show dbs2.新建数据库use ...
- table表格td内内容自动换行
项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...
- Python开发环境Wing IDE的Blender的Python代码调试技巧
Wing IDE是一个集成开发环境,可用于开发.测试和调试为Blender编写的Python代码,Blender是一个开源的3 D内容创建系统.Wing IDE提供自动完成.调用提示.强大的调试器.以 ...
- cocos2d-x游戏之2048
学习游戏编程是一件非常有趣的事情,在cocos2dx官网找了几个简单的游戏试试手,感觉也不是那么难,首先来看看2048这款游戏吧,很火的原因之一是因为它简单而易操作.网上这位Legendof1991大 ...
- 使用 javascript API -- fetch 实现文件下载功能
下载原理 下载原理很简单,就是模拟 a 标签的点击下载,我们都知道 ajax 不支持下载文件功能,是因为 ajax 只能用来传输字符型数据,所以在过去无法使用 ajax 来下载文件. xhr2 可以把 ...
- Spring Cloud学习路线
学习本学习路线学习完,大家将会对微服务.Spring Cloud.Docker.Kubernetes有一个系统.全面的认识.通过学习,将能掌握相关的知识体系,并能够投入到项目实战中去. 本学习路线采用 ...