CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记
CSS是Cascading Style Sheet的缩写，翻译为"层叠样式表" 或 "级联样式表"。CSS定义如何显示HTML的标签央视，用于设计网页的外观效果。经过使用CSS实现页面的内容与表现形式分离，极大提升了工做效率。css
1、CSS基础用法
CSS代码能够在任何文本编辑器中打开和编辑。所以，无论读者有没有变成基础，初次接触CSS时会感到很简单。html
1.1 CSS样式
样式是CSS最小的语法单元，每一个样式包含两部份内容:选择器和声明(规则)，以下所示：浏览器
- 选择器(Selector): 选择器告诉浏览器呢该样式将做用于页面中哪些对象，这些对象能够是某个标签、全部网页对象、指定Class或ID值等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果。
- 声明(Declaration): 声明能够增长一个或者无数个，这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两部分:属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明能够省略分号。全部声明被放置在一对大括号内，而后总体紧邻选择器的后面。
- 属性(Property): 属性是CSS提供的设置好的样式选项。属性名是一个单词或多个单词组成，多个单词之间经过连字符相连。这样可以直观表示属性所要设置样式的效果。
- 属性值(Value): 属性值是用来显示属性效果的参数。它包括数值和单位，或者关键字。
1.2 CSS应用
CSS样式代码必须保存在.css类型的文本中，或者放在网页内<style>标签中，或者插在网页标签的style属性中。CSS样式应用的方法主要包括4种: 网络
一、行内样式：行内样式就是把CSS样式直接放在代码行内的标签中，通常都放入标签的style属性中。框架
这种方法是修改最不方便的样式！ 编辑器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>css行内样式</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div>> </body> </html>
二、内嵌式： 内嵌式经过CSS卸载网页源文件的头部，即在<head>与</head>之间，经过使用HTML标签中的<style>标签将其包围，其特色是：该样式只能在此页使用，布局
这种方法解决行内样式屡次书写的弊端！字体
<html> <head></head> <body> !doctype html> <meta charset="UTF-8" /> <title>css内嵌样式</title> <style type="text/css">#div{width:100px;height:100px;background:red;}</style> <div id="div"></div>> </body> </html>
三、连接式：连接式经过HTML的<link>标签，将外部样式表文件连接到HTML文档中，这也是网络上网站引用最多的方式，同时也是最实用的方式。网站
这种方法将HTML文档和CSS文件彻底分离，实现结构层和表示层的完全分离，加强网页结构的扩展性和CSS样式的可维护性。 ui
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>css内嵌样式</title> <link rel="stylesheet" type="text/css" href="ccss.css" /> </head> <body> <div id="div"></div>> </body> </html>
四、导入样式：导入样式使用@import命令导入外部样式表。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>@import_CSS使用@import命令导入外部样式表</title> <style> @import url("style.css") screen, print; </style> </head> <body></body> </html>
两种导入样式表的方法比较：
1 link属于HTML标签，而@important是CSS提供的。 2 页面被加载的时，link会同时被加载，而@important引用的CSS会等到页面被加载完再加载。 3 @important只在IE5以上才能识别，而link是HTML标签，无兼容问题。 4 link方式的样式的权重高于@important的权重。 5 所以，通常推荐link导入样式表的方法，@important能够做为补充方法使用。
1.3 CSS注释
在CSS中增长注释很简单，全部被放在"/*"和"*/"分隔符之间的文本信息都被称为注释。
/* 下面这段代码的做用是创建网页布局 start */ .header{
width: 960px;
}
/* 下面这段代码的做用是创建网页布局 end */
/* 整段代码注释: 下面这段代码的做用是创建网页布局，它包括头部和尾部宽度设置 start */
.header{width:960px;}
.footer{width:960px;}
/*下面这段代码的做用是创建网页布局 它包括头部和尾部宽度设置 end */
2、 CSS特性(很是重要)
层叠和继承是CSS样式两个基本的特性。本节将对CSS特性分别进行详细说明，并经过示例演示CSS特性在网页设计中的应用。
2.1 CSS层叠性
一、CSS样式表的优先级: 按照CSS的起源能够将网页定义的样式分为4种: HTML、做者、用户、浏览器。
a) HTML表示元素的默认样式；做者就是建立人，即建立网站所编辑的CSS；用户也就是浏览网页的人所设置的样式；浏览器就是指浏览器默认的样式。
b) 原则上讲，做者定义的样式优先于用户设置的样式，用户设置的样式优先于浏览器的默认样式，而浏览器的默认样式会优先于HTML的默认样式。
二、CSS样式的优先级: 对于相同CSS起源来讲，不一样位置的样式其优先级也是不相同的。
通常来讲，行内样式会优先于内嵌式表，内部样式会优先于外部样式表。而被附加了!important关键字的声明会拥有最高的优先级。
若是多个不一样类型的选择器同时为一个对象设置样式时，该对象将如何显示最终样式呢？如下给出一个简单的计算方法。对于常规选择器，它们拥有一个优先级加权值，说明以下：
- 标签选择器: 优先级加权值为1；
- 伪元素或伪对象选择器: 优先级加权值为1；
- 类选择器: 优先级加权值为10；
- 属性选择器: 优先级加权值为10；
- ID选择器: 优先级加权值为100；
- 其余选择器: 优先级加权值为0，如统配选择器等。
而后，以上面加权值数加起点来计算每一个样式中选择器的总加权值数。计算的规则是：
- 统计选择器中ID选择器的个数，而后乘于100；
- 统计选择器中类选择器的个数，而后乘于10；
- 统计选择器中标签选择器的个数，而后乘于1；
以此方法类推，最后把全部加权值数相加，便可获得当前选择器的总加权值，最后根据加权值来决定哪一个样式的优先级大。
对于由多个选择器组合而成的复合选择器，首先分别计算每一个组成选择器的加权值，接着相加得出当前选择器的总分，最后根据选择器的分值大小，分值越高则优先级越高，那么就将应用它所设置的样式。若是分值相同，则根据位置关系来进行判断，越靠近对象的样式就拥有越高的优先级。
2.2 CSS继承性
所谓继承性，就是指被包含的元素将用于外层元素的样式效果。继承性最典型的应用就是在默认样式的预设上。
咱们先从文档树（HTML DOM）开始。文档树由HTML元素组成。文档树和家族树相似，也有祖先、后代、父亲、孩子和兄弟。这很容易理解吧，笔者在这里就不一一赘述了。但愿深刻了解的朋友请google之。
那么CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。
不是全部的属性均可以继承,只有以color/font-/text-/line开头的属性才能够继承。
在css中的继承不只是儿子才能够继承,只要是后代就能够继承
css继承性中的特殊性。a标签的文字颜色和下划线是不能被继承的，h标签的文字大小是不能被继承的。
应用场景: 通常用于设置网页上的一些共性信息。
CSS基础——实战案例
以上部分是理论基础知识的介绍，下面咱们开始着案例来涉及一个完整的页面，帮助本身加深理解。
【操做步骤】
(1) 使用文本编辑器(我使用Notepad++)，新建HTML文件，保存为index.html。
<html> <head> </head> <body> </body> </html>
(2) 切换到<body></body>标签内输入如下代码，用来构建本页面主体结构，设计本页面一级框架。
<html> <head> </head> <body> <!--[一级框架]--> <!--顶部--> <div id="top"></div> <div id="top1"></div> <!--主体--> <div id="main"></div> <!--底部--> <div id="footer"></div> <div id="copyright"></div> </body> </html>
在标准布局中，影噶为每一个div框架元素定义id属性，这些id属性如同人的身份证同样，方便CSS可以准确控制每一个div布局块。因此，为了阅读和维护的须要，咱们应该为它们起一个有意义的名字。
(3) 进一步细化页面结构，设计页面内部层次框架。因为本例页面比较简单，嵌套框架不会很深，顶部和底部布局块可能就不要嵌套框架。输入完整的HTML结构代码：
<html>
<head>
</head>
<body>
<!--[完整 HTML 框架]-->
<!--顶部-->
<div id="top"></div>
<div id="top1"><img src="http://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=CSS3%20%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3225363744,4220361311&os=3377850775,544686624&simid=4252198847,742695430&pn=1&rn=1&di=56730334650&ln=1869&fr=&fmq=1533315991177_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fwww.xuejiqiao.com%2Fuploads%2Fimage%2F20140912%2F14104879608470.jpg&rpstart=0&rpnum=0&adpicid=0" ></div>
<!--主体-->
<div id="main">
<div id="content">
<div id="titile">Hello World -- 第一个 CSS3+DIV页面</div>
<div class="sub">实例</div>
<div class="box"><div class="t1"><div class="tr"><div class="b1"><div class="content br"></div>
<!--底部-->
<div id="footer"></div>
<div id="copyright"></div>
</body>
</html>
(4) 丰富结构内容，使用<pre>标签显示代码内容，使用<a>设计超连接文本，整个页面内容显示以下，代码内容是在网页中居中显示红色字符"Hello World!"
<html>
<head>
</head>
<body>
<!--[完整 HTML 框架]-->
<!--顶部-->
<div id="top"></div>
<div id="top1"><img src="http://file01.16sucai.com/d/file/2010/1026/20101026011522224.jpg"></div>
<!--主体-->
<div id="main">
<div id="content">
<div id="titile">Hello World -- 第一个 CSS3+DIV页面</div>
<div class="sub">实例</div>
<div class="box"><div class="t1"><div class="tr"><div class="b1"><div class="content br"></div>
<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Wold</title>
<style type="text/css">
h1 {
color: #FF0000; /*元素文本颜色Red*/
text-align: center; /*元素文本的对齐方式*/
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
</pre>
</div></div><div></div></div>
<div id="gotop"><a titile="跳到页首" href="#top">返回顶部</a></div>
</div>
<!--底部-->
<div id="footer"></div>
<div id="copyright">
©2017 <a href="#" target="_black" >mysite.cn</a> all rights reserved
</div>
</body>
</html>
(5) 按Ctrl+S快捷键保存文档，按F12键在浏览器中预览，则显示以下所示，如今尚未定义CSS代码，因此看到的效果还不是最终效果。
(6) 编写CSS代码能够在一个单独的文件中进行。新建images文件夹，文件夹内建立CSS文档，保存为style.css，文件扩展名为.css。
(7) 不急于编写CSS代码，打开index.html文档，而后在<head>标签内插入一个<link>标签，输入如下代码导入上一步新建的外部样式表文件。
<head> <!--[在网页中连接外部样式表文件]--> <link href="images/style.css" type=text/css rel=stylesheet> </head>
(8) 打开style.css文档，在其中输入CSS代码以下：
/*公共属性
----------------------*/
html{min-width:776px;}
/*页面属性:边距为0，字体颜色为黑色，字体大小14像素，行高为字体大小1.6倍，居中对齐，背景色为天蓝色，字体为宋体等*/
body{
margin:0px;
padding:0px;
border:0px;
color:#000;
font-size:14px;
line-height:160%;
text-align:center;
background:#6D89DD;
font-family:'宋体','新宋体',arial,verdana,sans-serif;
}
/*超链接属性: 无边距、无边框，无下划线，而后定义正常状态下的颜色、访问过的颜色和鼠标通过的颜色并显示下划线*/
a{
margin:0px;
padding:0px;
border:0px;
text-decoration:none; /*这个属性容许对文本设置某种效果，如加下划线*/
}
a:link{color: #FF0000} /* 未访问的连接 */
a:visited{color:E66133} /* 已访问的连接 */
a:hover{color: #FF00FF; text-decoration:underline;} /* 当有鼠标悬停在连接上;定义文本下的一条线 */
/*预约义格式属性：浅灰色北京，无首行缩进，内边距大小，外边距为0，右缩进为一个字体大小，字体颜色为蓝色 */
pre{
text-indent:0;/*用于定义块级元素中第一个内容行的缩进 */
background:#DDDDDD;
padding:0px;
margin:0px;
color:blue;
}
/**顶部布局
----------------------*/
#top{
width:776px;
margin-right:auto;
margin-left:auto;
padding:0px;
height:12px;
background: url(images/bg_dot1.gif) #fff repeat-x left top;
overflow:hidden;
}
#top1{
width:776px;
margin-right:auto;
margin-left:auto;
padding:0px;
height:121px;
}
/*主体布局
----------------------*/
/*外层定义背景图像，实现麻点显示效果 */
#main{
width:776px;
margin-right:auto;
margin-left:auto;
padding:1.2em 0px;
background:url(images/bg_dot2.gif) #fff repeat left top;
text-align:left;
}
/*内层定义背景颜色为白色，实现中间内容区域遮盖麻点显示 */
#content{
width:710px;
margin-right:auto;
margin-left:auto;
padding:1em;
background:#fff;
}
/*大标题区域属性*/
#titile{
font-weight:bold;
margin:0px 0px 0.5em 0px;
padding:0.5em 0px 0.5em 1em;
font-size: 24px;
color:#00A06B;
text-align:left;
border-bottom:solid #9EA3C1 2px;
}
/*小标题区域属性*/
.sub{
color:#00A06B;
font-weight:13px;
text-align:left;
padding:1em 2em 0;
background:url(images/0.gif) #fff no-repeat 1em 74%;
}
/*内容区域显示属性*/
.content{
text-indent:2em;
font-size:13px;
margin-left:2em;
padding:1em 6px;
}
/*页面连接区域属性*/
#gotop{
width:100%;
margin:0px;
padding:0px;
background:#fff;
height:2em;
font-size:12px;
text-align:right;
}
/*底部布局
----------------------*/
/*页脚装修图*/
#footer{
clear:both;
width:776px;
margin-right:auto;
margin-left:auto;
padding:0px;
background:url(images/bg_bottom.gif) #fff repeat left top;
text-align:center;
height:39px;
color:#ddd;
}
/*版权信息*/
#copyright{
width:776px;
margin-right:auto;
margin-left:auto;
padding:5px 0px 0px 0px;
background:url(images/bg_bottom.gif) #fff;
text-align:center;
height:60px;
line-height:13px;
font-size:12px;
color:#93A0BB;
}
/*圆角特效
----------------------*/
.box{background:url(images/nt.gif) repeat;}
.tl{background:url(images/tl.gif) no-repeat top left;}
.tr{background:url(images/tr.gif) no-repeat top right;}
.bl{background:url(images/bl.gif) no-repeat bottom left;}
.br{background:url(images/br.gif) no-repeat bottom right;}
(9) 按Ctrl+S保存文档，而后在浏览器中再次预览页面，则能够看到最终效果。images文件夹下的gif删除了，因此展现不全，不过大部分都出来了，就懒得从新去把图片找出来了。
- 1. CSS继承和层叠性
- 2. CSS初学笔记：css的继承性和层叠性
- 3. 07-css的继承性和层叠性
- 4. css的继承、层叠和特殊性
- 5. CSS 继承与层叠
- 6. CSS层叠和继承
- 7. css的继承和层叠
- 8. CSS笔记-1-继承/层叠/特殊性
- 9. CSS 三大特性：继承性，层叠性，优先性
- 10. 解释CSS三大特性—继承性、层叠性、优先级
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • CSS 指南 - 网站建设指南
- • Kotlin学习（一）基本语法
- • Tomcat学习笔记（史上最全tomcat学习笔记）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS继承和层叠性
- 2. CSS初学笔记：css的继承性和层叠性
- 3. 07-css的继承性和层叠性
- 4. css的继承、层叠和特殊性
- 5. CSS 继承与层叠
- 6. CSS层叠和继承
- 7. css的继承和层叠
- 8. CSS笔记-1-继承/层叠/特殊性
- 9. CSS 三大特性：继承性，层叠性，优先性
- 10. 解释CSS三大特性—继承性、层叠性、优先级