雨落辰潇-文档站

Appearance

CSS ​

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS 由哈坤·利于 1994 年进行设计，1997 年 W3C 完成了第一份正式标准。

CSS 的基本语法 ​

HTML 和 CSS 的关系 ​

js
1. HTML 实现页面结构，CSS 实现页面样式
2. CSS 样式需要作用在 HTML 元素上
3. 每一个 HTML 标签也称之为一个元素

HTML 元素树（元素和元素之间的关系） ​

sh
父元素
祖先元素
子元素
后代元素
兄弟元素		具体相同父元素的才是兄弟元素

CSS使用方法 ​

① 行内式 ​

html
<标签 style="CSS代码...;"></标签>

② 内嵌式 ​

html
<style>
	CSS 代码...
</style>
style 标签放在页面的任意位置都可以生效，建议放在 head 中！

③ 外链式 ​

html
<link rel="stylesheet" href="CSS文件地址">
sh
link 标签放在页面的任意位置都可以生效，建议放在 head 中！

CSS 基本语法结构 ​

选择器： 用于选择要设置样式的元素。

声明块： 选择器后面的大括号，声明块由多条声明组成。

声明： 每条声明以分号结尾，声明由CSS属性和它的值组成。

内嵌式和外链式的语法结构 ​

css
选择器 {
    属性名:值;
    属性名:值;
    属性名:值;
    属性名:值;
	....
}

行内式的语法结构 ​

html
<标签名 style="属性名:值; 属性名:值; 属性名:值; 属性名:值;..."></标签名>

注意区分HTML 属性 和 CSS 属性 ​

html
<!-- 使用HTML属性设置图片尺寸 -->
<img src="./images/小乐出浴图.jpg" alt="小乐出狱" width="400" height="300">

<!-- 使用CSS属性设置图片尺寸 -->
<img src="./images/小乐出浴图.jpg" alt="小乐出狱" style="width:400px;height:300px">

CSS 的层叠性 ​

不同方式、不同选择器所设置的样式都会层叠在该元素上
.开头的是类
#开头的是id
直接开头的是选择器

CSS 注释 ​

css
/* CSS 注释 */
/* 
    CSS 注释
    CSS 注释
    CSS 注释
    CSS 注释
*/

CSS 长度单位和颜色设置 ​

CSS 中的长度单位 ​

sh
px 像素
em 字体大小的倍数
%  百分比 宽度参照的是父元素宽度，高度也是父元素的高度

CSS 中的颜色设置方式 ​

① 使用颜色名表示颜色 ​

常见的颜色名有：

css
red、orange、yellow、green、cyan、blue、purple、pink、deeppink、skyblue、greenyellow ...

② rgb 方式表示颜色 ​

css
/*
    计算机三元色
    red         0~255   0%~100%
    green       0~255   0%~100%
    blue        0~255   0%~100%
*/
background: rgb(100, 200, 120);
background: rgb(255, 0, 0);
background: rgb(255, 0, 255);

/* 三个元色 取相同的数值  灰色 */
/* 数值越大颜色越浅，全是255是白色，数值越小颜色越深，全是0是黑色 */
background: rgb(255, 255, 255);
background: rgb(0, 0, 0);
background: rgb(100, 100, 100);
background: rgb(199, 199, 199);

/* 使用百分比 */
background: rgb(45%, 80%, 74%);

③ hex 十六进制方式表示颜色 ​

css
/* 十六进制 原理同rgb一样 */

/* 
 十进制：    0 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 19 20 21 ... 99 100 ...
 二进制：    0 1 10 11 100 101 110 111 1000 ...
 十六进制：  0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 ... 1f 20 21 ... ff 100 ...
*/

/* 
 十进制255 = 十六进制ff
 两位十六进制的数字可以表示一种原色，六位十六进制数字能够表示三元色
*/

/* 使用6位十六进制的数字表示颜色 每两位表示一个元色 */
background: #4fa8bb;
background: #0000ff;
background: #ababab;
background: #131313;

/* 表示一种元色的两个数字是相同的，且三组元色各自都是相同， 可以简写为3位十六进制数字 */
background: #a8c;  /* #aa88cc */
background: #bbb;  /* #bbbbbb */
background: #ab2233;  /* 不可简写 */

Copyright © 2024 雨落辰潇