3.CSS基本样式：背景、文本、字体、链接、列表、表格、轮廓

最新推荐文章于 2024-01-25 18:27:51 发布

bymyself11

最新推荐文章于 2024-01-25 18:27:51 发布

阅读量733

点赞数 1

分类专栏： CSS学习之路

本文链接：https://blog.csdn.net/bymyself11/article/details/50965889

版权

CSS学习之路专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.背景：

CSS允许应用纯色作为背景，也允许使用背景图像创建背景

属性描述

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

background-color 设置元素的背景颜色

background-image 把图片设置为背景

background-position 设置图片的起始位置

background-repeat 设置图片是否重复及如何重复

CSS3背景

background-size:规定背景的图片的尺寸

background-origin:规定背景图片的定位区域

background-clip:规定背景的绘制区域

如下事例

设置body背景颜色：

body{
background-color: blue;
}

设置body的背景图片

body{
background-image: url('my.jpg');
}

设置图片的其实位置

body{
background-image: url('my.jpg');
background-position:0px,0px;
}

设置图片不可以重复

body{
background-image: url('my.jpg');
background-repeat: no-repeat;
}

设置背景图片固定

body{
background-image: url('my.jpg');
background-attachment: fixed;
}

2.文本

常用属性描述

color 文本颜色

text-align 文本对齐方式

text-indent 首行缩进

text-transform 元素中的字母

如下事例：

这里color就不做事例了

设置文本对齐方式：现有对齐

p{
text-align: right;
}

设置文本缩进两个字符

h5{
text-indent: 2em;
}

3.字体

定义字体系列、大小、加粗、风格和变形

属性描述

font-family 字体系列

font-size 字体大小

font-style 设置字体风格

font-variant 以小型大写字体或正常字体显示文本

font-weight 设置字体的粗细

部分事例如下：

设置字体

p{
font-family: fantasy;
}

4.链接

CSS链接的四种状态

a:link 普通的、未被访问的链接

a:visited 用户已经访问的链接

a:hover 鼠标位于链接的上方

a:active 链接北点击的时刻

常见的链接样式

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

事例如下：

a:LINK{
color: blue;
text-decoration: none;
}
a:HOVER {
color: green;

}
a:ACTIVE {
color: red;
}
a:VISITED {
color:yellow;
}

5.列表

两种列表：有序列表(ol)列表项的标记有数字或字母

无序列表(ul)列表标记用特殊图像（如小黑点，小方框）

属性：描述

list-style 复合属性，使用该属性可以同时指定list-style-image,list-style-position,list-style-type

list-style-image 该属性用于指定作为列表项标记的图片

list-style-position 该属性用于指定列表项标记出现的位置

list-style-type 该属性用于指定列表项标记的样式

如下事例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="mycss.css" type="text/css" rel="stylesheet">
<style type="text/css">
.a {
list-style-type: circle;
}

.b {

list-style-type: square;
}

.c {
list-style-type: upper-roman;
}

.d {
list-style-type: lower-alpha;
}
.e{

list-style-image: url('avatar_vgirl.png');
}
</style>

</head>
<body>
<ul class="a">
<li>ball</li>
<li>run</li>
<li>jump</li>
</ul>
<ul class="b">
<li>apple</li>
<li>orange</li>
<li>pear</li>
</ul>
<ol class="c">
<li>ball</li>
<li>run</li>
<li>jump</li>
</ol>

<ol class="d">
<li>apple</li>
<li>orange</li>
<li>pear</li>

</ol>

<ul class="e">
<li>ball</li>
<li>run</li>
<li>jump</li>
</ul>
</body>
</html>

运行结果：

6.表格

属性

border 设置外边框

border-collapse 合并边框

事例代码：

#tb th, tr td{
border: 1px solid blue;
padding: 5px;
}

#tb{
border-collapse: collapse;
width:500px;

}
#tb th{
text-align: right;
background-color: aqua;
color: black;
}
#tb tr.alt td{
color: black;
background-color: green;
}