目录
一、什么是css?
css 是缩写,全称为Cascading Style Sheets.
主要用途:美化html。
可定义方面:布局、颜色、字体、间距等。
1. 什么是inline Style?
1) 位置 Section:body (within style属性)
2) 针对对象:应用于单一元素或部分
3) 特点:①内联元素不会从新的一行开始
②挨着周围的文本与内容
③只占用内容所需的宽度
4) 被使用优先级:Highest 最高级
(即与其他样式表发生冲突时会依据优先级覆盖其他样式表)
inline Style > Embedded Style > External Style
如三个样式表发生冲突,将优先显示inline Style,并覆盖Embedded Style和External Style。
5) 缺点:缺乏可重用性
2. 什么是Embedded Style?
1) 位置 Section: head (within style属性)
2) 针对对象:应用于整个网页
3) 特点: 只会影响同一网页,不会影响其他网页。
4) 被使用优先级:Medium 中等
(即与其他样式表发生冲突时会依据优先级覆盖其他样式表)。
Embedded Style > External STyle
Embedded Style < inline Style
如与External Style发生冲突,将优先显示Embedded Style,并覆盖External Style。
如与inline Style发生冲突,将优先显示inline Style, Embedded Style并被覆盖。
3. 什么是External Style?
单独的text文件与.css文件扩展名。
1) 位置 Section: head
2) 针对对象:应用于整个网页
3) 特点:可以在多个HTML页面中重用,从而高效地在整个网站中维护一致的样式。
4) 被使用优先级:Lowest 最低级
(即与其他样式表发生冲突时会依据优先级覆盖其他样式表)。
External Style < Embedded Style < inline Style
二、改变字体颜色
将想要使用的字体颜色代码写在 style="color: 之后,以;"> 结尾。
代码示例:<body style="color:#8A2BE2;">
#8A2BE2为16进制的颜色代码,只需要替换不同的颜色代码即可。
(此处以body为例)
三、改变背景颜色
将想要使用的背景颜色代码写在 style="backgournd-color: 之后,以"> 结尾。(无分号)
代码示例:<body style="background-color:#F0FFFF">
#F0FFFF为16进制的颜色代码,只需要替换不同的颜色代码即可。
(此处以body为例)
四、改变字体颜色 + 背景颜色
格式为<body style="color:#;background-color:#">
在#处填入想改变的颜色代码即可。
(此处以body为例)
五、插入图片链接到外部网站
(即点击图片可以跳转)
1)<a href=""> 引号内填想要跳转的目的网站
代码示例:<a href="https://stardewvalleywiki.com/Stardew_Valley_Wiki">
2)在步骤1后,<img src=""> 引号内填入图片的名称与类型
代码示例:<img src="StardewValley.jpg">
完整代码示例:
<a href="https://stardewvalleywiki.com/Stardew_Valley_Wiki"><img src="StardewValley.jpg"/>
最终显示:(只会显示图片,不会显示详细网址,直接点击图片即可跳转)
六、更改图片大小
在图片名称后输入 height="200" width="250" alt="Stardew valley" />
代码示例:
<img src="1695274348008.jpg" height="200" width="250" alt="Stardew valley" />
(height是图片高度, width是图片宽度,此处的数字仅为示例,可以随意更改)
七、插入图片链接并更改图片大小
代码示例:
<a href="https://stardewvalleywiki.com/Stardew_Valley_Wiki"><img src="1695274348008.jpg" height="200" width="250" alt="Stardew valley" /> </a>