css使用

CSS笔记

基础知识：

现在的主流浏览器及其内核：

主流浏览器	内核
IE	trident
Firefox	Gecko
Google Chrome	webkit/blink
Safari	webkit
Opera	presto

CSS必须依赖于HTML存在，全名cascading style sheet（层叠样式表）

一、引入CSS

1、行间样式
在HTML里面使用style属性
<div style=””></div>
2、页面级CSS属性
在头标签里面加入
<style type=”text/css”></style>
3、外部CSS文件
在外面创建一个以.css结尾的文件，使用link链接到HTML中
<link rel=”stylesheet” type=”text/css” href=””>
       浏览器中显示一个网页的方式是下载一行执行一行，如果一个网页中含有CSS，则网页运行到link位置，会开启一个新的线程，同时下载HTML和CSS（异步加载）。
注意： 同时运行是异步，不是同时运行是同步的。

二、选择器

1、选择器

1.1、id选择器
<div id=”名称”></div>
CSS中使用方式：#名称{}
注意： 一个元素只能有一个id值，一个id值只能对应一个元素(一一对应)
例:
html中：<div id=”only only1”>123</div> 这样的书写是错误的
CSS中：#only{}#only{} 这样书写也是错误的 后面的CSS属性会覆盖前面的

1.2、class选择器
<div class=”名称”></div>
CSS中使用方式：.名称{}
注意： 和id选择器不同，class选择器支持多对多
例:
html中：<div class=”only only1”>123</div><div class=”only”>456</div> 这样的书写是可以的
CSS中：.only{}.only1{} 这样书写也是可以的

1.3、标签选择器
直接使用标签名称
<div>223</div>
CSS中使用方式：div{}
注意： 所有的div标签都会被选中

1.4、通配符选择器
CSS中使用方式：*{}
注意： 所有标签选中（整个页面）

1.5、属性选择器
CSS中的使用方式：[属性值]{}
例：
html中：<div class=”only”>123</div>
CSS中:[class]{}
或者：
html中：<div id=”only”>123</div>
CSS中:[id=”only”]{}

1.6、important选择器
使用方式：
html中：<div>123</div>
CSS中:div{background-color:red!important;}
注意： 该选择器只可以使用在特定的属性值后面

2、选择器的优先级

!important > 行间样式 > id > class|属性 > 标签 > 通配符

决定选择器优先级的原因：权重
CSS权重：

选择器	权重
!important	Infinity（正无穷）
行间样式	1000
id	100
class	属性
标签	伪元素
通配符	0

注意： 上面的权重值是256进制，且在计算机中，正无穷加一必定比正无穷大

3、复杂选择器

3.1、父子选择器（派生选择器）：
html代码：<div><strong><em>123</em></strong></div>
CSS代码：div strong em{}（之间有空格）
或者：
<div class=”aaa”><strong id=”only”><em>123</em></strong></div>
.aaa .only .em{}
注意： 所用的属性可以不是直接的，可以是间接的
例：
<div><strong><em>123</em></strong></div>
选中123可以直接使用CSS：div em{}

3.2、直接子元素选择器
html代码：<div><em>123</em><strong><em>345</em></strong></div>
选中123的方式：div > em{}

3.3、并列选择器
html代码：<div class=”aaa”>123</div>
CSS代码：div.aaa{}（之间无空格）

3.4、分组选择器

<div>1</div> <em>2</em> <strong>3</strong>
同时选中三行代码的方法：
div,em,strong{}

3.5、伪类选择器

<a href=””></a>
CSS代码：a:hover{background-color:#f40}
      将鼠标移入之后产生的效果

父子选择器查找方式（内核） ：自右向左查找（从一个标签的最内部开始查找，逐步向外查找，如果找到相同的则继续查找，如果没有则停止查找）

注意： 只要写在同一排的元素比较优先级，只用把他们的权重相加就行了权重大的优先级高

CSS属性

一、字体

• font-size：50px 设置字体大小
• font-weight：bold 设置字体加粗 和代码或者代表含义一样
• font-style：italic 设置字体斜体 和代码或者代表含义一样
• font-family：arilt（乔布斯发明的） 设置字体样式
• color：red 设置字体颜色，有三中方式（1、直接写颜色英文单词，2、颜色代码（三原色：rgb（红绿蓝））：#ff4400，3、颜色函数：rgb(255,255,255)）淘宝红:#f40

注意： CSS设置字体大小的时候是设置字体的高

二、关于设置边框

• border: 1px solid black 是一个复合属性 第一个是border-width 第二个是border-style 第三个是border-color 可以单独拆开来写
  也可以分开来写：border-left：10px solid red
  也可以：border-left-color：green 颜色透明色：transparent

三、设置文本

• 对齐方式：text-align:right
• 文本行高：line-height:1px
• 单行文本垂直居中：文本所占高度等于容器所占高度 height
• 首行缩进：text-indent:2em 1em=1*(font-size)=1*16
  
  
• del标签的产生：用span标签产生：text-decoration：line-through
• text-decoration还可以用于设置下划线，上划线等
• 设置鼠标移入效果：cursor：help

总结

改变方式：display：inline
1、行级元素 inline
feature：内容决定元素所占位置，不可以通过CSS改变宽高
span strong em a del
2、块级元素 block
feature：独占一行，可以通过CSS改变宽高
div p ul li ol form adress
3、行级块元素 inline-block
feature：内容决定大小，可以改宽高

注意： 凡是带有inline的元素，但具有文字特性，也就是两个内容之间有空隙，解决方式：1、删除html之间的回车和空格2、设置CSS属性：margin-left：-6px

工程师开发经验：

1. 先写html，再写CSS代码
2. 先定义CSS代码，在写html代码 如：先用CSS定义每一种颜色和每一个尺寸大小，就可以使用两个的组合来写html代码

标签的重新定义：

• 使用标签选择器重新定义：将font-style:normal
• 使用通配符初始化所有标签：*{padding:0px;margin:0px;text-decoration:none;list-style:none;}

盒子模型

盒子的三大部分：

• 盒子壁（border）
• 内边距（padding）
• 盒子内容（width+height）
• 盒子模型：margin+border+padding+（content=width+height）

注意：body有一个自带的margin：8px

内边距用法：

• padding：100px 150px 200px 100px(上右下左)
• padding：100px 150px 200px (上左右下)
• padding：100px 150px(上下左右)
• 也可以：padding-top：100px

定位：position：absolute；
1、绝对定位：absolute
同left（左边线距离浏览器左端位置）和top（距离浏览器顶端距离）一起使用 right（右边线距离浏览器右端位置）和bottom（下边线距离浏览器下端的位置）
注意： absolute脱离原来位置，其他元素会将他以前的位置覆盖，即使他没有动，其他元素也会将他覆盖（相对于最近的有父级进行定位，如果没有父级，相对于文档进行定位）
2、相对定位：relative
同left（左边线距离浏览器左端位置）和top（距离浏览器顶端距离）一起使用 right（右边线距离浏览器右端位置）和bottom（下边线距离浏览器下端的位置）
注意： relative脱离原来位置，但是其他元素不会将他覆盖，也就是说就算他移动了，其他元素也不会将他原来位置覆盖（相对于自己原来的位置进行定位）
在使用时，我们一般是使用absolute进行绝对定位，再使用relative作为父级进行相对定位
3、相对于浏览器位置fixed定位
使用之后，无论怎么滑动浏览器，该位置都不会改变
4、将一个视图在浏览器中居中显示
固定格式：

div{
position：fixed；
left：50%；
top：50%；
margin-left:-width/2;
margin-top:-height/2;
.....
}

将文字设置position：absolute或者float：left/right之后，CSS将自动将标签设置成display：inline-block

6、margin塌陷：子集相对于父集的margin-top，子集的margin-top要有用，必须大于父集的margin-top才行（就好像父集没顶一样）
解决方式：

1. 给父集加上一个顶border-top：1px solid red;
2. bfc：作用：可能会使一个盒子的渲染规则与原来不大一样

触发bfc的方法：

1. 给父级加：position：absolute
2. 给父级加：display：inline-block
3. 给父级加：float：left/right
4. 给父级加一个：overflow：hidden：溢出父级盒子部分隐藏

浮动模型

float：left/right
1、浮动元素产生了浮动流
产生了浮动流的元素，只有块级元素看不到他们，产生了bfc的元素和文本类的属性（inline）的元素以及文本都能看到浮动元素
   去除浮动流的方式：

1. 在浮动流后面加上一个p标，设置CSS属性：clear:both
2. 可以将父级设置成浮动元素
3. 可以使用伪元素清除浮动：

父级元素::after{
content:””;
clear:both;//只可以使用在块级元素中
display：block;
}

伪元素(行级元素)：存在于任意个元素里面（存在于CSS里面的html结构）
span::before{content:””}启动span这个标签逻辑之前
span::after{content:””}启动span这个标签逻辑之后

溢出容器，要打点显示：

1. 单行文本(三件套)：先然文本失去换行功能（white-space:nowrap）,然后让溢出部分影藏显示（overflow:hidden）,然后溢出部分用打点来显示（text-overflow:ellipsis）
2. 多行文本：自己打点（一般直接将溢出部分隐藏就可以了（注意：要将行高算好））

设置背景图片：background-image:url(地址)
设置背景图片的大小：background-size:100px 100px
设置如果一张图片如果铺不满整个容器是否要重复使用该张图片：
background-repeat:no-repeat;
如果一张图片未铺满整个容器：background-position:100px 100px(该值还可以left bottom或者50% 50%)

图片代替文字的好方式（网速不好的时候只加载html代码而不加载CSS代码，解决图片加载不出来但是继续可实现图片超链接效果的方法）：

1. 使用三件套：先然文本失去换行功能（white-space:nowrap）,然后让溢出部分影藏显示（overflow:hidden）,然后溢出部分用打点来显示（text-overflow:ellipsis）
2. 将容器height设置为0，设置padding-top：90px；overflow：hidden

标签嵌套规则：

1. 行级元素只能嵌套行级元素，块级元素可以嵌套任何元素（span只能嵌套行级元素，div可以嵌套任何元素
   故注意：<p><div></div></p>是错误的
2. a标签里面不允许套用a标签

将一个容器在另一个容器中自适应居中：margin：0 auto；