今日学习内容:
1.CSS概念:
CSS(Cascading Style Sheets)层叠样式表,是一种标记语言,它可以为页面设置丰富的样式,也能实现结构和样式的分离
2.css语法规范
h1 {
color: red;
font-size:20px;
}
- 选择器用于指定选择哪个元素,{}里面写的是对这个元素的具体样式设置。
- 属性和属性值之间用“:”来隔开的,属性和属性值的这种形式也叫做键值对。
- 多对属性和属性值之后要用";"来结尾。
3.css基础选择器
标签选择器:
概念
- 标签选择器是指用HTML的标签名作为选择器,按照标签的类型来设置统一的CSS样式
p {
- 特点
- 能快速选择页面中的某一类标签来设置样式,但是不能为同一类的标签设置差异化的样式。
- 类选择器:
.red {
color: red;
}
- 注意点
- 类选择器使用“.”来定义,用class来调用,在调用的时候不要写“.”。
- 不要使用纯数字、中文等来进行命名,类名要有意义,尽量都使用英文字母
id选择器:
ID是唯一的页面表示,通常是为HTML来某个特定元素来指定特定的样式,CSS中的id选择器用“#”来定义。
#color {
color:red;
}
- 注意点
- 一个页面中同一个id选择器只能被调用一次,不能调用多次,因为id选择器中的样式一般都会比较特殊。
- id选择器和类选择器之间的区别
- 类选择器好比人的名字,一个人可以有多个名字(多类名的使用),也可以一个名字可以被多个人使用(同一个类名被多次调用)
- id选择器一般情况下会和JS一起联合使用来为页面中的特殊的元素设定状态。
通配符选择器:
在CSS中,通配符选择器用"*"来定义,表示选择页面中的所有的元素(标签)。
*{
margin: 0;
padding:0;
}
4.css字体属性
- 字体外观
- 使用font-family 属性快来定义字体外观
- 注意点
- CSS Unicode字体
- 在CSS中设置字体名称,直接写中文是可以的,但是在字符集如果出现不匹配的情况,可能会产生乱码,如果是Unicode编码能避免该问
- 例
  - 使用font-size属性来设置字体大小
- 注意点:
- 一般我们会将字体大小的值设置为具体的像素值,单位是(px)
- 谷歌浏览器默认的字体大小是16px,最小到12px
- 不同的浏览器之间对于默认的字体大小是不一致的,所以我们在写页面的时候,要设置一个明确的字体大小,不要使用默认值。
- 字体风格
- 例

- 注意点:
- 实际开发中很少将正常的字体改为斜体,一般会将em和i标签的斜体样式转化为正常显示,所以font-style:normal;使用的场景更多。
- 使用font-weight属性来控制字体的粗细
- 例
 - 注意点:一般情况下我们只设置400(正常字体粗细)和700(代表加粗字体粗细),值后面不要加单位。
- 语法规范
- font:font-style font-weight font-size/line-height font-family;

- 注意点:
- 使用font属性的时候,必须按照固定的属性顺序来进行书写,不能随便更换顺序,否则会导致font属性失效
- 不需要的属性可以省略,font属性中可以被省略的属性 font-style 和 font-weight 不可以省略的是 font-size 和 font-family
今日遇到问题:无
|