CSS第一天学习

忘是亡心i 2022-06-12 02:08 278阅读 0赞

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

内联样式的演示

只对当前标签有效  
将样式定义在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>
 内联样式的演示
 内部样式
 内部样式

比内联标签优化了许多但是并没有实现分离也只能在其页面使用  
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）十六进制形式：

十六进制颜色表示样式

（2）RGB颜色

RGB颜色表示样式

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

RGBA颜色表示样式

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

HSL颜色表示样式

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

HSL颜色表示样式

（6）预定义颜色

预定义颜色表示样式

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