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{ 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>