常见CSS操作，背景、文本、字体、链接link、列表list

最新推荐文章于 2022-06-05 15:54:50 发布

HERO-WRH

最新推荐文章于 2022-06-05 15:54:50 发布

阅读量217

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_38216661/article/details/81878496

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

背景background

用于定义html元素的背景，属性都是以background-开头

背景颜色 background-color

颜色有3种表现方式：
- 十六进制: “#ff0000”
- RGB : “rgb(255,20,20)”
- 颜色名称：”red”

背景图片：background-image

注意图片路径

background-image: url(../img/背景图片.jpg);

背景图片平铺 background-repeat

背景图片默认会在页面上水平和垂直平铺，有些时候会影响效果，那么我们就可以指定在水平或垂直方向上平铺
repeat-x 水平方向上平铺
repeat-y 垂直方向上平铺
no-repeat 不平铺

背景图片定位 background-position

值1：(left right center) (top center botton)两两相组合
值2：% %的形式
值3：px px的形式
左上为0 0，0% 0%；

背景图片是否能滚动 background-attachment

scroll 能滚动这是默认设置
fixed 背景图片是固定的

背景图片大小 background-size

值1: % %;
值2：px px

文本text

文本颜色 color

设置文字的颜色，3种表达方式

文本对齐方式 text-align

left 左对齐默认
right 右对齐
center 文本居中
justify 两端对齐

文本修饰 text-decoration

none 没有默认注意：a-href默认有一根下划线，可以使用text-decoration：none;去掉
underline 文本下有一条线
overline 文本上有一条线
line-through 有一条穿过文本的线

文本转换 text-transform

uppercase 全大写
lowercase 全小写
capitalize 大驼峰

文本缩进 text-indent

定义了文本第一行的缩进，如一段话开始应该空2格
% px

文本阴影 text-shadow

水平方向垂直方向阴影颜色

h1
{
    text-shadow: 2px 2px #ff0000;
}

字体 font

字体大小 font-size

% px 默认的字体为16px大小
em 1em=16px
xx-small x-small small medium(正常大小) large x-large xx-large
smaller (比父元素相比)
larger

字体粗细 font-weight

bold 粗体
bolder 更粗
lighter 更细
100-900的整百 400相当于正常 700相当于bold

字体类型 font-family

一般我们用的就是微软雅黑
注意：字体类型需要用引号引起来，当使用内联样式的时候，因为外面有一个双引号了，所以里面就只能用单引号

<p style="font-family: '微软雅黑';">微软雅黑</p>
<p style="font-family: 'arial black';">arial black</p>

字体斜体 font-style

italic 斜体
oblique 倾斜

链接 link

链接可以用任何的CSS属性，如颜色字体背景文本等等
我们可以定制链接的不同的状态的不同样式
a:link 正常，未访问过的链接
a:visited 已访问过的链接
a:hover 当用户鼠标放在链接上时
a:active 链接被点击时
a:hover 必须跟在a:link和a:visited后面
a:active 必须跟在a:hover后面
案例：创建一个链接块，并且放上去的时候变大

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:link, a:visited{
                text-decoration: none;
                text-align: center;
                font-weight: bold;
                background-color: brown;
                color: white;
                padding: 4px;
            }
            a:hover, a:active{
                font-size: 200%;
            }
        </style>
    </head>
    <body>
        <a href="#">像按钮一样的链接</a>
    </body>
</html>

列表 list

在html中列表有默认的标记，也可以用type属性来设置标记，但不推荐这么做，我们应该显示和内容分离
在CSS中用 list-style-type来设置标记类型

list-style-type: lower-norwegian;

我们还可以通过list-style-image来将自己的图片作为标记

list-style-image: url(img/背景图片.jpg);

HERO-WRH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见CSS操作，背景、文本、字体、链接link、列表list

背景background用于定义html元素的背景，属性都是以background-开头背景颜色 background-color颜色有3种表现方式：十六进制: “#ff0000”RGB : “rgb(255,20,20)”颜色名称：”red”背景图片：background-image注意图片路径background-image: url(...
复制链接

扫一扫

专栏目录