一、简介
CSS也是一种标记语言。美化样式。
1、CSS语法规范
CSS规则有两个主要的部分构成:选择器以及一条或多条声明。
选择器 {属性:值; 属性:值;...}
- 选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式。
- 属性和属性值以键值对形式出现。
- 属性和属性值之间用英文“:”分开。
- 多个键值对之间用英文";"进行区分。
2、CSS代码风格
紧凑格式;展开格式(推荐)
用小写字母书写
空格规范:属性值前、冒号之后保留一格空格;选择器和大括号之间保留一个空格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=AA, initial-scale=1.0">
<title>体验CSS语法规范</title>
<style>
/* 选择器{样式} */
/* 给谁改样式{改什么样式} */
p {
color: red;
/* 修改文字大小为12像素 */
font-size: 12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
二、CSS基础选择器
1、CSS选择器作用
选择标签用的
2、选择器分类
选择器分为基础选择器和复合选择器两大类,
2.1基础选择器
由单个选择器组成,包括:标签选择器、类选择器、id选择器和通配符选择器。
(1)标签选择器(元素选择器)
指用HTML标签名称作为选择器,按标签名称分类,为页面某一类标签指定统一的CSS样式。
语法:
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
作用:标签选择器可以把某一类标签全部选择出来。
优点:能快速为页面中同类型的标签统一设置样式。
缺点:不能设计差异化样式,只能选择全部的当前标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之标签选择器</title>
<style>
/* 标签选择器:写上标签名 */
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
(2)类选择器
类选择器口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用
a.语法:
.类名 {
属性1: 属性值1;
...
}
结构需要用class属性来调用class类的意思。
注意:
- 类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义)。
- 长名称或词组可以使用中横线来为选择器命名。
- 不要使用纯数字、中文等命名,尽量使用英文字母表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之类选择器</title>
<style>
/* 类选择器口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用*/
.red {
color: red;
}
.green_green {
color: green;
}
</style>
</head>
<body>
<ul>
<li class="red">冰雨1</li>
<li class="red">冰雨2</li>
<li>冰雨3</li>
<li class="green_green">冰雨4</li>
<li>冰雨5</li>
</ul>
<div class="red">我也想变红色</div>
</body>
</html>
b.多类名:一个标签可以指定多个类名。
- 使用方式
(1)标签class属性中写多个类名
(2)多个类名中间必须用空格分开
<div class="red font20">亚瑟</div>
- 多类名使用场景:
(1)可以把一些标签元素相同的样式(共同部分)放到一个类中;
(2)这些标签可以调用这个公共的类,然后再调用自己独有的类;
(3)从而节省CSS代码,统一修改,非常方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多类名使用方式</title>
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">刘1234</div>
</body>
</html>
(3)id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。
id选择器口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
语法:
#id名 {
属性1: 属性值;
...
}
id选择器和类选择器的区别:
- 类选择器(class)可以被多个标签使用,id选择器只能被一个标签使用。
- 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之id选择器</title>
<style>
/* id选择器口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">迈克尔.杰克逊</div>
</body>
</html>
(4)通配符选择器
CSS中通配符选择器使用“*”定义,表示选取页面中所有元素(标签)。
语法:
* {
属性1: 属性值;
...
}
通配符选择器不需要调用,自动就给所有元素使用样式;特殊情况下使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
</html>
基础选择器总结:
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p (color: red;) |
类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
id选择器 | 一次只能选择一个标签 | id属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav {color: red;} |
通配符选择器 | 选择所有标签 | 选择的太多,有部分不需要 | 特殊情况使用 | * {color: red;} |
三、CSS字体属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式。
1、font-family字体系列
CSS使用font-family属性定义文本的字体系列。
注意:
各个字体之间必须使用英文逗号隔开;
一般情况下,如果有空格隔开的多个单词组成的字体,加引号。
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示。
最常见的几个字体:body {font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体属性之字体系列</title>
<style>
h2 {
font-family: 'Microsoft YaHei';
}
p {
font-family: 微软雅黑;
}
</style>
</head>
<body>
<h2>《静夜思》</h2>
<p> ——唐代·李白</p>
<p>床前明月光, 疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>
</body>
</html>
2、font-size字体大小
p {
font-size: 20px;
}
- px(像素)大小是网页最常用单位,谷歌浏览器默认文字大小为16px。
- 不同浏览器默认字体显示大小不一样,尽量给一个明确大小。
- 可以给body指定整个页面文字大小。标题标签比较特殊,需要单独指定文字大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体属性之字体大小</title>
<style>
body {
font-size: 16px;
}
h2 {
font-size: 16px;
}
</style>
</head>
<body>
<h2>《静夜思》</h2>
<p> ——唐代·李白</p>
<p>床前明月光, 疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>
</body>
</html>
3、font-weight字体粗细
语法:
p {
font-weight: bold;
}
属性值 | 描述 |
normal | 默认值(不加粗) |
bold | 定义粗体(加粗的) |
100-900 | 400=normal,700=bold,数字后不跟单位(实际开发常用数字) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体属性之字体粗细</title>
<style>
.bold {
/* font-weight: bold; */
/* 这个700的后面不加单位,等价于bold,都是加粗效果 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
</head>
<body>
<h2>《静夜思》</h2>
<p> ——唐代·李白</p>
<p>床前明月光, 疑是地上霜。</p>
<p class="bold">举头望明月,低头思故乡。</p>
</body>
</html>
4、font-style字体样式
p {
font-style: normal;
}
主要作用:用normal让倾斜的字体(em,i)不倾斜。
属性值 | 作用 |
normal | 默认值,浏览器会显示标准的字体样式 |
italic | 浏览器会显示斜体的字体样式 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体属性之字体样式(风格)</title>
<style>
p {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<p>
上课啦上课啦上课啦
</p>
<em>下课啦下课啦下课啦</em>
</body>
</html>
5、font复合属性写法
body {
font: font-style font-weight font-size/line-height font-family;
}
- 四个属性顺序固定,不能改变,属性之间用空格隔开。
- 不需要设置的属性可以省略,必须保留font-size和font-family属性,负责font属性不起作用。
6、字体属性总结
属性 | 表示 | 注意点 |
font-size | 字号 | 常用单位:px |
font-family | 字体 | 按照团队约定写字体 |
font-weight | 字体粗细 | 加粗:700或bold 不加粗:400或normal ,数字后不跟单位 |
font-style | 字体样式 | 倾斜:italic 不倾斜:normal,常用normal |
font | 字体连写 | 1、字体连写有顺序,不能随意换位置,2、字号 字体必须同时出现 |
四、CSS文本属性
CSSText(文本)属性可定义文本的外观,比如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。
1、文本颜色-color
color属性定义文本颜色。
div {
color: red;
}
三种颜色的表示形式
表示方式 | 属性值 |
预定义的颜色值 | red,green,blue,... |
十六进制(开发常用) | #FF0000,#FF6600,... |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本外观属性之文本颜色</title>
<style>
div {
/* 预定义颜色 */
color: red;
/* 十六进制表示 */
/* color: #0e6de2; */
/* RGB代码 */
/* color: rgb(31, 191, 42); */
}
</style>
</head>
<body>
<div>名侦探学院,要做就做南波万!!!</div>
</body>
</html>
2、文字对齐(水平)- text-align
text-align属性用于设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}
属性值 | 解释 |
left | 左对齐(默认) |
center | 居中对齐 |
right | 右对齐 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文本外观之对齐文本</title>
<style>
div {
text-align: center;
}
p {
text-align: right;
}
</style>
</head>
<body>
<div>名侦探学院</div>
<p>要做就做南波万!!!</p>
</body>
</html>
3、装饰文本 - text-decoration
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div {
text-decoration: underline;
}
属性值 | 描述 |
none | 默认。没有装饰线(最常用) |
underline | 下划线,链接a自带下划线(常用) |
overline | 上划线。(几乎不用) |
line-through | 删除线。(不常用) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文本外观之装饰文本</title>
<style>
div {
/* 下划线 */
text-decoration: underline;
/* 上划线 */
/* text-decoration: overline; */
/* 删除线 */
/* text-decoration: line-through; */
}
a {
/* 隐藏链接a的下划线 */
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div>我的心愿是</div>
<a href="#">世界和平</a>
</body>
</html>
4、文本缩进 - text-indent
text-indent属性用来指定文本的第一行缩进,通常将段落的首行缩进。
div {
text-indent: 10px;
}
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,该长度可以是负值。
p {
text-indent: 2em;
}
em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文本外观之文本缩进</title>
<style>
p {
font-size: 24px;
/* 文本的第一行首行缩进多少距离 */
/* text-indent: 20px; */
/* 如果此时写了2em,则缩进当前元素2个文字大小的距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>今天(12月25日),甘肃省积石山县中小学有序复课,积石山县152个帐篷小学全部开课。1136名教师下沉安置点开展教学活动。早上8:30,在大河家镇集中安置点的帐篷小学前面,41名学生和10名老师共同举行了简单而隆重的升旗仪式。其他的帐篷学校也会根据各自情况,举行升旗仪式。
</p>
<p>根据安排,从今天开始,积石山县初中学校将以班为单位开展线上教学,小学高年级,在有条件开学的学校进行线上教学,没有条件的学校,老师们将在帐篷学校里开展教学。而低年级的学生,将在帐篷学校里开展教学活动;幼儿园本学期不复课。</p>
<p>据积石山县教育部门介绍,积石山县全县244所学校中,经鉴定能安全使用的学校,将于12月25日至29日陆续返校上课;主体结构没有损伤的学校,利用寒假修复,确保2024年春季开学返校;主体结构受损的学校,利用寒假期间搭建活动板房,2024年春季开学后在板房教室开展过渡性上课,与此同时,结合学校布局调整,制定重建规划,力争明年开春后动工建设,8月中旬完工,确保秋季学期正常投入使用,学生按时返校上课。
</p>
</body>
</html>
5、行间距 - line-height
line-height属性用于设置行间距离(行高)。可以控制文字行与行之间的距离。
p {
line-height: 26px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文本外观之行间距</title>
<style>
div {
line-height: 30px;
font-size: 20px;
}
p {
line-height: 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div>甘肃积石山县中小学有序复课</div>
<p>今天(12月25日),甘肃省积石山县中小学有序复课,积石山县152个帐篷小学全部开课。1136名教师下沉安置点开展教学活动。早上8:30,在大河家镇集中安置点的帐篷小学前面,41名学生和10名老师共同举行了简单而隆重的升旗仪式。其他的帐篷学校也会根据各自情况,举行升旗仪式。
</p>
<p>根据安排,从今天开始,积石山县初中学校将以班为单位开展线上教学,小学高年级,在有条件开学的学校进行线上教学,没有条件的学校,老师们将在帐篷学校里开展教学。而低年级的学生,将在帐篷学校里开展教学活动;幼儿园本学期不复课。</p>
<p>据积石山县教育部门介绍,积石山县全县244所学校中,经鉴定能安全使用的学校,将于12月25日至29日陆续返校上课;主体结构没有损伤的学校,利用寒假修复,确保2024年春季开学返校;主体结构受损的学校,利用寒假期间搭建活动板房,2024年春季开学后在板房教室开展过渡性上课,与此同时,结合学校布局调整,制定重建规划,力争明年开春后动工建设,8月中旬完工,确保秋季学期正常投入使用,学生按时返校上课。
</p>
</body>
</html>
6、文本属性总结
属性 | 表示 | 注意点 |
color | 文本颜色 | 通常是用十六进制,如#FF0000 |
text-align | 文本对齐 | 设定文本水平对齐方式 |
text-indent | 文本缩进 | 通常用于段落首行缩进2个字的距离,text-indent: 2em; |
text-decoration | 文本修饰 | 添加下划线:underline;取消下划线:none |
line-height | 行高 | 控制行与行之间的距离 |
五、CSS引入方式
1、内部样式表(内嵌样式表)
内部样式表是写到HTML页面内部,将所有CSS代码抽取出来,单独放在一个<style>标签中。
<style>
div {
color: red;
font-size: 13px;
}
- <style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>标签中。
- 通过此方式可以方便控制当前整个页面中的元素样式设置。
- 代码结构清晰,但并没有实现结构与样式完全分离。
2、行内样式表(内联样式表)
行内样式表是在元素标签内部的style属性中设定CSS样式。适合修改简单样式。
<div style="color: red;font-size: 12px;">牛牛牛</div>
- style是标签的属性。
- 在双引号中间,写法要符合CSS规范。
- 可以控制当前标签设置样式。
- 使用行内样式表设定CSS,通常也被称为行内式引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内样式表</title>
</head>
<body>
<p style="color: blue;">蒲熠星:
又回到这熟悉的地方
能忘掉昨日的忧伤</p>
<p>火树:
再见到一个个挚友
这种感觉真的不错</p>
<p>郭文韬:
吵闹却更加多彩的生活
如此温暖美好的相遇
很想能一直度过</p>
<p>何运晨:
记得每一次相聚时的笑容
分别之后失落
难忘每次协作
冬日里的烤火</p>
<p>唐九洲:
在这一个可以放松的时空
不经意之间成为了更好的我</p>
<p>黄子弘凡:
相遇是如此珍贵
把你们放心头</p>
<p>曹恩齐:
希望你孤单的时候
这段回忆能陪你走</p>
<p>齐思钧:
默默的倾听看着你的眼睛
希望以后每一天每一天
都能陪在你身边 你身边</p>
<p>石凯:
时间走过你的脸你的眼
惊喜出现在明天在今天
也许</p>
</body>
</html>
3、外部样式表
适用于样式比较多的情况,核心是样式单独写到CSS文件中,引入CSS文件到HTML页面中。
引入外部样式表方法:
(1)新建一个后缀名为.css的样式文件,把所有长沙市CSS代码都放到此文件中。
(2)在HTML页面中,使用<link>标签引入CSS文件。
<link rel="stylesheet" href="CSS文件路径">
属性 | 作用 |
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。 |
href | 定义所链接外部样式表文件的url,可以是相对路径,也可以是绝对路径。 |
使用外部样式表设定CSS,通常也被称为外链式或链接式引入,开发中常用。
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>要做就做南波万</h2>
<p>蒲熠星/火树/文韬:
默默的倾听看着你的眼睛</p>
<p>何运晨/唐九洲/黄子弘凡:
希望以后每一天每一天
都能陪在你身边 你身边</p>
<p>曹恩齐/齐思钧/石凯:
时间走过你的脸你的眼
惊喜出现在明天在今天
也许</p>
<p>合:
在未来的某一天
再次重逢一起去冒险</p>
</body>
</html>
CSS文件:
/* css文件里面只有样式没有标签 */
p {
color: pink;
font-size: 15px;
}
h2 {
color: rgb(131, 37, 238);
}