前言：

说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a> 表示此处有链接很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点:丑虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐.....

CSS简介：

CSS-网页的美容师

css 是层叠样式表(Cascading Style Sheets)的简称有时我们也会称之为CSS样式表或级联样式表CSS是也是一种标记语言

CSS主要用于设置HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等)以及版面的布局和外观显示样式。
CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解:CSS可以美化 HTML,让 HTML 更漂亮让页面布局更简单。

⭕总结:
1.HTML主要做结构,显示元素内容
2.CSS美化HTML,布局网页
3.CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构(HTML) 与样式(CSS)相分离

CSS 语法规范

使用 HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS 样式规则  
CSS 规则由两个主要的部分构成: 选择器以及一条或多条声明。< style> 选择器 { 样式 } < /style>

  • 选择器是用于指定CSS样式的 HTML标签，花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  • 属性和属性值之间用英文“ : ”分开
  • 多个“键值对”之间用英文“ ; ”进行区分

代码风格

1.样式格式书写

①紧凑格式

h3 { color: deeppink;font-size: 20px;}

②展开格式

h3{color: pink;font-size: 20px;
}

强烈推荐第二种格式，因为更直观。

2.样式大小写

h3{color: pink;
}
H3{COLOR: PINK;
}

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

3.空格规范

h3 {color: pink;
}
  1. 属性值前面，冒号后面，保留一个空格
  2. 选择器(标签)和大括号中间保留空格

选择器简介

<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<ul><li>我是ul里面小i哦</li>
</ul>
<ol><li>我是ol里面小li哦</li>
</ol>

1.我想把div 里面的文字改为红色?
2.我想把第一个div里面的文字改为红色?
3.我想把ul 里面的li 文字改为红色?

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。

以上CSS做了两件事
1.找到所有的h1 标签。选择器(选对人)。
2.设置这些标签的样式，比如颜色为红色(做对事)。

选择器分类

基础选择器：单个选择器组成，包括标签选择器、类选择器、id选择器、通配符选择器

复合选择器：复合选择器建立于基础选择器之上，包括：后代选择器、子选择器、并集选择器、伪类选择器

在CSS中，可以根据选择器的类型把选择器分为 基础选择器 和 复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素(标签)。
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
  • 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。

基础选择器总结

基础选择器 作用 特点 使用情况 用法
标签选择器 可以选出所有相同的标签，比如p 不能差异化选择 较多 p { color: red;)
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color:red; )
id选择器 一次只能选择1个标签 ID属性只能在每个HTML文档中出现一次 一般和JS搭配 #nav {color:red;}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 特殊情况使用 *{color: red;)
  • 每个基础选择器都有使用场景，都需要掌握
  • 如果是修改样式，类选择器是使用最多的

合选择器建立于基础选择器之上，包括：后代选择器、子选择器、并集选择器、伪类选择器。

复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素(标签)
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

字体属性

1.字体系列

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。

CSS使用 font-family 属性定义文本的字体系列

p{ font-family:"微软雅黑"; }
div { font-family: Arial,"Microsoft Yahei"，"微软雅黑"; }
  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下,如果有空格隔开的多个单词组成的字体加引号
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  • 最常见的几个字体: body{ font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

粗细font - weight：实际开发中，提倡使用数字表示加粗或者是变细（ normal 即400）

2.字体粗细

CSS使用 font-weight 属性设置文本字体的粗细。

p{font-weight: bold;
}
属性值 描述
normal 默认值 (不加粗的)
bold 定义粗体 (加粗的)
100-900 400 等同于 normal，而 700 等同于 bold 注意这个数字后面不跟单位

3.文字样式

CSS使用 font-style 属性设置文本的风格。

p{font-style: normal;
}
属性值 作用
normal 默认值，浏览器会显示标准的字体样式 font-style: normal;
italic 浏览器会显示斜体的字体样式。

⭕注意: 平时我们很少给文字加斜体，反而要给斜体标签(emi) 改为不倾斜字体。

4.字体复合属性

字体属性可以把以上文字样式综合来写,这样可以更节约代码:

body {font-size/line-heightfont: font-style font-weightfont-family;
}
  • 使用font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略(取默认值)，但必须保留 font-size和 font-family 属性，否则font 属性将不起作用

文本属性

1.文本颜色

color 属性用于定义文本的颜色。

div{color: red;
}
表示 属性值
预定义的颜色值 red，green，blue，还有我们的御用色 pink
十六进制 #FF0000，#FF6600，#29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)

2.对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

div {text-align: center;
}
属性值 解释
left 左对齐(默认值)
right 右对齐
center 居中对齐

3.装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {text-decoration: underline;
}
属性值 描述
none 默认。 没有装饰线 (最常用)
underline 下划线。链接 a 自带下划线 (常用)
overline 上划线。(几乎不用)
line-through 删除线。(不常用)

4.文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

div{text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

P{text-indent: 2em;
}

em 是一个相对单位，就是当前元素( font-size)1个文字的大小,如果当前元素没有设置大小，则会按照父元4素的1个文字大小。

5.行间距

line-heigh 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。

p{line-height:26px;
}

CSS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

属性 表示 注意点
color 文本颜色 我们通常用 十六进制 比如 而且是简写形式 #fff
text-align 文本对齐 可以设定文字水平的对齐方式
text-indent 文本缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住添加下划线 underline 取消下划线 none
line-height 行高 控制行与行之间的距离

CSS引入方式

根据书写位置样式表可分为三大类：行内式、嵌入式、链接式

1️⃣内部样式表

内部样式表(内嵌样式表)是写到html页面内部是将所有的CSS代码抽取出来，单独放到一个<stve>标签中。

<style>div {color: red;font-size:12px;}
</style>
  • <style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中
  • 通过此种方式，可以方便控制当前整个页面中的元素样式设置
  • 代码结构清晰，但是并没有实现结构与样式完全分离
  • 使用内部样式表设定CSS，通常也被称为 嵌入式引入 ，这种方式是我们练习时常用的方式

2️⃣行内样式表

行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
  • style其实就是标签的属性
  • 在双号中间，写法要符合CSS规范
  • 可以控制当前的标签设置样式
  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
  • 使用行内样式表设定CSS，通常也被称为 行内式引入。

3️⃣外部样式表

实际开发都是外部样式表适合于样式比较多的情况核心是:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用.
引入外部样式表分为两步:
1.新建一个后缀名为 .css 的样式文件，把所有CSS代码都放入此文件中
2.在HTML页面中，使用<link> 标签入这个文件。

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

使用外部样式表设定CSS，通常也被称为 外链式 或 链接式引入，这种方式是开发中常用的方式

 总结：

样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便，权重高 结构样式混写 较少 控制一个标签
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面
外部样式表 完全实现结构和样式相分离 需要引入 最多，吐血推荐 控制多个页面

✍

CSS pink老师教学笔记详解相关推荐

  1. JavaScript pink老师学习内容详解

    计算机基础 区分: 编程语言 编程语言和标记语言的不同 常见的数据存储单位及其换算关系 内存的主要作用以及特点 ①编程: 让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程 ...

  2. Pink老师前端笔记-CSS第七天

    Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天 学习目标: ​ 能够使用精灵图 ​ 能够使用字体图标 ​ 能够写出 CSS 三角 ​ 能够写出常见的 CSS 用户界面样式 ​ ...

  3. Pink老师前端笔记-CSS第六天

    Pink老师前端笔记-CSS第六天 # day08-前端基础CSS第六天 今日目标 能够说出 为什么要用定位 能够说出 定位的 4 种分类 能够说出 4 种定位各自的特点 能够说出 为什么常用子绝父相 ...

  4. css弹性盒之justify-content详解

    今天没事把css弹性盒常用及要注意的做一下整理: 先上代码如下: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  5. CSS中的BFC BFC详解 BFC可以解决的问题汇总

    CSS中的BFC BFC详解 BFC可以解决的问题汇总 简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...

  6. 零、RISC-V SoC软核代码笔记详解——前言

    目录 0 RISC-V SoC注解系列文章目录 1 前言(手绘RISC-V SoC内核RTL试图): 2. 开源工程tinyriscv使用教程: 3. 开源工程tinyriscv下载地址: 4. 开源 ...

  7. html css主题,HTML+CSS＝无限可能——案例详解：我的POI主题作品

    原标题:HTML+CSS＝无限可能--案例详解:我的POI主题作品 在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...

  8. 定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...

     点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解 说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...

  9. CSS clear 属性取值详解

    之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...

最新文章

  1. springCloud之配置中心学习
  2. 我记录网站综合系统 -- 技术原理解析[10：PermissionChecker流程]
  3. Codeforces 479【E】div3
  4. PHP脚本批量清除nginx缓存的方法
  5. centos6.5下升级gnutls
  6. 设置Flex toolTip的样式
  7. mysql桥梁表_以JDBC为桥梁入门MySQL数据库基础
  8. LINQ学习（四）：From子句
  9. 雅虎的Mash-up 之路
  10. python3打开excel_python3操作Excel (一)
  11. 《scikit-learn》数据预处理与特征工程（三）特征选择
  12. 优秀文章收集，也有专题，改变了我的一些看法。
  13. tplink查看上网记录_TPLINK路由器控制面板查看运行状态详解
  14. Python进行Excel数据统计
  15. opengles之展翅飞翔的雄鹰
  16. 【vue】vue中设置路径别名
  17. HP LoadRunner
  18. 读A Fast Single Image Haze Removal Algorithm Using Color Attenuation Prior
  19. 结构-02. 有理数加法(15)
  20. 第五章 CSS美化网页元素

热门文章

  1. 小米扫地机器人充电座指示灯不亮_小米扫地机器人怎么充电
  2. 蕾哈娜的Savage X Fenty Show将于9月20日（周五）在Amazon Prime Video全球服务平台上独家流媒体播出
  3. 平面设计师资格证怎么考
  4. HTML和CSS代码规范
  5. 火云开发课堂 - 《Shader从入门到精通》系列 第九节:在Shader中实现马赛克滤镜
  6. 安迪·沃霍尔作品全球首次NFT拍卖以280万美元价格成交
  7. 安居客冲刺上市：姚劲波全力支持，距离贝壳找房还差6个我爱我家
  8. EMIS系统理论及简单理解（后续持续添加）
  9. 为什么说php是个玩具,买玩具的目的是什么
  10. 读周启迪之《古代印度波斯文明》