学习编程的第三天

使用img标签来向网页中引入一个外部图片
4个属性
src属性 引入图片的路径 通过./或者…/开头
./ 引入图片跟你在同一个目录下
…/ 跳出当前的目录，再找
alt属性 对图片的描述，它会在图片引入不成功的时候，显示文字它也会帮助浏览器做收录功能
width属性 设置图片的宽度
属性值里直接写数值或者带长度单位都可
height属性 设置图片的高度
注意：一般情况下，width和height只设置一个，另一个让浏览器按比例缩放

图片的格式
JPEG(JPG)
JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明一般用来保存照片等颜色丰富的图片

GIF
GIF支持的颜色少，只支持简单的透明，支持动态图图片颜色单一或者是动态图时可以使用gif

PNG
PNG支持的颜色多，并且支持复杂的透明，不支持动图可以用来显示颜色复杂的透明的图片专为网页而生的

webp
谷歌新推出的专门用来表示网页的一种格式它具有其他图片格式的所有优点，而且文件格式还很小
缺点：兼容性不好

base64
讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入一般都是需要和网页一起加载的图片才会使用base64

color 设置字体颜色
backgroundColor 设置背景色
font-size 设置字体的大小

第二种方式：内部样式表
在head标签内部，写一个style标签，通过各种选择器选中对应元素，在{}内设置样式
样式结构也是名值对，可以写多组样式，必须用分隔号隔开,最后一个样式，可以不用分隔号
但一般我们都是加上分隔号的
优势：
1、修改比较方便
2、结构和表现就分开
缺点：
1、不方便复用

第三种方式：外部样式表
在html文件外，新建.css文件，在css文件里，选中对应的元素，设置样式
通过link标签，引入.css文件，即可生效
这种方式推荐使用
比较方便复用，而且html文件也更干净

第一种方式：内联样式/行内样式
直接写在开始标签里面
style属性，在属性值里写css样式
css样式的语法：样式名:样式值; 名值对
可以写多组样式，只要以分隔号隔开即可
优势：
1、比较有针对性
缺点：
1、修改起来不方便
2、结构和表现耦合了
css常用的选择器
1.元素选择器
作用：选中对应元素/标签里面的内容
语法：标签名{}
例如：h1{},p{}*/
2.id选择器
作用：选中对应id属性值的元素
语法：#id属性值{}
例子：#p1{},#dd{}
注意：id属性值是独一无二的存在
3.class选择器
作用：选中对应class属性值的元素
语法：.class属性值{}
例如：.p2{},.pp{}
注意：id选择器和class选择器很像，只不过class属性值可以复用
css复合选择器
1、交集选择器
作用：选中同时符合多个选择器条件的元素
语法：选择器1选择器2···{}
例如 div.red{} .red1#red2{}
注意：如果选择器中有元素选择器，元素选择器必须要放在第一位
2、并集选择器
作用：同时选中对应选择器的元素
语法：选择器1,选择器2,选择器3{}