1.23CSS3部分基本样式（1）

最新推荐文章于 2024-08-14 09:51:23 发布

Bug制造者_moyi

最新推荐文章于 2024-08-14 09:51:23 发布

阅读量179

点赞数

分类专栏：学习笔记 CSS3 文章标签： css

本文链接：https://blog.csdn.net/saber_Q7/article/details/113088175

版权

CSS3 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

学习笔记

2 篇文章 0 订阅

订阅专栏

作用与字体样式

1.字体基本样式

span：可以套住重点要突出的字

字体样式

font-family：字体格式
font-size：字体大小
font-weight：粗细

color：字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            font-family: 方正粗黑宋简体;
            font-weight: bolder;
            font-size: 20px;
        }
        #xi{
            color: #82fff7;
        }
        .yi{
            color: #14681a;
        }
    </style>
</head>
<body>
<p>我是</p>
<p class="yi">遇事不决</p>
<p id="xi">可问春风</p>
</body>
</html>

2.文本样式

颜色：rgba()a是透明度, rgb(), RGB
文本对齐：text-aligncenter
首行缩进：text-indent=2em
行高：line-height

装饰：text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        body p{
            font-weight: bolder;
            color: #14681a;
            height: 50px;
            background-color: #feff22;
            line-height: 50px;
            text-align: center;
        }
        .xi1{
            text-decoration: line-through;
        }
        .xi2{
            text-decoration: underline;
        }
        .xi3{
            text-decoration: overline;
        }
    </style>
</head>
<body>
<p class="xi3">书山有路勤为径</p>
<p class="xi1">敏而好学，不耻下问</p>
<p class="xi2">学海无涯苦作舟</p>
</body>
</html>

3.超链接伪类

text-align：文本位置
hover：鼠标悬停状态
active：鼠标按住未释放状态

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        body{
            text-align: center;
        }
        /*鼠标悬停状态*/
        p:hover{
            color: #14681a;
        }
        /*鼠标按住未释放状态*/
        p:active{
            color: rgba(255,127,33,0.98);
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="resurce/4.jpg" alt="">
</a>
<p>作者：马特</p>
<p>出版：人民邮电出版社</p>
<p>价格：￥99.00</p>
</body>
</html>

4.列表样式

list-style：去掉无序列表前的黑点或有序列表前的数字
list-style：circle表示空心圆
list-style：decimal表示数字
list-style：square表示正方形

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<div>
<link rel="stylesheet" href="css/style1.css">
<h3 id="xiBa">排列数字</h3>
<ul>
    <li><a href="">11</a>&nbsp&nbsp&nbsp<a href="">12</a></li>
    <li><a href="">21</a>&nbsp&nbsp&nbsp<a href="">22</a></li>
    <li><a href="">31</a>&nbsp&nbsp&nbsp<a href="">32</a></li>
    <li><a href="">41</a>&nbsp&nbsp&nbsp<a href="">42</a></li>
    <li><a href="">51</a>&nbsp&nbsp&nbsp<a href="">52</a></li>
</ul>
</div>
</body>
</html>

css代码如下：

div{
    width: 214px;
    background-color: #f5deb3;
    text-align: left;
}
#xiBa{
    background-color: #e66465;
    text-indent: 2.5em;
    color: #21336a;
}
ul li{
    list-style: none;
    background-color: wheat;
    text-indent: 1em;
    height: 30px;
}
a{
text-decoration: none;
    color: #9198e5;
}
a:hover{
    color: rgba(68, 64, 44, 0.98);
}
a:active{
    color: rgba(121, 52, 114, 0.98);
    font-size: 20px;
}

效果如下

5.背景图片

backgrand-image:图片背景
backgrand-position:图片背景位置
backgrand-repeat:图片是否重复
- no repeat:不重复
- repeat-x:横向填充
- repeat-y:纵向填充
在4列表样式的基础上加一个背景图片填充的样式
补充ul li和h3的代码如下：

ul li{
    list-style: none;
    background-color: wheat;
    text-indent: 1em;
    height: 30px;
    background-image: url("../images/21.png");
    background-position: 1px 4.5px;
    background-repeat: no-repeat;
}
h3{
    background: #e66465 url("../images/21.png") 190px 9px no-repeat ;
}

结果如图：
渐变简单了解：
- 线性渐变(linear-gradient)
  - 基础用法：background:linear-gradient(angle,start-color,soft-line,end-color)
- 径向渐变（radial-gradient）
  - 基础语法：radial-gradient(shape,start-color, soft-line,end-color )
附加一个渐变代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        line-height: 400px;
        text-align: center;
    }
    #grad1 {
        height: 400px;
        background-color: red;
        background-image: linear-gradient(to right bottom, #f5f5dc, #ffc0cb);
    }
</style>
</head>
<body>
<div id="grad1">
西内西内西内！
</div>
</body>
</html>

效果如下：（颜色接近，效果不太明显）

Bug制造者_moyi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.23CSS3部分基本样式（1）

作用与字体样式1.字体基本样式span：可以套住重点要突出的字字体样式font-family：字体格式font-size：字体大小font-weight：粗细color：字体颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> p{ font-family: 方正
复制链接

扫一扫

专栏目录