5.29笔记

font-family:字体
font-family属性用于设置字体网页中常用的字体有宋体微软雅黑黑体等例如将网页中所有段落文本的字体设置为微软雅黑可以使用如下CSS样式代码:
p{ font-flmily : “微软雅黑”}
可以同时制定多个字体中间用逗号隔开表示如果浏览器不支持第一个字体 则会尝试下一个且使用技巧

CSS Unicode字体
在CSS中设置字体名称直接写中文是可以的。
方案一：可以使用英文来代替如 font-family：“Microsoft Yahei”
方案二；在CSS直接使用Unicode编码来来写字体名称可以避免这些错误使用Unicode写中文字体名称可以避免这些错误使用Unicode写中文字体名称浏览器是可以正确的解析的。
font-family:"\5FAE\8F6F\96C5\9ED1"表示设置字体为"微软雅黑"

font-weight:字体粗细
字体加粗除了胎b和strong标签之外可以使用CSS来实现但是CSS没有语义
font-wei ght属性用于定义字体的粗细其可用属性值: normal bo1d bolder lighter 100-900(100的 整数倍)
小技巧
数字400等价于norma1而700等价于bo1d但是我们更喜欢用数字来表示

font-style:字体风格
字体倾斜除了用i和em标签之外可以使用css来实现但是css是没有语义的
font-style属性用于定义字体风格如设置斜体倾斜或正常字体其可用属性值如下
normal :默认值浏览器会显示标准的字体样式
italic浏览器会显示斜体的字体样式
oblique:浏览器会显示倾斜的字体样式
平时我们很少给文字加斜体反而喜欢给斜体标签(em门)改为普通模式

font:综合设置字体样式(重点)
font属性用于对字体样式进行综合设置基本语法格式如下:
选择器{font: font-style font-weight font-size/line-height font-fami 1y}

使用font属性时必须按上面语法格式中的书写顺序不能更换顺序各属性用空格隔开
注意:其中不需要设置的属性可以省略(取默认值)但必须保留font-size和font-family属性否则将不起作用

CSS注释
css规则时使用/需 要注释的内容/进行注释的在需要注释的内容前使用"/* “标记开始注释在内容结尾使用”*/"结束
例如
p{
font-size : 14px /所 有字体是14像素大小/
}

开发者工具(chrome)
此工具是我们的必备工具以后代码出了问题我们首先第一反应是 :
"按F12"或者是"shift+ctrl+i"打开开发者工具

标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器按标签名称分类为页面中某-类标签指定统- -的CSS样式 其基本语
法如下
标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}或者
元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式同时这也是他的缺点不能设计差异化样式。

类选择器
类选择器使用"I (英文点号)进行标识后面紧跟类名其基本语法格式如下:

                             .类名{属性1: 属性值1;属性2 :属性值2;属性3:属性值3;}
                             标签调用的时候用class="类名” 即可

类选择器最大的优势是可以为元素对象定义单独或相同的样式
小技巧
1.长名称或词组可以使用中横线来为选择器命名
2.不建议使用""下划线来命名CSS选择器
输入的时候少按-个shift键;
浏览器兼容问题(此如使用 tips的选择器命名,在IE6是无效的)
能良好区分JavaScript变量命名(JS变量命名用"_")

3.不要纯粹数字中文等命名尽量使用英文字母来表示

命名是我们通俗约定的。

通配符选择器
通配符选择器用"*"号表示他是所有选择器中作用范围最广的能匹配页面中所有的元素基本语法如下:
*** {属性1:属性值1;属性2: 属性值2;属性3:属性值3;}**
例如下面的代码使用通配符选择器定义CSS样式清楚所有HTML标记的默认边距
*{
margin: 0; /定义外边距/
padding: 0; /定义内边距/

伪类选择器

首先这也是一个选择器伪类选择器用于向某些选择器添加特殊效果比如给链接添加特殊效果比如可以选择第一

为了和我们刚才学的类选择器相区别类选择器是- 一个点比如. deom{}而我们的伪类用两个点就是冒号比如:1ink{}

链接伪类选择器

   :link             /*未访问的连接*/
   :visited        /*已访问的连接*/
   :hover         /*鼠标移动到连接上*/
   :active        /*选定的连接*/

注意写的时候他们的顺序尽量不要颠倒按照Ivha的顺序lv包包非常hao
实际工作中我们简单写链接伪元素选择器就好了

结构(位置)伪类选择器(CSS3)

:first-child:选取属于其父元素的首个子元素指定选择器
:last-child:选取鼠疫其父元素的最后-个子元素的指定选择器
:nth-child(n): 匹配属于其父元素的第N个子元素不论元素的类型
:nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素不论元素的类型从最后-个子元素开始计数

课堂练习：

大苏打坏的哈伍德和 达不让你们和父母哈 难道他会死的VS 具有法人银行是大部分都会·1 vu把都是一个v啊u有 承诺爱说大话v巴亚尔uw 少年队啊我好多

你买不起的玩意 你看不起的玩意 你开不起的玩意 你惹不起的玩意

G o o g l e

</div>