视频课程：黑马程序员Pink老师
笔记：
选择器以及一条或多条声明
写在<head><style>之间</style></head>
font-size:文字大小
属性和属性之间以键值对的形式出现
代码风格：
1.样式格式书写 ①紧凑格式 ②展开格式（用这种）
2.样式大小写 用小写字母书写
3.空格规范 属性值前面，冒号后面 保留一个空格 选择器和大括号中间保留空格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>体验CSS语法规范</title><style>/* 选择器 {样式} *//* 给谁改样式 { 改什么样式} */p {color: red;/* 修改了文字大小为12像素 */font-size: 12px; }</style></head><body><p>有点意思</p></body></
笔记：基础选择器
选择器——选择标签用
标签选择器
标签名{
属性1：属性值；
属性2：属性值；
…
}
可以把某一类标签全选出来，同一设置样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><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>
笔记：类选择器
选择单独的一个或其中几个标签
.类名{
属性1：属性值；
…
}
需要用class属性来调用class类
类名是我们自己起的名字
类名不能使用标签名
长名字可用横线
不能使用纯数字、中文
最好根据类命名规则
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>基础选择器之类选择器</title><style>/* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用*/.red {color: red;}.star-sing {color: green;}.memeda {color: pink;}</style></head><body><ul><li class="red">冰雨</li><li class="red">来生缘</li><li>李香兰</li><li class="memeda">生僻字</li><li class="star-sing">江南style</li></ul><div class="red">我也想变红色</div></body></html>
笔记：多类名
在标签class属性中写多个类名
两个名字之间必须用空格隔开
可以把一些标签元素相同的样式共同放到一个类
这些标签都可以调用这个公共的类，然后再调用自己独有的类
从而节省CSS代码，同一修改也非常方便
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=`, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>多类名的使用方式</title><style>.red {color: red;}.font35 {font-size: 35px;}</style></head><body><div class="red font35">刘德华</div></body></html>
笔记：id选择器
样式#定义, 结构id调用, 只能调用一次, 别人切勿使用
#id名 {
属性1：属性值；
…
}
id选择器和类选择器的区别：
类选择器好比人的名字。id选择器好比身份证
最大的不同在使用次数 id一般结合js使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>基础选择器之id选择器</title><style>/* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */#pink {color: pink;}</style></head><body><div id="pink">迈克尔·杰克逊</div><div>pink老师</div></body></html>
笔记：通配符选择器
表示选取页面中所有元素（标签）
*{
属性1：属性值；
…
}
不需要调用，特殊情况下才使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>基础选择器之通配符选择器</title><style>* {color: red;}/* * 这里把 html body div span li 等等的标签都改为了红色 */</style></head><body><div>我的</div><span>我的</span><ul><li>还是我的</li></ul></body></html>
笔记：字体系列
font-family:‘英文（推荐）/中文’
在body里，多个字体用逗号隔开，长单词用双引号括起来
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS字体属性之字体系列</title><style>h2 {font-family: '微软雅黑';}p {/* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */font-family: 'Times New Roman', Times, serif;}</style></head><body><h2>pink的秘密</h2><p>那一抹众人中最漂亮的颜色,</p><p>优雅,淡然,又那么心中清澈.</p><p>前端总是伴随着困难和犯错,</p><p>静心,坦然,攻克一个又一个.</p><p>拼死也要克服它,</p><p>这是pink的秘密也是老师最终的嘱托.</p></body></html>
笔记：字体大小
font-size :px
px像素大小，默认文字大小16px，可以给body指定整个网页字体大小
标题标签比较特殊，要单独指定文字大小
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS字体属性之字体大小</title><style>body {font-size: 16px;}/* 标题标签比较特殊,需要单独指定文字大小 */h2 {font-size: 16px;}</style></head><body><h2>pink的秘密</h2><p>那一抹众人中最漂亮的颜色,</p><p>优雅,淡然,又那么心中清澈.</p><p>前端总是伴随着困难和犯错,</p><p>静心,坦然,攻克一个又一个.</p><p>拼死也要克服它,</p><p>这是pink的秘密也是老师最终的嘱托.</p></body></html>
笔记：字体粗细
font-weight:
默认mormal bold加粗 bolder细体 lighter细细体
推荐使用：直接写数字（不加单位！！！） 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"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS字体属性之字体大小</title><style>.bold {/* font-weight: bold; *//* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 *//* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */font-weight: 700; }h2 {font-weight: 400; /* font-weight: normal; */}</style></head><body><h2>pink的秘密</h2><p>那一抹众人中最漂亮的颜色,</p><p>优雅,淡然,又那么心中清澈.</p><p>前端总是伴随着困难和犯错,</p><p>静心,坦然,攻克一个又一个.</p><p class="bold">拼死也要克服它,</p><p>这是pink的秘密也是老师最终的嘱托.</p></body></html>
笔记：文字样式
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"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS字体属性之文字样式(风格)</title><style>p {font-style: italic;}em {/* 让倾斜的字体不倾斜 就是赶紧脉动回来 */font-style: normal;}</style></head><body><p>同学,上课时候的你</p><em>下课时候的你</em></body></html>
笔记：复合属性
body {
font:font-style font-weight font-size font-family
}
不能颠倒顺序，用空格隔开
不需要的可以省略，但是size和family不能省略
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS字体属性之复合属性</title><style>/* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */div {/* font-style: italic;font-weight: 700;font-size: 16px;font-family: 'Microsoft yahei'; *//* 复合属性: 简写的方式 节约代码 *//* font: font-style font-weight font-size/line-height font-family; *//* font: italic 700 16px 'Microsoft yahei'; */font: 20px '黑体';}</style></head><body><div>三生三世十里桃花,一心一意百行代码</div></body></html>
笔记：文本颜色
color 预定义的颜色值 十六进制 rgb
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS文本外观属性之颜色</title><style>div {/* color: deeppink; *//* color: #cc00ff; */color: rgb(255, 0, 255);}</style></head><body><div>听说喜欢pink色的男生,都喜欢男人</div></body></html>
笔记：文字对齐
text-align： 使盒子里的文字水平对齐方式
left 左对齐（默认） center 居中对齐 right 右对齐
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS文本外观之文字对齐</title><style>h1 {/* 本质是让h1盒子里面的文字水平居中对齐 *//* text-align: center; */text-align: right;}</style></head><body><h1>居中对齐的标题</h1></body></html>
笔记：装饰文本
text-decoration:
none 默认
underline 下划线
overline 上划线
line-through 删除线
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS文本外观之装饰文本</title><style>div {/* 下划线 *//* text-decoration: underline; *//* 删除线 */text-decoration: line-through;/* 上划线 */text-decoration: overline;}a {/* 取消a默认的下划线 */text-decoration: none;color: #333;}</style></head><body><div>粉红色的回忆</div><a href="#">粉红色的回忆</a></body></html>
笔记：文本缩进
text-indent:数值px
只缩进首行，文本第一行，存在负值情况
em相对单位，就是当前元素1个文字大小
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS文本外观之文本缩进</title><style>p {font-size: 24px;/* 文本的第一行首行缩进 多少距离 *//* text-indent: 20px; *//* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */text-indent: 2em; }</style></head><body><p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p><p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p><p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p></body></html>
笔记：行间距
line-height:数字px
行间距包括：上间距，文本高度（不变），下间距
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS文本外观之行间距</title><style>div {line-height: 26px;}p {line-height: 25px;}</style></head><body><div>中国人</div><p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p><p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p><p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p></body></html>
笔记：三种样式表
1.内部样式表（嵌入式）
内部样式表，将所有css抽取出来，放在style里，一般放在head中
方便控制整个页面中的元素设置
代码结构清晰，但是并没有实现结构与样式完全分离
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>内部样式表</title><style>div {color: pink;}</style></head><body><div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div></body></html>
笔记：
2.行内样式表 权重高
直接在标签内部添加style=""，适用于样式简单的
style其实就是标签的属性
在双引号中间
控制当前的标签设置样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行内样式表</title></head><body><p>夏天夏天悄悄过去留下小秘密</p><p>压心底压心底不能告诉你</p><p> 晚风吹过温暖我心底我又想起你</p><p> 多甜蜜多甜蜜怎能忘记</p><p>不能忘记你把你写在日记里</p><p>不能忘记你心里想的还是你</p><p>浪漫的夏季还有浪漫的一个你</p><p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p></body></html>
笔记：
3.外部样式表
样式单独写道CSS文件中，之后把CSS文件引入HTML文件页面中使用
步骤：
①新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
style.css 只有样式没有标签
②使用<link rel="stylesheet" href="css文件路径名">引入HTML页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>外部样式表</title><link rel="stylesheet" href="style.css"></head><body><div>来呀~快活呀,反正有大把时间...</div></body></html>
chrome调试
左边是HTML 右边是CSS
右边CSS可以查看数据，改变颜色 上下左右箭头修改，但不能保存
ctrl+0 重置浏览器原始大小
黄色感叹号，样式书写错误
