css内容整理1

1、css引入的四种方式1、行内2、内嵌3、链接 <link href="1.css" rel="stylesheet">4、导入@import url(1.css)

2、<div><p>继承</p></div>设置div属性，字体相关的属性才会被继承 color,font-size,font-family,font-weight,粗细font-style:italic,斜体text-indext:10px缩进、word-spacing：normal字间距

3、Text-decoration:underline下划线overline顶划线 line-through删除线

Text-transform:capitalize单词首字大写uppercase全部大写lowercase全部小写

text-align：justify两端对齐 text-decoration:none;下划线去掉 list-style-type:none;

background-size:cover;背景图片填充整个div

background-attachment:fixed;背景图片固定

background-position:50% 50%;背景图定位

background:blue url(xx.png) no-repeat fixed 30px 40px;

Cursor:pointer;手型 cursor:url(xx.png);

4.鼠标点击love hate

link默认   visited 点击后  hover 浮动上  active 点击时

5.box-sizing:border-box;盒模型 保持div大小不变

6.Font Awesome图标

1、引入<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">或下载后引入

2、<i class="fa fa-camera-retro"></i>即可显示 在css直接修改.fa-camera-retro{color:red}

7、定位

absolute绝对定位：脱离文档流，不会独自占满一行；不存在浮动；如果父类有定位，相对于父；如果父类没有定位，相对于body；可用top left right bottom在定位

relative相对定位：没有脱离文档流，独自站一行；浮动可以用；不管父类有没有定位，都是相对于父类定位。

fixed固定的定位：脱离文档流；不会出现滚动条；

static默认静态定位：存在文档流中

8、水平垂直居中

div{
   width:100px;
height:100px;
border:1px solid  red;
position:absolute;
left:50%;
margin-left:-50px;
top:50%;
margin-top:-50px;
}

9、overflow:hidden/auto/scroll　

10、特殊选择器

10.1 *匹配任何的标记 *{margin:0;padding:0}

10.2 >用于指定父子节点关系

.d1 p{color:red;}

<div class="d1">
<p>我是老大</p>
<div>
<p>我是老大</p>
</div>
<p>我是老大</p>
</div>

.d1>p{color:red;}
<div class="d1">
    <p>我是老大</p>
    <div>
       <p>我是老大</p>
    </div>
    <p>我是老大</p>
</div>

10.3　E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

.d1+p{color:red;}
<div>
    <p class="d1">我是老大</p>
    <p>我是老大</p>
    <div>
       <p>我是老大</p>
    </div>
    <p>我是老大</p>
</div>

10.4  E ~ F 匹配所有E元素之后的同级元素F

.d1~p{color:red;}
<div>
    <p class="d1">我是老大</p>
    <p>我是老大</p>
    <div>
       <p>我是老大</p>
    </div>
    <p>我是老大</p>
</div>

10.5

E[att]、[att=val] 、[att^=val]、[att$=val]、[att*=val]

所有att属性、属性值等于val的标签、属性值以val开头、属性值以val结尾、属性值包含val

a[href]{color:red;}  <a href="www.baidu.com">我是老大</a>

a[href='www.baidu.com']{color:green;}<a href="www.baidu.com">我是老大</a>

a[href^='www']{color:pink;}<a href="www.baidu.com">我是老大</a>

a[href$='com']{color:pink;}<a href="www.baidu.com">我是老大</a>

a[href*='bai']{color:pink;}<a href="www.baidu.com">我是老大</a>