前端之CSS续集
CSS：语法形式上由选择器+以及一条或多条声明组成；选择器查找到指定的html标签后，使用css属性设置html标签的样式；
一、css 语法形式：
二、使用步骤
1、引入css规则
2、使用css选择器 查找html标签；
3、利用css属性 设置html标签的样式；
三、css的4种引入方式
1、行内引入：行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用
只能对单一标签进行CSS渲染，无法批量渲染，无法将html代码和css代码做解耦
<!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>
<!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文件
<!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文件代码
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
<!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{}
<!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渲染 *{}
<!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
<!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{}
<!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{} 毗邻是相近相邻的两个
<!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标签
<!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(元素)。
[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;}
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]
<!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>
<!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
<!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>
<!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 两端对齐。
<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>
文本其他属性
/*
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");
<!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;重要 去除无序列表的开头，上下排列列表元素。
<!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>
<!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>
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;
<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，
则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
<!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的元素不脱离正常文档流（之前的空间位置依然存在）
<!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 的元素脱离正常文档流（之前的空间位置不存在）
<!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，脱离文件流
<!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 阅读(246) 评论(0) 编辑 收藏 举报
