I.类选择器的使用
<style>
.box {
width: 100px;
height: 100px;
}
.red {
/* 背景颜色 */
background-color: red;
}
.green {
/* 背景颜色 */
background-color: green;
}
</style>
<body>
<!-- div本身就是一个容器 -->
<div class="red box">红色</div>
<div class="green box">绿色</div>
<div class="red box">红色</div>
</body>
1.样式点定义 结构类调用 一个或多个 开发最常用
2.在没有类选择器的情况下,一般选择器(标签选择器)会直接使用HTML标签当做选择器来定义CSS样式内容,不能实现差异化选择。
3.选择器里面的样式必须用小写字母来进行书写。
4.在HTML内容之中,HTML会利用 <标签 class=“调用对象”>来生成对应内容,而类选择器会选取相应的调用对象,并在前面加上.符号,来实现类选择器的调用和定义。
5.<标签 class=“调用对象”>内部可以存在多个调用对象,这种现象称之为“多类名调用对象”,多个调用对象之间用空格来隔开,诸如<标签 class=“调用对象1 调用对象2 调用对象3”>
6.样式定义的方法为 属性:属性值,切记赋值符号为:而非=
II.ID选择器以及通配符选择器
<!-- id选择器可以为标有特定ID的HTML元素指定特定的样式 -->
<!-- HTML元素以id属性来设置id选择器 -->
<style>
/* ID选择器的口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用! */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">长门有希</div>
<div>凉宫春日</div>
</body>
1.在CSS样式表里面为调用对象添加#,在HTML内容里面添加对应的id选择器即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 通配符选择器,选取页面中所有的元素,定义具体的样式 -->
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
1.注意通配符选择器的优先级是最低的
III.CSS文本系列
III.I.CSS字体属性
<style>
.bold {
font-weight: 700;
}
/* 完全可以直接写对应的body,不仅仅是引用类 */
body {
/* 各种字体之间应该用逗号隔开 */
/* 由空格隔开的多个单词组成的字体,加引号 */
/* 找对应的字体,依次寻找存在的字体 */
font-family: Arial, 'Microsoft YaHei','Times New Roman';
font-size: 16px;
font-weight: lighter;
font-style: normal;
}
/* 标题是特殊的,需要单独指定文字大小,在boby已定义的情况下,下面再定义一个即可,上面定义的样式会被覆盖(对应覆盖式) */
h2 {
font-size: 16px;
}
div {
/* font: font-style font-weight font-size font-family; */
font: italic 700 16px 'Microsoft YaHei';
/* color: pink; */
color: #00ff40;
color: rgb(244, 0, 255);
}
</style>
</head>
<body>
<!-- 可以直接给body定义字体 -->
<!-- 标题是特殊的,需要单独指定文字大小 -->
<h2>font-family</h2>
<p>凉宫春日的忧郁</p>
<p>凉宫春日的叹息</p>
<p class="bold">凉宫春日的惊愕</p>
<p><em>凉宫春日的分裂</em></p>
<div>三生三世,不如有你</div>
</body>
1.font-family:“字体样式”
2.font-size:“字体尺寸”
3.font-weight:“字体粗细”
4.font-style:“字体形态”
5.可以在CSS样式表中单独为标签设置对应的字体属性
6.字体复合属性可以同时设置多个字体属性,字体属性之间用空格隔开,拥有严格的顺序,并且font-size和font-family不能省略,顺序见下:
font:字体形态 字体粗细 字体尺寸 字体样式
7.字体颜色可以直接输入相关英语单词,也可以利用#000000来定义颜色属性值,或者利用rgb(0,0,0)来定义颜色属性值
III.II.CSS文本外观
<style>
h1 {
/* 本质是让h1格式的文字水平居中对齐,此为文本对齐属性 */
text-align: left;
}
.pink {
/* 下划线 */
text-decoration: underline;
}
/* 删除线 */
.dele {
text-decoration: line-through;
}
/* 上划线 */
.use {
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<h1>我永远喜欢凉宫春日</h1>
<div class="pink">我永远喜欢凉宫春日</div>
<div class="dele">谁是爷爷呀?</div>
<div class="use">我是爷爷呀!</div>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
1.text-align 文本对齐属性,对应的值有left,center,right;
2.text-decoration 文本线型属性,对应的值有underline(下划线),line-through(删除线),overline(上划线),none(取消线型属性,常用于a标签)
III.III.CSS文本段落属性
<style>
p {
/* 文本的缩进用text-indent:xxem; */
/* em是一个相对单位,对应的参考值就是当前元素一个文字的大小 */
text-indent: 2em;
}
div {
/* 行与行之间的距离用line-height属性,用于设置行间的距离,控制行与行的距离 */
/* 行高是由上边距和下边距经过平均分配后决定的(还包括了文字的总高度) */
line-height: 16px;
}
</style>
</head>
<body>
<p>我永远喜欢凉宫春日!</p>
<p>我永远喜欢朝仓凉子!</p>
<div>我永远喜欢长门有希</div>
<div>我永远喜欢鹤屋学姐</div>
</body>
1.一般可以在文本标签内部定义相关的文字段落属性
2.text-indent为缩进属性,相关单位为em,1em=1个文字的大小
3.line-height定义了行与行之间的距离,其单位为px,而行高本身是由上下边距经过平均分配决定的,行高的组成包括三大要素:文字本身的高度,上边距,下边距。
IV.CSS引入方式
1.其引入方式为三大样式表,内部样式表(和HTML内容一起写在一个HTML页面之中),行内样式表(卸载HTML内容的标签内部,很少使用),外部样式表(在头部标签内部,通过引入外部的样式表)