接着上文的继续
一、css属性:
1,宽和高
width属性可以为元素设置宽度
height属性可以微元素设置高度
注意:块级的标签才可以设置宽度,内联标签的宽度由内容来决定,
常见块级标签:<div>,<p>,<h1到h6>,<ol>,<ul>,<dl>,<table>,<adress>,<blockquoto>,<form>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>宽和高</title> <style> div{ width: 200px; height: 200px; background-color: #FF6800; } </style> </head> <body> <div>测试宽度和高度</div> </body> </html>
效果显示:
2,字体属性:
font-family设置字体类型,可以设置多个字体类型,默认匹配第一个,第一个浏览器不支持,匹配第二个
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>宽和高</title> <style> div{ font-family: "宋体", "微软雅黑"; } </style> </head> <body> <div>测试宽度和高度</div> </body> </html>
查看效果:
字体大小:font-size
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>宽和高</title> <style> div{ font-family: "宋体", "微软雅黑"; font-size: 36px; } </style> </head> <body> <div>测试宽度和高度</div> </body> </html>
字体粗细:
字体颜色:一般使用color
这个是直接设置颜色的
color:red
设置颜色加上颜色透明度,前三位是为颜色值,后面一位为透明度,范围从0.0到1.0之间
color:rgba(199,199,0,0.6)
文字属性:
文字对齐
text-align
文字装饰(对文字进行一些特殊效果)
text-decoration属性用来给问题添加特殊效果
设置div内容对齐方式为右,设置属性,鼠标悬停在字体上字体下方显示下划线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字属性</title> <style> div{ text-align: right; } div:hover { text-decoration: underline; } </style> </head> <body> <div>内容</div> </body> </html>
----------------------------------------------------
取消div标签设置的下划线
div{
text-decoration:none
}
首行缩进:
要求首行内容缩进32像素
注意:这里的首行是指每个p标签中内容的首行,如果存在多个p标签的话那这里就是多行缩进 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首行缩进</title> <style> p{ text-indent: 32px; } </style> </head> <body> <p>测试字体大小1</p> <p>测试字体大小2</p> <p>测试字体大小1</p> <div>测试字体大小444444</div> </body> </html>
效果:
设置背景:background
background-color: green; #单独设置颜色没有用,没有边框、没有内容看不到效果
要想设置整个背景颜色,就设置body属性默认整个页面都属于body body{ background-color: green; }
效果:
添加背景图片:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-image: url("海边.png"); } </style> </head> <body> </body> </html>
效果:
如果当前图片尺寸小于网页尺寸会自动进行平铺
针对背景设置:
repeat(默认):背景图片平铺整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
设置边框:
border-width #设置大小
border-style #设置边框类型
border-color #设置边框颜色
简写方式:
border:边框大小 边框类型 边框颜色;
边框设置可以统一样式也可以单独对某一个边框设置,如下:
设置上边框:
border-top-style:dotted; # 点状虚线边框
border-top-color:red; #红色
其它边框也可以这样设置:做边框是left,有边框是right,下边框是bottom
重点:border-radius
作用:可以实现矩形图形变成圆角边框
display属性:
display:"none"与visibility:hidden
visibility:hidden:可以隐藏元素,但是隐藏的元素让然占用与为隐藏之前一样的空间
CSS盒子模型:
margin:用于控制元素与元素之间的距离,最基本的用途就是控制元素与周边空间的间隔
padding:控制内容与边框之间的距离
border(边框):围绕在内边距和内容外的边框
content(内容):盒子的内容,显示文本和图形
CSS盒子模型
mapping外边框
padding内填充
float浮点:元素浮动
任何元素都可以浮动
浮动会生成一个超级块,不论本省是什么元素
浮动的特点:
1、浮动的框可以向左或者向右移动,知道它的外边缘碰到包含框或者领一个浮动框的边框位置。
2,、由于浮动框不在文档的普通流中,多以文档的普通流中的块框表现的就像浮动框不存在一样
三种状态:
left:向左浮动
right:向右浮动
none:默认值,不浮动
clear
clear属性规定元素的哪一侧不允许其它浮动元素。
注意:clear属性只会对自身起作用,不会影响其他元素。
清楚浮动:
清楚浮动的副作用(父标签塌陷问题,移动子标签的时候父标签不会随着字标签的移动而移动)
三种方式:
1、固定高度
2、伪元素清除
3、overflow:hidden
伪元素清除法:
overflow溢出属性
overflow(水平和垂直都设置)
overflow-x(设置水平方向)
overflow-y(设置垂直方向)
定位(position)
static
不定位,不能当做绝对定位的参照物,并且设置标签对象的位置是不起作用的
relative(相对定位)
相对定位是相对于该元素在文档的原始位置,以自己原始位置为参照物,设定了元素相关属性及便宜,元素还占有原来的位置,
absolute(绝对定位)
设置为决定路径元素矿从文档完全删除,相对于最近已经定位祖先元素定位,如果没有已定位的组选元素,那么它的位置相对于最初的包含块。元素镇原县在正常文档流中所占用的空间就会关闭,该元素原来就不存在,元素定位后生成一个新的超级矿
重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。
fixed(固定)
对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
z-index(层叠)
- z-index 值表示谁压着谁,数值大的压盖住数值小的,
- 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
- z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
- 从父现象:父亲怂了,儿子再牛逼也没用
设置透明效果(opacity)
用来定义透明效果。取值和之rgba差不多范围是0-1,0完全透明,1不透明