和pink老师学习CSS

1.选择器

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

基础选择器：

基础选择器	作用	特点	用法
标签选择器	可以设置所有相同的标签的属性	不能差异化选择	p{color: red;}
类选择器	可以设置一个或多个标签	可以根据需求选择	.nav{color: red;}
id选择器	一次只能设置一个	id属性只能在每个html文档中出现一次	#nav{color :red;}
通配符选择器	设置所有标签	选择的太多，有部分不需要	*{color:red;}

复合选择器:

选择器	作用	特征	用法
后代选择器	用来选择后代元素(多)	可以是子孙后代	符号是空格如：.nav li a
子代选择器	选最近的一级元素（少）	只能是一个亲儿子	符号是大于.nav > a
并集选择器	选择某些同样式的元素(多)	可以用于集体声明	符号是逗号div , p , .pig li
链接伪类选择器	选择不同状态的链接	跟链接相关	未访问     a : link    访问过 a:visited 鼠标经过 a:hover（常用a+a:hover） 按下  a:acttive
:focus选择器	选择获得光标的表单	跟表单相关	input:focus

2.font-family

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

        div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

字体大小

CSS 使用 font-size 属性定义字体大小。
       p { font-size: 20px; }

字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细
        p { font-weight: bold; }

属性值	描述
normal	默认值
bold	定义粗体
100–900	400等价于normal，700等价于bold（注意这个后面不用跟单位px）

文字样式

CSS 使用 font-style 属性设置文本的风格。
         p { font-style: normal; }

属性值	作用
normal	默认值
italic	浏览器会显示斜体样式

字体复合属性

font连写：

body { font: font-style font-weight font-size/line-height font-family; }

顺序固定  font-size 和 font-family必须有

3.CSS 文本属性

属性	表示	注意点
color	文本颜色	通常使用16进制的格式#fff
text-align	文本对齐	可以设定文字的对齐方式（left   right   center）
text-indent	文本缩进	通常段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	下划线是underline，取消下划线是none（链接多用）
line-height	控制行与行的距离	控制行与行的距离

4.CSS 样式表分类

1.行内样式：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

2.内部样式：
<style> div { color: red; font-size: 12px; } </style>

3.外部样式：

        实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入 到 HTML 页面中使用.

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用<link> 标签引入这个文件 <link rel="stylesheet"  href="css文件路径">

5.快速生成HTML结构语法

1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>
2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $
7. 如果想要在生成的标签内部写内容可以用 { } 表示

6.块元素、行内元素、行内块元素、转换

1.行内元素:

        常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。 
 
        行内元素的特点：
 
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。 
④ 行内元素只能容纳文本或其他行内元素。 

注意： 
        1. 链接里面不能再放链接 
        2.特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全 

2.块元素:

       常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。

块级元素的特点： 
        ① 比较霸道，自己独占一行。 
        ② 高度，宽度、外边距以及内边距都可以控制。
        ③ 宽度默认是容器（父级宽度）的100%。 
        ④ 是一个容器及盒子，里面可以放行内或者块级元素。

注意： 
        1.文字类的元素内不能使用块级元素 
        2.<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
        3.同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

3.行内块元素：

        在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素。

行内块元素的特点： 

        ① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
        ② 默认宽度就是它本身内容的宽度（行内元素特点）。
        ③ 高度，行高、外边距以及内边距都可以控制（块级元素特点） 

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含的任何标签
行内元素	一行可以放多个行内元素	不可以设施宽度高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度高度	它本身内容的宽度

4.元素模式的转换：

        转换为块元素：display:block; 
        转换为行内元素：display:inline; 
        转换为行内块：display: inline-block; 

7.背景属性

        背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

属性	作用	值
background-color	背景颜色	预定义的颜色值或十六进制或rgb代码
background-image	背景图片	url（图片路径）
background- repeat	是否平铺	repeat   no-repeat     repeat-x     repeat-y
background- position	背景位置	length/position 分别是x和y的坐标 可以使方位可以是px
background- attachment	背景附着	scroll（背景滚动）/fixed(背景固定)
背景简写    background	简写	背景颜色 背景图片地址 背景平铺、背景滚动、 背景位置、 背景白透明
背景颜色半透明	半透明	background:rgba(0,0,0,0.3)（最后一个参数的取值是0-1之间）

background:

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量.。

当使用简写属性时，属性间一个空格，没有特定的书写顺序,一般习惯约定顺序为：
 
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: color       url(image.jpg)  repeat-y        fixed        center top ;

CSS3 为我们提供了背景颜色半透明的效果 
 background: rgba(0, 0, 0, 0.3); 
 
最后一个参数是 alpha 透明度，取值范围在 0~1之间 
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3); 

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响 
        CSS3 新增属性，是 IE9+ 版本浏览器才支持的        
        但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

8.CSS三大特性

1.层叠性
        相同的选择器设置相同的样式，此时一个样式会被覆盖掉另一个冲突的样式，层叠性的主要解决冲突的问题
        样式冲突，遵循的原则就是就近原则，那个样式离结构近，就执行那个样式，样式不冲突，不会层叠

2.继承性
        css的继承: 子标签会继承父标签的某些样式，如文本的颜色和字号，简单的理解就
是子承父业
        恰当的使用继承可以简化代码，降低css样式的复杂性
        子元素可以继承父亲元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

        行高的继承
body{
   font：12px/1.5 microsoft yahei
   
}
行高可以跟单位也可以不跟单位

如果子元素没有设置行高，就会继承父亲元素的行高的1.5倍

此时子元素的行高是：当前子元素的文字大小的1.5

body行高1.5这样写法最大的优势是你们的子元素可以根据自己文字的大小自动调整行高

3.优先级

选择器	选择器权重
继承或者通配符*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式 style=	1,0,0,0
！important重要的	无穷大

注意：

        权重是有4位数字组成的但不会有进位
        

权重叠加 如果是符合选择器，则会有权重叠加，需要计算权重

选择器            权重叠加
div ul li             0,0,0,3

.nav ul li           0,0,1,2

a:hover            0,0,1,1

.nav a              0,0,1,1
 

9.盒子模型

        1.border边框
        2.content 内容
        3.padding 内边距
        4.margin外边距

1.border边框

 border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式  边框颜色 

  border : border-width || border-style || border-color 

属性	作用
border-width	定义边框粗细单位是px
border-style	边框样式 有虚线实线等等
border-color	边框颜色

border-style

边框样式 border-style 可以设置如下值： 

none：没有边框即忽略所有边框的宽度（默认值） 
solid：边框为单实线(最为常用的) 
dashed：边框为虚线   
dotted：边框为点线 

 边框简写
border: 1px solid red;  没有顺序 
边框分开写法： 
border-top: 1px solid red;  /* 只设定上边框， 其余同理 */    

border-collapse

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse:collapse;  
collapse 单词是合并的意思 
border-collapse: collapse; 表示相邻边框合并在一起  
如两个盒子的边重合在一起，那么这个重合的边就会是原来的两倍，用这个来清除 

 边框会影响盒子实际大小 
 边框会额外增加盒子的实际大小。因此我们有两种方案解决:
  
1. 测量盒子大小的时候,不量边框. 
2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

padding内边距

padding 属性用于设置内边距，即边框与内容之间的距离。 
padding 属性（简写属性）可以有一到四个值。

当我们给盒子指定 padding 值之后，发生了 2 件事情： 
1. 内容和边框有了距离，添加了内边距。 
2. padding影响了盒子实际大小。 
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。 

解决方案： 
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

padding 的好处
padding内边距可以撑开盒子,我们可以做非常巧妙的运用. 
因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适. 

如何盒子本身没有指定width/height属性,继承于父盒子的宽和高 则此时padding不会撑开盒子大小.

margin外边距

外边距可以让块级盒子水平居中，但是必须满足两个条件： 
① 盒子必须指定了宽度（width）。 
② 盒子左右的外边距都设置为 auto 。
常见的写法，以下三种都可以：
 
 margin-left: auto;   margin-right: auto; 
 margin: auto; 
 margin: 0 auto; 
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。 

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。 
主要有两种情况: 
1. 相邻块元素垂直外边距的合并 
2. 嵌套块元素垂直外边距的塌陷  

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。  
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的 较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案：  
尽量只给一个盒子添加 margin 值。

清除内外边距

 

 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网 页元素的内外边距
 
 * { 
    padding:0;   /* 清除内边距 */ 
    margin:0;    /* 清除外边距 */ 
  }
  
  注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内 块元素就可以了 

去掉 li 前面的 项目符号(小圆点)

 list-style: none;