CSS第一天学习

程序员文章站 2024-03-11 20:09:37

...

1.1基本概念
CSS层叠样式表（Cascading Style Sheets）
为了实现页面内容和表现形式的分离更加省时省力
为什么需要CSS
HTML描述了要呈现的内容，而CSS则定义了这些内容的呈现形式。比如字体，颜色等。使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。主要就是让它看起来更美观好看。
使用样式有三种方式
1.内联样式优先于内部样式不会被其影响

<p style="font-size: 24px;color: chartreuse">内联样式的演示</p>

只对当前标签有效
将样式定义在style属性中，内容修改麻烦，不利于维护和分工合作，只能运用在当前标签
2.内部标签

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        p{
            font-size: 20px;
            color:red;
        }
    </style>
</head>
<body>
<p style="font-size: 20px;color: chartreuse">内联样式的演示</p>
<p>内部样式</p>
<p>内部样式</p>

比内联标签优化了许多但是并没有实现分离也只能在其页面使用
3.外部样式表

p{
  font-size: 20px;
    color: red;
}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CSS/E102-01-02.css">
</head>

彻底分离利于维护和分工合作
任何需要用到该样式表中的样式的页面都可以用该文件链接实现
推荐使用外部样式
但以后的案例为了方便，尽量使用内联与内部标签

1.2颜色
自然界的颜色数量是无穷的，但是计算机只能表示有限的信息。
需要将连续的量（无穷）转化为离散的量（有限）的
所有的颜色都可以由红red绿green蓝blue三原色调配而成
css中用8位表示一个颜色，那么可以表示比28（256）种颜色，所有总共可以表示256*256*256种颜色（真彩色）
Css中有多种颜色表示形式：
（1）十六进制形式：

<P style="color: #ff0000;">十六进制颜色表示样式</P>

（2）RGB颜色

<P style="color: RGB(255,0,0);">RGB颜色表示样式</P>

（3）RGBA颜色
在RGB颜色基础上增加了透明度分量（Alpha），该分量的驱逐范围为0（完全透明）1.0（完全不透明）

<P style="color: RGBA(255,0,0,1);">RGBA颜色表示样式</P>

（4）HSL颜色
颜色也可以由另外三个分量来表示，即色调、饱和度和明度。

<P style="color: HSL(120,50%,50%);">HSL颜色表示样式</P>

（5）HSLA颜色
在HSL颜色的基础上增加了Alpha分量

<P style="color: HSLA(120,50%,50%,0.5);">HSL颜色表示样式</P>

（6）预定义颜色

<P style="color:red">预定义颜色表示样式</P>

尺寸单位
常见的单位：
Cm：厘米
Mm：毫米
in：英寸（inch）
Px：像素（pixel）
%：百分比

Em、它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
vw、viewpoint width，视窗宽度，1vw=视窗宽度的1%
Vh、viewpoint height，视窗高度，1vh=视窗高度的1%

Px：绝对单位，%相对尺寸单位。
相对长度：
CSS第一天学习
还有个%，图片上没加上去
绝对长度：

CSS第一天学习