css基础 背景Text文本格式Font字体链接列表Table表格

Posted 知其黑、受其白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css基础 背景Text文本格式Font字体链接列表Table表格相关的知识，希望对你有一定的参考价值。

阅读目录

CSS 背景

CSS 背景属性用于定义 html 元素的背景。

CSS 属性定义背景效果：

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

background-color 属性定义了元素的背景颜色。

页面的背景颜色使用在 body 的选择器中:

body background-color:#b0c4de;

CSS 中，颜色值通常以以下方式定义:

十六进制 – 如：”#ff0000″
    RGB – 如：”rgb(255,0,0)”
颜色名称 – 如：”red”

背景图像

background-image 属性描述了元素的背景图像。

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

页面背景图片设置实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>wgchen</title> 
<style>
    body 
    
    	background-image:url('3.jpg');
    	background-color:#cccccc;
    
</style>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>

背景图像 – 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

背景图像- 设置定位与不平铺

让背景图像不影响文本的排版。

如果你不想让图像平铺，你可以使用 background-repeat 属性:

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:


提示：为 background-position 属性提供值有很多方法。

首先，可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。

不同类型的值对于背景图像的放置稍有差异。

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 “background”:


当使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

CSS background 属性

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 URL（smiley.gif); 是允许的。

默认值:请参阅单独的属性
继承:no
版本:CSS1+ CSS3中的新的属性
javascript 语法:object object.style.background=”red url(smiley.gif) top left no-repeat”

js 语法

document.querySelector('body').style.background = 'red';

css 语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
值说明CSS
background-color指定要使用的背景颜色1
background-position指定背景图像的位置1
background-size指定背景图片的大小3
background-repeat指定如何重复背景图像1
background-origin指定背景图像的定位区域3
background-clip指定背景图像的绘画区域3
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1
background-image指定要使用的一个或多个背景图像1

所有主流浏览器都支持 background 属性。

注意：IE8和更早版本不支持一个元素多个背景图像。

注意：IE7和更早的版本不支持”继承”的值。 IE8 需要定义 ！DOCTYPE。 IE9支持”继承”。

在一个 div 元素中设置多个背景图像（并指定他们的位置）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>码云笔记(mybj123.com)</title> 
<style>
body
 
    background: #00ff00 url('笑脸.gif') no-repeat fixed center; 

</style>
</head>
<body>
<p>This is some text</p>
...
</body>
</html>

background-position 属性设置背景图像的起始位置

注意：对于这个工作在 Firefox 和 Opera，background-attachment必须设置为 “fixed（固定）”。

默认值:0% 0%
继承:no
版本:CSS1
JavaScript 语法:object object.style.backgroundPosition=”center”

语法

background-position: horizontal vertical

horizontal：水平的 vertical：垂直的

水平是

percentage（百分比） | length | left | center | right

垂直是

percentage | length | top | center | bottom

属性值

值描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		如果仅指定一个关键字，其他值将会是”center”
x% y%第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit指定background-position属性设置应该从父元素继承

定位 background-image：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>固定居住背景图片</title> 
<style>
body
 
    background-image:url('3.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 

</style>
</head>
<body>

<p>
<b>注意:</b> 
该属性工作在 Firefox 和 Opera, background-attachment 属性会被设置为 "fixed".
</p>

</body>
</html>

background-size 属性指定背景图片大小

默认值:auto
继承:no
版本:CSS3
JavaScript 语法:object object.style.backgroundSize=”60px 80px”

语法

background-size: length|percentage|cover|contain;
值描述
length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

指定背景图像的大小：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>指定背景图像的大小</title> 
<style> 
body

    background:url('3.jpg');
    background-size:80px 60px;
    background-repeat:no-repeat;
    padding-top:40px;

</style>
</head>
<body>

<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>

<p>原始图片: <img src="3.jpg"  alt="Flowers" width="224" height="162"></p>

</body>
</html>

background-Origin 属性指定 background-position 属性相对位置

注意如果背景图像 background-attachment 是 ”fixed 固定”，这个属性没有任何效果。

默认值:padding-box
继承:no
版本:CSS3
JavaScript 语法:object object.style.backgroundOrigin=”content-box”

语法

background-origin: padding-box|border-box|content-box;
值描述
padding-box背景图像填充框的相对位置
border-box背景图像边界框的相对位置
content-box背景图像的相对位置的内容框

内容框相对定位的背景图片：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>background-Origin 属性指定 background-position属性相对位置</title>
    <style>
        div 
            border: 1px solid black;
            padding: 35px;
            background-image: url('3.jpg');
            background-size:25px 25px;
            background-repeat: no-repeat;
            background-position: left;
        

        #div1 
            background-origin: border-box;
        

        #div2 
            background-origin: content-box;
        
    </style>
</head>
<body>

<p>背景图像边界框的相对位置：</p>
<div id="div1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<p>背景图像的相对位置的内容框：</p>
<div id="div2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

background-clip 属性指定背景绘制区域

语法

background-clip: border-box|padding-box|content-box;
值说明
border-box默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box背景绘制在衬距方框内（剪切成衬距方框）。
content-box背景绘制在内容方框内（剪切成内容方框）。

指定绘图区的背景：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    #example1 
        border: 10px dotted black;
        padding: 35px;
        background: yellow;
    

    #example2 
        border: 10px dotted black;
        padding: 35px;
        background: yellow;
        background-clip: padding-box;
    

    #example3 
        border: 10px dotted black;
        padding: 35px;
        background: yellow;
        background-clip: content-box;
    
</style>
</head>
<body>

<p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动

属性值

值描述
scroll背景图片随着页面的滚动而滚动，这是默认的。
fixed背景图片不会随着页面的滚动而滚动。
local背景图片会随着元素内容的滚动而滚动。
initial设置该属性的默认值。
inherit指定 background-attachment 的设置应该从父元素继承。

注意： Internet Explorer 8 及其更早版本的浏览器不支持多个背景图像在一个元素。

如何指定一个固定的背景图像：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜</title>
<style>
body 

    background-image:url('3.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;

</style>
</head>
<body>

<p>背景图片是固定的。尝试向下滚动页面。</p>
...

</body>
</html>

CSS Text 文本格式

通过 CSS 的 Text 属性，你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等，你可以观察下述的一段简单的应用了 CSS 文本格式的段落。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本格式</title>
<style>
    h1 
        text-align: center;
        text-transform: uppercase;
        color: #A7C942;
    

    p 
        text-indent: 50px;
        text-align: justify;
        letter-spacing: 3px;
    

    a 
        text-decoration: none;
    
</style>
</head>
<body>
    <h1>文本格式</h1>
    <p> 此文本使用一些文本格式属性设置样式。标题使用文本对齐、文本转换和颜色属性。段落缩进、对齐，并指定字符之间的间距。下划线将从“尝试一下”链接中删除。</p>
</body>
</html>

效果如下：

Text Color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

 十六进制值 – 如”＃FF0000″
 一个RGB值 – “RGB（255,0,0）”
 颜色的名称 – 如”红”

一个网页的背景颜色是指在主体内的选择：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>码云笔记(mybj123.com)</title>
<style>
    body 
        color: red;
    

    h1 
        color: #00ff00;
    

    p.ex 
        color: rgb(0, 0, 255);
    
</style>
</head>
<body>
    <h1>这是标题 1</h1>
    <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
    <p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>

注：对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

text-align 文本的对齐方式

text-align 文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右，两端对齐.

当 text-align 设置为 ”justify“，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

Web前端开发笔记——第三章 CSS语言 第三节 文本字体背景超链接样式属性

CSS3的字体样式属性，文本样式属性

css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）

vs中font颜色属性格式

程序员必须知道的HTML常用代码都有哪些

CSS：10月11日课堂笔记: CSS的概念|基础选择器|文本样式属性