CSS构造块

CSS
2024-10-30 09:44

HTML的局限性

  • HTML满足不了设计者的需求,可以将网页结构与样式相分离,这样就可以在不更改网页结构的前提下,更换网站的样式。

  • 操作html属性不方便

  • HTML里面添加样式带来的是无尽的臃肿和繁琐

CSS网页的美容师

  • 让我们的网页更加丰富多彩,布局更加灵活自如。

  • CSS最大的贡献:让HTML从样式中脱离,实现了HTML专注去做结构呈现,样式交给CSS

CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)

  • 作用

    • 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

    • CSS以HTML为基础,提供了丰富的功能,如字体、样式、背景的控制及整体排版等,而且可以针对不同的浏览器设置不同的样式。

「4. CSS注释」

/* 这是注释 */

引入CSS样式表

行内式(内联样式)

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

  • style其实就是标签的属性

  • 样式属性和值中间是:

  • 多组属性值直接用;隔开

  • 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余。

  • **缺点**:没有实现样式和结构相分离。

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

内部样式表(内嵌样式表)」

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

  • style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。

  • type="text/css" 在html5中可以省略。

  • 只能控制当前的页面

  • **缺点**:没有彻底分离结构与样式

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

外部样式表(外链式)

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

  • rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

  • href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

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

团队约定-代码风格

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

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

站点地图 在线访客: 今日访问量: 昨日访问量: 总访问量: