CSS编写位置+单位

-王二毛-

已于 2022-09-02 22:25:35 修改

阅读量116

点赞数

分类专栏： # css 文章标签： css3

于 2021-05-11 18:02:21 首次发布

本文链接：https://blog.csdn.net/weixin_45084986/article/details/116664484

版权

css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、CSS编写位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 第二种方式（内部样式表），将样式编写到head中的style标签里-->
    <style>
        p{
            color: green;
            font-size: 50px;
        }
    </style>
    <!--  第三种方式 （外部样式表） 最佳实践 -->
     <link rel="stylesheet" href="./style.css">
</head>
<body>
     <!--第一种方式(内联样式，行内样式)：-->
     <span style="color: red; font-size: 60px;">爱你千千万万！</p>
	 <p>第二种方式（内部样式表）</p>
	</body>
</html>

在这里插入图片描述

二、 CSS_单位

2.1、像素&百分比&em&rem

1、像素
屏幕(显示器)实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的设备下显示效果不一样
2、百分比
也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变
3、em
em是相对于元素的字体大小来计算的
1em = 1font-size (默认为16px)
em-会根据字体大小的改变而改变
默认字体大小是16px

.box3{
            font-size: 50px;
            width: 10em;/*50*10px=500px*/
            height: 10em;/*50*10px=500px*/
            background-color: greenyellow;
        }

4、rem
相对于根元素的字体来计算

html{
	font-size:20px;
}
.box3{
            font-size: 50px;
            width: 10rem;/*20*10=200px*/
            height: 10rem;/*20*10=200px*/
            background-color: greenyellow;
        }

2.2、RGB值&RGBA值&HSLA值

1、RGB：
范围0-255
语法：rgb(红，绿，蓝)
2、RGBA:
就是在rgb的基础上增加了一个a表示不透明度I
需要四个值，前三个和rgb-样，第四个表示不透明度
1表示完全不透明，0表示完全透明， 5半透明
3、十六进制的RGB值:
语法: #红色绿色蓝色
颜色浓度通过00-ff
如果颜色两位两位重复可以进行简写
#aabbcc --> #abc
4、HSLA：
H色相(0-360)
S饱和度（0-100）
L亮度（0-100）
在这里插入图片描述