CSS架构
一.颜色与单位
颜色:
- 前景色与背景色：设置文本和背景颜色
<style>
html，body{
background-color: blue;
/* 前景色 - 就是指字体颜色(color)
* 浏览器默认的字体颜色为黑色
背景色 - 就是指指定元素的背景颜色(background-color)
* 浏览器默认的背景颜色为透明的(transparent)
*/
}
h2 {
color: red;/*设置文本颜色*/
background-color: transparent;/*设置背景色*/
}
</style>
</head>
<body>
<h2>爱新觉罗</h2>
</body>- 颜色的命名：
<style>
/*1.单词方式表示颜色 目前主流浏览器识别147种预定义颜色
1；可选的数量有限
2；不同浏览器中存在色差问题
2.使用RGB方式表示颜色 称为三原色(不能再分解的三种基本颜色)
1；RGB - red(红色)、green(绿色)、blue(蓝色)
2；具体使用方式
a.函数式RGB颜色 - rgb(红色, 绿色, 蓝色)
1；每个颜色的值范围 - 0 ~ 255
b.十六进制RGB颜色 - #红色绿色蓝色
1；每个颜色具有两位
2；每个颜色的值范围 - 00 ~ FF
3；如果每个颜色的两位相同的话 -> 可以省略其中一个*/
h2 {
color: rgb(0,0,255);
background-color: #CC0000;
}
</style>
</head>
<body>
<h2>呼延觉罗</h2>
</body>- 透明度：是以opacity定义元素透明度；范围值0到1.0
<style>
/*html, body {
background-color: black;
}
h1 {
color: lightcoral;
background-color: darkcyan;
!*
透明度 - 默认值为 1.0 (完全不透明)
* 同时修改前景色和背景色
*!
opacity: 0.5;
}*/
h1 {
color: lightskyblue;
/*
颜色的表示方式 - 除了有rgb()方式以外，还有rgba()方式
* rgba()中的 a 表示透明度
*/
background-color: rgba(255,0,0,0.5);
}
</style>二。文本
结构化元素:
- 标题元素；标题大小用h1到h6表示
常用的h1到h3，h1最大，h6最小
<body>
<!--
标题元素为 <h1>到<6>
<h1>为最大，<h6>为最小
一般浏览器都有自己的默认样式（也可以以CSS进行设置
标题都会独占一行，也是垂直排列的）-->
<h1>犬夜叉</h1>
<h2>犬夜叉</h2>
<h3>犬夜叉</h3>
<h4>犬夜叉</h4>
<h5>犬夜叉</h5>
<h6>犬夜叉</h6>
</body>- 段落元素；是以p元素定义的
<body>
<p>Lorem ipsum dolor sit amet, consecteturconsequuntur dolor eaque facere facilis magnam, modi officiis pariatur possimus quasi, rerum sunt .</p>
<p>adipisicing elit. Atque cupiditate eos facere. A accusamus asperiores, at consectetur </p>
</body>- 其他结构化元素
- 粗体元素是以b元素定义的
- 斜体元素是以i元素定义的
- 上下标元素是以sup元素定义的
<body>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit.</b> Accusamus at autem deleniti, dolor eos modi nihil <i>recusandae vel. Aspernatur beatae blanditiis, <i>ea fugiat maxime neque nobis non sequi veritatis vero.</p>
<p>E=MC<sup>2</sup>公式</p>
<p>H<sub>2</sub>0</p>
<hr><!--分割线-->
</body>4.换行符与水平线；换行是以br元素定义的，水平线是以hr元素定义的
5.空白元素；是以p元素定义的，两个空格以上的，只显示一个空格
<body>
<!--空白折叠
浏览器只识别一个空格，多个空格的话，只识别一个空格-->
<p>爱 新觉罗</p>
</body>语义化元素:
<body>
<strong>呼延觉罗</strong>呼延觉罗
<!--strong元素加粗元素-->
<em>呼延觉罗</em>呼延觉罗
<!--em元素表示强调元素-->
<br><!--换行-->
<blockquote>
<p>东北三省又称“东三省”，为东北清朝末年以后的三个行政区，与地理文化上的东北地区没有关系</p>
</blockquote>
<!--blockquote元素表示引用元素，缩进效果-->
<p>说明:<q>声明不是一个HTML</q></p>
<!--<q>引用元素 - 添加双引号-->
<p><cite>东北三省又称“东三省”</cite>为东北清朝末年以后的三个行政区，与地理文化上的东北地区没有关系</p>
<!--<cite>引文元素 - 斜体效果-->
<br>
<p><dfn>东北三省又称“东三省”</dfn>为东北清朝末年以后的三个行政区，与地理文化上的东北地区没有关系</p>
<address>
<p>东三省</p>
<p>吉林省吉林市</p>
</address>
</body>内容修改元素；以ins表示带有下划线的文本
以del表示带有删除线的文本
<body>
<p>东北 <del>三省</del> 又称 <ins>东三省</ins></p>
</body>字体样式:
- 字体系列；以font-family表示
<style>
h2, p {
/*备选字体，是以用户电脑中已安装的字体
必须是用户电脑已存在的字体
一般可选的字体数量不是很多
一次性指定多个字体系列 - 中间使用逗号分隔
*/
font-family: 新宋体, sans-serif;
}
</style>- 字体大小；是以font-size用于设置字体大小
<style>
h2, p{
font-family: 新宋体, sans-serif;
}
P{/*一般使用像素值（px）
百分值：浏览器默认字体大小为（16px）=100%*/
/*font-size: 200%;表示浏览器默认字体的2倍*/
font-size: small;
}
</style>- 粗体；是以font-weight用于设置字体粗细程度
<style>
h2, p{
font-family: 新宋体, sans-serif;
}
p{
font-size: 200px;
font-weight: 900;/*表示页面字体加粗*/
font-style: oblique;/*表示斜体*/
}
</style>4.font属性；是可同时设置字体的样式
<style>
p {
/* 定义样式的顺序是固定的 - 建议使用这种简写属性 */
font: bold italic large serif ;
}
</style>
</head>
<body>
<h1>呼延觉罗</h1>
<p>爱新觉罗</p>
</body>二。文本样式:
- 文本装饰；
<style>
p {
/* text-decoration提供下划线、上划线及删除线 */
text-decoration: line-through lightcoral dashed;
/*
text-decoration-line: 表示提供的下划线、上划线及删除线
text-decoration-color: 表示线的颜色
text-decoration-style: 表示线的样式
*/
/*text-decoration-line: underline;
text-decoration-color: lightcoral;
text-decoration-style: dashed;*/
}
</style>
</head>
<body>
<p>爱新觉罗</p>
</body>- 行间距；
<style>
span{
line-height: 50px;/*表示垂直文本的距离大小*/
}
</style>
</head>
<body>
<span>呼延觉罗</span>
<br>
<span>爱新觉罗</span>
</body>- 字母间距和单词间距；
<style>
#q1 {
letter-spacing: 10px;
}
#q2 {
word-spacing: 10px;
}
#q3 {
/* 字母间距允许设置汉字之间的距离 */
letter-spacing: 10px;
}
</style>
</head>
<body>
<p id="q1">aixinjueluo</p>
<p id="q2">front end dev</p>
<p id="q3">爱新觉罗</p>
</body>- 水平对齐方式；
<style>
/* 水平方向对齐方式默认 - 左对齐 */
#p1 {
text-align: right;
}
#p2 {
text-align: center;
}
#p3 {
text-align: justify;
}
</style>
</head>
<body>
<p>爱新觉罗</p>
<p id="p1">爱新觉罗</p>
<p id="p2">爱新觉罗</p>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam aut facere fugit ipsa iste laboriosam natus nulla, </p>
</body>- 垂直对齐方式；
<style>
/* 垂直方向对齐方式默认 - 底部对齐 */
img {
/* 设置图片以什么方式与文字对齐 */
vertical-align: top;
}
</style>
</head>
<body>
<p>Lorem ipsum <img src="imgs/frame_image.svg"> dolor sit amet, consectetur adipisicing elit. </p>
</body>