css 初识
- css 通常称为css样式或层叠样式表（级联样式），主要用于设置html页面中的文本内容（字体，大小，对齐方式）图片（宽高边框样式编距等）以及版面的布局等外观样式。
- css以html 为基础，提供了丰富的功能，如字体颜色、背景的控制及整体排版等，还可以针对不公的浏览器设置不同的样式
css样式规则
-
使用html 时，需要尊从一定的规范
DD7A2F0D-1FAD-442E-AC57-2E01C512886A.png
如图样式中
1 . 选择器用于制定css演示作用的html对象，花括号内时该对象设置的具体样式。
2 属性和属性值之间以键值对的形式出现
3 属性是指定的对象设置的样式属性，例如大小、文本颜色等。
4 属性和属性之间用英文： 链接
5 多个键值对之间用英文；隔开
css字体样式属性
-
font-size 属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中相对长度单位比较常用，推荐使用像素px，绝对长度使用较少
font-size.png
font-family：字体
font-faimily 属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
使用技巧
- 现在网页中普遍使用14px+
2 尽量使用偶数的数字符号。ie6等老式浏览器支持奇数会有bug
3 各种字体之间必须使用英文状态下的逗号隔开
4 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文时，英文字体名必须位于中文字体之前
5 如果字体中包括空格、#、$ 等符号，则字体必须加英文状态下的单引号或双引号，例如：font-faimily：“times new Roman”
例如：font-family：“宋体” font-family：“微软雅黑”
css Unicode字体
-
在css 中设置字体名称，直接写中文是可以的。但是在文件编码（gb2312、UTF-8等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。
1 方案一：你可以使用英文来替代。比如font-faimily：”Microsoft Yahei“
2 方案二： 你可以使用Unicode 编码来写字体名称可以避免这些错误。使用Unicode 写中文字体名称，浏览器时可以正确解析font-family ：”、5FAE\8F6f\96C5\9ED1“
推荐使用方案二
字体对应表.png
font-weight：字体粗细
字体加粗除了b strong 标签之外，可以使用css 来实现，但是css没有语意。
font-weidth 属性用于定义字体的粗细，其可用的属性：normal。bolod、bolder、lighter、100-900（100的整数倍） 推荐使用数字
font-style
- 设置检索文本的演示
字体倾斜除了用i 和em之外，可用使用css 来实现，但是css 没有语意
fong-style 属性用于定义字体风格，例如设置斜体、倾斜或正常字体
normal 指定正常的样式
italic： 让字体斜体
oblique：浏览器会显示倾斜的字体样式。
技巧：
批示我们很少给字体加斜体，反而谢欢给系统提标签（em i）该成普通样式
字体综合设定
font 属性用对字体样式进行综合设置，器语法点如下
选择器{font :font-style font-weight font-size/line-height font -faimily;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
注意： 其中不需要设置的属性可以省略，但必须保留font-size和font-family 属性，否则font 属性将不器作用
选择器（重点）
要将csss演示应用于特定的HTML 元素，首先需要找到该目标元素。在css中，执行这一任务的演示规则部分被称为选择器
标签选择器（元素选择器）
标签选择器是指用HTML标签称作为选择器，按标签名称分类，微页面中某一类标签制定统一的css样式。
p {
color: red;
}
类选择器
类选择器用 . 来进行表示，后面紧跟类名
. 类名{ 属性1：属性值1；属性2：属性值2；}
标签调用时用 class = ”类名“即可
.minren { //申明类样式
color: red;
}
<div class="minren">名人</div>//引用类演示 class 单词类型的意思
类选择器最大的优点是可以为元素队形定义单独或者相同的样式
类样式命名技巧:
1 长名称或词组可以使用就横线来为选择器命名
2 不建议使用-下划线来命名css 选择器
3 不要单纯数字、中文等命名，尽量使用英文字母来表示。
id选择器
格式 #名字 {样式一：值一；样式二：值二}
# minren { //申明类样式
color: red;
}
<div id="minren">名人</div>
类选择器和id选择器的区别
W3C 标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同的名字class
类选择器（class）好比人的名字，是可以多次重复使用的
id 选择器 好比人的身份证，不能重复使用。只能使用一次
通配符选择器
-
通配符选择器，他是所有选择器中范围最广的一个，能匹配所有元素
- {
color: read;
}
这样html 所有的颜色就是红色了
- {
伪类选择器
首先，这也是一个选择器，伪类选择器用于向一些选择器添加特殊的效果。比如给链接添加特殊的此傲骨，比如可以选择第一个，第n个元素。
为了和我们逛才学过的类徐昂周期曲表，可选择器是一个点。比如 .demo{} 而伪类选择器就是 ：link{}
链接伪类选择器：
：link // 访问的链接
：visited 已访问的链接
：hover 鼠标移动到链接上
-
：active 选定的链接
注意些的时候，他们的顺序精良不要颠倒 安好lvha 的顺序，love hate 记忆法。a:link { font-size: 15px; color: gray; mso-font-width: 700px; } a:visited{ font-size: 15px; color: orange; mso-font-width: 700px; } a:hover{ color: red; } a:active{ color: green; } <a href="www.baidu.com" >百度</a>
结构（位置）伪类选择器（css3）
：fist-child ： 选取属于其父类的首个子元素的制定选择器
：last-child ：选取属于其父类的最后一个元素制动的选择器
：nth-child（n）： 匹配属于其父元素的第N个子元素，不论元素的类型
-
：nth-last-child（n）：选择器匹配属于其元素的第N个字元素的每个运输，不论元素的类型，从最后一个子元素开始计数。 n可以是数字、关键词或公式。
li:first-child{ color: red; } li:last-child{ color: green; } li:nth-child(5){ color: gray; } li:nth-child(even){ 所有的偶数 或者也可以写2n 0 2 4 6 8 ， 3n 0 3 6 9 color: gray; } li:nth-child(odd){ 所有的奇数 color: gray; } li:nth-last-child(even){ 从后往前数偶数，也可以 2n 3n color: azure ; } li:nth-last-child(2){ color: azure ; } <ol> <li>第一个孩子</li> <li>第二个孩子</li> <li>第三个孩子</li> <li>第四个孩子</li> <li>第五个孩子</li> <li>第六个孩子</li> <li>第七个孩子</li>
</ol>
目标伪类选择器
：target 目标伪类选择器：选择器可以用于选取当前活动的目标元素
：target { // 当前被选择的用于锚点等
color :red;
}
外观属性
color 属性用于定义文本的颜色取值方式有三种
1 预定义的颜色值，如red ，green，blue等
2 十六进制 如#ff0000
3 RGB 代码，如house可以表示rgb（255.0，0，0）
注意：如果使用RGB 代码的百分比颜色值，取值为0 时也不能省略百分号，必须写0%ling-height：行间距
line-height 属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，遗憾称为行高。line-height常用的属性单位是像素px ，相对于em和百分bi%，实际工作中使用最多的是像素。text-align：水平对齐方式
text-align 属性用于设置问题本内容的水平对齐方式，相当于html中的align对齐属性。其可用属性值如下
left：左对齐
right：右对齐
center： 居中text-indent：首行缩进
text -indent 属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口的百分比%，允许使用负值，建议使用em作为设置单位。
1 em 就是一个子的宽度 如果是汉字的段落，1 em 就是一个汉字的宽度。text-spacing：字间距
属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的值，允许使用负值，默认为normal。word-spacing：单词间距
word-spacing 属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性可为不同单位的数值，语序使用负值，正常为normal
word-spacing 和letter-sapcing 均可对英文进行设置。不同的是letter-sapcing定义的为字木之间的间距，而word-sapcing 定义的为英文单词之间的间距word -break：自动换行
normal 使用浏览器默认的换行规则
break-all 语序在单词内换行
keep-all 只能在半角空壳或连体字符处理行。
颜色半透明（css3）
文字颜色到了css3我们可以采用半透明额格式了员入下
color：rgba（r,g,b,a） a是alpha 透明的意思 color （0，2，2，0.3）
文字的阴影
以后我们可以给我们的文字添加阴影效果了Shadow
text-shadow ；水平位置 垂直位置 模糊距离 影音颜色
text-shadow ：1px 2px 3px rgba（0，0，0，0.6）
前连个参数必须写，后面两个参数可以省略.
5 引入css样式表
css 可以写到那个位置？是不是一定要写到html中？
5.1行内样式
是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签 style = "属性1：属性值1；属性2 ：属性值2；">内容</标签>
语法中style是标签的属性值，实际上任何HTML标签都拥有style 属性，用来设置行内样式。其中属性和值得书写规范与css样式规则相同，行内样式所在的标签及嵌套在其中的子标签起作用。
5.2 内部样式
内嵌式是将CSS代码集中写在HTML文档的head头部文件中，并且用style标签定义，其语法格式如下：
<head>
<style>
选择器{属性1：属性值1；属性2：属性值2；}
</style>
语法中，style标签一般位于head白浅中title标签之后，也可以吧他放在html的任何地方
</head>
5.3外部样式
链入式是将样式放在一个或多个以.css 为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到html 文档中，其基本语法格式如下
<head>
<link href = "css文件路径" rel = "stylesheet"/>
</head>
注意：link 是个单表亲啊哦
该语法中，link 标签需要放在head头部标签中，并且必须制定link标签的三个属性。
-href 定义所链接尾部样式表文件的url ，可以是嫌贵路路径也可以是绝对路径
- type ：定义所链接文档的类型，在这里需要制定“text/css”，表示链接的外部文件为css 样式表。
- rel ：定义当前文档与被链接文档之间的关系，在这里需要制定为“stylesheet”表示被俩呢的文档是一个样式表文件。
5.4 三种演示表总结
6标签显示模式（display）
html 标签一般分为块标签和行内标签两种类型，他们也称为块元素和行内元素
6.1 块级元素（block-level）
每个块元素通常会独自占据一整行或多行，可以对其设置宽度、高度、对其等属性，常用语网页布局和网页结构的搭建。
常见的块元素有<h1-h6> ,<p>,<div>,<ul>,<ol><li>等，其中<div>是最典型的块元素
块级元素的特点：
1 总是从新开始
2 高度，行高、外边距以及内编辑都可以控制。
3 宽度默认是容器100%
4 可以容纳内联元素和其他块元素。
6.2行内元素（inline-level）
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等
常见简的行内元素 有<a> <strong> <b><em><I><del><s><ins><u><span> 其中span 是典型的行内元素
行内元素的特点
1 和相邻行内元素在一行上
2 高、宽无效，但水平的padding和margin可以设置，垂直方向的无效。
3 默认宽度就是他本身内容的宽度。
4 行内元素只能容纳文本或者其他行内元素 a特殊
注意：
1.只有文字才能组成段落 因此p里面不能放块级元素，同理还有这些标签h1-h6 dt，他们都是文字类块级标签，里面不能放其他块级元素
2 . 链接里面不能再放链接
6.3块级元素和行内元素区别
6.4 行内块元素（inline -block）
行内元素总有几个特殊的标签 imge input td ，可以对他们设置宽度和对齐属性，有些资料可能会称为他们为行内块元素。
行内块元素的特点：
1 和相邻内元素（行内块）在一行上，但是之间会有空杯缝隙
2 默认宽度就是他本身内容的宽度。
3 高度，行高、外边距以及内边距都可以控制。
标签显示模式转换display
块转行内：display:inline;
行内转块：display：block；
块、行内元素转换为行内块：display：inline-block
