CSS基础系列(2)--CSS样式背景、文本、字体、链接、列表、表格、轮廓

1 CSS背景

  • 背景:
    CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果

常见的背景属性:

  • background-color 设置元素的背景颜色
    demo.css代码如下:
body{
    background-color: grey;
}

index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
    <p> 测试背景是否可以继承 </p>
</body>
</html>

可见,背景颜色也是可以继承的

  • background-image 把图片设置为背景
    index.html文件保持不变,值只改变css文件内容:
body{
    background-image: url("statics/image/0001.jpg");
}
  • background-position 设置背景图片的起始位置
    只修改demo.css文件观察效果:
body{
    background-image: url("statics/image/0001.jpg");
    background-repeat: no-repeat;
    background-position: center top;
}
  • background-repeat 设置背景图片是否及如何重复
    只修改css文件观察效果,其中background-repeat属性可以有好多中值可以设置,可以通过IDE设置后观察
body{
    background-image: url("statics/image/0001.jpg");
    background-repeat: no-repeat;
}
  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动
    如下设置,可以设置图片随着页面滚动而滚动
body{
    background-image: url("statics/image/0001.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
}
  • background-size 规定背景图片的尺寸
    如下可以设置图片的尺寸
body{
    background-image: url("statics/image/0001.jpg");
    background-repeat: no-repeat;
    background-size:1000px 1000px;
}
  • background-origin 规定背景图片的定位区域
  • background-clip 规定背景的绘制区域

2 CSS文本

  • CSS文本属性可定义文本外观
  • 通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进

文本的常用属性

color               文本颜色
direction           文本方向
line-height         行高
letter-spacing      字符间距
text-align          对齐元素中的文本
text-decoration     向文本添加装饰
text-indent         缩进元素中文本的首行
text-transform      元素中的字母
unicode-bidi        设置文本方向
white-space         元素中空白的处理方式
word-spacing        字间距

CSS3 提供的特别的属性

text-shadow         向文本添加阴影
word-wrap           规定文本的换行规则

demo.css中代码如下:

body{
    color: red;
}
h1{
    color:green;
    text-align: center;
    text-shadow: 5px 5px 1px red;
}
p{
    width: 20em;
    text-align: left;
    text-indent: 2em;
    text-transform: capitalize;
    word-wrap: normal;
}

index.html文件中的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
    <h1> h1 title</h1>
    <p>段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试</p>
    段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试
    <p >this is my first Paragph</p>
</body>
</html>

3 CSS字体

  • CSS字体属性定义文本的字体系列、大小、加粗、风格和变形

常用的字体属性

font-family                 设置字体系列
font-size                   设置字体的尺寸
font-style                  设置字体的风格
font-variant                以小型大写字体或正常字体显示文本
font-weight                 设置字体的粗细

demo.css代码如下:

p{
    font-size: 20px;
    font-family: Arial;
    font-variant: normal;
}

index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
    <p>hello world</p>
</body>
</html>

4 CSS链接

CSS链接的四种状态:

  • a:link 普通的、未被访问的链接
  • a:visited 用户已访问过的链接
  • a:hover 鼠标指针位于链接的上方
  • a:actve 链接被点击的时刻

常用的链接方式:

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

设置背景颜色:

  • background-color

举例如下:demo.css内容:

a:link{
    color:red;
    text-decoration: none;
}
a:visited{
    color: green;
}
a:hover{
    color: blue;
}
a:active{
    color: pink;
}

index.html内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

5 CSS列表

CSS列表属性允许你放置、改变列表标志,或者将图像作为列表项标志

常用的CSS列表属性有:

list-stype                  简写列表项
list-style-image            列表项图像
list-style-position         列表标志位置
list-style-type             列表类型

举例index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
    <ul>
        <li> 列表1 </li>
        <li> 列表2 </li>
        <li> 列表3 </li>
        <li> 列表4 </li>
    </ul>
</body>
</html>

下面通过改变不同css样式来观察效果:
demo.css如下:表示列表项用数字

ul li{
    list-style-type:decimal;
}

改变CSS样式可以让列表项用图片:

ul li{
    list-style-image:url("statics/image/0001.jpg")
}

继续修改参css样式:

ul li{
    list-style-position: inside;
}

6 CSS表格

  • CSS表格属性可以帮助我们极大的改善表格的外观

首先建立index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
    <table id="tb">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <th>张三</th>
            <th>100</th>
            <th>男</th>
        </tr>
        <tr>
            <th>李四</th>
            <th>10</th>
            <th>男</th>
        </tr>
        <tr>
            <th>王五</th>
            <th>30</th>
            <th>女</th>
        </tr>
    </table>
</body>
</html>
  • 表格边框

通过css样式设置边框:
demo.css内容如下:

#tb,tr,th,td{
    border: 1px solid grey;
}
  • 折叠边框

修改css样式即可改变表格为单条线,即折叠边框

#tb,tr,th,td{
    border: 1px solid grey;
}
#tb{
    border-collapse: collapse;
}
  • 表格宽高

继续修改css样式设置宽和高

#tb,tr,th,td{
    border: 1px solid grey;
}
#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
  • 表格文本对齐

继续修改样式,设置对齐格式,比如居中

#tb,tr,th,td{
    border: 1px solid grey;
    text-align: center;
}
#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
  • 表格内边距

  • 表格颜色

继续修改样式可以设置表格背景颜色

#tb,tr,th,td{
    border: 1px solid grey;
    text-align: center;
    background-color: lightsteelblue;
}
#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}

7 CSS轮廓

轮廓主要用例突出元素的作用

常用的属性如下:

outline                 设置轮廓属性
outline-colr            设置轮廓的颜色
outline-style           设置轮廓的样式
outline-width           设置轮廓的宽度

例如:
index.html内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
    <p>这是用于测试轮廓的字符</p>
</body>
</html>

demo.css样式内容如下:

p{
    outline-style: dotted;
    outline-width: 1px;
    outline-color: red;
}

原文链接

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页