1.css引入方式:
①行间样式
<div style=""></div>
②页面级css,在head中定义style标签
③外部css
<link rel="stylesheet" type="text/css" href="xxx">
注意:type和rel属性指的是这是一个css文件,可以不写type
2.装饰div的css方式和顺序
!important>行间样式>id>class/属性>标签选择器>通配符选择器
他们是按照权重来排序的,权重是156进制
选择器 | 权重 |
!important | Infinity(正无穷) |
行间样式 | 1000 |
id | 100 |
class/属性/伪类 | 10 |
标签/伪元素 | 1 |
通配符 | 0 |
属性选择器:通过已存在的属性名和或者属性值匹配元素
3.id和class的区别:一个标签只能有一个id,一个id对应一个标签;一个标签可以有多个class,一个class可以对应多个元素。
4.选择器:
①父子选择器/派生选择器
例:
div em{}
div下面任意em标签
②直接子元素选择器
例:
div>em
div下面em标签
③ 并列选择器
例:若想让class名为demo盒子名为demo的背景颜色设置成红色?
<div>1</div>
<p class='demo'>2</p>
<div class='demo>3</div>
标签写前,类名写后
div.demo {
background-color:red;
}
还可以写成
div[class='demo'] {
background-color:red;
}
④分组选择器
例:想让em标签和p标签的宽高都设置成200px
em,p {
width:200px;
height:200px;
}
扩展:若两个选择器指向同一个元素,则比较权重之和,若权重大的优先执行,若权重相等,则执行最后一个,会覆盖前面的样式。
5.foint-size:指文字的大小,改变的是文字的高度
font-style:字体样式,例如italic斜体
font-weight:字体粗细
font-family:字体包
color:文字颜色,有三种方式
①纯英文:red/green....
②颜色代码:R B G (red/green/blue)
00-ff 00-ff 00-ff (16进制)
③颜色函数 rgb(a,b,c) 0-255 10进制数
6.border:混合属性 (边框粗细)(边框样式)(边框颜色)
由border-width,border-style,border-color组成
7.画出三角形(边框三边透明)
<div></div>
div {
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: red;
}
展示效果:
8.css只有段注释
9.首行缩进:text-indent:2em
1em = 1*font-size
10.像素(px):屏幕是由一个个小像素格组成,每个格一个颜色,分辨率是一英寸容纳像素的大小,是一种相对单位
11.光标元素:cursor:pointer/e-rsize/help...
12,伪类:选择器的一种,css内置类,css内部赋予他一些特性和功能,例如:a:link
13.
①行级元素,内联元素(inline):内容决定元素所占宽高,不可以通过css改变宽高。
例如:<span><strong><em><a><del>
②块级元素(block):独占一行,可以改变宽高
例如:<div><p><form><address><ul><li><ol>
③行级块元素(inline-block):可以改变宽高,内容决定大小
例如:<img>
14.盒模型
分为两种:
①标准盒模型
总宽度:border(左右)+width+padding(左右)
总高度:border(上下)+height+padding(上下)
②IE盒模型(怪异盒模型)
总宽度:width
总高度:height
15.
relative:相对定位,保留原来位置定位
absolute:绝对定位,相对于有定位的父元素进行定位,如果没有,相对文档定位
注意:absolute和relative一般配套使用
16.对于两栏布局,我们可以一个进行定位,另一个自适应让出被压住的部分
17.经典问题
①
<img></img>
<img></img>
<img></img>
img展示的过程中,图片之间会出现间隙
原因:任何文本类元素都具有文本的特性,img是行级块元素,所以可以删除img之间的空格和空行来解决图片之间的缝隙问题。
②
<div>
<div></div>
<div>
在改变子元素的margin-top的时候,会发现父元素也会跟着一起移动,造成margin塌陷。
原因:父子嵌套在垂直方向的margin是结合在一起的,会使用最大的值。
解决方法:
Ⅰ.给父级元素设置边框(不推荐,因为在需求中对像素非常严格)
Ⅱ.触发bfc(block format content 块格式上下文),每个元素相当于盒子,每个盒子有自己的语法规则,bfc让该盒子所属的语法规则发生改变。
(1)position:absolute
(2)display:inline-block
(3)float:left/right
(4) overflow:hidden
③
span标签及其示意图
<html>
<head>
<style>
span{
margin: 0 100px;
background-color:#f40;
}
</style>
</head>
<body>
<span>2</span>
<span>3</span>
</body>
</html>
div标签及其示意图
<html>
<head>
<style>
div{
margin: 100px 0;
background-color:#f40;
}
</style>
</head>
<body>
<div>2</div>
<div>3</div>
</body>
</html>
首先有两个span标签,我们让他们的margin-left和margin-right都设置成100px,可以看到两个元素之间相差200px,当我们把span标签换成div的时候,可以发现div之间的间隔相差100px。
可以看出span不共用区域,而div公用区域,对于这种问题,不做解决,如果div想要上面的效果,可以直接把上面的margin值设成200px。
注意:html结构不能随意更改,结构改动对整体影响很大。
扩展知识:在实际开发过程中,通常先开发css,在开发html,因为在结构中会有很多相似的点,可以先列举出来,然后在赋给html元素。
20.浮动元素float(left/right)
会使元素向左或者向右移动,其周围元u尿素也会重新排列。浮动元素产生了浮动流,所有产生了浮动流的元素,块级元素看不到他们。
*产生了bfc的元素和文本类属性的元素(如inline)可以看到浮动元素。
21.如果有个div,里面包括这几个div。里层的元素都是浮动元素,div包裹无法里层div,该如何处理?
<html>
<head>
<style>
.wrapper {
border: 1px solid black;
}
.content {
width: 200px;
height: 30px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
解决方法:①div是块级元素,不能识别浮动元素,可以让父级元素也变成浮动元素
②使用伪元素处理,清除浮动
<html>
<head>
<style>
.wrapper {
border: 1px solid black;
}
.content {
width: 200px;
height: 30px;
background-color: red;
float: left;
}
.wrapper::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
22.伪元素
①伪元素天生就存在,它存在于css,不存在于html。
②伪元素天生就是行级元素。
注意:凡是设置了position:absolute,float:left/right之后,元素自动变成行级块元素
23.文字溢出处理
①单行文本
overflow:hidden;
white-space:nowrap;(换行不生效)
text-overflow:ellipsis;(超出部分截断,本处作用是溢出部分添加截断符...)
24.背景图片的处理
因为存在背景颜色,所以同理,存在背景图片
background-image:url(//地址)
background-size:(w,h) *宽高 /per(w,h) *百分比 /cover / contain
background-repeat:repeat(默认)/norepeat...
background-position:一个背景图片初始位置
图片的意义:①展示文字展示不了的内容
②替代文字
25.所以再有css条件下,可以使用background-url显示图片,当图片加载不出的时候,我们需要用文字替代。
<html>
<head>
<style>
a {
background-image: url("code.png");
width: 200px;
/* 第一种做法 */
/* display: inline-block;
white-space:nowrap;
overflow: hidden;
height: 200px;
text-indent: 200px; */
/* 第二种做法 */
display: block;
padding-top: 200px;
height: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<a href="#">这是图片</a>
</body>
</html>
注意:为什么不直接用img的alt替代文本,是因为还需要去加载图片的操作,为了加快代码运行效率,推荐使用上图方法。
26.vertical-height:垂直偏移量
用在指定行内元素(inline)和表单元素(tabel-cell)元素的垂直对齐方式。
27.
① 行级元素内部只能放行级元素;
块级元素可以装任何元素;
但是p标签里面不能套div.
② inline和inline-block被称为文本类元素,是因为凡是带有inline的元素都具有文本特性。
③文字特征:下对齐
④行级块元素或者文本类元素包含文字,那么外面的元素和里面的元素底对齐。