css简介以及引入规范

最新推荐文章于 2021-11-07 10:56:42 发布

爱上口袋的天空

最新推荐文章于 2021-11-07 10:56:42 发布

阅读量119

点赞数

文章标签： html

原文链接：https://mp.weixin.qq.com/s?__biz=MzU0Mjg0MzI1Nw==&mid=2247484100&idx=1&sn=bdc1867a145dc6d36d58652c616148ea&chksm=fb15cad2cc6243c44769c9254202fe52c65b7302a9535a1b152b890794e7c3e9117de7251590&scene=178&cur_album_id=1506739374313537537#rd

版权

这篇博客探讨了HTML的局限性，指出CSS作为网页的美容师，实现了样式与结构的分离，使得HTML专注于内容结构，而CSS负责样式表现。CSS通过行内式、内部样式表和外部样式表三种方式引入，允许更灵活的布局和丰富的视觉效果。同时，团队对于代码风格也有约定，如使用小写字母和紧凑或展开格式。

摘要由CSDN通过智能技术生成

CSS构造块

「1. HTML的局限性」

HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。
操作html属性不方便
HTML里面添加样式带来的是无尽的臃肿和繁琐

「2. CSS网页的美容师」

让我们的网页更加丰富多彩，布局更加灵活自如。
CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS

「3. CSS」CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。

作用
- 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、样式、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。

「4. CSS注释」

/* 这是注释 */

引入CSS样式表

「1.行内式(内联样式)」

通过标签的style属性来设置元素的样式

style其实就是标签的属性
样式属性和值中间是:
多组属性值直接用;隔开
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
缺点:没有实现样式和结构相分离。

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
例如：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

「2.内部样式表(内嵌样式表)」

也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。
只能控制当前的页面
缺点:没有彻底分离结构与样式

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

「3.外部样式表(外链式)」

也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

<link rel="stylesheet" href="index.css">

「4.团队约定-代码风格」

/*1.紧凑格式 (Compact)*/
h3 { color: deeppink;font-size: 20px;}
// 2.一种是展开格式（推荐）
h3 {
 color: deeppink;
    font-size: 20px;    
}

/* 团队约定-代码大小写*/
/* 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。*/
/* 推荐 */
h3{
 color: pink;
}
 
/* 不推荐 */
H3{
 COLOR: PINK;
}