CSS样式笔记_背景文本字体链接

CSS背景属性：

background：简写属性在一个声明中设置所有的背景属性。可以用于设置最底层的背景图片。

background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动。值如果为fixed，那么图像不会随页面的其余部分滚动。如果是scroll（默认效果）随着页面的滚动它不动，就会慢慢的看不见的。

background-color：设置背景颜色的。一般有三种格式：第二种第三种是一样的，用rgb代表。red，green，blue在00-FF即0-255直接选择。默认值是transparent。

body{background-color:yellow;}
h1{background-color:#00ff00;}
p{background-color:rgb(255,0,255);}

background-image：设置背景图片，默认值为none。如果用在body元素内是对整个页面加背景图片。其中url指向图像的路径。

body{ background-image: url(bgimage.gif);}

background-position：对图像进行定位。默认值是0%，0%===top，left===左上角，也可以直接定义像素点位置。如果用单词定义位置的话，有top，buttom和center三个值，两个参数，如果只写出第一个参数，那么第二个参数就会默认为center。下面的例子的图片将会是在页面的中心位置。

body
{ background-image:url('/i/eg_bg_03.gif');background-attachment:fixed;background-position:center;
}

background-repeat：设置背景图标是否重复，怎么样重复。默认值是repeat在水平和垂直同时重复。另外还有别的值repeat-x，repeat-y，no-repeat。分别表示只在水平重复，只在垂直重复，不重复。

背景属性可以放在任意的元素内，比如<p>，<div>不限于整个页面背景。

CSS文本属性：

color：跟background-color一模一样，有三种方法，只是这是设置文本字体颜色。

direction：文字的输出方向，默认值是ltr，从左至右，左对齐。还有rtl，表示从右至左，而且是右对齐。

line-height ：属性设置行间的距离（行高）。默认值是normal。也可以用百分比表示该属性的值，大多数浏览器中默认行高大约是 110% 到 120%（是因为基于字体的大小嘛？）。低于百分之一百的话，段落里的文字会有些重叠。等于百分之百上行贴着下行也不好看。也可用像素值，在大多数浏览器中默认行高大约是 20px（基于一般字体的大小）。也可以直接用长度值了，1是默认行高。低于1就会有重叠。

letter-spacing：属性增加或减少字符间的空白（字符间距）。默认值是normal，规定字符之间没有额外的的空白。该值可以为负值，字符之间就会产生重叠。值可以是em（字体高度，不是固定的，可以继承）或者px（像素值）。

text-align ：属性规定元素中的文本的水平对齐方式。如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

还有个属性值是justify实现两端对齐文本效果，两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。因为主要是调整字符间隔来实现该效果，如果letter-spacing被明确定义了，这个就会出现问题，会影响元素的外观，甚至改变其高度。

text-decoration：属性规定添加到文本的修饰。默认值为none，标准的文本属性，也可加上划线，下划线，中间的删除线，闪烁字体（我用几个浏览器都没有看到效果）。几个属性值分别是

h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}

text-indent ：属性规定文本块中首行文本的缩进。默认值是not specified。值可以是像素也可以是数值。如果是百分比，是定义基于父元素宽度的百分比的缩进。

p {text-indent:20px}
p {text-indent:2cm}

text-shadow：设置文本阴影，css2.1之后没有保留该属性。

text-transform ：属性控制文本的大小写。默认是none，标准文本。属性值的名字便是效果：变大写，变小写，每个单词首字母大写（此处别的不会改变，如果不是首字母也大写，是不会让其变成小写的。

  p.uppercase {text-transform: uppercase}p.lowercase {text-transform: lowercase}p.capitalize {text-transform: capitalize}

white-space ：属性设置如何处理元素内的空白。默认是normal，即是忽略空白。别的属性值还有pre，nowrap，pre-wrap，pre-line效果分别是保留空白，不折行（换行符除外），正常换行保留空白，合并空白符保留空白。
word-spacing ：属性增加或减少 单词间的空白（即字间隔）。默认是normal，单词间的标准空间。属性值与letter-spacing一样的。允许为负值。

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

CSS字体属性：

font-family 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。默认值为not specified（跟浏览器默认字体有关咯）。多个单词别忘了加引号。

p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}

font-size 属性可设置字体的尺寸。它设置的是字体中字符框的高度。默认值medium。可能的值：xx-small，small，large，xx-large，smaller，larger，length，%。

font-style 属性定义字体的风格。下面是正常，斜体，倾斜（后两个我是看不出啥差别）

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

p.normal {font-variant: normal}
p.small {font-variant: small-caps}

font-weight 属性设置文本的粗细。属性值normal，bold，bolder，lighter。也可是length自由设置粗细，为100-900，其中400 等同于 normal，而 700 等同于 bold。

CSS链接属性：

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。链接有四种状态

a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后。a:active 必须位于 a:hover 之后。

text-decoration 属性大多用于去掉链接中的下划线：

a:link {text-decoration:none;}    /* 未被访问的链接 */
a:visited {text-decoration:none;} /* 已被访问的链接 */
a:hover {text-decoration:underline;}   /* 鼠标指针移动到链接上 */
a:active {text-decoration:underline;}  /* 正在被点击的链接 */

这样的话，只有鼠标悬浮在连接上还有点击的时候才能显示下划线，这样比较美观。同样可以的话还可以用background-color来设置背景颜色。

CSS样式笔记_背景文本字体链接相关推荐

java样式是什么_java css样式 css样式的种类选择器文本相关样式背景相关样式边框盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
怎样用html设置文档格式,Dreamweaver使用CSS样式表设置网页文本格式
Dreamweaver使用CSS样式表设置网页文本格式互联网发布时间:2008-10-17 19:35:50 作者:佚名我要评论本文章介绍如何在 Dreamweaver 中使用层叠 ...
div html表格样式设置字体大小,css样式表中如何修改字体大小为18px？
css样式表中如何修改字体大小为18px?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css样式表中如何修改字体大小为18px? 在css样式表中可以 ...
laravel项目中css样式表的背景图片不显示
刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd {background: url(../images/sky/body ...
html背景图片css怎么添加,css样式怎么插入背景图片？
css样式怎么插入背景图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在css中,给html元素添加背景图,主要通过background-image ...
js修改css样式属性_这个笔记《CSS样式的常见属性及值》，让菜鸟轻松学会包粽子...
常见样式属性及值字体: font -family -size -style: normal(正常)|italic(倾斜)|oblique -weight: normal|bold(粗体) 如果组合起 ...
用于设定表格样式的附加css,Dreamweaver使用CSS样式表设置网页文本格式
核心提示:本文章介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式.您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本,从而能更加灵活自如地控 ...
HTML及CSS学习笔记 13 - 背景
本文是HTML及CSS课程的第十三课.主要介绍和页面背景相关的CSS样式属性,如背景颜色.背景图片.背景图片平铺方式等等文章目录一.web中的图片 1.web中常见的图片格式 1.1.JPEG 1 ...
引用自己创建的css样式表_如何使用CSS创建联系表
引用自己创建的css样式表 First we create the HTML elements - input fields for First Name, Last Name, Email and ...

CSS样式笔记_背景文本字体链接

CSS样式笔记_背景文本字体链接相关推荐

最新文章

热门文章