前端之CSS续集
CSS:语法形式上由选择器+以及一条或多条声明组成;选择器查找到指定的html标签后,使用css属性设置html标签的样式;
一、css 语法形式:
二、使用步骤
1、引入css规则
2、使用css选择器 查找html标签;
3、利用css属性 设置html标签的样式;
三、css的4种引入方式
1、行内引入:行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用
只能对单一标签进行CSS渲染,无法批量渲染,无法将html代码和css代码做解耦
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bing</title> </head> <body> <p style="color:red;background:greenyellow "> bing</p> </body> </html>
2、嵌入式引入:在html的<head> <style> 选择器{ 操作1;操作2; } </style> </head>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bing</title> <style> p{ color:green; background-color: red; } </style> </head> <body> <h1> 标题 </h1> <p> bing </p> </body> </html>
3、链接式:创建一个单独的 .css文件,里面专门定义css代码,那个html文件需要被渲染<link rel="stylesheet" href="css代码文件名">(推荐)
被css渲染的html文件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bing</title> <link rel="stylesheet" href="css链接式.css"> </head> <body> <h1> 标题 </h1> <p> bing </p> <div> 你好</div> </body> </html>
x.CSS文件代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
p{
color: aqua;
background-color: black;
}
div {
font-size: 40px;
color: aqua;
}
4、导入式:使用@import
"mystyle.css";导入css文件。
导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式,这样造成的结果就是:用户体验不好。这是导入式固有的一个缺陷。
注意:
导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。
四、css的选择器:
1、基本选择器:(直接通过html标签名字/id/类名查找。)
1、标签选择器:通过标签的名字来查找标签 p{ 操作1;操作2}
2、id选择器:给标签定义ID,通过查找ID操作 标签 #id
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bing</title> <style> #p3{ color: red } </style> </head> <body> <p id="p3"> p1 </p> <p> p2</p> <p> p3</p> </body> </html>
3、class选择器:可以批量选择HTML标签,进行css渲染。 这里的例子是.c{} 格式就是 .class{}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bing</title> <style> /*#p3{ color: red }*/ .c{ color: red; } </style> </head> <body> <!--<p id="p3"> p1 </p>--> <p class="c" >p1</p> <p class="c"> p2</p> <p> p3</p> </body> </html>
4、统配选择器: 对所有的html标签进行,css渲染 *{}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bing</title> <style> /*#p3{ color: red }*/ *{ color: red; } </style> </head> <body> <!--<p id="p3"> p1 </p>--> <p class="c" >p1</p> <p class="c"> p2</p> <p> p3</p> </body> </html>
块级元素可以包含内联元素或某些块级元素,
内联元素不能包含块级元素,它只能包含其它内联元素。
需要注意的是,p标签不能包含块级标签。
2、组合选择器(通过描述HTML标签的嵌套关系,间接查找html标签方式):
由于标签之间经常层级嵌套,使用基本选择器只能查找 单个标签,无法精确查找到,所以出现了组合选择器间接查找到标签;
通过特殊符号(空格,“,”,+,‘>’) 组合起来,选择html标签。
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; }
#后代是和孙子辈(隔代)
#子代是儿子辈
后代选择器:.out p{color: red;} .out空格p
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > .out p{ color: red; } </style> </head> <body> <div class="out"> <div class="div1" > div1 <p>p</p> </div> <p>pp</p> </div> <p>ppp</p> </body> </html>
子代选择器:.out>p{}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > .out> p{ color: red; } </style> </head> <body> <div class="out"> <div class="div1" > div1 <p>p</p> </div> <p>pp</p> </div> <p>ppp</p> </body> </html>
毗邻选择器:.out+p{} 毗邻是相近相邻的两个
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > .out+p{ color: red; } </style> </head> <body> <div class="out"> <div class="div1" > div1 <p>p</p> </div> <p>pp</p> </div> <p>ppp</p> </body> </html>
多元素选择器:out,p{} 查找相互之间没有关系的html标签
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > .out,p{ color: red; } </style> </head> <body> <div class="out"> <div class="div1" > div1 <p>p</p> </div> <p>pp</p> </div> <p>ppp</p> </body> </html>
3、属性选择器(通过在html标签中设置属名,来查找html标签的方式。):
通过在html标签里添加属性,再通过属性标签,查找html标签。
1、[属性名字] (在所有标签里查找)
2、 [属性名=值](在所有标签里查找值为?的属性)
3、div[属性](限制在div标签里查找属性)
html中的每一个标签,就是 Element(元素)。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
[att] 匹配所有具有att属性的标签,不考虑它的值只要有这个属性就能匹配。
比如:[class] { color:#f00; }
E[att=val] 匹配所有E标签里有att属性等于“val”的标签,完整匹配
比如:div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有E标签里有att属性具有多个空格分隔的值、
其中一个值等于“val”的标签
比如:div[class~=”name”] { color:#f00; }
E[attr^=val] 匹配所有E标签里有属性值以指定值开头的标签
比如:div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配所有E标签里有属性值以指定值末尾的标签
比如:div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配所有E标签里有属性值中包含指定值的标签
比如:div[class*="te"]{background:#ffff00;}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。) p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
E[att] 匹配所以E元素中,带有att属性的元素(按属性名匹配方式)
E[att=val] 匹配所有E元素中,属性值为val的元素(按属性的值匹配方式)
E[att~=val] 按正则表达式搜索到的属性,匹配元素;
E[attr^=val]
E[attr$=val]
E[attr*=val]
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div[po="p2"]{ div[属性](限制在div标签里查找属性) color: red; } .c1[po*="p"]{ [属性名=值](在所有标签里查找值为?的属性) color: red; } [po="p1 p"]{ color: green; } .c1{ color: red; } .btn{ font-size: 60px; } </style> </head> <body> <div po="p1 p" class="c1 btn">p1</div> <div po="abcdp2bing p" class="c1">p2</div> <div class="c1">p3</div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> P[DD]{ color:red; /*color: rgb(0,0,255);*/ /*color: #1234;*/ } </style> </head> <body> <p DD> 我是根,你是谁??</p> <div DD class="p1"> <div> 我是DIV <p id="p2"> 我是div里的p哦!!!</p> </div> pppppp </div> </body>
选择器的优先级
css继承:
继承是CSS的一个主要特征 ,例如一个BODY标签定义了的颜色值,也会应用到段落的文本中。
但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
同一种选择器的优先级 按顺序
不同选择器按优先级 !importment优先级最高
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1 内联样式表的权值最高 style=""------------1000;
2 统计选择符中的ID属性个数。 #id --------------100
3 统计选择符中的CLASS属性个数。 .class -------------10
4 统计选择符中的HTML标签名个数。 p ---------------1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
css属性:对查找器 查找到的html标签,进行css格式渲染。
通过选择器查找到html标签后,就可以使用CSS的属性,设置html标签的样式了;
1、CSS的文本属性:
文本颜色CSS:
color属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> p{ http://www.114la.com/other/rgb.htm RGB颜色查询对照表 color: blue; /*color: RGB(0,255,255);*/ R:red G:green B:blue /*color: #FF0000;*/ /*color: RGBA(255,0,0,1);*/ opacity: 0.3; opacity透明度 } div{ width: 200px; height: 200px; background-color: gray; text-align:right; } </style> </head> <body> <p>hello</p> <div>DIV</div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [class="regal"]{ color:red; /*color: rgb(0,0,255);*/ /*color: #1234;*/ } </style> </head> <body> <p DD="dd"> 我是bing,你是谁??</p> <div DD="cc" class="p1"> <div> 我是DIV <p class="regal" DD="w" id="p2"> 我是div里的p哦!!!</p> </div> pppppp </div> </body> </html>
设置文本水平对齐方式:
text-align 属性规定元素中的文本的水平对齐方式。
- left 左对齐
- right 右对齐。
- center 把文本排列到中间。
- justify 两端对齐。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <meta charset="utf-8"> <title>css</title> <style> h2 {text-align:center;} .publish_time {text-align:left;} .content {text-align:justify;} </style> </head> <body> <h2>CSS text-align 水平居中</h2> <p class="publish_time">2017 年 5 月 17 号</p> <p class="content"> 有个落拓不得志的中年人每隔三两天就到教堂祈祷,而且他的祷告词几乎每次都相同。第一次他到教堂时, 跪在圣坛前,虔诚地低语:“上帝啊,请念在我多年来敬畏您的份上。让我中一次彩票吧!阿门。” 几天后,他又垂头丧气回到教堂,同样跪着祈祷:“上帝啊,为何不让我中彩票?我愿意更谦卑地来 服侍你,求您让我中一次彩票吧!阿门。”又过了几天,他再次出现在教堂,同样重复他的祈祷。如此周而 复始,不间断地祈求着。到了最后一次,他跪着:“我的上帝,为何您不垂听我的祈求?让我中一次彩票吧! 只要一次,让我解决所有困难,我愿终身奉献,专心侍奉您……”就在这时,圣坛上发出一阵宏伟庄严的声 音:“我一直垂听你的祷告。可是最起码?你也该先去买一张彩票吧!”</p> <p><b>注意:</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p> </body> </html>
文本其他属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*
font-size: 10px;
line-height: 200px; 文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:-4px 设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效
text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
font-family: 'Lucida Bright'
font-weight: lighter/bold/border/
font-style: oblique
text-indent: 150px; 首行缩进150px
letter-spacing: 10px; 字母间距
word-spacing: 20px; 单词间距
text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写
*/
2、CSS的背景属性
- background-color #设置背景颜色
- background-image #设置背景图片
- background-repeat #设置图片不平铺
- background-position #设置 位置
简写方式:background: no-repeat center 100px url("23.jpg");
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bing</title> <style> div { width: 800px; height: 800px; background: no-repeat center 100px url("23.jpg"); /*background-color: red;*/ /*!*background-repeat: repeat-x;*!*/ /*background-repeat: no-repeat;*/ /*background-position: center;;*/ } </style> </head> <body> <div> </div> </body> </html>
3、CSS的列表属性
设置列表标签的格式
list-style: circle;把无序列表的开头变成圆圈
list-style: square;把无序列表的开头变成方块
list-style: square;重要 去除无序列表的开头,上下排列列表元素。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bing</title> <style> ul{ /*list-style: circle;*/ /*list-style: square;*/ list-style: none; } </style>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*ul{*/ /*!*list-style: circle;*!*/ /*!*list-style: square;*!*/ /*list-style: none;*/ /*}*/ ol,ul{ list-style: none; } </style> </head> <body> <ol> <li>111</li> <li>222</li> <li>333</li> </ol> <ul> <li class="item">111</li> <li class="item">222</li> <li class="item">333</li> </ul> <dl> <dt>河北省</dt> <dd>廊坊</dd> <dd>石家庄</dd> <dd>邯郸</dd> <dd>保定</dd> <dt>湖南省</dt> <dt>广东省</dt> <dt>河南省</dt> </dl> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
111
222
333
111
222
333
河北省
廊坊
石家庄
邯郸
保定
湖南省
广东省
河南省
4、CSS的dispal属性:
html块级标签特性:可以设置宽度和高度,但无论如何设置都有独占一行的特性 ;
html内联标签的特性:无法设置宽度、高度,但是两个内联标签可以同在一行显示;
display: none;不显示该html标签;
block(
内联标签设置为块级标签):
span {display:block;}
inline
(块级
标签设置为内联标签):div{
play:block;}
inline-block(综合了块级和内联标签的特性,既可以设置宽度、高度,两个标签也可以在同一行显示。)
如果需要两个 inline-block在同一行显示;加上该参数:word-spacing: -10px;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div style="width: 100px;height:20px;display: inline-block; word-spacing: -10px;"> <div style="width: 50px;height: 20px;display: inline-block;background-color: royalblue " ></div> <div style="width: 50px;height: 20px;display: inline-block;background-color: red " ></div> </div>
5、CSS的float属性:
由于inline-bock标签设置 宽度和高度之后是固定的,无法根据屏幕的大小自适应(比如屏幕再缩小或者放大有些内容一直在最左侧或右侧显示);
float属性:让标签脱离引力,靠左边/右边飘起来;
1、float:right: 脱离标签引力,靠右飘;
2、float:left:脱离标签引力,靠左飘;
3、clear:both;标签设置folat属性之后,会脱离父类标签的属性,clear:both属性会再次绑定父类的CSS属性;
浮动规则:
1、浮动元素会判断上一个元素是否浮动,如果是浮动元素紧贴上一个元素;否则和上一个元素保持垂直距变离不;
2、如果是普通元素 会判断上一个元素是否浮动,若上一个元素是浮动元素,会顶上去;
浮动标签造成塌陷:
由于标签浮动之后,正常文件流会顶上去,导致浮动标签和正常文件流标签重叠造成塌陷现象;
所以需要clear属性,阻止正常流文件顶上去和浮动标签重叠,而是让它自动退出到下一行;
clear属性:设置clear: left后 相当于该标签左侧不允许出现浮动标签,也就是自己退到下一行;
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是:clear属性只会对自身起作用,而不会影响其他元素。如果一个元
素的右侧有一浮动对象,而这个元素设置了不允许右边有浮动对象,即clear:right,
则这个元素会自动下移一格,达到本元素右边没有浮动对象的目的。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <style> *{margin: 0 } </style> <meta charset="UTF-8"> <title>bing</title> </head> <body> <div style="width: 30px; height:40px;background-color: #2459a2;float: left " >1</div> <div style="width: 40px;height:40px;background-color: red;float: left">2</div> <div style="width: 150px;height:40px;background-color:black; clear: left ">3</div> </body> </html>
6、CSS的margin属性
margin: 让某一个标签,基于它的父级标签移动;
1、margin:10px 10px 10px 10px; (margin设置4个属性10px,右20px,下30px,左40px4个方向)
2、margin: 0px;(margin设置一个属性,代表 上,右,下,左4个方向都为同一个属性)
3、margin: 0px 5px;(margin设置两个属性,代表上下为0px ,左右为5px )
4、margin: 0px auto;(margin设置两个属性,上下为0px ,左右为auto 代表左右两侧位置自适应居中,
(注意使用 margin: 0px auto;必须指定固定的宽度;)
7、padding: 内边距(用于控制内容与边框之间的距离);
8、CSS的position(定位)属性
postion:relative
1.移动时的参照物是元素之前的的位置
2.postion:relative的元素不脱离正常文档流(之前的空间位置依然存在)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <style> *{margin: 0 } </style> <meta charset="UTF-8"> <title>bing</title> </head> <body> <div style="width: 30px; height:40px;background-color: #2459a2;position: relative;top: 100px;left: 100px " >1</div> <div style="width: 40px;height:40px;background-color: red;">2</div> <div style="width: 150px;height:40px;background-color:black; ">3</div> </body> </html>
postion:absolute
1.移动时的参照物是已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块即body元素。
既父元素:设置postion:relative(相对的,参照原来的位置)
定位的子元素:设置postion:absolute(绝对的,参照父级的)
2.postion:absolute 的元素脱离正常文档流(之前的空间位置不存在)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <style> *{margin: 0 } </style> <meta charset="UTF-8"> <title>bing</title> </head> <body> <div style="width: 30px; height:40px;background-color: #2459a2;position: absolute;top: 100px;left: 100px " >1</div> <div style="width: 40px;height:40px;background-color: red;">2</div> <div style="width: 150px;height:40px;background-color:black; ">3</div> </body> </html>
position:fixed(相对于屏幕做绝对定位)
1、移动时参照物是显示屏幕
2、position:fixed,脱离文件流
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <style> *{margin: 0 } </style> <meta charset="UTF-8"> <title>bing/title> </head> <body> <div style="width: 30px; height:40px;background-color: #2459a2;position:fixed;bottom: 10px;left:10px " >1</div> <div style="width: 40px;height:40px;background-color: red;">2</div> <div style="width: 150px;height:40px;background-color:black; ">3</div> </body> </html>
总结:脱离正常文档流的CSS属性:float , postion/absolute,postion:fixed
参考链接:http://www.cnblogs.com/yuanchenqi/articles/6856399.html
posted on 2017-05-22 00:55 bigdata_devops 阅读(245) 评论(0) 编辑 收藏 举报