字体
文本
背景
位置
边框
列表
其他

CSS中修饰字体的属性

属    性

描    述

属  性  值

font-family

字体族科

任意字体族科名称都可以使用例如Times、serif等,而且多个族科的赋值是可以使用的,中间用逗号分隔,以防止选择不存在的字体族科

font-size

字体大小

可以使用绝对大小、相对大小、长度或百分比

font-style

字体风格

normal(普通),italic(斜体)或oblique(倾斜)

font-weight

字体加粗

normal、bold、bolder或lighter等

font-variant

字体变形

normal(普通)或small-caps(小型大写字母)

font: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科>

文字颜色:color:red

CSS中常见的控制文本的属性

属    性

描    述

属  性  值

letter-spacing

字母间隔

该值必须符合长度格式,允许使用负值

word-spacing

文字间隔

该值必须符合长度格式,允许使用负值

text-decoration

文字修饰

underline(下划线),overline(上划线),line-through(删除线),blink(闪烁),或默认地使用none(无)

text-align

横向排列

left、right、center或justify

text-indent

文本缩进

该值必须是一个长度或一个百分比,若百分比则视上级元素的宽度而定

line-height

行高

可以接受一个控制文本基线之间的间隔的值。当值为数字时,行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值

text-tranform:lowercase,uppercase

CSS中常见的控制背景的属性

属    性

描    述

属  性  值

background-color

背景颜色

值和color属性值设定方式相同,或使用transparent(透明)值

background-image

背景图象

图片URL或none(无)

background-repeat

背景重复

repeat、repeat-x、repeat-y、no-repeat

background-attachment

背景附件

scroll(滚动)或fixed(固定),拖动滚条背景是否滚动设置

background-position

背景位置

横向的关键字(left, center, right),纵向的关键字(top, center, bottom)百分比和长度也可用做安排背景图象的位置

background:  <背景颜色> || <背景图象> || <背景重复> || <背景附件> || <背景位置>

应用多个图标放到同一个图片里

多个图标放到同一个图片里,通过定义某区块的背景定位,调用同一个图片中不同位置上的小图标,
好处是可以减少对服务器的请求次数,从而加快页面的访问速度

<style>
div
{
backgroud-image:url(bg.png) no-repeate 190px 180px;
}
</style>

边框属性 
任何一个元素都可以设置边框
边框属性是用于设置一个元素边框风格、边框宽度、边框颜色的略写,可以一起设置4边的边框,也可对上边框、右边框、下边框和左边框单独设置。 

边框风格属性

可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1到4个关键字,如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。
如果给出一个值,它将被运用到各边上。
如果两个或三个值给出了,省略了的值与对边相等
也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格 

各边的风格使用的属性值

none:没有边框,无论边框宽度设为多大
dotted:点线式边框
dashed:破折线式边框
solid:直线式边框
double:双线式边框
groove:槽线式边框
ridge:脊线式边框
inset:内嵌效果的边框
outset:突起效果的边框

边框宽度属性

可以通过边框宽度属性border-width设定上下左右边框的宽度,该属性用1到4个值来设置元素的边界,值是一个关键字或长度,不允许使用负值长度。
如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。
如果只给出一个值,它将被运用到各边上。
如果两个或三个值给出了,省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。
也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。除了可以使用长度单位定值外,还可以用medium(是默认值)、thin(比medium细)或thick(比medium粗)值。

边框颜色属性

可以通过边框颜色属性border-color设定上下左右边框的颜色,可以使用1到4个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等

略写的边框属性

CSS属性border是边框属性的一个快捷的综合写法,是一个用于设置一个元素边框的宽度、式样和颜色的略写,它包含border-width,border-style和border-color属性。
边框属性border只能设置四种边框,也只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值,网页制作者必须用一个或更多的属性,如:上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

鼠标光标属性

在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同的效果。CSS可以通过Cursor属性实现鼠标形状的改变,其属性可以是默认的鼠标形状default、小手形状hand、交叉十字crosshair、文本选择符号text、Windows的沙漏形状wait、带有问号的鼠标help以及各个方向的箭头属性值。

CSS中常见的控制列表的属性

属    性

描    述

list-style-type

设定引导列表项的符号类型,可以设置多种符号类型,值为disc、circle、square等

list-style-image

使用图像作为定制列表符号

list-style-position

决定列表项目缩进的程度

decimal,lower-roman,upper-roman,lower-alpha,upper-alpha
<ol style="list-style-type:decimal">
<li>aa</li>
</ol>

为了兼容各浏览器,一般设置style="list-style-type:none",然后再设置list-style-image:url();

常见的CSS属性和值CascadingStyleSheets的更多相关文章

  1. css学习(2)-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

  2. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  3. HTML标签CSS属性默认值汇总

    HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值2

    3  背景属性 大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2  CSS中常见的控制背景的属性 除了使用表 ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值3

    5  边框属性 边框属性用于设置一个元素的边框风格.边框宽度.边框颜色,可以一起设置4条边的边框,也可对上边框.右边框.下边框和左边框单独设置.分别介绍如下. a.边框风格属性 可以通过边框风格属性b ...

  6. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1

    CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

    6  鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值5

    CSS综合实例 在Web页面中经常使用栏目显示分类内容.本例将使用HTML和CSS结合编写一个分类栏目模型,用于演示前面介绍的CSS应用.通过使用独立的文件定义样式表,并在HTML文档中使用link标 ...

  9. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

随机推荐

  1. 【JavaFx教程】第三部分:与用户的交互

    第3部分的主题: 在表中反应选择的改变(TableView中). 增加增加,编辑和删除按钮的功能. 创建自定义弹出对话框编辑人员. 验证用户输入. 响应表的选择 显然,我们还没有使用应用程序的右边.想 ...

  2. Java 初/中级面试题及答案【详细】

    1.Java的HashMap是如何工作的? HashMap是一个针对数据结构的键值,每个键都会有相应的值,关键是识别这样的值. HashMap 基于 hashing 原理,我们通过 put ()和 g ...

  3. 一道很好的mysql面试练习题,having综合应用

    写一条SQL语句,求出2门以及2门以上不及格的科目平均分 >要出现2门以及2门以上的学科不及格 >计算该考生所有学科的平均分,不单是,不及格的那几门 #创建表: create table ...

  4. 排序算法(3)--Insert Sorting--插入排序[3]--Shell Sort--希尔排序

    1.基本思想 希尔排序是把记录按下标的一定增量分组,对每组使用直接插入排序算法排序:随着增量逐渐减少,每组包含的关键词越来越多,当增量减至1时,整个文件恰被分成一组,算法便终止. 2.实现原理 对于n ...

  5. Onsen UI for React文档

    注:采用ES6+JSX语法 1.开始一个项目 在React中使用Onsen UI 需要首先安装onsenui和react-onsenui模块. 可以使用monaca CLI工具包快速初始化一个应用: ...

  6. 用ContentProvider获取通讯录联系人

    手机中的联系人数据实际是保存在数据库中的,但Android并没有让我们通过操作数据库去读取数据,而是通过一个ContractProvider这个应用提供了一个ContentProvider访问接口. ...

  7. Android5.x Notification应用解析

    Notification可以让我们在获得消息的时候,在状态栏,锁屏界面来显示相应的信息,很难想象如果没有Notification,那我们的qq和微信以及其他应用没法主动通知我们,我们就需要时时的看手机 ...

  8. springboot 1.3.5升级1.5.9后 默认使用tomcat 8.5版本 get请求报400 异常信息为 The valid characters are defined in RFC 7230 and RFC 3986

    1.springboot 1.3.5升级1.5.9后 默认使用tomcat 8.5版本而之前用的是tomcat7    get请求报400 异常信息为 The valid characters are ...

  9. LeetCode题解之Longest Continuous Increasing Subsequence

    1.题目描述 2.问题分析 从每一个num[i]往前扫描即可. 3.代码 int findLengthOfLCIS(vector<int>& nums) { ){ return n ...

  10. 总结Linux 下Redis 操作常用命令(转)

    Redis的配置 Linux下安装 ]# wget http://download.redis.io/releases/redis-2.8.17.tar.gz ]# tar xzf redis-2.8 ...