Python学习笔记：5.1.2 属性与样式

本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记，欢迎学习交流。同时感谢陆老师的精彩传授！

一、课程目标

• 内嵌样式
• 内联样式
• 外联样式

二、详情解读

01.内嵌样式

1.CSS的英文全称是Cascading Style Sheets，即层叠式样式表
2.通过某个元素设置多个属性，就可以获得叠加的特性
3.根据样式书写位置可以分为内嵌样式，内联样式，外联样式

常用属性：

常用标签外观样式（标签不区分大小写）

标签	标签含义
height	元素外观高度
width	元素外观宽度
display	是否可见，none为不可见
background-color	背景色
background-image	背景图片
color	标签内文字颜色
font-size	标签内文字大小
border	边框
opacity	透明度

属性性质	单位
大小类（比如宽高）	px - 像素，1920*1028分辨率，则宽度方向包含1920个像素，高度方向包含1028个像素，100px表示100个像素大小 em - 相对父元素的字体大小，比如父元素字体大小为12px，1em就是表示12px的大小，1.5em就是表示18px大小 rem - 相对元素html的字体大小，如果html字体是16px，那么1.5rem表示24px 百分比 - %，50%，将被计算50%*父元素的值
颜色	rgb表示法 10进制表示：rgb(255, 200, 132), 0~255 rgb(50%, 20%, 10) 具有透明度：rgba(255, 100, 1, 0.5) 16进制表示：#afdede，每两位表示一个色彩通道 #000000~#ffffff 色彩单词：red，yellow

样式选择器：

03.外联样式表

1.将内联中定义的样式如果单独写成一个文件，并命名为*.css的文件，该文件称为css样式文件，可以被其他网页引用
2.通常我们会把多个网页共有的样式属性写进一个文件，通过样式加载降低重复编写的工作量，并提高项目的可维护性
3.加载通过头部的标签<link rel=“stylesheet” type=“text/css” href="样式文件名“/>加载
4.该文件通常会被缓存，修改后如果样式没生效，需要手动清除浏览器缓存

04.选择器的优先级

1.相同选择器条件下：内嵌样式 > 内联样式 > 外联样式
2.！import 修饰符优先级最高（不推荐使用，容易混乱）
3.id 选择器 > class 选择器 > 元素选择器 > 通配符选择器 > 继承样式

三、课程小结

1. 层叠式样式
2. 内嵌样式表
3. 内联样式表
4. 外联样式表
5. 样式优先级别

由于本节课的代码过多，没有贴上来。请同学们自行跟着老师视频码一下哈 ^_^