CSS的常用属性

最新推荐文章于 2024-06-08 10:14:33 发布

༨Rꫀꪖᦔᵧₒᵤ11

最新推荐文章于 2024-06-08 10:14:33 发布

阅读量118

点赞数

分类专栏： html CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_69821704/article/details/128709075

版权

html 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

CSS

18 篇文章 0 订阅

订阅专栏

一、字体属性

1.color：字体颜色

div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

2.font-size:字体大小

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

3.font-weight:字体粗细

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗 400等同默认，而700等同于bold

H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

4.font-style:字体样式

值	描述
normal	默认值
italic	定义斜体字

5.font-family属性指定一个元素的字体（比如微软雅黑，宋体等）

font-family:"Microsoft YaHei","Simsun","SimHei";

温馨提示

每个值用逗号分开

如果字体名称包含空格，它必须加上引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: #fea234;
            font-size: 25px;
            font-weight: 600;
            font-style: italic;
            font-family: "Microsoft YaHei","Simsun","SimHei";
        }
    </style>
</head>
<body>
    <!-- 
        字体属性：
            1.color:字体颜色
            2.font-size:字体大小
            3.font-weight:字体粗细
            4.font-style:字体样式
            5.font-family:字体
     -->
     <p class="text">欢迎来的华谊兄弟跨年</p>
</body>
</html>

二、背景属性

CSS背景属性主要有以下几个

属性	描述
background-color	设置背景颜色
background-image	设置背景图片
background-attachment	设置背景图片是随内容滚动还是固定
background-position	设置背景图片显示位置
background-repeat	设置背景图片如何填充
background	复合属性

1.background-color:背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.background-image:背景图像

元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 1300px;
            height: 1500px;
            background-image: url("bg.webp");
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

3.background-repeat:如何平铺背景图像

值	说明
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 1300px;
            height: 1500px;
            background-image: url("bg.webp");
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

4.background-size:置背景图像的大小

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

5.background-position:置背景图像的位置

该属性设置背景图像的起始位置，其默认值是：0% 0%

值	说明
left top	左上角
left center	左中
left bottom	左下
right top	右上角
right center	右中
right bottom	右下
center top	中上
center center	中中
center bottom	中下
x% y%	第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0%
xpos ypos	单位是像素

6.background-attachment：该属性设置背景图像是否固定或者随页面滚动。简单来说就是一个页面有滚动条的话，滑动滚动条背景是固定的还是随页面滑动的

值	说明
scroll	背景图片随页面滚动而滚动
fixed	背景图片固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 1300px;
            height: 1500px;
            background-image: url("bg.webp");
            background-repeat: repeat;
            background-size: contain;
            background-position: 0;
            background-attachment: scroll;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

三、文本属性

1.text-align：文本对齐方式

值	描述
left	文本居左排列，默认值
right	把文本排列到右边
center	把文本排列到中间

2.text-decoration：属性规定添加到文本的修饰，下划线、上划线、删除线等

值	描述
underline	定义下划线
overline	定义上划线
line-through	定义删除线

3.text-transform：控制文本的大小写

值	描述
captialize	定义每个单词开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

4.text-indent：属性规定文本块中首行文本的缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title1{
            text-align: left;
            text-decoration: overline;
        }
        .title2{
            text-align: center;
            text-decoration: underline;
        }
        .title3{
            text-align: right;
            text-decoration: line-through;
        }
        .text1{
            text-transform: capitalize;
        }
        .text2{
            text-transform: uppercase;
        }
        .text3{
            text-transform: lowercase;
        }
        .target{
            text-indent: 50px;
        }
    </style>
</head>
<body>
    <h1 class="title1">标题一</h1>
    <h1 class="title2">标题二</h1>
    <h1 class="title3">标题三</h1>

    <p class="text1">happy new year</p>
    <p class="text2">happy new year</p>
    <p class="text3">happy new year</p>

    <p class="target">它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。</p>
</body>
</html>

四、列表属性

1.list-style-type：设置列表项标记的类型

值	描述
none	无标记
disc	标记是实心圆
circle	标记是空心圆
square	标记实心方块
decimal	标记是数字

2.list-style-image：使用图像来替换列表项的标记

ul { 
  list-style-image: url('sqpurple.gif'); 
}

3.list-style-position：指示如何相对于对象的内容绘制列表项标记

值	描述
inside	列表项目标记放置在文本内
outside	列表项目标记放置在文本外

4.list-style：简写属性，在一个声明中设置所有的列表属性

可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list{
            list-style-type: square;
        }
        .list-1{
            list-style-image: url("logo.png");
        }
        .list-2{
            list-style-position: inside;
        }
        .list-3{
            list-style: none;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    <ul class="list-1">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>


    <ul class="list-2">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    <ul class="list-3">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
</html>

五、表格的属性

1.表格的边框：border

table, td { 
  border: 1px solid black; 
}

2.折叠边框：border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

3.表格宽度和高度：width和height属性定义表格的宽度和高度

table { width:100%; } 
td { height:50px; }

4.表格文字的对齐方式

text-align：水平对齐方式（左中右）

vertical-align：垂直对齐方式（上中下）

td { text-align:right; }
td { vertical-align:bottom; }

5.表格的填充：padding

td { padding:15px; }

6.表格的背景颜色：background-color

td { background-color:green; color:white; }

六、其他属性

1.letter-spacing：字符间距

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

2.line-height：行高

p{
    line-height: 30px;
}

3.overflow：定义超出边界的内容隐藏还是滚动显示

值	描述
visible	默认值
hidden	超出容器内容被修剪
scroll	内容会被修剪，但是可以滚动查看剩余内容
auto	如果内容被修剪，可以滚动滚动查看剩余内容

div{
  width:150px;
  height:150px;
  overflow:scroll;
}

4.white-space：属性指定元素内的空白怎样处理

值	描述
pre	空白会被浏览器保存
nowrap	文本不会换行

p {
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5.verticle-align：属性设置一个元素的垂直对齐方式

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

值	描述
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
text-bottom	把元素的底端与父元素字体的底端对齐。