一、CSS 定义
1、初识 CSS
层叠样式表(Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)。
书写位置:title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码。
<title>CSS 初体验</title> <style> /* 选择器 {} */ p{ /* CSS 属性 */ color:red; } </style> <p>体验 CSS</p>
示例:
<!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> /* CSS 代码 */ /* 选择器 { CSS 属性} */ /* 属性名和属性值成对出现 → 键值对 */ p { /* 文字颜色 */ color: red; /* 字号 */ font-size: 30px; } </style> </head> <body> <p>体验 CSS</p> </body> </html>
效果:
2、总结
- CSS 书写在 title 标签下方
- style 标签里面可以书写 CSS 代码
- CSS 书写规则是 选择器(属性名:属性值;)
二、CSS 引入方式
内部样式表:学习使用
- CSS 代码写在 style 标签里面
外部样式表:开发使用
CSS 代码写在单独的 CSS 文件(.css)
在 HTML 使用 link 标签引入
<link rel="stylesheet" href="./my.css">
示例:
效果:
行内样式:配合 JavaScript 使用
CSS 写在标签的 style 属性里
<div style="color: red; font-size:20px;">这是 div 标签</div>
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 行内, style=" CSS 属性" --> <div style="color: green; font-size: 30px;">这是 div 标签</div> </body> </html>
效果:
总结:
- 实际工作中,常用 外部样式表 .CSS文件 引入方式。
- 在 HTML 中,使用 link 标签 可以引入外部样式表。
三、选择器
作用:查找标签,设置样式。
基础选择器
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
1、标签选择器
使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如:p, h1, div, a, img…<style> p { color: red; } </style>
示例:
<!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> /* 特点:选中同名标签设置相同的样式,无法差异化同名标签的样式 */ p { color: red; } </style> </head> <body> <p>这是 p 标签</p> <p>1111</p> <p>2222</p> </body> </html>
效果:
2、类选择器
作用:查找标签,差异化设置标签的显示效果。
步骤:
- 定义类选择器 → .类名
- 使用类选择器 → 标签添加 class=“类名”
<style> /*定义类选择器*/ .red { color: red; } </style> <!-- 使用类选择器 --> <div class="red">这是 div 标签</div>
注意:
- 类名自定义,==不要用纯数字或中文,尽量用英文命名
- 一个类选择器可以供多个标签使用
- 一个标签可以使用多个类名,类名之间用空格隔开
示例:
<!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> /* 定义 */ .red { color: red;; } .size { font-size: 50px; } </style> </head> <body> <!-- 使用 --> <!-- 一个类选择器可以给多个标签使用 --> <p class="red">1111</p> <p>2222</p> <!-- 一个标签可以使用多个类名,class属性值写多个类名,类名用空格隔开 --> <div class="red size">这是 div 标签</div> </body> </html>
效果:
开发习惯:类名见名知意,多个单词可以用 - 连接,例如:news-hd
3、id选择器
作用:查找标签,差异化设置标签的显示效果。
场景:id 选择器一般配合 JavaScript 使用,很少用来设置 CSS 样式
步骤:
定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id=“id名”
<style> /*定义 id 选择器*/ #red { color: red; } </style> <!-- 使用 id 选择器 --> <div id="red">这是 div 标签</div>
规则:
- 同一个 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> /* 定义 */ #red { color: red; } </style> </head> <body> <!-- 使用 --> <div id="red">div 标签</div> </body> </html>
效果:
4、通配符选择器
作用:查找页面所有标签,设置相同样式。
通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同样式
* { color: red; }
示例:
<!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> * { 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>
效果:
四、画盒子
目标:使用合适的选择器画盒子
新属性:
属性名 作用 width 宽度 height 高度 background-color 背景色
示例:
<!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> .red { /* 宽度 */ width: 100px; /* 高度 */ height: 100px; /* 背景色 */ background-color: red; } .yellow { width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="red">div1</div> <div class="yellow">div2</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>Document</title> <style> /* 经验:谷歌浏览器文字有默认大小 16px */ p { /* font-size 属性必须有单位,否则属性值不生效 */ font-size: 30px; } </style> </head> <body> <p>测试字体大小</p> </body> </html>
效果:
2、字体粗细
属性名:font-weight
属性值:
数字(开发使用)
正常 400 加粗 700 关键字
正常 normal 加粗 bold /* 不加粗 */ font-weight: 400; /* 加粗 */ font-weight: 700;
示例:
<!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> h3 { font-weight: 400; } div { font-weight: 700; } </style> </head> <body> <h3>h3 标题</h3> <div>div 标签</div> </body> </html>
原效果:
当前效果:
3、字体倾斜
作用:清除文字默认的倾斜效果
属性名:font-style
属性值:
- 正常(不倾斜):normal
- 倾斜:italic
示例:
<!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> em { font-style: normal; } div { font-style: italic; } </style> </head> <body> <em>em 标签</em> <div>div 标签</div> </body> </html>
原效果:
当前效果:
4、行高
①行高
作用:设置多行文本的间距
属性名:line-height
属性值:
- 数字 + px
- 数字(当前标签font-size属性值的倍数)
line-height: 30px; /* 当前标签字体大小为16px */ line-height: 2;
示例:
<!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> p { font-size: 20px; /* line-height: 30px; */ /* 行高值是数字,表示当前标签字体大小的倍数 */ line-height: 2; } </style> </head> <body> <p>在大学期间,我将重点提升自己的专业素养水平,坚持学习高校专业性知识,同时注重科技创新能力和科学实践能力,综合发展。本人将认真完成本科专业课程,领会吸收所学知识,提升自身专业素养,根据自身学习情况合理制定学习计划。充分利用校园资源,例如学校图书馆,加强自身修养,汲取其它知识与本领。同时,积极参与学校组织活动,寻求为学校服务的机会,贡献自己的力量</p> </body> </html>
原效果:
当前效果:
行高的组成:上间距 + 文本高度 + 下间距
行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)。
总结:
- 用 数字 + px 或 数字(当前标签 font-size 值得倍数) 来书写 line-height 属性值
- 测量行高的方法是 从一行文字得最顶(最底)测量到下一行文字的最顶(最底)
②行高-垂直居中
垂直居中技巧:行高属性值等于盒子高度属性值
示例:
<!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> div { height: 100px; background-color: skyblue; /* 注意:只能是单行文字垂直居中 */ line-height: 100px; } </style> </head> <body> <div>文字</div> </body> </html>
原效果:
当前效果:
5、字体族
属性名:font-family
属性值:字体名
font-family: 楷体;
示例:
<!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> div { font-family: 楷体; } </style> </head> <body> <div>测试文字</div> </body> </html>
原效果:
当前效果:
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5BBB\4F53", sans-serif;
拓展(了解):font-family属性值可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左到右依次查找
- font-family 属性最后设置一个字体族名,网页开发建议使用无衬线字体(sans-serif)
6、font 复合属性
div { /* 文字倾斜 */ font-style: italic; /* 文字加粗 */ font-weight: 700; /* 字体大小是30px */ font-size: 30px; /* 行高为字号的2倍 */ line-height: 2; /* 字体是楷体 */ font-famil: 楷体; }
div { /* font: 是否倾斜 是否加粗 字号/行高 字体; */ font: italic 700 30px/2 楷体; }
使用场景:设置网页文字公共样式
复合属性:属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开。
font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)
div { font: intalic 700 30px/2 楷体; }
注意:字号和字体值必须书写,否则 font 属性不生效
示例:
<!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> /* 文字倾斜、文字加粗、字体大小是30px、行高2倍、楷体 */ div { font: italic 700 30px/2 楷体; /* fonr 属性必须写字号和字体,否则属性不生效 */ /* font: 30px 楷体; */ /* font: italic 700 30px/2; */ } </style> </head> <body> <div>测试 font 属性</div> </body> </html>
原效果:
当前效果:
7、文本缩进
属性名:text-indent
属性值:
数字 + px
数字 + em(推荐:1em = 当前标签的字号大小)
p { text-indent: 2em; }
示例:
<!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> p { text-indent: 2em; font-size: 30px; } </style> </head> <body> <p>苍茫世界,天之高,地之广,人心不古。面对利益诱惑,有人出卖亲朋好友,有人始终坚贞不屈,有人看破红尘归隐山林,又有的人宁愿背负千古罪名,也不愿放弃……晴天,黑云滚动,厚重的云层随时可能坍塌下来。氤氲的彩色薄雾在天空中飘舞。凛冽的狂风在与山崖较着劲。海面波澜不定,澎湃着的浪花把岩石拍打得凸显狰狞。</p> </body> </html>
原效果:
当前效果:
8、文本对齐方式
作用:控制内容水平对齐方式
属性名:text-align
属性值:
属性值 效果 left 左对齐(默认) center 居中对齐 right 右对齐
text-align: center;
示例:
<!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> h1 { /* 本质:居中的是文字内容,不是标题 */ /* text-align: left; */ text-align: center; /* text-align: right; */ } </style> </head> <body> <h1>标题文字</h1> </body> </html>
原效果:
当前效果:
9、图片对齐方式
text-align本质是控制内容的对齐方式,属性要设置给内容的父级。
<style> div { text-align: center; } </style> <div> <img src="#" alt=""> </div>
示例:
<!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> div { text-align: center; } </style> </head> <body> <div> <img src="./image/网图4.jpg" alt=""> </div> </body> </html>
原效果;
不宜放出😁
当前效果:
不宜放出😁
10、文本修饰线
属性名:text-decoration
属性值:
属性值 效果 none 无 underline 下划线 line-through 删除线 overline 上划线
示例:
<!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> a { text-decoration: none; } div { text-decoration: underline; } p { text-decoration: line-through; } span { text-decoration: overline; } </style> </head> <body> <a href="#">a 标签,去掉下划线</a> <div>div 标签,添加下划线</div> <p>p 标签,添加删除线</p> <span>span 标签,添加顶划线</span> </body> </html>
原效果:
当前效果:
11、color 文字颜色
属性名:color
属性值:
颜色表示方式 属性值 说明 使用场景 颜色关键字 颜色英文单词 red、green、blue… 学习测试 rgb表示法 rgb(r, g, b) r,g,b表示红绿蓝三原色,取值:0 - 255 了解 rgba表示法 rgba(r, g, b, a) a表示透明度,取值:0 - 1 开发使用,实现透明色 十六进制表示法 #RRGGBB #000000,#ffcc00,简写:#000,#fc0 开发使用(从设计稿复制)
示例:
<!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> h1 { background-color: aqua; /* color: red; */ /* color: rgb(0, 255, 0); */ /* color: rgba(0,0,0,0.3); */ /* color: #0000ff; */ color: #00f; } </style> </head> <body> <h1>h1 标签</h1> </body> </html>
原效果:
当前效果:
六、调试工具
作用:检查、调试代码;帮助程序员发现代码问题、解决问题
- 打开调试工具
- 浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
- F12
- 使用调试工具
示例:
<!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> div { color: red; font-size: 39; } </style> </head> <body> <div>测试文字</div> </body> </html> /* 调试工具的细节 1. 如果是错误的属性,有黄色感叹号 2. CSS 属性的前面有多选框,如果勾选:这个属性生效;如果没有勾选:这个属性不生效 */
调试结果:
!!! 未完待续😁!!!