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

时间 2019-11-16

标签星期三 css 基础样式位置内联内部外部元素 div span 经常使用选择器栏目 CSS 繁體版

原文原文链接

1、概念css

　　CSS(Cascading Style Sheets，层叠样式表) 能够用来为网页建立样式表，经过样式表能够对网页进行装饰。html

所谓层叠，就是能够将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。而CSS能够分别为网页的各个层次设置样式。浏览器

书写的位置：缓存

一、内联样式：能够将css样式表书写到元素(标签)的style属性中，只对当前标签中的内容起做用，不方便复用。属于结构与表现耦合，不推荐使用。工具

二、内部样式：能够将css样式编写的head中style标签中，而后经过css选择器选中指定的元素，而后能够同时为这些元素设置一样的样式，提升样式的复用性。布局

三、外部样式：能够将css样式表编写到外部的css文件，而后经过link标签引入外部的css文件到当前的HTML文件中，最大限度提升复用性，利用浏览器缓存，加快用户开发工具

　　　　　　的访问速度，提高用户体验。开发中推荐使用外部样式。字体

语法：选择器，经过选择器能够选择页面中的指定标签，而且将声明块的样式应用到对应的标签中。网站

　　　声明块，紧跟选择器的后边，使用大括号括起来，声明块中就是一组名值对结构，这一组一组名值对称为声明。一个声明块中可写多种声明，中间用分号隔开。声明的ui

　　　　　　　样式名和样式值使用冒号链接。

IDE（Integrated Development Environment，集成开发工具）：Hbuilder ,Alt+/ 代码提示 Ctrl+enter 换行 Ctrl+d 删除当前行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css基础</title>
        
        <!--一二、内部样式：将css样式设置到head标签中，能够同时给这些元素设置一样的样式，提升复用性。-->
        <style type="text/css"> /*这里边写的全是css的代码，不能出现HTML的代码*/
            p{/*表示给body中的全部p标签设置这种样式*/
                color: greenyellow;
                font-size:20px ;
            }
        </style>
        
        <!-- 一三、外部样式：引入外部的css文件中,按照代码的执行顺序这里把上边的样式给替代了-->
        <link rel="stylesheet" type="text/css" href="../css/04-01 外部样式.css"/>
        
        
    </head>
    <body>
        <!--一 一、内联样式：标签内部的style属性，只对当前标签起做用
            这里虽然在上边设置了样式，可是这里对他个性化设置，按照代码执行顺序，使用个性设置
        -->
        <p style="color: red; font-size:30px ;"> 锦瑟无故五十弦，一弦一柱思华年。</p>
        
        <p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。 </p>
        <p>沧海月明珠有泪，蓝田日暖玉生烟。</p>
        <p>此情可待成追忆？只是当时已惘然。</p>


    </body>
</html>

2、块元素(块标签)

　　就是能够独占一行的标签，无论它内容多少，宽度多窄，它都独占一行。

　　一、div元素：这个标签没有任何语义，就是个纯粹的块元素，它不会为它里边的元素设置任何默认的样式，主要用来对网页进行布局的。能够表示一块区域。

　　二、p元素：

　　三、h1-h6元素

　　四、hr 和 br 元素

3、内联元素(内联标签，行内标签)

　　所谓内联元素，指的是只占自身大小的元素，不会独占一行。

　　一、span元素：没有任何语义，专门用来选择一段文字，为它设置样式。英文：范围的意思

　　二、a元素、img元素、iframe元素：

区别：块元素用来作页面的布局，内联元素主要用来选中文本为它设置样式。通常只使用块元素去包含内联元素，不会用内联去包含块元素。

　　　　可是a元素能够包含任何元素除了a元素，即a元素不能包含a元素。

　　　　p元素不能包含其余任何的块元素，尽管它是个块元素。　

4、经常使用的选择器

　　一、元素选择器：经过元素选择器选中页面中全部的指定元素语法：元素名{ ....}

　　二、id选择器：经过元素的id值选择到惟一的一个元素。语法：#id号{.....}

　　三、类选择器：经过元素的class值选择一组元素，能够同时为一个元素设置多个class值，中间用空格隔开。语法： .class值{......}

　　四、分组选择器(并集选择器)：经过分组选择器同时选择多种选择器对应的元素。语法：选择器1，选择器2....{.....} 中间逗号隔开

　　五、通配选择器：选择页面中的全部元素。语法：*{.....}

　　六、复合选择器(交集选择器)：选中同时知足多个选择器的元素。语法：选择器1选择器2..{....} 中间无空格。id选择器不建议是复合选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>经常使用的选择器</title>
        <style type="text/css">
            /*四 一、元素选择器  */
            p{
                color: goldenrod;
            }
            h3{
                color: red;
            }
            /*四二、id选择器*/
            #p3{
                color: green;
            }
            /*四三、类选择器 class
             * class属性和ids属性相似，能够同时给多个同一种元素设置样式
               class值能够相同，id值不能相同。
               
             * */
            .p1{
                color: blue;
            }
            .p2{
                font-size:30px ;
            }
            /*四四、分组选择器(并集选择器)*/
            .p1,h3{
                background: darkgrey;
            }
            /*四五、通配选择器*/
            *{
                font-size: 35px;
            }
            /*四六、复合选择器*/
            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>

5、元素之间的关系

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

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

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

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

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

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

　　八、子元素选择器：选中父元素的指定子元素。语法：父元素 > 子元素{....} 。中间是空格，大于号，空格。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>

　　九、伪类选择器：

专门用来表示元素的一种特殊的状态。好比，访问过的超连接、普通的超连接、获取焦点的文本框当。咱们须要为这些处于特殊状态的元素设置样式时

就可使用伪类。

定义连接的访问状态： a：link 正常连接（没访问过的连接）；

　　　　　　　　　　 a：visited 访问过的连接；浏览器是根据历史记录看网站是否访问过，因为涉及用户隐私，因此此设置只能设置字体的颜色。

　　　　　　　　　　 a：hover 鼠标滑过的连接；它和active不只能设置超连接也能够设置其余标签，如p标签。（但IE6不支持，其余能够）

　　　　　　　　　　 a：active 正在点击的连接：

其余状态：标签名：focus ，获取焦点，指当鼠标在文本框中时。失去焦点，指鼠标在文本框以外。格式：标签名冒号 focus{.....} (IE6不支持)

　　　　标签名：：selection，选中的元素。中间2个冒号。可是在火狐中须要这样写，标签：：-moz-selection{.....}不然用不了。若是要兼容，要写2个。

　　十、伪元素选择器

　　　　标签名：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>
        <!-- 九、伪类选择器：就是表示一种特殊的状态  
        -->
        <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{/*十、伪元素选择器*/
                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>

　　十一、子元素的伪类选择器（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>

　　十二、兄弟元素选择器

　　后一个兄弟选择器：能够选中一个元素后边紧挨着的一个兄弟元素。语法：前一个元素(哥哥)+紧挨的后一个元素(弟弟){.......}，中间是空格加号空格

　　全部兄弟元素选择器：能够选中一个元素后边的全部兄弟。语法：前一个元素 ~ 后边元素{.....}，中间是空格波浪号空格

<!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>

　　1三、否认伪类选择器

　　能够从已经选中的元素中剔除某些元素。语法：标签：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>

　　6、样式的继承（儿子能够继承父亲的遗产，在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>

　　7、选择器的优先级

　　当使用不一样的选择器选中同一个元素时，而且相同的样式时（如都设置背景颜色），这时样式之间产生冲突，由选择器的优先级决定，高的优先显示。

　　优先级规则：内联样式优先级：1000；

　　　　　　　　id选择器优先级：100；

　　　　　　　　类和伪类选择器优先级：10；

　　　　　　　　元素选择器优先级：1

　　　　　　　　通配选择器优先级：0

　　　　　　　　继承的样式优先级：没有优先级

【注意】一、样式越具体，优先级越高。

　　二、当选择器中有多个优先级时，须要将多个优先级的权重加起来比较，而后设置样式。选择器的累加计算不会超过它的最大数量级。

　　　　三、选择器的优先级的权重同样时，则使用靠后的样式。

　　　　四、并集选择器的是单独计算的。

　　　　五、能够在样式的最后加个！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>