2020-11-01 只要学不死就往死里学的CSS第一天(选择器、样式属性及样式表的选用)

今天是黑马pink老师也就是强哥带领我们学习CSS的第一天，内容有点多,但我已经做好头发掉光的准备了

不多说了,今天的学习内容共分为下列四大部分:
一、CSS基本概念
1.CSS顾名思义就是(Cascading Style Sheets)即层叠样式表,与HTML不同,CSS并不是一门语言,更不是一门编程语言
2.CSS的作用:
1).美化页面,使具备基本结构的页面增添各种样式
2).也可用于页面中各个盒子(可理解为其内部装着各个页面元素如文字、图片等)或盒子与盒子之间的布局
3.CSS语法规范
1).选择器(要通过id、class、标签名等方式选择的标签)
2).声明部分(对选择的标签希望添加什么样式或做什么布局)
二、CSS选择器及种类(基础选择器)
1.标签选择器
标签选择器语法: 标签名 + { 属性名: 属性值; …}
作用范围: 所有拥有该标签名的标签
*注: 虽然可快速方便的选中多个同名标签,但范围太广泛,不能精确到单个标签对其进行样式的设置
2.类选择器
类选择器语法: 标签类名 + { 属性名: 属性值; …}
作用范围: 所有拥有该类名的标签
*注: 相较于标签选择器,类选择器能精确选中拥有某个类名的标签对其进行样式的设置,通过为标签设置class类名,相当于为页面中的所有标签分了类,被”点到名”的标签都会被选中
3.id选择器
Id选择器语法: 标签id名 + { 属性名: 属性值; …}
作用范围: 所有拥有该id的标签
*注:id相当于一个人的身份证,虽然姓名可能与其他重复,但id是唯一的,可使用id选择器非常精确的为拥有某个id的标签设置样式
4.通配符选择器
通配符选择器语法: * + { 属性名: 属性值; …}
作用范围: 所有标签
*注:选择范围最广泛,页面中所有标签都会被选中
三、常见的CSS属性
1.字体
1).font-family
“family”顾名思义就是家族,该属性可设置字体为微软雅黑、宋体等文字字体
示例:
div {font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}
*注: 使用其他字体时在电脑中需要安装相应字体,考虑到每个人电脑安装的字体的不同及兼容性考虑,尽量使用系统自带字体,避免在不同电脑上显示效果出现差异应i选哪个用户体验的情况发生
2).font-size
该属性用于设置字体大小
示例:
span { font-size: 16px; }
*注: 一定要写单位”px”即像素,且最好统一设置字体大小,因为不同浏览器默认字体大小不同
3).font-weight
该属性用于设置字体粗细
示例:
p { font-weight: bold; }
*注: 可使用英文”normal”和”bold”分别设置正常字体粗细值或加粗,但最好使用数字400和700设置正常字体粗细值或加粗
4).font-style
该属性用于设置文本的风格(如意大利斜体)
示例:
p {font-style: italic;}
5).综合写法
body {font: font-style font-weight font-size/line-height font-family;}
*注:b必须按顺序写,不过除了 font-size 和 font-family这两个必须属性外其 他可省略使用默认值
2.文本
1).color
用于设置文本的颜色
示例:
p{color: red; }
*注: 也可使用#ffffff这种十六进制形式或rgb(255，255，255)表示，
当使用十六进制表示时每两位相同时可简写为一位,如#ff3399可简写为#f39
2).text-align
用于设置文本对齐方式
示例:
div {text-align : center; }（可选值还有left和right左右对齐）
*注: 也可使用#ffffff这种十六进制形式或rgb(255，255，255)表示，
当使用十六进制表示时每两位相同时可简写为一位,如#ff3399可简写为#f39

3).text-indent
用于设置一段文字中的首行缩进
示例:
p{text-indent: 2em; }
*注: em为新单位,大小为浏览器中的一个字体所设置的大小,如p{text-indent: 2em; }即为首行缩进两个字符所占的位置空间
4).text-decoration
通常用于设置文字中的装饰,如下划线删除线
示例:
a{text-decoration: none; }
注: 若为a标签设置该属性且属性值为none,则会去除超链接字体的底部横线
5).line-height
用于设置行高,数值越高则行之间的空隙越大
p { line-height: 36px;}
四、样式表
考虑到结构,样式,行为三者分离的要求,这里只推荐外部样式表,将所有的CSS样式代码单独全部写到CSS 文件中，再在.html文件中通过下面方式引入,这种方式可最大限度降低耦合度,修改样式时只需到该文件中修改,无需再再到.html文件中找CSS样式代码进行修改,对后期维护非常友好,作为一名程序员应该有这种思想
示例:/ */