CSS样式学习笔记

最新推荐文章于 2022-04-06 19:37:01 发布

Shreck66

最新推荐文章于 2022-04-06 19:37:01 发布

阅读量749

点赞数 1

分类专栏： html-css web 文章标签： css html

本文链接：https://blog.csdn.net/Shreck66/article/details/51578607

版权

web 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html-css

5 篇文章 0 订阅

订阅专栏

1.CSS背景颜色

我们可以使用background-color属性为元素设置背景色
这条规则把元素背景色设为灰色

p {background-color: gray;}

如果我们希望背景色从元素中的文本向外少有延生，只需要增加一些内边距

p {background-color: gray; padding: 40px;}

具体实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {background-color: gray;padding: 40px;}
    </style>
</head>
<body>
<p>我是gray</p>
</body>
</html>

2.CSS背景图片

(1)我们可以使用background-image属性来设置背景图片

body {background-image: url(myimage.png)}

具体实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {background-image: url(accept.png);}
    </style>
</head>
<body>
<p>body有背景图像了</p>
</body>
</html>

(2)我们可以使用background-repeat属性对背景图像进行平铺
repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复,no-repeat则不允许图像在任何方向上平铺

body {
background-image: url(myimage.png);
background-repeat: repeat-y
}

具体实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {background-image: url(accept.png);background-repeat: repeat-x}
    </style>
</head>
<body>
<p>body有背景图像了</p>
</body>
</html>

(3)背景定位
我们可以利用background-position属性来改变图像在背景中的位置

下面例子在body元素中将一个背景图像居中放置

body｛
background-image: url(myimage.png);
background-repeat:no-repeat;
background-position:center;
｝

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {background-image: url(accept.png);background-repeat: no-repeat;background-position: center}
    </style>
</head>
<body>
<p>body有背景图像了</p>
</body>
</html>

3.CSS文本

(1)我们可以通过文本的text-indent属性来实现文本的缩进

p {text-indent: 5em;}
上述值还可以是百分比

具体实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p {text-indent: 5em}
    </style>
</head>
<body>
<p>我有缩进</p>
</body>
</html>

(2)我们可以用text-align来控制文本的位置

p {text-align: center}

具体实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p {text-align: center}
    </style>
</head>
<body>
<p>我的位置</p>
</body>
</html>

(3)装饰文本可以使用text-decoration属性

none
underline
overline
line-through

具体实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p {text-decoration: line-through}
    </style>
</head>
<body>
<p>我会闪烁</p>
</body>
</html>

4.CSS链接

链接对应４种状态，我们可以为它不同的状态设置不同的样式
４种状态如下

a:link - 普通的，未被访问的链接
a:visited - 用户已经访问的链接
a:hover - 鼠标位于链接的上方
a:active - 正在被点击的链接

具体实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a:link {color: #FF0000;}
        a:visited {color: #00FF00;}
        a:hover {color: #FF00FF;}
        a:active {color: #ooooFF;}
    </style>
</head>
<body>
<a href="https://www.baidu.com">点我</a>
</body>
</html>

4.列表样式

(1)我们可以用属性list-style-type来修改列表项的标志类型

具体实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
     ul {list-style-type: square}
    </style>
</head>
<body>
    <ul>
        <li>橘子</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>
</body>
</html>

5.表格样式

我们可以使用border属性来控制表格边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
     table,th,td {border: 1px solid blue}
    </style>
</head>
<body>
     <table>
        <th>
            <td>101</td>
            <td>102</td>
        </th>
         <th>
             <td>103</td>
             <td>104</td>
         </th>
     </table>
</body>
</html>

Shreck66

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式学习笔记

1.CSS背景颜色我们可以使用background-color属性为元素设置背景色这条规则把元素背景色设为灰色 p {background-color: gray;}如果我们希望背景色从元素中的文本向外少有延生，只需要增加一些内边距 p {background-color: gray; padding: 40px;}具体实例如下<!DOCTYPE html><html lang="
复制链接

扫一扫