CSS
标签的分类
1.块级元素
典型代表: div h1-h6 p ul li 特点: 独占一行 可以设置宽高
2.行内元素
典型代表:span a strong 特点: 在一行显示 不能设置宽高
3.行内块元素
典型代表: input img
标签之间的转换
1.块元素转行内
display:inline
css的四种引入方式
1.行内式
2.嵌入式
3. 链接式
将一个.css文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.导入式
css选择器
1.基本选择器
二.组合选择器
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 :div,p { color:#f00; } E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 :li a { font-weight:bold;} E > F 子元素选择器,匹配所有E元素的子元素F :div > p { color:#f00; } E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; } E ~ F 普通兄弟选择器(以破折号分隔) :.div1 ~ p{font-size: 30px; }
注意嵌套规则:
-
块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
-
有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
-
li内可以包含div
-
块级元素与块级元素并列、内联元素与内联元素并列。
三.属性选择器
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略)。 E[att=val] 匹配所有att属性等于“val”的E元素 E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 E[attr^=val] 匹配属性值以指定值开头的每个元素 E[attr$=val] 匹配属性值以指定值结尾的每个元素 E[attr*=val] 匹配属性值中包含指定值的每个元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [alex]{ color: red; #E[att] } div[alex="sb"]{ color: red; #E[att=val] } div[alex~="xx"]{ color: red; #E[att~=val] } div[alex^="sb"]{ color: red; #E[attr^=val] } div[alex*="sb"]{ color: red; E[attr*=val] } </style> </head> <body> <div alex="sb">123</div> <p alex="sb">123</p> <div alex="sb xx">123</div> </body> </html>
伪类(Pseudo-classes)
CSS伪类是用来给选择器添加一些特殊效果。
a:link(没有接触过的链接),用于定义了链接的常规状态。 a:hover(鼠标放在链接上的状态),用于产生视觉效果。 a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。 a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。 伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
<style type="text/css"> a:link{ color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; } </style> </head> <body> <a href="01-hello-world.html">hello-world</a> </body> </html>
<style type="text/css"> .box{ width: 100px;; } .top,.bottom{ width: 100px; height: 100px; background-color: chartreuse; } .top:hover{ background-color: red; 鼠标移动到top区域,颜色变红色 } .box:hover .top{ background-color: red; 鼠标移动到box区域,top区域变红色 } </style> </head> <body> <div class="box"> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html>
:before p:before 在每个<p>元素之前插入内容 :after p:after 在每个<p>元素之后插入内容 ----------举例------------------ p:before p:before{content:"hello";color:red} p:after p:after{ content:"hello";color:red}
选择器的优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1 内联样式表的权值最高 style=""------------1000;
2 统计选择符中的ID属性个数。 #id --------------100
3 统计选择符中的CLASS属性个数。 .class -------------10
4 统计选择符中的HTML标签名个数。 p ---------------1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。 2、有!important声明的规则高于一切。 3、如果!important声明冲突,则比较优先权。 4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。 5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
css属性操作
1.css text
a. 颜色属性
<div style="color:blueviolet">ppppp</div> <div style="color:#ffee33">ppppp</div> <div style="color:rgb(255,0,0)">ppppp</div> <div style="color:rgba(255,0,0,0.5)">ppppp</div>
b. 字体属性
font-size: 20px/50%/larger font-family:'Lucida Bright' font-weight: lighter/bold/border/ #粗细 <h1 style="font-style: oblique">老男孩</h1> #斜体
c. 背景属性
background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right top(20px 20px); ----简写---- background: #ffffff url('1.png') no-repeat right top;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .back{ border:1px solid red; width: 800px; height: 800px; background-image: url("meinv.png"); background-repeat: no-repeat; #不平铺满 background-repeat: repeat-x; #横向平铺满 } .back{ border:1px solid red; width: 800px; height:800px; background-image: url("meinv.png"); background-repeat: no-repeat; background-position: 0 0; } </style> </head> <body> <div class="back"> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display: inline-block; width: 18px; height: 20px; background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13"); background-position: 0 -100px; } </style> </head> <body> <span></span> <span></span> <span></span> <span></span> </body> </html>
d.文本属性
font-size: 10px; text-align: center; 横向排列 line-height: 200px; 文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:-4px 设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效 text-indent: 150px; 首行缩进 letter-spacing: 10px; 字符于字符之间的距离 word-spacing: 20px; 单词与单词之间的距离 text-transform: capitalize; 单词首字母大写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本</title> <style> div{ height:100px; background-color: aquamarine; text-align: center; #水平居中 line-height:100px; #文本设置为和div一样的高度,显示居中 } </style> </head> <body> <div>文本属性</div> </body> </html>
e.边框属性
border-style: solid; border-color: chartreuse; border-width: 20px; -----------简写--------------- border: 30px rebeccapurple solid;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本</title> <style> .foo{ width:200px; height:200px; border:1px solid red; } </style> </head> <body> <div class="foo"></div> </body> </html>
f.列表属性
list-style-type 设置列表项标志的类型。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 -------------------------------- #使用图像来替换列表项的标记: ul { list-style-image: url(''); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本</title> <style> ul,ol{ list-style: none; #取消列表前面的小图标 } </style> </head> <body> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <ol> <li>123</li> <li>456</li> <li>789</li> </ol> </body> </html>
e.dispaly属性
none block inline inline-block #none(隐藏某标签) p{display:none;} 注意与visibility:hidden的区别: visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。 display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。 #block(内联标签设置为块级标签) span {display:block;} 注意:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 #inline(块级标签设置为内联标签) li {display:inline;} #inline-block display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决 #outer{ border: 3px dashed; word-spacing: -5px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span,a{ width:100px; height:100px; } span{ background-color: yellow; display: inline-block; } a{ background-color: firebrick; display: inline-block; } div{ word-spacing: -5px; #取消边距间隔 } </style> </head> <body> <div> <span>span</span> <a href="#">a</a> </div> </body> </html>
外边距(margine)和内边距(padding)
margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。 padding: 用于控制内容与边框之间的距离; Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容,显示文本和图像。
margine(外边距)
单边外边距属性: margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; 简写属性:------------------ margin:10px 20px 20px 10px; 上边距为10px 右边距为20px 下边距为20px 左边距为10px margin:10px 20px 10px; 上边距为10px 左右边距为20px 下边距为10px margin:10px 20px; 上下边距为10px 左右边距为20px margin:25px; 所有的4个边距都是25px
float属性
- 常见的块级元素有 div、form、table、p、pre、h1~h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container:after{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size:0; } .box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 200px; height: 200px; background-color: blue; float: left; } </style> </head> <body> <div class="container"> <div class="box1">box1</div> <div class="box2">box2</div> </div> <div>footer</div> </body> </html>
position(定位)
a. static
static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。
b. position: relative/absolute
position: relative
1. 参照物是元素之前文档流中的位置
2. 元素不脱离文档流(之前的空间位置依然存在)
position: absolute
定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素
那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框
而不论原来它在正常流中生成何种类型的框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } .div1{ width: 300px; height: 200px; background-color: red; } /*.div2{*/ /*width: 300px;*/ /*height: 300px;*/ /*background-color: rebeccapurple; */ /*position: relative;*/ /*top:100px;*/ /*left:100px;*/ /*}*/ .div2{ width: 300px; height: 300px; background-color: rebeccapurple; position: absolute; top:100px; left:100px; } .div3{ width: 300px; height: 200px; background-color: green; } </style> </head> <body> <div class="outer"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } .item1{ width: 200px; height: 200px; background-color: red; } .item2{ width: 200px; height: 200px; background-color: yellow; position: absolute; top:200px; left:200px; } .item3{ width: 200px; height: 200px; background-color: green; } .outer{ border: 1px solid red ; position: relative; } </style> </head> <body> <div class="item1"></div> <div class="outer"> <div class="item2"></div> <div class="item3"></div> </div> </body> </html>
c. position:fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ width: 100%; height: 1200px; background-color: darkgrey; } .return_top{ width: 80px; height: 80px; background-color: burlywood; color: white; text-align: center; line-height: 80px; position: fixed; bottom: 20px; right: 20px; } </style> </head> <body> <div class="content"></div> <div class="return_top">返回顶部</div> </body> </html>