css
ref: http://www.cnblogs.com/yuanchenqi/articles/5977825.html
css概述
css是Cascading Style Sheets的简称,中为称为层叠样式表,用来控制网页数据的表现,可以使网页的数据与数据分离,主要体现在样式
一、css的4种引入方式
1.1、行内式[不推荐使用]
行内式是在标记的style属性中设定的css样式(即直接写在标签中的),这种方式没有体现出css的优点,不推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1-1_行内式</title>
</head>
<body>
<p style="color: red; background: #e7e7e7;">我爱北京天安门</p>
<div style="color: #96c6d7; background: #c6d796; font-size: 28px; font-style: italic; ">天安门前太阳升</div>
</body>
</html>
1.2、嵌入式【直接使用此种方法即可】
嵌入式是将样式写在<head></head>标签对的<style></style>中,如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1-2_嵌入式</title>
<style>
p{
color: red;
background: #e7e7e7;
}
div{
color: #96c6d7;
background: #c6d796;
font-size: 28px;
font-style: italic;
}
</style>
</head>
<body>
<p>我爱北京天安门</p>
<div>天安门前太阳升</div>
</body>
</html>
1.3、链接式
使用链接的将单独的css文件链接到html文件中
# css file
p{
color: red;
background: #e7e7e7;
}
div{
color: #96c6d7;
background: #c6d796;
font-size: 28px;
font-style: italic;
}
# html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1-3_链接式</title>
<link type="text/css" rel="stylesheet" href="p_div.css"/>
</head>
<body>
<p>我爱北京天安门</p>
<div>天安门前太阳升</div>
</body>
</html>
1.4、导入式
将一个独立的css文件引入到html文件中,导入式使用css规则引入外部css文件,也要在head标签中引入
# css file
p{
color: red;
background: #e7e7e7;
}
div{
color: #96c6d7;
background: #c6d796;
font-size: 28px;
font-style: italic;
}
# html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1-4_导入式</title>
<style>
@import "p_div.css";
</style>
</head>
<body>
<p>我爱北京天安门</p>
<div>天安门前太阳升</div>
</body>
</html>
注意:
* 导入式会在整个网页装载完后再装载css文件,这样就会导致一个问题,如果网页比较大,则会先显示没有样式的网页,闪烁一下之后,再显示有样式的网页,这是导入式固有的一个缺陷
* 链接式是在装载网页之前就先加载css文件,因此客户端用户看到的网页一开始就是带样式的,这也是链接式的优先
二、css的选择器(selector)
“选择器”指明了{}中的”样式”的作用对象,也就是”样式”作用于网页中的那些元素
2.1、基础选择器
- 通用选择器’*’,即匹配所有的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-1_通用选择器</title>
<style>
*{
color: greenyellow;
background: darkgray;
font-size: 50px;
}
</style>
</head>
<body>
<p>我想要把</p>
<div>
所有的字体
<span>都变的非常的大</span>
</div>
</body>
</html>
- 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-2_标签选择器</title>
<style>
body{
color: greenyellow;
background: darkgray;
font-size: 50px;
}
p{
text-align: center;
color: mediumvioletred;
font-size: 120px;
}
div{
background: lightgoldenrodyellow;
color: cornflowerblue;
font-size: 80px;
}
span{
background: skyblue;
color: black;
font-size: 50px;
}
</style>
</head>
<body>
<p>我想要把</p>
<div>
所有的字体
<span>都变的非常的大</span>
</div>
</body>
</html>
- 根据id和class来选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-2_id-class_选择器</title>
<style>
body{
color: greenyellow;
background: darkgray;
font-size: 50px;
}
#p_head{
text-align: right;
color: mediumvioletred;
font-size: 30px;
}
div{
background: lightgoldenrodyellow;
color: cornflowerblue;
font-size: 80px;
}
.c_span{
text-align: right;
background: skyblue;
color: black;
font-size: 50px;
}
</style>
</head>
<body>
<p id="p_head">根据id选择使用'#' + 'id_name'</p>
<div>
所有的字体
<span class="c_span">根据class选择使用'.' + 'class_name'</span>
</div>
</body>
</html>
- id和class的区别:
- 1、id不可以重复
- 2、class可以重复
2.2、组合选择器
2.2.1、后代选择器
E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔li a { font-weight:bold;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-2_组合选择器-后代选择器</title>
<style>
body{
background: rebeccapurple;
}
div{
background: cornflowerblue;
}
body div p{
text-align: right;
color: greenyellow;
background: darkgray;
font-size: 50px;
}
</style>
</head>
<body>
<div>
<p>所谓的后代选择器</p>
<p>即:先从最外面[左面]找,然后再向里找[右面]</p>
<p>大概就是这个意思</p>
<p>需要自己体会</p>
</div>
</body>
</html>
2.2.2、多标签选择器
E, F 多标签选择器,匹配E或者F元素,中间使用逗号’,’分隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-2_组合选择器-多元素选择器</title>
<style>
div, p{
text-align: right;
color: greenyellow;
background: darkgray;
font-size: 50px;
}
span{
color: red;
text-align: left;
font-size: 60px;
}
</style>
</head>
<body>
<p class="p_class">2-2_组合选择器-多元素选择器</p>
<div>
这里是div标签的内容
</div>
<span>这里是span标签的内容</span>
</body>
</html>
2.2.3、子元素选择器
E > F 子元素选择器,所有E元素的子元素F div > p { color:#f00; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-2_组合选择器-子选择器.html</title>
<style>
.cls_2 > p{
color: red;
text-align: left;
font-size: 60px;
}
</style>
</head>
<body>
<p class="p_class">标题</p>
<div>
<p>我在div外面</p>
</div>
<div class="cls_2">
<p class="p_class">所谓的子选择器</p>
<p>。。。。。</p>
<p>反正就是子选择器</p>
<div>
<p>我在div的div的里面</p>
</div>
</div>
</body>
</html>
2.2.4、毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
E + F 毗邻元素选择器 匹配所有紧随E元素之后的同级元素,只有一个会被选择 F div + p { color:#f00; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-2_组合选择器-毗邻选择器</title>
<style>
div + p{
text-align: right;
color: greenyellow;
background: darkgray;
font-size: 50px;
}
</style>
</head>
<body>
<div>
<spa>span area</spa>
<div>div span</div>
<p class="p_class">2-2_组合选择器-毗邻选择器</p>
</div>
<div>
<p class="p_class">所谓的毗邻选择器</p>
<div>
<p>即:上第一个标签之后(在这里就是div)的紧跟的同级标签会被选择,只有一个会被选择,并不是所有的</p>
</div>
<p>只有一个会被选择,并不是所有的噢</p>
<p>give you some eyes, and experience by yourself.</p>
</div>
</body>
</html>
2.2.5、注意嵌套规则
- 1、块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
- 2、有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- 3、li内可以包含div
- 4、块级元素与块级元素并列、内联元素与内联元素并列。
2.3、属性选择器
说明: E表示元素,attr表示属性,通常情况下E可以省略,也可以自定义属性
* E[attr] 匹配所有具有attr属性的元素,且不考虑它的值
* E[attr=val] 在上面的基础上有一个值的限定,属性和值一样才匹配
* E[attr^=val] 所有元素的属性attr的值以val开关的
* E[attr$=val] 所有元素的属性attr的值以val结尾的
* E[attr*=val] 所有元素的属性值中只要包含val就可以匹配
* E[attr~=val] 匹配元素的属性值中包含val且val是一个单独以空格分隔的
说明一点,属性的值可以包含空格,如’name=”a b c”’, 那么在选择的时候,[name=’b’],也是被选择的
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-3_属性选择器</title>
<style>
[id]{ color: #256c7e; } /* [attr] */
[class='c_div_2']{ background: #715498; } /* E[attr=val] */
div[custom='vincent']{ color: red; } /* 自定义标签属性选择 */
[class^='cls_']{ background: #c6d796; } /* E[attr^=val] */
[class$='ty']{ background: pink; } /* E[attr$=val] */
[class*='div']{ font-style: italic; } /* E[attr*=val] */
[class~='dog']{ font-size: 18px; } /* E[attr~=val] */
</style>
</head>
<body>
<div class="cls_biology">生物学</div>
<div class="c_div_kitty">hello kitty</div>
<div class="dog">---花花-----</div>
<div class="c_div_cat">猫,我歪了么?</div>
<div class="c_div_beauty">美丽ty</div>
<div class="yellow dog">---黄色的花花很黄-----</div>
<div class="cls_physical">物理</div>
<div id="d_id" custom="vincent">自定义标签</div>
</body>
</html>
2.4、伪类(pseudo-classes)
CSS伪类是用来给选择器添加一些特殊效果。
anchor 伪类,专门用于控制链接的显示效果的
- a:link(没有接触过的链接),用于定义了链接的常规状态。
- a:hover(鼠标放在链接上的状态),用于产生视觉效果。
- a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。
- a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-4_伪类</title>
<style>
a:link{ color: red } /* 访问前 */
a:hover{ color: yellow; } /* 悬浮时 */
a:visited{ color: purple; } /* 点击时 */
a:active{ color: green; } /* 点击后 */
p:before{
content: '我要说';
color: #000;
}
p:after{
content: ' -- 高晓松';
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<p>生活不只有苟且,还有诗和远方</p>
</body>
</html>
2.5、css优先级和继承
2.5.1、优先级
即在浏览器中被解析的优先顺序
规则如下:
* 1、内联表的权重最高 style=”color: yellow”
* 2、统计选择符中的id属性个数 #id
* 3、统计选择符中的class属性个数 .class_name
* 4、统计选择符中的html标签名个数 p、html、body、h1等
2.5.2、继承
简单的说就是所有被A标签的包裹的标签都会继承A的属性,如html标签有text-align: center;属性,那么所有的文本都会居中(如果在子标签中重新赋予新属性,则会覆盖,还是就近原则)
三、css的常用属性
3.1、颜色属性
<div style="color: blue">div color test</div>
<div style="color: #ffee33">div color test</div> //这里的#ffee33可以简写为#fe3
<div style="color: rgb(255,0,0)">div color test</div>
<div style="color: rgba(255,0,0,0.5)">div color test</div>
3.2、字体属性
<style>
div{
font-size: 20px; /* 20%, larger */
font-family: 'Lucia Bright';
font-weight: lighter; /* bold, border*/
}
</style>
<h1 style="font-style: oblique;">head one</h1>
3.3、背景属性
<style>
div{
background: pink;
background-image: url('images/beauti.png');
background-repeat: no-repeat; /* repeat */
background-position: right top(20px 20px); /* 只有两个参数, center, center表示水平、垂直方向居中 */
}
</style>
3.4、文本属性
<style>
div{
font-size: 10px;
text-align: center; /* 水平居中 */
line-height: 200px; /* 文本行高,即文字加上、下空白的高度,如果是百分比的话则是基于字体的大小 */
vertical-align: -5px; /* 垂直对齐,行内元素有效,块级元素无效 */
text-indent: 150px; /* 首行缩进 */
letter-spacing: 5px; /* 每个字符之间的像素 */
word-break: 5px; /* 每个单词间的距离 */
text-transform: capitalize; /* 每个单词的首这字母大写 */
}
</style>
3.5、边框属性
<style>
div{
border-style: solid;
border-color: pink;
border-width: 5px;
/* border: 5px pink solid # 效果一样 */
}
</style>
3.6、列表属性
<style>
div{
ul, ol{
list-style: decimal-leading-zero;
list-style: none; /* 轮播图会用到 */
list-style: upper-alpha;
list-style: disc;
list-style: square;
}
}
</style>
3.7、display属性
<style>
div{
display: none; /* 用于隐藏一个元素 */
display: block; /* 默认情况就是block */
display: inline; /* 将一个非内联元素变为内联元素 */
display: block; /* 类似 */
display: inline-block; /* 既具有内联元素的特性也有块级元素的特性 */
}
</style>
3.8、外边距和内边距
- margin: 用于控制元素与元素之间的距离
- padding: 内容与边框的距离
- border: margin到padding的最小距离
- content: 盒子的内容,可以是具体的文本或者其它的也可以是其它的例子
**注意**: height, width是修饰content的
<style>
div{
height: 300px;
width: 300px;
padding: 10px;
border: 5px red solid;
margin: 10px;
}
</style>
3.9、float属性
- 正常文档流:将元素(标签)在进行排版布局的时候按照 从上到下、从左到右 的顺序排版的一个布局流
- 脱离文档流:将元素从文档流里取出,进行覆盖,其它元素会按照文档流中不存在的元素重新布局
- float(非完全脱离)
- clear(清除浮动)
- none: 默认。允许丙边有浮动对象
- left: 不允许左边有浮动对象
- right: 不允许右边有浮动对象
- both: 左右都不允许有浮动对象
- 注意:clear属性只会对自身有作用,而不会影响其它的元素,如果一个元素右侧有一个浮动元素,而这个元素设置了不允许右边有浮动元素,即clear: right;,则这个元素会自动下移一格,达到右边没有浮动对象的目的。
- overflow
-hidden的含义就是超出的部分要裁剪隐藏,float元素虽然不在普通流中,但是它是浮动在普通流之中的,可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下,它要计算内容的全部高度才能确定在什么位置hidden,这样浮动元素的高度就要被计算进去,这样容器才会被撑开,清除浮动。
- clear(清除浮动)
- float(非完全脱离)
3.10、position(定位)
position: absolute fixed(完全脱离)
position的几个属性值:
absolute:
- 定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
- 重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的
左上角
为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。 - 另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
- 总结:参照物用相对定位,子元素用绝对定位,并且保证相对定位参照物不会偏移即可。
relative: 相对定位,相对定位是相对于该元素在文档流中的原始位置,即以自己为参照物,有趣的是,即使设定了元素的相对定位以及偏移值,元素还占着原来的位置,即占据文档流的空间。对象遵循正常文档流,但将依据top, right, bottom, left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义
注意:position: relative;的另外一个用法,方便绝对定位元素找到参照物
- static:默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。
关于位置的几个属性[单位:px]
- top
- left
- right
- bottom
注意事项:position在非static的情况下,会根据当前元素的父级元素来偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-7_position-fixed</title>
<style>
.div-1{
height: 140px;
width: 140px;
background: darkgray;
}
.div-2{
height: 140px;
width: 140px;
background: greenyellow;
position: absolute;
bottom: 5px;
left: 135px;
}
.div-3{
height: 350px;
width: 350px;
background: mediumvioletred;
}
.box{
position: relative;
border: 5px red solid;
}
</style>
</head>
<body>
<div class="div-1" id="top"></div>
<div class="box">
<div class="div-2"></div>
</div>
<div class="div-3"></div>
</body>
</html>