CSS_引入方式
一 CSS的引入方式
<p style="background-color: red">Hello Word</p>
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中. 格式如下:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
}
</style>
</head>
3.链接式
通过HTML规范引入,次数不限
讲CSS代码单独写入一个文件
<link href="text.css" rel="stylesheet" type="text/css"/>
4.导入式 次数有限
将文件导入
style type="text/css"> @import"text.css"; 此处要注意.css文件的路径 </style>
导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。
二 CSS的选择器
选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素
1 基础选择器
* : 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } //all标签 E : 标签选择器,匹配所有使用E标签的元素 p { color:green; } .info和E.info: class选择器,匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; } // .class {color:red} #info和E#info id选择器,匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; } // <p id="litleP">Hello p</p> #litleP {color:red}
id是唯一,class可相同
// div.class div标签中 class类{} *注意空格
2 组合选择器
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; }
注意嵌套规则:
- 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
- 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[suoning]{
color: blueviolet;
}
.he>div{
color: bisque;
} </style>
</head>
<body> <div class="he">111
<p class="fr">222
<div>333</div>
</p>
<div>444</div>
</div> *************************** <div suoning="sb">ddd
<p>pppp</p>
</div>
<p suoning="sb2">ddd2
<p>pppp2</p>
</p>
</body>
</html>
三 属性选择器
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;}
//待续
4 伪类(Pseudo-classes)
CSS伪类是用来给选择器添加一些特殊效果。
anchor伪类:专用于控制链接的显示效果
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>
补充:
1
|
.outer:hover .right{color: red} |
before after伪类 :
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello";color:red}
5 css优先级和继承
CSS优先级:
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1 内联样式表的权值最高 style=""-------------------1000;
2 统计选择符中的ID属性个数。 #id -------------100
3 统计选择符中的CLASS属性个数。 .class -------------10
4 统计选择符中的HTML标签名个数。 p --------------1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
<style>
#p{
color: rebeccapurple;
}
.p{
color: #2459a2;
}
p{
color: yellow;
}
</style>
<p id="p" class="p" style="color: deeppink">hello yuan</p>
1
|
body{color:red;} <p>helloyuan</p> |
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
1
|
p{color:green} |
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。
此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
div{
border:1px solid #222
} <div>hello <p>yuan</p> </div>
附加说明:
1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式,而外部定义指经由<link>或<style>卷标定义的规则。 2、有!important声明的规则高于一切。 3、如果!important声明冲突,则比较优先权。 4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。 5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
三 CSS的常用属性
1 颜色属性
1
2
3
4
5
6
7
|
<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> |
2 字体属性
1
2
3
4
5
6
7
|
font - size: 20px / 50 % / larger font - family: 'Lucida Bright' font - weight: lighter / bold / border / <h1 style = "font-style: oblique" >老男孩< / h1> |
3 背景属性
background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom) 简写:<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')"> <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
注意:如果将背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片;另外,如果此时要设置一个width=100px,你也看不出效果,除非你设置出html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
background-color: antiquewhite; }
body{
width: 100px;
height: 600px;
background-color: deeppink;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body> </body>
</html>
eg:
<!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> </body>
</html>
4 文本属性
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</title>
<style> .outer .item {
width: 300px;
height: 200px;
background-color: chartreuse;
display: inline-block;
} </style>
</head>
<body>
<div class="outer">
<div class="item" style="vertical-align: top">ll
</div>
<div class="item">
</div>
</div> <script> </script>
</body>
</html>
5 边框属性
1
2
3
4
5
6
7
|
border - style: solid; border - color: chartreuse; border - width: 20px ; 简写:border: 30px rebeccapurple solid; |
6 列表属性
1
2
3
4
|
ul,ol{ list - style: decimal - leading - zero; list - style: none; <br> list - style: circle; list - style: upper - alpha; list - style: disc; } |
7 dispaly属性
1
2
3
|
none block inline |
display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:
1
2
3
4
|
#outer{ border: 3px dashed; word-spacing: -5px; } |
参考文献:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.jianshu.com/p/a3da5e27d22b
4 伪类(Pseudo-classes)
CSS伪类是用来给选择器添加一些特殊效果。
anchor伪类:专用于控制链接的显示效果
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代码; }
补充:
1
|
.outer:hover .right{color: red} |
before after伪类 :
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello";color:red}
5 css优先级和继承
CSS优先级:
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1 内联样式表的权值最高 style=""-------------------1000;
2 统计选择符中的ID属性个数。 #id -------------100
3 统计选择符中的CLASS属性个数。 .class -------------10
4 统计选择符中的HTML标签名个数。 p --------------1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
1
|
body{color:red;} <p>helloyuan</p> |
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
1
|
p{color:green} |
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。
此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
附加说明:
三 CSS的常用属性
1 颜色属性
1
2
3
4
5
6
7
|
<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> |
2 字体属性
1
2
3
4
5
6
7
|
font - size: 20px / 50 % / larger font - family: 'Lucida Bright' font - weight: lighter / bold / border / <h1 style = "font-style: oblique" >老男孩< / h1> |
3 背景属性
background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom) 简写:<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')"> <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
注意:如果将背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片;另外,如果此时要设置一个width=100px,你也看不出效果,除非你设置出html。
eg:
4 文本属性
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;
思考:
5 边框属性
1
2
3
4
5
6
7
|
border - style: solid; border - color: chartreuse; border - width: 20px ; 简写:border: 30px rebeccapurple solid; |
6 列表属性
1
2
3
4
|
ul,ol{ list - style: decimal - leading - zero; list - style: none; <br> list - style: circle; list - style: upper - alpha; list - style: disc; } |
7 dispaly属性
1
2
3
|
none block inline |
display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:
1
2
3
4
|
#outer{ border: 3px dashed; word-spacing: -5px; } |
最新文章
- [NOIP2015] 提高组 洛谷P2678 跳石头
- Liferay IDE 3.1 M1发布啦
- table标签
- [kuangbin带你飞]专题十 匹配问题 二分图最大权匹配
- 腾讯视频QLV格式转换mp4的方法
- servlet上传文件报错(三)
- Virtual Box下虚拟机复制后ip地址重复
- how tomcat works 总结 三
- CentOS Linux搭建SVN服务器
- 如何设置body高度为浏览器高度
- 【安富莱原创开源应用第2期】基于RL-USB和RL-FlashFS的完整NAND解决方案,稳定好用,可放心用于产品批量
- Google瓦片地图URL
- influence maximization
- 图像特征的提取(gaussian,gabor,frangi,hessian,Morphology...)及将图片保存为txt文件
- PHP 生成验证码(+图片没有显示的解决办法)
- Docker 传奇之 dotCloud
- 183使用 MediaPlayer Framework 框架播放视频
- linux分区满了,如何进行扩容
- 用Max导出Unity3D使用的FBX文件流程注解(转载)
- java防范跨站脚本攻击(XSS)
热门文章
- Oracle中复制表的方法(create as select、insert into select、select into)
- 【FreeMarker】FreeMarker快速入门(一)
- Go并发编程实战 第2版 PDF (中文版带书签)
- JAVA8中接口的一些新用法(springboot环境)
- 【大产品思路】Amazon
- 09点睛Spring MVC4.1-异步请求处理(包含兼容浏览器的服务器端推送)
- ipad 如何 Airplay 到 Windows 上?
- eNSP上VLAN的基础的配置及access接口
- ucore 源码剖析
- 《ucore lab6》实验报告