大数据研发基本之CSS基本知识-天涯论坛

5ep9lzv 发表于 2024-6-30 10:58:09

大数据研发基本之CSS基本知识

做为大数据研发基本的一部分，CSS：层叠样式表，是英文Cascading Style Sheets的首字母缩写，是一种用来表现HTML或XML等文件样式的计算机语言，亦是一种标记语言。重点是帮忙美化网页，布局页面，CSS不仅能够静态地修饰网页，还能协同各样脚本语言动态地对网页各元素进行格式化。CSS 重点用于设置 HTML 页面中的文本内容（字体、体积、对齐方式等）、照片的外形（宽高、边框样式、边距等）以及版面的布局和外观表示样式。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-56177eb7ca60474fbfafcad16837911a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
1、基本知识
CSS特点：丰富的样式定义、易于运用和修改、多页面应用、层叠、页面压缩。
CSS的引用方式：
（1）行内样式：运用style属性，只是对当前标签有效，页面内容和样式高度吻合的
Hello world.
（2）内部样式：在head中运用style标签，当前页面有效，内容和样式必定程度分离，然则不彻底。
<style>
div {
color: red;
font-size: 12px;
}
</style>
（3）外边样式：将样式写到一个单独CSS文件中，必须用到HTML文件，引用它就可，实现了内容与样式的完全分离。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS的颜色：
color 属性用于定义文本的颜色。例如：
div {
color: red;
}
CSS中颜色的暗示办法
1.预定义的颜色值 red,green,blue……等
2.十六进制 #FF0000、#FF6600等（
3.RGB代码 rgb(255,0,0)或rgb(100%,0%,0%
4.RGBA:是在原有RGB上添加了透明底，alpha
5.HSL：用色调、饱和度和明度3个分量暗示颜色
6.HSLA：在HSL上添加了透明度
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-df0c7f88ebe7c4d12a4e5b632ab74d4e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
2、基本语法
CSS和HTML同样都是浏览器能解析的计算机语言，因此呢CSS亦有自己的语法结构；
CSS 规则由三个重点的部分形成：
1. 选取器，以及一条或多条声明，但值得重视的是声明必要要放在大括号内{ }。
2. 每条声明由一个属性和值构成，属性和值用冒号掰开，每条语句以英文的分好结尾。
selector {declaration1; declaration2; ... declarationN }
Selector是选取符，最平常的选取符是HTML标签；property是选取符的属性，Value是选取符的属性值。（重视：多个选取符用分号隔开）
例子：h1 {color:yellow; font-size:16px;}
h1是选取器；color和font-size是属性；16px则是属性值。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-9087bf676ed31a6bb5116a9a5b0bfedc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
以上便是CSS的基本知识和语法，CSS是大数据研发基本的要紧一环，与HTML相辅相成，能够使网页的制作更加美观大方，令人赏心悦目。多加实操练习，才可够促进自己进步。
倘若你是前端小白或打算转行进入前端这个行业，不晓得将来该怎么学习，都能够加入我组建的自学团，每日一块打卡学习，分享学习资料，定时组织实战项目，匹配学习伙伴，我会严格监督你们的。

nykek5i 发表于 2024-10-31 01:44:54

楼主果然英明！不得不赞美你一下！

页: [1]

天涯论坛's Archiver

大数据研发基本之CSS基本知识