HTML5+CSS3 DAY4

1.css简介

css主要使用场景就是美化网页，布局页面的

（1）html局限性：只关注内容的语义

（2）css—网页的美容师：层叠样式表简称，css也是一种标记语言，主要用于设置html页面中的文本内容，图片的外形以及版面的布局和外观显示样式

（3）css语法规范：

css规则由两个主要的部分构成：选择器以及一条或多条声明

• 选择器用于指定css样式的HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以键值对的形式出现
• 属性是对指定对象设置的样式属性，例如字体大小、文本颜色等
• 属性和属性值之间用英文“：”分开
• 多个键值对之间用英文“；”进行区分

（4）css代码风格

 

 

2.css基础选择器

（1）css选择器作用

选择器就是根据不同需求把不同标签选出来这就是选择器作用

（2）选择器分类

选择器分为基础选择器和复合选择器两大类

• 基础选择器是由单个选择器组成的
• 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

（3）标签选择器

是指用html标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式

作用：标签选择器可以把某一类标签全部选择出来

优点：可以快速为页面中同类型的标签统一设置样式

缺点：不能设计差异化样式，只能选择选择全部的当前标签

（4）类选择器

如果想要差异化选择不同标签，单独选一个或者某几个标签，可以使用类选择器语法：结构需要用class属性来调用class类的意思

<div class='red'>变红色</div>

口诀：样式点定义，结构类调用，一个或多个，开发最常用

注意：

• 类选择器使用“.”进行标识，后面紧跟类名（自定义，我们自己命名的）
• 可以理解为给这个标签起了一个名字
• 长名称或词组可以使用中横线来为选择器命名
• 不要使用纯数字或中文命名，尽量使用英文命名
• 命名要有意义

类选择器——多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字

（1）多类名使用方式

<div class="red font20">亚瑟</div>

• 在class标签中写多个类名
• 多个类名中间必须用空格分开

（2）多类名开发使用场景

• 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
• 这些标签都可以调用这个公共的类，然后调用自己独有的类
• 从而节省css代码，统一修改也非常方便

（5）id选择器

id选择器可以为标有特定的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，css中id选择器以“#”来定义

#id名{

属性1： 属性值；

...

}

id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用

 id选择器和类选择器的区别：

• 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
• id选择器好比人的身份证号码，是唯一的，不会重复
• id选择器和类选择器最大的不同在于使用次数上
• 类选择器在修改样式中使用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

（6）通配符选择器

在css中，通配符选择器用“*”定义，他表示选取页面中所有元素（标签）

语法：

*{

属性1：属性值1；

...

}

• 通配符选择器不需要调用，自动就给所有的元素使用样式
• 特殊情况才使用

3.css字体属性

css Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）

1.字体系列

css使用font-family属性定义文本的字体系列

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 尽可能使用系统默认自带字体，保证在任何用户浏览器中都能显示
• 最常见的字体：body{font-famly:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

2.字体大小

css使用font-size属性定义字体大小

p {

font-size:20px;

}

• px（像素）大小是我们网页最常用的单位
• 谷歌浏览器默认的文字大小为16px
• 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
• 可以给body指定整个页面文字的大小，但标题需要单独设置

3.字体粗细

css使用font-weight属性设置文本字体的粗细

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，700等同于bold  注意这个数字后面不跟单位

4.文字样式

css使用font-style属性设置文本的风格

属性值	风格
normal	默认值，浏览器会显示标准的字体样式 font-style:normal
italic	浏览器会显示斜体的字体样式

注意：平时我们很少给文字加斜体，反而要给斜体标签（em,i）改为不倾斜字体

5.字体的复合属性

字体属性可以把以上文字样式综合来写，这样更节约代码

body{

font:font-style  font-weight  font-size/line-height  font-family;

}

• 使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
• 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用