30、css介绍

30.1、css概述：

css是Cascading Style Sheet的简称，中文称为层叠样式表，是用来控制网页数据表现的，可以

使网页的表现与数据内容分离；

30.2、css的四种引入方式：

1、行内式：

（1）在标记的style属性中设定css样式，这种方式没有体现css的优势，不推荐使用；

（2）示例：<p style="background-color: rebeccapurple">hello lc</p>

2、嵌入式：

（1）将CSS样式集中写在网页的<head>标签对的<style>标签对中；

（2）示例：

<head>

<title>Title</title>

<style>

p {

background-color: rebeccapurple

}

</style>

</head>

3、链接式：

（1）在网页的<head>标签对中将一个".css"文件引入；

（2）示例：

<head>

</head>

4、导入式：

（1）在网页的<head>标签对的<style>标签对中将一个独立的".css"文件引入；

（2）示例：

@import"mystyle.css";

</style>

（3）注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，

再出现网页的样式，这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来

的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

30.3、css的选择器(selector)：

说明：“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素；

1、基础选择器：

（1）＊：通用元素选择器，匹配任何元素，示例：* { margin:0; padding:0; }

（2）E：标签选择器，匹配所有使用E标签的元素，示例：p { color:green; }

（3）.info和E.info: class选择器，匹配所有class属性中包含info的元素，示例：.info { background:#ff0; } p.info { background:blue; }

（4）#info和E#info：id选择器，匹配所有id属性等于info的元素，示例：#info { background:#ff0; } p#info { background:#ff0; }

2、组合选择器：

（1）E,F：多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔，示例：div,p { color:#f00; }

（2）E F：后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔，示例：li a { font-weight:bold;}

（3）E > F：子元素选择器，匹配所有E元素的子元素F，示例：div > p { color:#f00; }

（4）E + F：毗邻元素选择器，匹配所有紧随E元素之后的同级元素F(向下匹配)，示例：div + p { color:#f00; }

3、属性选择器：

（1）E[att]：匹配所有具有att属性的E元素，不考虑它的值(注意：E在此处可以省略，比如“[cheacked]”,以下同)，示例：p[title] { color:#f00; }

（2）E[att=val]：匹配所有att属性等于“val”的E元素，示例：div[class=”error”] { color:#f00; }

（3）E[attr^=val]：匹配属性值以指定值开头的E元素，示例：div[class^="test"]{background:#ffff00;}

（4）E[attr$=val]：匹配属性值以指定值结尾的E元素，示例：div[class$="test"]{background:#ffff00;}

（5）E[attr*=val]：匹配属性值中包含指定值的E元素，示例：div[class*="test"]{background:#ffff00;}

4、伪类选择器：

（1）说明：css的伪类是用来给选择器添加一些特殊效果的，伪类指的是标签的不同状态，格式: <标签>:<伪类名称>{ css代码; }。

（2）anchor伪类(专用于控制链接的选择效果)：

1）a:link：没有接触过的链接，用于定义了链接的常规状态。

2）a:hover：鼠标放在链接上的状态，用于产生视觉效果。

3）a:visited：访问过的链接，用于阅读文章，能清楚的判断已经访问过的链接。

4）a:active：在链接上按下鼠标时的状态，用于表现鼠标按下时的链接状态。

5）示例：

a:link：{color: #FF0000}

/* 未访问的链接 */

a:visited：{color: #00FF00}

/* 已访问的链接 */

a:hover：{color: #FF00FF}

/* 鼠标移动到链接上 */

a:active：{color: #0000FF}

/* 选定的链接 */

补充：.outer:hover .right{color: red}

（3）before、after伪类选择器：

1）p:before：在每个<p>元素的内容之前插入内容，示例：p:before{content:"hello";color:red}

2）p:after：在每个<p>元素的内容之后插入内容，示例：p:after{ content:"hello"；color:red}

5、css优先级和继承：

（1）css的优先级：

1）所谓CSS优先级，即是指CSS样式修饰同一个标签时在浏览器中被解析的先后顺序；

2）样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

内联样式表的权值最高，style=""-------------------1000；

统计选择符中的ID属性个数，#<id>--------------100；

统计选择符中的CLASS属性个数，.<class>----10；

统计选择符中的HTML标签名个数，<p>-----1；

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

3）示例：

<style>

#p {

color: rebeccapurple;

}

.p {

color: #2459a2;

}

p {

color: yellow;

}

</style>

<p id="p" class="p" style="color: deeppink">hello lc</p>

（2）css的继承：

1）继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

例如一个BODY定义了的颜色值也会应用到段落的文本中，body{color:red;} <p>hellolc</p>，这段文字都继承了由body {color:red;}样式定义的颜色，

然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。p{color:green}，发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见，

任何显示申明的规则都可以覆盖其继承样式，此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的，有一些

属性不能被继承，如：border, margin, padding, background等。

（3）补充说明：

A）文内的样式优先级为1000，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或

B）有!important声明的规则高于一切。

C）如果!important声明冲突，则比较优先权。

D）如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

E）由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则);

30.4、css的常用属性：

1、颜色属性：

（1）<div style="color:blueviolet">ppppp</div>

（2）<div style="color:#ffee33">ppppp</div>

（3）<div style="color:rgb(255,0,0)">ppppp</div>

（4）<div style="color:rgba(255,0,0,0.5)">ppppp</div>

/*rgba配置的最后一位是透明度设置，范围是0>=<透明度值><=1，透明度值越小，透明度越高*/

2、字体属性：

（1）font-size: 20px/50%/larger;

（2）font-family:'Lucida Bright';

（3）font-weight: lighter/bold/border/;

（4）font-style: oblique";

/*斜体*/

3、背景属性：

（1）background-color: cornflowerblue;

（2）background-image: url('1.jpg');

（3）background-repeat: no-repeat;

/*repeat:平铺满*/

（4）background-position: 20px 20px;

/*横向：left center right；纵向：top center bottom；

20px 20px：代表图片距离左边距和上边距的像素大小；

（5）简写：

4、文本属性：

（1）font-size: 10px;

（2）text-align: left/center/right;

/*横向排列*/

（3）line-height: 50px;

/*文本行高，通俗的讲就是文字高度加上文字上下空白区域的高度*/

（4）vertical-align:－4px;

/*设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效*/

（5）text-indent: 150px;

/*首行缩进*/

（6）letter-spacing: 10px;

/*字符之间的间距*/

（7）word-spacing: 20px;

/*英文单词之间的间距*/

（8）text-transform: capitalize;

/*英文单词首字母大写*/

5、边框属性：

（1）border-style: solid;

/*border-left/right/top/bottom-style: solid;*/

（2）border-color: chartreuse;

/*border-left/right/top/bottom-color: chartreuse;*/

（3）border-width: 20px;

/*border-left/right/top/bottom-width: 20px;*/

（4）简写：border: 20px solid rebeccapurple;

6、列表属性：

说明：用于ul或ol标签；

（1）list-style: decimal-leading-zero;

/*显示样式：

（2）list-style: none;

/*显示样式：

（3）list-style: circle;

/*显示样式：

（4）list-style: upper-alpha;

/*显示样式：

（5）list-style: disc;

/*显示样式：

7、display属性：

（1）display: none

（2）display: block

（3）display: inline

（4）display: inline-block

/*可做列表布局，使正常文档流中的块级标签不独占一行，使正常文档流中的内联标签可以设置长宽*/

8、外边距和内边距：

（1）盒子图示：

（2）说明：

1）margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

2）padding：用于控制内容与边框之间的距离；

3）Border(边框)：围绕在内边距和内容外的边框。

4）Content(内容)：盒子的内容，显示文本和图像。

（3）元素的宽度和高度：

1）说明：

当指定一个CSS元素的宽度和高度属性时，只是设置了元素内容区域的宽度和高度。完全大小的元素，还必须添加padding、border、

margin的边距。

2）规则：

margin: 10px 5px 15px 20px;

/*上右下左*/

margin: 10px 5px 15px;

/*上右左下*/

margin: 10px 5px;

/*上下右左*/

margin: 10px;

/*上右下左*/

3）示例：

/*下面的例子中的元素的总宽度为300px;*/

width: 250px;

padding: 10px;

border: 5px solid gray;

margin: 10px;

（4）思考1：

1）边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子(外层还有html)，

在默认情况下，body距离html会有若干像素的margin，具体数值因各个浏览器会有所不同，所以body中的盒子不会紧贴浏览器窗口的边框了，

为了验证这一点，加上：

body{

border: 1px solid;

background-color: cadetblue;

}

2）解决方法：

body{

margin: 0;

padding: 0;

}

（5）思考2：

1）margin collapse(边界塌陷或者说边界重叠)：

外边距的重叠只产生在处于正常文档流的上下元素的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。

设想，当我们在正常文档流上下排列一系列规则的块级元素，如段落P时，那么块元素之间因为外边距重叠的存在，段落

之间就不会产生双倍的距离，div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大

值作为显示值。

2）父子div：

如果父级div中没有 border，padding，inline content(数据)，子级div的margin会一直向上找，直到找到某个标签

包括border，padding，inline content中的其中一个，然后按此div进行margin。

解决办法：在父级div中添加border:1px solid transparent;/padding:1px;/overflow:hidden;标签。

3）示例：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

body {

margin: 0px;

}

.div1 {

background-color: aqua;

width: 300px;

height: 300px;

/*border:1px solid transparent*/

/*padding:1px;*/

overflow:hidden;

}

.div2 {

background-color: blueviolet;

width: 100px;

height: 100px;

margin: 20px;

}

</style>

</head>

<body>

</div>

</body>

</html>

<!--

显示效果：

-->

9、float属性：

（1）block元素和inline元素在文档流中的排列方式：

1）block元素在正常文档流中通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填

满其父元素宽度。block元素可以设置width、height、margin、padding属性。

2）inline元素在正常文档流中不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽

度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性，水平方

向的padding-left, padding-right, margin-left, margin-right都产生边距效果，但竖直方向的padding-top,

padding-bottom, margin-top,margin-bottom不会产生边距效果。

3）常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。

4）常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等。

（2）文档流指的是元素排版布局过程中元素会自动从左往右，从上往下的流式排列。

（3）脱离文档流是将元素从普通的布局排版中拿走，其他元素在定位的时候，会当做脱离文档流的元素，不以其当做参考点进行定位。

只有绝对定位absolute、浮动定位float、窗口定位fixed，元素才会脱离文档流。

（4）脱离文档流的元素，部分无视和完全无视的区别：

1）使用float脱离文档流时，下面处于正常文档流的块级元素会无视这个元素，但元素内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。

2）而对于使用"absolute fixed"脱离文档流的元素，下面处于正常文档流的块级元素与元素内的文本都会无视它(可以说是完全无视)。

（5）浮动的表现：

1）定义：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以下面处于正常文档流的块框表

现得就像浮动框不存在一样。注意，这里是块框而不是内联元素，浮动框只对它下面处于正常文档流的块级元素造成影响。

当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式，

而使用"absolute fixed"脱离文档流的元素不会出现这种情况。

2）无论多么复杂的布局，其基本出发点均是"如何在一行显示多个块级元素"(div)：

A）现象1：

有两个处在正常文档流中的块级元素，A元素在B元素的下面；

假如A元素是浮动的，B元素也是浮动的，那么A元素会跟随在B元素的后边，如果一行放不下这两个元素，那么A元素会被挤到下一行。

如果A元素是浮动的，B元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

如果A元素是标准流中的元素，B元素是浮动的，A元素会认为B元素的框不存在，但A元素中的文本依然会为B元素让出位置，(如果B元

素下面的是inline元素，inline元素会按顺序排列在A元素的右面）。

B）现象2：

上下结构div盒子重叠现象；

a）示例：

<!DOCTYPE html>

<head>

<title>Title</title>

* {

margin:0;padding:0;

}

.container{

border:1px solid red;width:300px;

}

#box1{

background-color:green;float:left;width:100px;height:100px;

}

#box2{

background-color:deeppink; float:right;width:100px;height:100px;

}

#box3{

background-color:pink;height:40px;

}

</style>

</head>

<body>

</div>

</body>

</html>

<!--

显示效果：

-->

b）示例说明：".container"和box3的布局是上下结构，上图发现box3跑到了上面，与".container"产生了重叠，但文本内容没有发生覆盖，只

有div发生覆盖现象。这是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致".container"没有被撑开。box3认为".container"没有

高度(未被撑开)，因此跑上去了。

c）解决方法一：

给".container"设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置".container"高度(当然能确定内容多高，

这种情况下".container"是可以设置一个高度，即可解决覆盖问题)。

d）解决方法二：

清除浮动。

说明：在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长

以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处

理就叫CSS清除浮动。

clear语法：clear: none | left | right | both

清除浮动取值说明：

none----默认值，允许左右两边都可以有浮动对象。

left----不允许左边有浮动对象。

right----不允许右边有浮动对象。

both----不允许左右两边有浮动对象。

需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对

象，即clear: right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

方式1(推荐):

.clearfix:after {

content: ".";

/*内容为"."就是一个英文的句号而已，也可以不写。*/

display: block;

/*加入的这个元素转换为块级元素;*/

clear: both;

/*清除左右两边浮动;*/

visibility: hidden;

/*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/

line-height: 0;

/*行高为0；*/

height: 0;

/*高度为0；*/

font-size:0;

/*字体大小为0;*/

}

.clearfix { *zoom:1;}

/*这是针对于IE6的，因为IE6不支持":after"伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素;*/

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它"clear:both"来达到清除浮动的效果。

之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。然后在需要清浮动的元素中

添加clearfix类名就好了(<div class="head clearfix"></div>)。

方式2：

overflow: hidden;----该含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之

上的。可以把普通流元素+浮动元素想象成一个立方体，如果没有明确设定包含容器高度的情况下，它要计算内容的

全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去，这样包含容器就会被撑开，清除浮动。

10、position(定位)属性：

（1）static：

static是默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。

（2）position: relative/absolute：

1）relative：相对定位。相对定位是相对于该元素原始位置为参照物，将依据top，right，bottom，left

等属性偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法是方便绝对定位元素找到参照物。

2）absolute 绝对定位：

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖

先元素，那么它的位置相对于最初body元素定位。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不

存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能

很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;，父元素设置

position:relative;，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过

z-index属性定义。

3）小结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。

（3）position:fixed：

1）fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，

不论窗口是否滚动，它都会固定在这个位置。而其层叠通过z-index属性定义。

示例：

.returnTop{

width: 80px;

height: 50px;

position: fixed;

bottom: 20px;

right: 5px;

background-color: gray;

color: white;

text-align: center;

line-height: 50px;

}

（4）注意点：

一个元素若设置了position:absolute|fixed;则该元素就不能设置float，这是一个常识性的知识点，因为这是两个不同

的流，一个是浮动流，另一个是“定位流”，但是 relative 却可以。

（5）仅使用margin属性布局绝对定位元素：

1）此情况下，margin不再对文档流中的元素产生影响，因为该元素已经脱离了文档流，不管它的祖先元素有没有定位，

都是以文档流中原来所在的位置上偏移参照物。

2）示例：

层级关系为：

<div ——————————— position:relative;

<div—————————-没有设置为定位元素，不是参照物

<div———————-没有设置为定位元素，不是参照物

<div box1

<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;

<div box3

效果图：

30.5、补充：

1、overflow属性：

（1）/* 默认值。内容不会被修剪，会呈现在元素框之外 */

overflow: visible;

（2）/* 内容会被修剪，并且其余内容不可见 */

overflow: hidden;

（3）/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */

overflow: scroll;

（4）/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */

overflow: auto;

（5）/* 规定从父元素继承overflow属性的值 */

overflow: inherit;

2、inline-block 的间隙解决办法：

inline-block默认的空格符就是标签与标签之间的空隙造成的。

（1）示例：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

display: inline-block;

background-color: #2459a2;

width: 100px;

height: 100px;

}

</style>

</head>

<body>

</body>

</html>

（2）解决办法：

我们可以通过margin:-3px来解决，但是我们布局肯定很多元素，不可能每个都添加margin负这样维护成本太大了，

我们线上代码如果压缩，那么我们就不存在间隙的问题了，那么我们的margin负就会造成布局混乱。我们可以给

几个标签加一个父级div，然后：div{word-spacing: -5px;}问题就解决了。

3、一旦给元素加上absolute或float就相当于给元素加上了display:block;：

说明：比如内联元素span默认宽度是自适应的，你给其加上width是不起作用的。要想width定宽，你需要将span设

成display:block。但如果你给span加上absolute或float，那span的display属性自动就变成block，就可以指定width了。

30.6、总结：

1、块级标签在正常文档流中独占一行；内联标签在正常文档流中不独占一行，但是无法设置元素长宽。

2、块级标签可以包含块级标签或内联标签，内联标签只能包含内联标签。

3、div(块级标签)标签和span(内联标签)标签是一个空的画板，不写内容时什么也不显示；

4、只有绝对定位absolute、浮动定位float、窗口定位fixed，元素才会脱离文档流，会使块级元素不独占一行，使内联元素可

以设置长宽，inline-block也具有该功能，但不会使元素脱离正常的文档流。

（1）浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，

所以下面处于正常文档流的块框表现得就像浮动框不存在一样。注意，这里是块框而不是内联元素，浮动框只对它下面处于正常

文档流的块级元素造成影响。当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即

float是一种不彻底的脱离文档流方式，而使用"absolute fixed"脱离文档流的元素不会出现这种情况。

（2）多个inline-block中间是有空隙的；

（3）使用margin定位时，如果参考的元素脱离文档流或本身元素脱离文档流的只能以自己原来的位置为参照；

5、opacity: 1;/*css透明度属性*/

巴特西

30、css介绍

最新文章

热门文章