CSS文本样式

  • text-align:设置文本的对齐方式

取值:

left 向左对齐

right:向右对齐

center:居中对齐

  • text-indent:设置文本的首行缩进

例如,字体设为12px,首行缩进另个字,24px。

  • text-decoration:设置文本的装饰线

取值:

none 不设置文本装饰线

        underline:设置下划线

overline:上划线

line-through:中划线

  • text-transform:(主要应用于英文文本)

取值:

capitalize:将首字母转换大写

uppercase:将所有的字母转换大写

lowercase:将所有的字母转化小写

  • letter-spacing:如果是汉字,设置字与字之间的间距

如果是英文文本,设置,字母与字母的间距

  • word-spacing:设置词间距(主要应用英文)
  • line-height:设置文本的行高

结构代码:

示例2:

样式代码:

结构代码:

CSS列表样式

list-style:设置列表的符号类型

取值:

不设置符号

none

无序列表的项目符号:

square:实心方块

circle:空心原点

disc 实心原点

有序列表的项目符号

decimal                阿拉伯数字

lower-alpha            小写字母

upper-alpha            大写字母

lower-roman        小写罗马数字

upper-roman        大写罗马数字

list-style-position:项目符号的位置

inside(在li标签的内部)

outside(在li标签的外部)

list-style-image:将项目符号用背景图片表示

书写规则:list-style-image:url(背景图片的路径URL)

简写形式:list-style:square inside url(arrow.gif);

示例1:

样式代码:

结构代码:

CSS背景样式

background-color:设置背景颜色:red #ff0000,rgb(100,120,200)

background-image:url(背景图片的路径url)

background-repeat:

no-repeat:不平铺

repeat:x轴和y轴平铺

repeat-x:在x轴上平铺

repeat-y:在y轴上平铺

background-position:设置图片的位置;

数值表示法,x px,ypx 只写其中一种,表示另外一个方向上未设置的值,跟这已经设置的这个相同。

单词表示法:

x方向:left center right,

y轴方向:top(顶部对齐) center(居中) bottom(底部)

百分比表示法:50%,50%

background-position:left center;

设置图片x轴向左对齐

设置图片y轴向居中对齐

代码:

CSS 样式二的更多相关文章

  1. 如何在普清的屏上调试CSS样式二倍图背景

    背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是 ...

  2. 博客CSS样式 二

    预览 可自行更改颜色 背景图 页面定制 CSS 代码中加入: url为背景图地址,可下载心仪背景图后上传到博客园相册后获取地址 body { color: #000; background: url( ...

  3. css扁平化博客学习总结(二)css样式重置

    css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, block ...

  4. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  5. 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

  6. 前端(二):css样式

    本节笔记根据css中文手册整理,内容已做成思维导图.下载地址https://files.cnblogs.com/files/kuaizifeng/css.xmind.zip. css(Csacadin ...

  7. CSS样式之操作属性二

    ********css样式之属性操作******** 一.文本属性 1.text-align:cnter 文本居中 2.line heigth 垂直居中 :行高,和高度对应 3.vertical-al ...

  8. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  9. CSS样式----图文详解(二):css属性

    主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...

随机推荐

  1. C#实现汉诺塔问题

    汉诺塔的由来:汉诺塔是源自印度神话里的玩具.上帝创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上安大小顺序摞着64片黄金圆盘.上帝命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上.并且 ...

  2. OpenGL入门学习(转)

    OpenGL入门学习 http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html 说起编程作图,大概还有很多人想起TC的#includ ...

  3. 也来一篇关于Infragistics WPF Report的使用教程 (一)

    前言 Infragistics Report是一款比較灵活的报表控件, 比微软的rdlc控件至少在页面打印上, 页面的控制比較好调整. 这里使用的是Infragistics Ultimate  v14 ...

  4. springMVC1 springmvc的基础知识

    springmvc第一天 springmvc的基础知识 springmvc课程安排: 第一天: 基础知识 springmvc框架(重点) mvc在b/s系统中应用方式 springmvc框架原理(Di ...

  5. C 高级编程 2 内存管理

    理解malloc的工作原理: malloc使用一个数据结构(链表)来维护分配的空间.链表的构成: 分配的空间.上一个空间的地址.下一个空间的地址.以及本空间的信息等. 对malloc分配的空间不要越界 ...

  6. Type mytableview does not confirm to portocol UITableViewDataResource

    继承UITableViewDataSource报上面这个总是,是重写协议时写错了 override func numberOfRowsInSection(section: Int) -> Int ...

  7. 对request.getSession(false)的理解(附程序员常疏忽的一个漏洞)--转

    出处:http://blog.csdn.net/xxd851116/archive/2009/06/25/4296866.aspx [前面的话] 在网上经常看到有人对request.getSessio ...

  8. centos中samba配置后始终连不上的绝招

    奶奶的,按照网上的办法改了/etc/samba/smb.conf配置文件,结果在win7里面死活连不上,后来发现是防火墙的问题. 有两个命令必须要执行: 1.将SELIUNX设置成disabled或者 ...

  9. java中关于json传图片的方法

    一般来说传图片可以以流的形式来传输,即便是用json传输,一般也都是传一个地址,而图片都存在服务器上,然后顺着地址发送请求下载图片. 但是这次公司的项目中,图片是存在oracle数据库中的blob字段 ...

  10. jQuery Validate 插件[表单验证 属性介绍]

    详细介绍一下Validate插件 $("#form的Id").validate({ }) 属性 规则 描述 required:true 必须输入的字段 required: &quo ...