[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...

一、概念

　　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><metacharset="UTF-8"><title>css基础</title><!--一2、内部样式：将css样式设置到head标签中，可以同时给这些元素设置同样的样式，提高复用性。--><styletype="text/css"> /*这里边写的全是css的代码，不能出现HTML的代码*/p{/*表示给body中的所有p标签设置这种样式*/color:greenyellow;font-size:20px;}</style><!--一3、外部样式：引入外部的css文件中,按照代码的执行顺序这里把上边的样式给替代了--><linkrel="stylesheet"type="text/css"href="../css/04-01 外部样式.css"/></head><body><!--一 1、内联样式：标签内部的style属性，只对当前标签起作用这里虽然在上边设置了样式，但是这里对他个性化设置，按照代码执行顺序，使用个性设置--><pstyle="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><metacharset="UTF-8"><title>常用的选择器</title><styletype="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><pclass="p1">锦瑟无端五十弦，一弦一柱思华年。</p>        <pclass="p1 p2">庄生晓梦迷蝴蝶，望帝春心托杜鹃。 </p><pid="p3">沧海月明珠有泪，蓝田日暖玉生烟。</p><pclass="p4">此情可待成追忆？只是当时已惘然。</p><spanclass="p4">《锦瑟》是唐代诗人李商隐的代表作之一。诗题“锦瑟”，但并非咏物，不过是按古诗的惯例以篇首二字为题，实是借瑟以隐题的一首无题诗。</span></body>
</html>

五、元素之间的关系

　　父元素：直接包含子元素的元素

　　子元素：直接被父元素包含的元素

　　祖先元素：直接(如：父亲元素)或间接(如：爷爷元素往上)包含后代的元素。

　　后代元素：直接(如：子元素)或间接(如：孙子辈元素往下)被祖先元素包含的元素。

　兄弟元素：拥有相同父元素的元素叫(亲)兄弟元素。

　　7（上接四1-6）、后代元素选择器：选中我们指定元素的指定后代元素。语法：祖先元素后代元素 {.....}。中间是空格

　　8、子元素选择器：选中父元素的指定子元素。语法：父元素 > 子元素{....} 。中间是空格，大于号，空格。IE6及以下的浏览器不兼容这种选择器

<!DOCTYPE html>
<html><head><metacharset="UTF-8"><title>元素之间的关系</title><styletype="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><divid="d1"><p>  <span> 我是第1个div中p标签中的span标签，是div的孙子，p的儿子 </span> </p><span>    我是第1个div中的span标签，是div的儿子</span>    </div><divid="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><metacharset="UTF-8"><title>伪类选择器</title><!--9、伪类选择器：就是表示一种特殊的状态--><styletype="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><ahref="http://www.baidu.com">访问过的链接</a> <br/><ahref="http://www.iqiyi.com/">没访问过的链接</a> <br/>用户名：<inputtype="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><metacharset="UTF-8"><title>子元素的伪类选择器</title><styletype="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><metacharset="UTF-8"><title>兄弟元素选择器</title><styletype="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><divid=""> 李清照的诗词改编</div><p> 一朝花开傍柳, 寻香误觅亭侯。</p><!--这2行都会生效--><p> 纵饮朝霞半日晖, 风雨着不透。</p></body>
</html>

　　13、否定伪类选择器

　　可以从已经选中的元素中剔除某些元素。语法：标签：not(选择器){........}，中间只有冒号，没有空格

<!DOCTYPE html>
<html><head><metacharset="UTF-8"><title>否定伪类选择器</title><styletype="text/css">/*否定伪类选择器*/p:not(.p5){color:blue;}</style></head><body><p>一朝花开傍柳, 寻香误觅亭侯。</p><p>纵饮朝霞半日晖, 风雨着不透。</p><pclass="p5">一任宫长骁瘦, 台高冰泪难流。</p><p>锦书送罢蓦回首, 无余岁可偷。</p></body>
</html>

　　六、样式的继承（儿子可以继承父亲的遗产，在css中祖先元素的样式也可以被后代元素继承）

　　利用继承可以把一些基本样式设置给祖先元素或父元素，这样所有的后代元素会自动继承这些样式，但是并不是所有样式都会被子元素继承。比如所有背景相关的样式，

如背景颜色。实际中p标签的默认背景颜色是透明的，如果在父标签中设置个颜色，比如黄色，则颜色可以透过来，网页也会显现出黄色，但是原理是颜色透过来，而不是被继承

过来的。所有背景相关的样式都不能被继承，切记！边框相关的样式、定位相关的样式都不会被继承。

<!DOCTYPE html>
<html><head><metacharset="UTF-8"><title>样式的继承</title><styletype="text/css"></style></head><body><pstyle="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><metacharset="UTF-8"><title>选择器的优先级</title><styletype="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--><pclass="p3"id="d3"style="color: grey;">一任宫长骁瘦, 台高冰泪难流。</p><p>锦书送罢蓦回首, 无余岁可偷。</p><p>昨夜雨疏风骤 浓睡不消残酒</p><p>试问卷帘人 却道海棠依旧</p><p>知否 知否 应是绿肥红瘦</p><ahref="http://www.baidu.com">访问过的链接:百度</a> <br/><ahref="http://www.iqiyi.com/">没访问过的链接：爱奇艺</a> <br/></body>
</html>

转载于:https://www.cnblogs.com/ID-qingxin/p/10975571.html

[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...相关推荐

css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
CSS三种样式表：行内样式表、内部样式表、外部样式表
目录一.CSS三种样式表 1.内部样式表 2.行内式(内联样式) 3.外部样式表(外链式) 二.三种样式表的对比三.CSS样式表规则一.CSS三种样式表 1.内部样式表 2.行内样式表(内联式) ...
CSS三种样式表内部样式表、行内部样式表、外部引用
目录 CSS三种样式表 1.内部样式表 2.行内部样式表 3.外部引用: CSS三种样式表 1.内部样式表 2.行内样式表(内联式) 3.外部样式表(外链式) 1.内部样式表内嵌式:将CSS代码集中 ...
CSS三种样式表（内部样式表、行内样式表、外部样式表）
引入CSS样式表(书写位置) CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表(内嵌式) 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义 ...
CSS叠层样式表（一）
CSS叠层样式表(一) 如何使用css 选择器如何使用css 如何在HTML页面中添加CSS: 使用style属性:在元素中直接指定CSS样式,可以使用style属性来定义,称为内联样式. < ...
CSS叠层样式表（三）
CSS叠层样式表(三) 文档流 display和visibility属性定位浮动背景文档流 display和visibility属性 display属性定义了元素的基本显示方式,它的常用值包括 ...
[19/06/07-星期五] CSS基础_布局定位背景样式
一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
CSS基础_CSS样式的几种书写形式
1.内嵌式将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head> <style type="text/CSS& ...
CSS基础（样式声明、引用（行内样式、内部样式、外部样式、导入样式）、样式优先级）
目录什么是CSS 为什么使用css css样式规则 css引用(行内.内部.外部link链入.导入式@import) css三种使用方法的区别 ***网页三大元素*** ***什么是CSS*** ...

[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...

[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...相关推荐

最新文章

热门文章