一、概念
CSS(Cascading Style Sheets，层叠样式表) 可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，就是可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。而CSS可以分别为网页的各个层次设置样式。
书写的位置：
1、内联样式：可以将css样式表书写到元素(标签)的style属性中，只对当前标签中的内容起作用，不方便复用。属于结构与表现耦合，不推荐使用。
2、内部样式：可以将css样式编写的head中style标签中，然后通过css选择器选中指定的元素，然后可以同时为这些元素设置同样的样式，提高样式的复用性。
3、外部样式：可以将css样式表编写到外部的css文件，然后通过link标签引入外部的css文件到当前的HTML文件中，最大限度提高复用性，利用浏览器缓存，加快用户
的访问速度，提升用户体验。开发中推荐使用外部样式。
语法：选择器，通过选择器可以选择页面中的指定标签，并且将声明块的样式应用到对应的标签中。
声明块，紧跟选择器的后边，使用大括号括起来，声明块中就是一组名值对结构，这一组一组名值对称为声明。一个声明块中可写多种声明，中间用分号隔开。声明的
样式名和样式值使用冒号连接。
IDE（Integrated Development Environment，集成开发工具）：Hbuilder ,Alt+/ 代码提示 Ctrl+enter 换行 Ctrl+d 删除当前行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css基础</title> <!--一2、内部样式：将css样式设置到head标签中，可以同时给这些元素设置同样的样式，提高复用性。-->
<style type="text/css"> /*这里边写的全是css的代码，不能出现HTML的代码*/
p{/*表示给body中的所有p标签设置这种样式*/
color: greenyellow;
font-size:20px ;
}
</style> <!-- 一3、外部样式：引入外部的css文件中,按照代码的执行顺序这里把上边的样式给替代了-->
<link rel="stylesheet" type="text/css" href="../css/04-01 外部样式.css"/> </head>
<body>
<!--一 1、内联样式：标签内部的style属性，只对当前标签起作用
这里虽然在上边设置了样式，但是这里对他个性化设置，按照代码执行顺序，使用个性设置
-->
<p style="color: red; font-size:30px ;"> 锦瑟无端五十弦，一弦一柱思华年。</p> <p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。 </p>
<p>沧海月明珠有泪，蓝田日暖玉生烟。</p>
<p>此情可待成追忆？只是当时已惘然。</p> </body>
</html>
二、块元素(块标签)
就是可以独占一行的标签，不管它内容多少，宽度多窄，它都独占一行。
1、div元素：这个标签没有任何语义，就是个纯粹的块元素，它不会为它里边的元素设置任何默认的样式，主要用来对网页进行布局的。可以表示一块区域。
2、p元素：
3、h1-h6元素
4、hr 和 br 元素
三、内联元素(内联标签，行内标签)
所谓内联元素，指的是只占自身大小的元素，不会独占一行。
1、span元素：没有任何语义，专门用来选择一段文字，为它设置样式。英文：范围的意思
2、a元素、img元素、iframe元素：
区别：块元素用来做页面的布局，内联元素主要用来选中文本为它设置样式。一般只使用块元素去包含内联元素，不会用内联去包含块元素。
但是a元素可以包含任何元素除了a元素，即a元素不能包含a元素。
p元素不能包含其他任何的块元素，尽管它是个块元素。
四、常用的选择器
1、元素选择器：通过元素选择器选中页面中所有的指定元素 语法：元素名{ ....}
2、id选择器：通过元素的id值选择到唯一的一个元素。语法：#id号{.....}
3、类选择器：通过元素的class值选择一组元素，可以同时为一个元素设置多个class值，中间用空格隔开。语法： .class值{......}
4、分组选择器(并集选择器)：通过分组选择器同时选择多种选择器对应的元素。语法：选择器1，选择器2....{.....} 中间逗号隔开
5、通配选择器：选择页面中的所有元素。语法：*{.....}
6、复合选择器(交集选择器)：选中同时满足多个选择器的元素。 语法：选择器1选择器2..{....} 中间无空格。id选择器不建议是复合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的选择器</title>
<style type="text/css">
/*四 1、元素选择器 */
p{
color: goldenrod;
}
h3{
color: red;
}
/*四2、id选择器*/
#p3{
color: green;
}
/*四3、类选择器 class
* class属性和ids属性类似，可以同时给多个同一种元素设置样式
class值可以相同，id值不能相同。 * */
.p1{
color: blue;
}
.p2{
font-size:30px ;
}
/*四4、分组选择器(并集选择器)*/
.p1,h3{
background: darkgrey;
}
/*四5、通配选择器*/
*{
font-size: 35px;
}
/*四6、复合选择器*/
span.p4{
background:gold ;
}
</style>
</head>
<body>
<h3>锦瑟</h3>
<p class="p1">锦瑟无端五十弦，一弦一柱思华年。</p>
<p class="p1 p2">庄生晓梦迷蝴蝶，望帝春心托杜鹃。 </p>
<p id="p3">沧海月明珠有泪，蓝田日暖玉生烟。</p>
<p class="p4">此情可待成追忆？只是当时已惘然。</p>
<span class="p4"> 《锦瑟》是唐代诗人李商隐的代表作之一。诗题“锦瑟”，但并非咏物，
不过是按古诗的惯例以篇首二字为题，实是借瑟以隐题的一首无题诗。
</span>
</body>
</html>
五、元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接(如：父亲元素)或间接(如：爷爷元素往上)包含后代的元素。
后代元素：直接(如：子元素)或间接(如：孙子辈元素往下)被祖先元素包含的元素。
兄弟元素：拥有相同父元素的元素叫(亲)兄弟元素。
7（上接 四1-6）、后代元素选择器：选中我们指定元素的指定后代元素。语法：祖先元素 后代元素 {.....}。中间是空格
8、子元素选择器：选中父元素的指定子元素。 语法：父元素 > 子元素{....} 。中间是空格，大于号，空格。IE6及以下的浏览器不兼容这种选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素之间的关系</title>
<style type="text/css">
/*后代元素选择器*/
div span{ /*包括子元素span和后代元素span。例子中2个div如果没有id号，2个div都会选中*/
color: red;
}
#d2 span{ /*给祖先元素加id*/
color: green;
}
div > span{ /*没有指定id的情况*/
background-color: yellow;
} #d2 > span { /*指定id的情况*/
background-color: blue;
} </style>
</head> <body>
<div id="d1">
<p> <span > 我是第1个div中p标签中的span标签，是div的孙子，p的儿子 </span> </p>
<span> 我是第1个div中的span标签，是div的儿子</span>
</div>
<div id="d2">
<span> 我是第2个div元素中的span元素，是div的儿子 </span>
</div> <span>
我是body中的span元素，与div平辈
</span> </body>
</html>
9、伪类选择器：
专门用来表示元素的一种特殊的状态。比如，访问过的超链接、普通的超链接、获取焦点的文本框当。我们需要为这些处于特殊状态的元素设置样式时
就可以使用伪类。
定义链接的访问状态： a：link 正常链接（没访问过的链接）；
a：visited 访问过的链接； 浏览器是根据历史记录看网站是否访问过，由于涉及用户隐私，所以此设置只能设置字体的颜色。
a：hover 鼠标滑过的链接； 它和active不仅能设置超链接也可以设置其他标签，如p标签。（但IE6不支持，其他可以）
a：active 正在点击的链接：
其他状态：标签名：focus ，获取焦点，指当鼠标在文本框中时。失去焦点，指鼠标在文本框之外。格式：标签名 冒号 focus{.....} (IE6不支持)
标签名：：selection，选中的元素 。中间2个冒号。但是在火狐中需要这样写， 标签：：-moz-selection{.....}否则用不了。如果要兼容，要写2个。
10、伪元素选择器
标签名：first-letter{......} 给标签中第一个字符设置样式
标签名：first-line{......} 给标签中的第一行(是网页显示时的第1行，网页变大变小，第1行的内容也会改变)设置样式
标签名： before，指定元素之前 <p>你好呀</p> 指的是开始标签右边的尖括号“>” 和 “你”之间的位置。一般before需要结合content这个样式一起使用，通过
content可以向before或after的位置添加一些内容。
标签名：after，指定元素后之后。结束标签右边的">"之后的位置。他们都不能选中。
【代码示例】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<!-- 9、伪类选择器：就是表示一种特殊的状态
-->
<style type="text/css">
a:link{ /*正常链接； */
color: yellowgreen;
}
a:visited{/*访问过的链接；*/
color: red;
}
a:hover{/*鼠标滑过的链接；*/
color: blue;
}
a:active{/*正在点击的链接,鼠标别松手*/
color: black;
}
input:focus{/*当文本框获取焦点时，改变文本框的颜色为黄色*/
background: yellow;
}
p::selection{/*为p标签中鼠标选中的文字设置样式*/
color: blue;
} p:first-letter{/*10、伪元素选择器*/
color: blue;
font-size:25px ;
}
p:before{
content: "悯农";
}
P:after{
content: "沙雕";
color: orange;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a> <br />
<a href="http://www.iqiyi.com/">没访问过的链接</a> <br />
用户名：<input type="text" name="" id="" value="" />
<p>锄禾日当午，汗滴禾下土。</p> </body>
</html>
11、子元素的伪类选择器（child是在所有子元素中排，大排行,如所有子女一起排（大姐、二 哥、三姐）；type是在当前类型中排，小排行，如男的排男的(大儿子、
二儿子)，女的排女的（大女儿、二女儿））
first-child：可以选中第一子元素；
last-child：可以选中最后一个子元素；
nth-child(m)：可以选中任意位置的子元素；n就是第n个的意思，m是自定义选中的行。
first-of-type ：选中指定类型的第一个
last-of-type：选中指定类型的最后一个
nth-of-type：选中指定类型的第n个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素的伪类选择器</title>
<style type="text/css">
p:first-child{/*first-child：选中第一个子元素，为第一个p标签设置样式
这句话的意思，既要符合p标签又要是父元素第一个子元素(p是body的子元素)
如果把p标签去掉，则就是默认的是* 选中一个子元素即可
如果要指定子元素需要：
body > p:first-child{
.....
}表示选中body的第一个p标签子元素 * */
color: blue;
}
div > p:last-child{/*表示给div中最后一个子元素设置样式*/
color: yellow;
}
body >p:nth-child(3){/*自定义位置，意思是把3换成1根first-child相同
括号中可以设置为 even：表示选中偶数行
odd:表示选中奇数行
表格中隔行变色可以用
* */
background: yellowgreen;
}
div >p:nth-child(2){
background: green;
}
</style>
</head>
<body>
<!--如果这行加个p之外的标签，则上述设置不会生效，因为不是p标签。下一行也不会生效因为不是不是第一个子元素-->
<p>一别都门三改火，天涯踏尽红尘。</p> <!--这行即使p标签又是body的第一个子元素-->
<p>依然一笑作春温。无波真古井，有节是秋筠。</p>
<p>惆怅孤帆连夜发，送行淡月微云。</p>
<p>尊前不用翠眉颦。人生如逆旅，我亦是行人。</p> <div> <p> 苏轼，北宋词人</p><!--这行也会生效，因为他2项符合条件都符合 p是div的子元素-->
<p>这首词是公元1091年（宋哲宗元祐六年）苏轼知杭州时</p>
<p>为送别自越州（今浙江绍兴）北徙途经杭州的老友钱穆父而作</p>
</div> <span> </span> </body>
</html>
12、兄弟元素选择器
后一个兄弟选择器：可以选中一个元素后边紧挨着的一个兄弟元素。语法：前一个元素(哥哥)+紧挨的后一个元素(弟弟){.......}，中间是空格加号空格
所有兄弟元素选择器：可以选中一个元素后边的所有兄弟。语法：前一个元素 ~ 后边元素{.....}，中间是空格波浪号空格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兄弟元素选择器</title>
<style type="text/css">
/*后一个兄弟元素*/
span + p{
color: blue;
}
/*所有兄弟选择器*/
div ~ p{
color: cyan;
}
</style>
</head>
<body>
<span>白居易的诗词</span>
<p> 绿蚁新醅酒，红泥小火炉。</p> <!--span+p 这行会生效-->
<p> 晚来天欲雪，能饮一杯无？</p> <span>苏轼的诗词 </span>
<p>寒食后，酒醒却咨嗟。</p><!--span+p 这行也会生效-->
<p>休对故人思故国，且将新火试新茶。诗酒趁年华。</p> <div id=""> 李清照的诗词改编</div>
<p> 一朝花开傍柳, 寻香误觅亭侯。</p><!--这2行都会生效-->
<p> 纵饮朝霞半日晖, 风雨着不透。</p>
</body>
</html>
13、否定伪类选择器
可以从已经选中的元素中剔除某些元素。语法： 标签：not(选择器){........}，中间只有冒号，没有空格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>否定伪类选择器</title>
<style type="text/css">
/*否定伪类选择器*/
p:not(.p5){
color: blue;
}
</style>
</head>
<body>
<p>一朝花开傍柳, 寻香误觅亭侯。</p>
<p>纵饮朝霞半日晖, 风雨着不透。</p>
<p class="p5">一任宫长骁瘦, 台高冰泪难流。</p>
<p>锦书送罢蓦回首, 无余岁可偷。</p> </body>
</html>
六、样式的继承（儿子可以继承父亲的遗产，在css中祖先元素的样式也可以被后代元素继承）
利用继承可以把一些基本样式设置给祖先元素或父元素，这样所有的后代元素会自动继承这些样式，但是并不是所有样式都会被子元素继承。比如所有背景相关的样式，
如背景颜色。实际中p标签的默认背景颜色是透明的，如果在父标签中设置个颜色，比如黄色，则颜色可以透过来，网页也会显现出黄色，但是原理是颜色透过来，而不是被继承
过来的。所有背景相关的样式都不能被继承，切记！ 边框相关的样式、定位相关的样式都不会被继承。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式的继承</title>
<style type="text/css"> </style>
</head>
<body>
<p style="font-size: 25px;"> <!--所有p元素中的都会生效,包括span.这就是继承-->
我是p标签 <br />
<span>我是p标签的儿子span标签</span>
</p>
<span>我是与p标签平辈的span</span>
</body>
</html>
七、选择器的优先级
当使用不同的选择器选中同一个元素时，并且相同的样式时（如都设置背景颜色），这时样式之间产生冲突，由选择器的优先级决定，高的优先显示。
优先级规则：内联样式 优先级：1000；
id选择器 优先级：100；
类和伪类选择器 优先级：10；
元素选择器 优先级：1
通配选择器 优先级：0
继承的样式 优先级： 没有优先级
【注意】1、样式越具体，优先级越高。
2、 当选择器中有多个优先级时，需要将多个优先级的权重加起来比较 ，然后设置样式。选择器的累加计算不会超过它的最大数量级。
3、选择器的优先级的权重一样时，则使用靠后的样式。
4、并集选择器的是单独计算的。
5、可以在样式的最后加个！important 表示优先级最高，比内联样式都高。在开发中尽量避免使用important。
【引申】a的伪类选择器，优先级的是一样的。所以写的顺序就是下边的顺序，比较好。L-V-H-A
a：link；未访问过的链接状态。link和visited没有顺序要求。
a：visited；访问过的链接状态。但是把link和visited写在hover和active的下边，hover和active等于无效代码
a：hover；鼠标滑过的链接状态。不能写在active下边，否则设置无效。他们优先级一样，执行下边的，写在下边，hover等于无效代码。
a：active；鼠标点击的链接状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style type="text/css">
.p3{/*类选择器 10*/
color: red;
}
p{/*元素选择器 1 */
color: blue;
}
#d3{/*id选择器 100*/
color:greenyellow; /*color:greenyellow !important 优先级比内联样式都高*/
}
/*a伪类选择器*/
a:link{
color: yellowgreen;
}
a:visited{
color: blue;
}
a:hover{
color: orange;
}
a:active{
color: green;
}
</style>
</head>
<body>
<p>一朝花开傍柳, 寻香误觅亭侯。</p>
<p>纵饮朝霞半日晖, 风雨着不透。</p>
<!--style="color: grey; 是内联样式 优先级1000-->
<p class="p3" id="d3" style="color: grey;">一任宫长骁瘦, 台高冰泪难流。</p>
<p >锦书送罢蓦回首, 无余岁可偷。</p>
<p>昨夜雨疏风骤 浓睡不消残酒</p>
<p>试问卷帘人 却道海棠依旧</p>
<p>知否 知否 应是绿肥红瘦</p> <a href="http://www.baidu.com">访问过的链接:百度</a> <br />
<a href="http://www.iqiyi.com/">没访问过的链接：爱奇艺</a> <br /> </body>
</html>
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器的更多相关文章
-
[19/06/09-星期日] CSS基础_示例
一.图片格式&Hack(尽量不要使用) IE6对图片png-24的透明效果不支持,IE6中背景会发灰,可以使用png-8来代替.但是使用png-8代替之后清晰度会有所下降. 使用js来解决该问 ...
-
[19/06/08-星期六] CSS基础_表格&;表单
一.表格 如生活中的Excel表格,用途就是同来表示一些格式化的数据,如课程表.工资条.成绩单. 在网页中也可以创建出不同的表格,在HTML中使用table标签来创建一个表格.table是个块元素. ...
-
CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
-
web前端篇：CSS使用，样式表特征，选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
-
CSS重构：样式表性能调优
这两天窝在家里又看了本CSS相关的书:<CSS重构:样式表性能调优>.重构是指在不改变代码行为的前提下,重写代码,使其更加简洁.易于复用. 这本书读起来比较快,可挑自己感兴趣的读,前面三章 ...
-
css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
-
[19/06/07-星期五] CSS基础_布局&;定位&;背景样式
一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
-
[19/06/06-星期四] CSS基础_盒子模型
一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
-
css基础：样式属性
1.背景与前景:background-color::背景色,样式表优先级高. background-image:url(路径):设置背景图片 background-attachment:fixed:背 ...
随机推荐
-
NDK编译FreeImage
参考了 以下2篇文章 并作了一小点修改 http://recursify.com/blog/2013/05/25/building-freeimage-for-android http://blog. ...
-
linux stat命令
在Linux中,文件没有“创建时间”这个说法.Linux中的文件的时间属性只有三个:atime(Access time).mtime(Modified time).ctime(Change time) ...
-
洛谷 P2325 [SCOI2005]王室联邦
简化版题意: 一个国家由\(n\)个城市组成一颗树,要将其划分为\(n\)个省 每个城市大小为\([B,3B]\),每个省有一个省会(不一定要在省内),使得每个省的所有城市到省会的路径上不能经过其他省 ...
-
[MySQL] mysql 的行级显式锁定和悲观锁
隐式和显式锁定:1.innodb是两阶段锁定协议,隐式锁定比如在事务的执行过程中.会进行锁定,锁只有在commit或rollback的时候,才会同时被释放2.特定的语句进行显式锁定 select .. ...
-
BundleConfig某js文件 全部打包
var server = HttpContext.Current.Server; var jsFiles = System.IO.Directory.GetFiles(server.MapPath(& ...
-
SAP MM 物料主数据采购视图中的字段&#39;Var. OUn&#39;的作用？
SAP MM 物料主数据采购视图中的字段'Var. OUn'的作用? 物料主数据采购视图里有一个字段,叫做'Var. OUn'的, 如下图: 这个字段,笔者之前所参与的项目里,从来没有用过.所以,笔者 ...
-
Elasticsearch&#160;alias别名管理小结
Elasticsearch alias别名管理小结 By:授客 QQ:1033553122 建创测试数据 1 创建别名 2 移除别名 3 创建测试数据 4 批量操作 5 例1. 5 例2. 把多个索引 ...
-
maven仓库设置
Maven *仓库地址: 1.http://www.sonatype.org/nexus/ 私服nexus工具使用 2.http://mvnrepository.com/ 3.http://repo ...
-
Appium1.9.1 部署及结果检验
1.官网下载最新的 appium 2.点击 Download Appium 3.选择适用于自己操作系统的版本,我的是 windows版本,就选择如下红圈起的 4.点击安装,一直点 下一步 直到提示安装 ...
-
《Java面向对象编程》
<Java面向对象编程> 第11章 对象的生命周期 11.1 创建对象的方式 用new语句创建对象 运用反射手段,调用java.lang.Class 或者 java.lang.Const ...