首页 > > 网页制作 > css >

CSS再学

2018-06-24 02:08:14来源：未知阅读 ()

css的注释

/*.......*/

直接在html代码中写css

<p style="color: rebeccapurple;font-size: 18px">Hao</p>

css代码写在当前文件中

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

color: red;

font-size: 19px;

}

</style>

</head>

<body>

</body>

css写在外部单独文件中

<link rel="stylesheet" href="base.css" type="text/css">这样导入

id选择器（#）

<style type="text/css">

#set{

color: red;

font-size: 60px;

}

</style>

</head>

<body>

<span id="set">选择</span>

</body>

</html>

class和id选择器的区别

相同点：可以应用于任何元素

不同点：

ID选择器只能在文档中使用一次。
可以使用类选择器列表方法为一个元素同时设置多个样式

子选择器(>)

用于选择指定标签元素下的第一代子元素。

包含后代选择器

.first span{color:red;}，后代中所有的span标签都受影响

>：只影响第一代子元素

空格：所有后代都影响

通用选择器

* {color:red;}选定html中所有标签

伪类选择器

a:hover{color:red;}

一般用于a标签，使鼠标滑过变颜色

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

a:hover{

color: red;

}

</style>

</head>

<body>

<a href="http://www.baidu.com">BaiDu</a>

</body>

</html>

放在BaiDu上，颜色变成红色。

分组选择符

h1,span{color:red;}相当于：

h1{color:red;} span{color:red;}

继承

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p{color:red;} <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：

p{color:red;} .first{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/

层叠

我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

如下面代码:

p{color:red;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

重要性

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

如下代码：

p{color:red!important;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

css一些应用

body{font-family:"宋体";} 字体

body{font-size:12px;color:#666} 字号（大小），颜色

p span{font-weight:bold;} 粗体

p a{font-style:italic;} 斜体

p a{text-decoration:underline;} 下划线

.oldPrice{text-decoration:line-through;} 删除线

p{text-indent:2em;} 缩进

p{line-height:1.5em;} 行间距（行高）

h1{letter-spacing:50px;} 字间距

h1{ text-align:center; }

h1{ text-align:left; }

h1{ text-align:right; }

元素分类

块状元素：

内联元素：

内联元素：

块级元素

特点：

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2. 元素的高度、宽度、行高以及顶和底边距离都可设置。

3. 元素宽度在不设置的情况下，是它本身父容器的100%，除非设置一个宽度。

设置display:block就是将元素显示为块级元素

内联元素

display:inline将元素设置为内联元素

特点：

1. 和其他元素都在一行上

2. 元素的高度、宽度及顶部和底边边距不可设置

3. 元素的宽度就是它包含的文字或图片的宽度，不可改变

内联元素

内联：同时具备内联元素、块状元素的特点，代码display:inline-block。只有<img>/<input>两个标签

特点：

1. 和其他元素都在一行上

2. 元素的高度、宽度、行高及上下边距都可设置

盒子模型

边框：

div{ border:2px solid red; }

相当于：

div{ border-width:2px; border-style:solid; border-color:red; }

1. border-style（边框样式）常见的有：dashed（虚线）| dotted（点线）| solid（实线）

2. border-width（边框宽度）

3. border-top:1px solid red; 只设置上边框 4. border-right:1px solid red; 只设置右边框 5. border-left:1px solid red; 只设置左边框

6. div{border-bottom:1px solid red;} 只设置下边框

高度和宽度：

css定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素的实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右边界+右边框+右边界

填充：

元素内容和边框之间可以设置距离的，称之为“填充”。padding

边界：

margin设置外边距

padding世内边距，margin是内边距

css布局模型

布局模型建立在盒子模型的基础之上。

css包含3种基本的布局模型：flow、layer、float

流动模型（flow）：

流动（flow）是默认的网页布局模式。也就是说网页在，默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。

有如下的特征：

1. 块级元素都会在所处的包含元素自上而下按顺序垂直延伸分布，因为在默认情况下，块状元素的宽度都是100%，实际上，块级元素都会以行的形式占据位置。

2. 在流动模式下，内联元素都会在所处的包含元素内从左到右水平分布。

总结：html默认使用flow，流动，所有的内容都是应用在此之上。

浮动模型（float）：

任何元素在默认情况下是不能浮动的，但可以使用CSS定义浮动，如div、p、table、img等元素都可以被定义为浮动。

层模型：

层模型有三种形式：

1. 绝对定位（position:absolute）

2. 相对定位（position:relative）

3. 固定定位（position:fixed）

绝对定位:

positon:absolute,这条语句的作用是将元素从文档中拖出来，然后使用left、top、right、bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位。如果不包含块，则相对于body元素，即相对于浏览器窗口。

div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;} <div id="div1"></div>

相对定位：

positon:relative，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动。

#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div>

<body> <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span></bod<body>

总结：相对定位，就是虽然目标移动了，但是以前的位置还是留着。

固定定位:

position:fixed，与绝对定位（absolute）类似，但是它相对移动的坐标是视图（屏幕内的网页）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条而变化，因此它始终固定于窗口内视图的某个位置。导航条就是用这种固定方法。

Relative与Absolute组合使用

小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"> <div id="box2">相对参照元素进行定位</div> </div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{ width:200px; height:200px; position:relative; }

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{ position:absolute; top:20px; left:30px; }

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

<!DOCTYPE HTML>

<html>

<head>

<title>相对参照元素进行定位</title>

div{border:2px red solid;}

#box1{

width:200px;

height:200px;

position:relative;

}

#box2{

position:absolute;

top:20px;

left:30px;

}

/*下面是任务部分*/

#box3{

width:200px;

height:200px;

position:relative;

}

#box4{

width:99%;

position:absolute;

bottom:0;

}

</style>

</head>

<body>

<div id="box2">相对参照元素进行定位</div>

</div>

<h1>下面是任务部分</h1>

<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>

</div>

</body>

</html>

盒模型代码简写，css尽量较少代码量

1. margin:10px 10px 10px 10px;

简写：margin:10px;

2. margin:10px 20px 10px 20px;

简写：margin:10px 20px;

3. margin:10px 20px 30px 20px;

简写：margin:10px 20px 30px;

4. p{color:#000000;}

简写：p{color: #000;}

5. p{color: #336699;}

简写：p{color: #369;}

body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; }

简写：

body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; }

颜色值

1. 英文命令颜色

p{color:red;}

2. RGB颜色

p{color:rgb(133,45,200);}

3. 十六进制颜色

p{color:#00ffff;}

长度值（px）

css样式设置小技巧

水平居中

html代码：

<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>

css代码：

水平居中定宽块状元素

html代码：

<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>

css代码：

水平居中总结

不定宽度的块状元素有三种方法居中：

1. 加入table标签

2. 设置display:inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

3. 设置position.relative和left:50%；利用相对定位的方式，将元素向左移50%，达到居中的效果。

html代码：

<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>

css代码：

第二种：

html代码：

css代码：

垂直居中，保持height和line-height高度一致，height是该元素高度，line-height行间距指在文本中行与行之间的基线间的距离。

如下代码：

<div class="container"> hi,imooc! </div>

css代码：

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

（重要方法）方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：

html代码：

<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p> </div></td></tr></tbody></table></body>

css代码：

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

除了上面讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

html代码：

<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div>

css代码：

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container"> <a href="#" title="">进入课程请单击这里</a> </div>

css代码

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Task3

下一篇：HTML干货

DIV居中的经典方法 2020-06-13
CSS中的float和margin的混合使用 2020-06-11
Html/css 列表项区分列表首尾 2020-06-11
css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
ie8下透明度处理 2020-06-11

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签