css基础学习笔记(二)
2015-04-26 15:18
435 查看
一、css背景
背景色
p {background-color: gray;}
p {background-color: gray; padding: 20px;}(背景色从元素中的文本向外少有延伸,只需增加一些内边距)
背景图像
body {background-image: url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
背景重复
body
{
background-image: url(/i/eg_bg_03.gif); (默认为repeat,在x和y上平铺)
}
背景定位
关键字(top、bottom、left、right 和 center,通常成对使用,默认为center)
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
}
百分数值(图像中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像)
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
}
长度值(图像的左上角与 background-position 声明中的指定的点对齐,而不是中心对齐)
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
}
背景关联
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
}
二、css文本
p {text-indent: 5em;}(缩进文本)
p {text-indent: -5em; padding-left: 5em;}
使用百分比缩进,百分数要相对于缩进元素父元素的宽度
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
水平对齐
text-align:center (left、right )
属性justify(两端对齐)
字间隔
word-spacing(可以为正值和负值)
letter-spacing (字母间隔,可以为正值和负值)
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
字符转换
text-transform(值none, uppercase ,lowercase, capitalize)处理文本的大小写
h1 {text-transform: uppercase}
文本装饰
text-decoration (none, underline ,overline ,line-through, blink)
三、css字体
指定字体系列 font-family
当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,需要在 font-family 声明中加引号。
body {font-family: sans-serif;}
字体风格 font-style
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
p.italic {font-style:italic;}
字体加粗 font-weight
关键字 100 ~ 900 为字体指定了 9 级加粗度。700 等价于 bold
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小 font-size
使用 em 来设置字体大小,1em 就等于 16 像素
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
背景色
p {background-color: gray;}
p {background-color: gray; padding: 20px;}(背景色从元素中的文本向外少有延伸,只需增加一些内边距)
背景图像
body {background-image: url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
背景重复
body
{
background-image: url(/i/eg_bg_03.gif); (默认为repeat,在x和y上平铺)
background-repeat: repeat-y; (no-repeat 则不允许图像在任何方向上平铺)
}
背景定位
关键字(top、bottom、left、right 和 center,通常成对使用,默认为center)
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;(等价于top center)
}
百分数值(图像中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像)
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
长度值(图像的左上角与 background-position 声明中的指定的点对齐,而不是中心对齐)
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
背景关联
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed(图像相对于可视区是固定的(fixed),不会受到滚动的影响)
}
二、css文本
p {text-indent: 5em;}(缩进文本)
p {text-indent: -5em; padding-left: 5em;}
使用百分比缩进,百分数要相对于缩进元素父元素的宽度
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
水平对齐
text-align:center (left、right )
属性justify(两端对齐)
字间隔
word-spacing(可以为正值和负值)
letter-spacing (字母间隔,可以为正值和负值)
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
字符转换
text-transform(值none, uppercase ,lowercase, capitalize)处理文本的大小写
h1 {text-transform: uppercase}
文本装饰
text-decoration (none, underline ,overline ,line-through, blink)
三、css字体
指定字体系列 font-family
当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,需要在 font-family 声明中加引号。
body {font-family: sans-serif;}
字体风格 font-style
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
p.italic {font-style:italic;}
字体加粗 font-weight
关键字 100 ~ 900 为字体指定了 9 级加粗度。700 等价于 bold
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小 font-size
使用 em 来设置字体大小,1em 就等于 16 像素
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
相关文章推荐
- HTML&CSS基础学习笔记1.31-像素和相对长度
- HTML&CSS基础学习笔记1.27-input提交数据
- jQuery学习笔记之五----基础DOM和CSS操作
- 【慕课网】HTML&CSS基础课程学习笔记
- HTML&CSS基础学习笔记1.28-颜色的表达
- HTML&CSS基础学习笔记1.29-灵活地使用样式
- CSS从基础到熟练学习笔记(一)引入CSS样式的三种方式以及多种样式的优先级
- HTML&CSS基础学习笔记1.31-元素选择器
- HTML&CSS基础学习笔记1.23-input标签的单选与多选
- HTML+CSS基础学习笔记2
- HTML&CSS基础学习笔记13—无序列表
- HTML&CSS基础学习笔记1.15-合并单元格
- HTML&CSS基础学习笔记1.25-input标签提交数据
- HTML&CSS基础学习笔记1.21-简单的注册页面
- HTML&CSS基础学习笔记1.17-表格的头部与尾部
- JQuery学习笔记三:基础DOM和CSS操作
- CSS基础学习笔记-1:CSS样式继承
- HTML&CSS基础学习笔记1-简单网页中有哪些标签?
- CSS学习笔记--基础(一)
- 学习笔记-《零基础学习HTML5—html+css基础 》1.前端认知