前端学习之路css(02)-基础属性

来源：互联网发布：macbook怎么删除软件编辑：程序博客网时间：2024/06/06 19:25

CSS backgrounds（背景）

CSS的背景属性包含以下
background-color，背景颜色。
background-image，图像设置为背景。
background-repeat，设置背景图像是否及如何重复。
background-position，设置背景图像的起始位置。
background-attachment，背景图像是否固定或者随着页面的其余部分滚动。
background，简写属性。

1. background-color 背景颜色

设置背景颜色；
颜色可以有三种定义方式：
16进制，background-color: #123456;
颜色名称，background-color: blue;
rgb/argb, background-color: rgb(10, 10, 10);

2. background-image 背景图像

设置背景图像；
默认情况下，图像进行平铺重复显示以覆盖整个元素实体；
background-image: url(path);

3. background-repeat 背景图像展现方式

属性2中图像默认是平铺重复显示，这个属性就是来控制如何显示的。
background-repeat: repeat-x，只在x方向平铺重复显示；
background-repeat: repeat-y，只在y方向平铺重复显示；
background-repeat: no-repeat，不重复显示；

4. background-position 背景图像展现位置

此属性来决定背景图像显示在元素实体中的位置。
位置有4种指定的方式。
1.left、top、right、bottom、center，两个组合，如果只指定1个，其他值为center；
2.x% y%，x%元素实体x方向占比，y%同理；0% 0%的等同left top；
3.xpos ypos，像素点，如果只指定一个值，另一个值相当于50%，2/3可混用；
4.inherit，指定background-position属性设置应该从父元素继承。

5. background-attachment 背景图像滚动方式

设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment: scroll，默认值，随页面的其余部分滚动。
background-attachment: fixed，背景图像是固定的。
background-attachment: inherit，从父元素继承。

6. background 设置背景简写

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中；
背景颜色的简写属性为 “background”，简写属性的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用。

body {background:#ffffff url('img_tree.png') no-repeat right top;}

7. demo

<!doctype html><html><head><meta charset="utf-8"><title>css</title><style type="text/css">body{    background-image: url('image/girl02.jpg');    background-repeat:repeat-y;    background-attachment: scroll;}#myId1 {    background-color: #123456}</style></head><body><p id="myId1">我是世界第1帅</p><p id="myId2">我是世界第2帅</p><p id="myId3">我是世界第3帅</p></body></html>

这里写图片描述

CSS text（文本格式）

直接列举属性（inherit继承父元素）
color，文本颜色；
direction，文本方向，ltr默认左到右，rtl右到左；
letter-spacing，字符间距。默认没有，可以设置”npx”，n可为负值；
line-height，设置行间距。
1.normal，默认合理的行间距。
2.number数字，数字和当前字体尺寸相乘当做行间距，比如0.5倍距；
3.length，设置固定的行间距；
4.%，基于当前字体尺寸的百分比行间距。
text-align，文本对齐方式。left、right、center、justify（两端对齐） ;
text-decoration，定义修饰文本。
1.none，默认的；
2.underline，文本添加下划线；
3.overline，文本添加上划线；
4.line-through，穿过文本一条线；
5.blink，闪烁文本。
text-indent，文本块中首行文本的缩进。
1.length，定义固定的缩进。默认值：0。
2.%，定义基于父元素宽度的百分比的缩进。
text-shadow，设置文本阴影。需要设置4个值。依次为
1.h-shadow，必需。水平阴影的位置。允许负值。
2.v-shadow，必需。垂直阴影的位置。允许负值。
3.blur，可选。模糊的距离。
4.color，可选。阴影的颜色。
text-shadow:2px 2px 8px #FF0000;
text-transform，控制元素中的字母。
1.capitalize，文本中的每个单词以大写字母开头。
2.uppercase，定义仅有大写字母。
3.lowercase，定义仅有小写字母。

更过属性参照

CSS font（字体）

1. CSS字型

在CSS中，有两种类型的字体系列名称；
通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）；
特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）；

2. 字体系列

font-family 属性设置文本的字体系列；
font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体；
如果字体系列的名称超过一个字，它必须用引号，如Font Family：”宋体”；
多个字体系列是用一个逗号分隔指明。

3.字体样式

font-style属性设置文本的字体样式；
font-style:normal，正常；
font-style:italic，斜体；

4.字体大小

font-size 属性设置文本的大小；
设置文本大小可以有两种方式，绝对大小，相对大小；

5.字体大小像素

为了避免浏览器中无法调整文本的问题，许多开发者使用 em 单位代替像素；
em的尺寸单位由W3C建议，font-size:？em来设置；
1em和当前字体大小相等。在浏览器中默认的文字大小是16px；
还可以使用em和百分比设置。

<!doctype html><html><head><meta charset="utf-8"><title>css</title><style type="text/css">#myP1{    font-family: "Times New Roman", Times, serif;    font-style: normal;    font-size: 20px;}#myP2{    font-family: Arial, Helvetica, sans-serif;    font-style: italic;    font-size: 2.5em;}</style></head><body><h4>font-family</h4><p id="myP1">serif</p><p id="myP2">sanserif</p></body></html>

这里写图片描述

a.link{ color: #000000; }a.visited { color: #123456; }a.hover { background-color: #000000; }a.active { color:#0000FF; }

0 0

前端学习之路css(02)-基础属性

CSS backgrounds（背景）

CSS text（文本格式）

CSS font（字体）

CSS link（链接）