css常用元素属性

最新推荐文章于 2024-07-12 09:41:36 发布

躲不过️动

最新推荐文章于 2024-07-12 09:41:36 发布

阅读量490

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_52083255/article/details/122433802

版权

笔记专栏收录该内容

69 篇文章 1 订阅

订阅专栏

css常用元素属性

字体属性

设置内容	方法
字体类型	`font-family`
字体大小	font-size
字体粗细	font-weight
文本样式	`font-style`
字体颜色	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>字体属性</title>
    <style>
        #s1 {
            /* 设置字体 */
            font-family: 'Miccrosoft YaHei';
            /* 字体大小 */
            font-size: 30px;
            /* 字体粗细 */
            font-weight: 300px;
            /* 文本样式-倾斜，normal 为正常 */
            font-style: italic;   
               /* 字体颜色 */
               /* 方式1 */
            /* color: tomato; */
            /* 方式2:color:rgb(255,99,71) */
            /* 方式3: */
            color:#ff6347
        }
    </style>
</head>
<body>
    <span id="s1">
        猜猜我是谁
    </span>
    
</body>
</html>

网页显示：
在这里插入图片描述

注意点：

若有多个字体，使用逗号分隔；
字体的大小：要明确给定（每个浏览器不一样），单位px不要省略；
字体的粗细：使用数字表示大小：100 -> 900；
color 属性值写法：（1）直接写单词；（2）RGB方式；（3）十六进制（较常用）

文本属性

文本对齐

控制文字水平方向的对齐样式；

格式：

 text-align: [值]；

值的写法：

center: 居中对齐
left: 左对齐
right: 右对齐

代码如下：

<!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>文本属性</title>
    <style>
         /* 文本对齐方式 */
         #d1 {
            text-align: left;
        }
        #d2 {
            text-align: center;
        }
        #d3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="d1">hello</div>
    <div id="d2">world</div>
    <div id="d3">earth</div>
</body>
</html>

网页显示：
在这里插入图片描述

文本装饰

 text-decoration: [值];

常用取值:

underline ：下划线（常用）
none ：啥都没有，可以给 a 标签去掉下划线
overline ：上划线（不常用）
line-through ：删除线（不常用）

代码如下：

 <div>
        <p style="text-decoration: none;">什么都不加</p>
        <p style="text-decoration: overline;">上划线</p>
        <p style="text-decoration: line-through;">删除线</p>
        <p style="text-decoration: underline;">下划线</p>
 </div>

网页显示：
在这里插入图片描述

文本缩进

控制段落的首行缩进 (不影响其他行)；

格式：

text-indent: [值];

注意点：

单位可以使用 px 或者 em；
使用 em 作为单位更好，1 个 em 就是当前元素的文字大小；
缩进可以是负的, 表示往左缩进 (会导致文字就冒出去了)；

代码如下：

<p style="text-indent: 2em"> 向右缩进2个字符</p>
<p style="text-indent: -2em"> 向左缩进2个字符</p>

网页显示：
在这里插入图片描述

行高

行高：指的是上下文本行之间的基线距离；
其中有：
（1）顶线
（2）中线
（3）基线 (相当于英语四线格的倒数第二条线)
（4）底线

如图的四线三格：在这里插入图片描述

格式：

line-height: [值];

注意点：

行高 = 上边距 + 下边距 + 字体大小；
行高也可以取 normal 值（chrome默认21px）；
行高等于元素高度时, 可以实现文字居中对齐；

代码如下：

<div style="line-height: 6opx; font: size 40px;">行高60px，字体40px</div>

文本属性小结：

设置内容	方法
设置文本颜色	color
文本对齐	text-align：[值]
文本装饰	text-decoration: [值]
行高	line-height: [值]

背景属性

背景颜色

background-color: [指定颜色];

注：

默认是 transparent (透明) 的. 可以通过设置颜色的方式修改；

     <!-- 背景颜色 -->
 <div style="width:500px;height:100px;background-color: darksalmon;"></div>

设置背景颜色为：
在这里插入图片描述

背景图片

background-image: url(...);

注意:

url 不要遗漏；
url 可以是绝对路径, 也可以是相对路径；
url 上可以加引号, 也可以不加；

      <!-- 背景图片 -->
    <div style="width:220px;height:220px;background-image: url('rose2.jpg')"></div>

在这里插入图片描述

背景平铺

background-repeat: [平铺方式];

平铺方式取值:

repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

 <!-- 背景图片平铺 -->
    <div style="width:880px;height:220px;background-color: darkseagreen;background-image: url(rose2.jpg);background-repeat:repeat;"></div>

在这里插入图片描述

背景位置

格式：

background-position: x y;

参数的三种风格:

方位名词: (top, left, right, bottom)；
精确单位: 坐标或者百分比(以左上角为原点)；
混合单位: 同时包含方位名词和精确单位；

计算机中的平面坐标系：左手坐标系（即：x 轴往右，y轴往左）；

 <!-- 背景图片位置 -->
    <div style="width: 500px; height: 500px; background-image: url('rose.jpg'); background-repeat: no-repeat; background-position: top; background-color: royalblue;"></div>

也可以写成数字：background-position: 200px 400px;

背景尺寸

格式：

background-size: length|percentage|cover|contain;

注意：

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px；
可以填百分比，按照父元素的尺寸设置；
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中。

<!-- 背景尺寸 -->
<div style="width: 300px; height: 500px; background-image: url('rose.jpg'); background-repeat: no-repeat; background-color: red; background-size: contain;"></div>

圆角矩形

通过 border-radius 使边框带圆角效果；

格式：

   border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈；

代码如下：

<!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>
        #d1 {
            width: 500px;
            height: 200px;
            border: 2px solid red;
            border-radius: 10px;
        }
        #d2 {
            width: 300px;
            height: 300px;
            border: 2px solid red;
            /* border-radius: 150px; */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>

网页效果：
在这里插入图片描述

注：

生成圆形： border-radius 的值为正方形宽度的一半；
生成圆角矩形：border-radius 的值为矩形高度的一半；
展开写法：border-radius 是一个复合写法，实际上可以针对四个角分别设置（按照顺时针排列）；

如下所示：
在这里插入图片描述

盒模型

每一个 HTML 元素就相当于是一个矩形的 “盒子”；
这个盒子由这几个部分构成：

边框： border
内容：content
内边距： padding
外边距：margin

在这里插入图片描述
边框：

粗细: border-width；
样式: border-style, 默认没边框， solid ：实线边框 dashed ：虚线边框 dotted 点线边框；
颜色: border-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>边框</title>
    <style>
        #d1 {
            width:400px;
            height:200px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>
</html>

内边距：

默认内容是顶着边框来放置，用 padding 来控制这个距离；

四个方向：

padding-top
padding-bottom
padding-left
padding-right

若四个方向均要设置，则使用：padding

代码如下：

<!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>内边距</title>
    <style>
        #d1 {
            width:300px;
            height:200px;
            border:3px dotted red;
            /* 四个方向均要设置内边距 */
            padding:20px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>
</html>

外边距：

控制盒子和盒子之间的距离，可以给四个方向都加上边距：

margin-top
margin-bottom
margin-left
margin-right

代码如下：

<!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>外边距</title>
    <style>
        #d1 {
           width: 200px;
           height: 50px;
           border: 2px solid red;
            /* 两个div要间隔一定距离，只需要设置其中一个div，离另一个的外边距就行 */
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="d1"> 水果</div>
</body>
</html>

效果显示：
在这里插入图片描述

弹性布局

任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局；

<!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>
        #d1 {
            width: 100%;
            height: 200px;
            background-color: red;
            /* 父级元素设置弹性布局 */
            display: flex;

            /* 设置主轴上item元素的排列方式 */
            /* 靠左：不写，或指定为flex-start */
            /* justify-content: flex-start; */
            /* 靠右 */
            /* justify-content: flex-end; */
            /* 居中 */
            /* justify-content: center; */
            /* 最前，最后，item间都有间隔 */
            justify-content: space-around;
            /* item占据最前和最后，item间有间隔 */
            /* justify-content: space-between; */

            /* 设置侧轴上item元素的排列方式 */
            /* align-items: flex-end; */
            align-items: center;
        }
        #d1>span {
            background-color: green;
            width: 50px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果显示：
在这里插入图片描述
注：

1. justify-content：设置主轴上的子元素排列方式

取值	描述
flex-start	默认值,内容位于容器开头
flex-end	内容位于容器的结尾
center	内容位于容器中央
space-between	内容行与行之间留有空格
`space-around`	内容在行之前、中间、之后都留有空间

2.align-items：设置侧轴上的元素排列方式

取值	描述
flex-start	内容位于容器开头
flex-end	内容位于容器的结尾
center	内容位于容器中央
space-between	内容行与行之间留有空格
`space-around`	内容在行之前、中间、之后都留有空间
stretch	默认值

补充

chrome调试工具：

1.打开调试工具

F12
元素---->检查

2.标签页含义

elements ：查看标签结构

（1）ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小；
（2）使用左上角箭头选中元素；
（3）右侧可以修改选中元素的 CSS 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色；
（4）页面修改不会影响代码, 刷新就还原了；
（5）如果 CSS 样式写错了, 也会有提示； (黄色感叹号)

console ：查看控制台
source ：查看源码+断点调试
network ：查看前后端交互过程
application 查看浏览器提供的一些扩展功能(本地存储等)

3. 元素的显示模式

HTML 的标签的显示模式有很多，此处介绍两个：

块级元素

常见的有：h1 - h6 ；p ；div； ul； ol ；li
特点：
（1）独占一行
（2）高度, 宽度, 内外边距, 行高都可以控制
（3）宽度默认是父级元素宽度的 100% (和父元素一样宽)
（4）是一个容器(盒子), 里面可以放行内元素和块级元素

注意：

文字类的元素内不能使用块级元素；
p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div；

行内元素

常见的有：a； strong；b；em；del；span
特点：
（1）不独占一行, 一行可以显示多个
（2）高度、宽度、行高设置无效
（3）左右外边距有效(上下无效)，内边距有效
（4）默认宽度就是本身的内容
（5）行内元素只能容纳文本和其他行内元素, 不能放块级元素

区别小结：

元素	区别
行内元素	不独占一行、不能设置宽高、垂直方向不能设置内外边距
块级元素	独占一行、可以设置宽高、四个方向都能设置内外边距

4.改变显示模式