目录
一、体验CSS
1.CSS定义:
层叠样式表,是一种样式表语言,用来描述HTML文档的呈现。
书写位置:title标签下方添加style双标签,style标签里面书写CSS代码。
<title>CSS初体验</title> <style> /*选择器{}*/ p{ /*css属性*/ color:red; } </style> <p>体验 CSS</p>
二、CSS引入方式
1)内部样式表:学习使用
css代码写在style标签里面
2)外部样式表:开发使用,实际工作中用
css代码写在单独的css文件中(.css)
在HTML使用link标签引入
<link rel="stylesheet" herf="./my.css">
3)行内样式:配合JavaScript使用
css写在标签是style属性值里
<div style="color:red;font-size:20px;">这是div标签</div>
练习:内部样式表前面已经演示过,需要写到style标签里面
这是外部样式表,在没做引入时没有任何效果,就是单独的文字
想要文字效果就需要建立新的单独的css文件
新建my.css文件,将p标签引入到该文件中
引入外部样式表,使用link标签写在title标签下面
在浏览器中查看,此时p标签中文字有效果,变成红色了
也可以在div标签里面加入属性
三、选择器-标签和类
作用:查找标签,设置样式
基础选择器:
——标签选择器:使用标签名作为选择器—>选中同名标签设置相同的样式。
——类选择器:查找标签,差异化设置标签的显示效果
步骤:定义类选择器——.类名
使用类选择器——标签添加 class="类名"
注意:
类名自定义,不要用纯数字或者中文,尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名,类名之间用空格隔开
举例:
四、选择器-id和通配符
1.id选择器
作用:查找标签,差异化设置标签的显示效果
场景:id选择器一般配合JavaScript使用,很少用来设置CSS样式
步骤:
——定义id选择器—— #id名
——使用id选择器——标签添加 id="id名"
规则:同一个id选择器在一个页面只能使用一次
2.通配符选择器
作用:查找页面所有标签,设置相同样式
通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式
* { color:red; }
<!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>
<p>p 标签</p>
<div>div 标签</div>
<h1>h1 标签</h1>
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
<strong>strong </strong>
</body>
</html>
五、画盒子
目标:使用合适的选择器画盒子——类选择器
新属性:
<!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 {
/* 宽度 */
width: 100px;
/* 高度 */
height: 100px;
/* 背景色 */
background-color:yellow;
}
.orange {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="red">div 1</div>
<div class="orange">div 2</div>
</body>
</html>
六、字体修饰属性-大小和粗细和倾斜
1.字体大小
属性名:font-size
属性值:文字尺寸,PC端网页最常用的单位px
p {
font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D字体大小</title>
<style>
/* 经验:谷歌浏览器文字有默认大小 16px */
p {
/* font-size 属性必须有单位,否则属性不生效 */
font-size: 30px;
}
</style>
</head>
<body>
<p>测试字体大小</p>
<div>测试默认字体大小</div>
</body>
</html>
将鼠标放到相应文字上面,左边显示框就会显示文字大小
2.字体粗细
属性名:font-weight
属性值:数字(开发使用)
关键字
3.字体样式(是否倾斜)
作用:清除文字默认的倾斜效果
属性名:font-style
属性值:正常(不倾斜):normal —— em标签
倾斜:italic ——div标签
七、行高
作用:设置多行文本的间距
属性名:line-height
属性值:数字+px
数字(当前标签font-size属性值的倍数)
<style>
p {
line-height: 30px;
}
</style>
<style>
p {
/* line-height: 30px; */
line-height: 3;
}
</style>
<style>
p {
font-size: 20px;
/* line-height: 30px; */
/* 如果行高值是数字,表示当前标签字体大小的倍数 */
line-height: 3;
}
</style>
行高:
行高——垂直居中:行高属性值等于盒子高度属性值
八、字体族
属性名:font-family
属性值:字体名
font-family:楷体
九、font属性
font复合属性:属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开。
font:是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)
注意:字号和字体值必须书写,否则font属性不生效
一个属性对应多个值,按顺序书写,字号和字体必须写!!!
十、文本修饰属性-缩进和对齐和修饰线
1.文本缩进
属性名:text-indent
属性值:数字 + px
数字 + em(推荐:1em = 当前标签的字号大小)
2.文本对齐
作用:控制内容水平对齐方式
属性名:text-align
属性值:
!!!!居中的是文字内容,不是内容
3.水平对齐方式——图片
text-align 本质是控制内容的对齐方式,属性要设置给内容的父级
4.文本修饰线
属性名:text-decoration
属性值:
没加任何属性值时:
加入相应的属性值:
十一、文字颜色
color文字颜色
属性名:color
属性值: