前端（CSS 1）

2018-08-07  本文已影响0人  埃菲尔上的铁塔梦i

CSS 层叠样式表 (Cascading Style Sheets)

1、CSS的语法：

CSS的注释是/*.....*/，作用和HTML注释类似，只不过它必须编写在style标签中，或者是CSS文件中
        CSS的语法：
                选择器 声明块
                选择器：
                    - 通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
                声明块：
                    - 声明块紧跟在选择器的后边，使用一对{}括起来
                    - 声明块中实际上就是一组一组的名值对结构
                    - 这一组一组的名值对我们称为声明
                    - 在一个声明块中可以写多个声明，多个声明之间使用;隔开
                    - 声明的样式名和样式值之间使用:来连接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS语法</title>
        <style type="text/css">
            
            p{
                color:red;
                font-size:40px;
            }
        </style>
    </head>
    <body>
        <p>今天天气真不错，PM2.5也就500</p>
    </body>
</html>

2、CSS开发工具

行内样式:
              <p style="color: red;font-size: 30px"></p>
内部样式表:
                <style>
                           p{color:red; font-size: 30px;}
                <style>
外部样式表:
          <link rel="stylesheet" type="text/css"href="style.css">

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    
    <!--<style type="text/css">
        h1{
            color: purple;
        }
    </style>-->
    
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    
</head>
<body>
    <h1>这是一个非常漂亮的网页</h1>
    <h2>你看我出不出来</h2>
    <h2>你看我出不出来</h2>
    <h2>你看我出不出来</h2>
    <h2>你看我出不出来</h2>
    <h2>你看我出不出来</h2>
    <h2>你看我出不出来</h2>
    <h2>你看我出不出来</h2>
    <h2>你看我出不出来</h2>
</body>
</html>

3、块元素和内联元素

          块元素:
            所谓的块元素就是会独占一行的元素
            无论它的内容有多少，它都会独占一整行
            常见的块元素：div p h1 h2 h3……
            div这个标签没有任何语义，就是一个纯粹的块元素
            并且不会为它里边的元素设置任何的默认样式
            div元素主要用来对页面进行布局的
        内联元素:（行内元素）
            所谓的行内元素指的是只占自身大小的元素，不会占用一行
            常见的内联元素：span a img iframe
            span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式
        块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
            一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
            a元素可以包含任意元素，除了他本身
            p元素不可以包含任何其它的块元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>块和内联</title>
    
</head>
<body>
    
    <p><div>我是一个span</div></p>

    <a href="#"><a href="#">我是一个超链接</a></a>

    <a href="#">
        <div style="background-color: red; width: 200px;">
            我是一个div
        </div>
    </a>
    <div style="background-color: yellow; width: 200px;">
        我是一个div
    </div>

    <p>我是一个p标签</p>
    <p>我是一个p标签</p>

    <hr />

    <span>我是一个span</span>
    <span>我是一个span</span>

    <span style="color: red;">我是一段文字</span>
</body>
</html>

4、常用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用选择器</title>
    <style type="text/css">
        /*为页面中的所有的p元素，设置一个字体颜色为红色*/
        /*
            元素选择器
                作用：通过元素选择器可以选择页面中的所有指定元素
                语法：标签名{}
        */
        /*p{
            color: red;
        }
        h1{
            color: red;
        }*/

        /*
            id选择器
                作用：通过元素的id属性值选中唯一的一个元素
                语法：#id属性值{}
        */
        /*#p1{
            font-size: 20px;
        }*/

        /*
            类选择器
                作用：通过元素的class属性值选中一组元素
                语法：.class属性值{}
        */
        /*.p2{
            color: red;
        }
        .hello{
            font-size: 50px;
        }*/

        /*为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色*/
        /*
            选择器分组（并集选择器）
                作用：通过选择器分组可以同时选中多个选择器对应的元素
                语法：选择器1,选择器2,选择器N{}
        */
        /*#p1,.p2,h1{
            background-color: yellow;
        }*/

        /*
            通配选择器
                作用：可以用来选中页面中的所有的元素
                语法：*{}
        */
        /**{
            color: red;
        }*/

        /*为拥有class为p3的span元素设置一个背景颜色为黄色*/
        /*
            复合选择器（交集选择器）
                作用：可以选中同时满足多个选择器的元素
                语法：选择器1选择器2选择器N{}
        */
        span.p3{
            background-color: yellow;
        }
        /*
        对于id选择器来说，不建议使用复合选择器
        p#p1{
            background-color: red;
        }
        */
    </style>
</head>
<body>
    <h1>悯农</h1>
    <p>床前明月光</p>
    <p>床前明月光</p>
    <p id="p1">床前明月光</p>
    <!-- 
        我们可以为元素设置class属性
        它和id属性类似，只不过class属性可以重复
        拥有相同class属性值的元素，我们说他们是一组元素
        可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
     -->
    <p class="p2 hello">床前明月光</p>
    <p class="p2">床前明月光</p>
    <p class="p2">床前明月光</p>
    <p>床前明月光</p>

    <p class="p3">床前明月光</p>
    <span class="p3">疑是地上霜</span>
</body>
</html>

5、子元素和后代元素选择器

子元素选择器:
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器

:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素

元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素和后代元素选择器</title>
    <style type="text/css">
        /*为div中的span设置一个颜色为绿色*/
        /*
            后代元素选择器
                作用：选中指定元素的指定后代元素
                语法：祖先元素 后代元素{}
        */
        #d1 span{
            color: greenyellow;
        }

        /*选中id为d1的div中的p元素中的span元素*/
        #d1 p span{
            font-size: 50px;
        }

        /*为div的子元素span设置一个背景颜色为黄色*/
        /*
            子元素选择器
                作用：选中指定父元素的指定子元素
                语法：父元素 > 子元素
            IE6及以下的浏览器不支持子元素选择器
        */
        div > span{
            background-color: yellow;
        }
    </style>
</head>
<body>
    
    <div id="d1">
        <span>我是div标签中的span</span>
        <p><span>我是p标签中的span</span></p>
    </div>
    <div>
        <span>我是body标签中的span</span>
    </div>
</body>
</html>

6、伪类和伪元素

正常链接
a:link
访问过的链接
a:visited（只能定义字体颜色）
鼠标滑过的链接
a:hover
正在点击的链接
a:active

获取焦点
:focus
指定元素前
:before
指定元素后
:after
选中的元素
::selection

首字母
:first-letter
首行
:first-line

7、属性选择器

[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        
        p[title*="c"]{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 
        title属性，这个属性可以给任何标签指定
        当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
     -->
    <p title="hello">我是一个段落</p>
    <p>我是一个段落</p>
    <p title="abbc">我是一个段落</p>
    <p title="abccd">我是一个段落</p>
    <p title="abc">我是一个段落</p>
</body>
</html>

8、兄弟元素选择器

除了根据祖先父子关系，还可以根据兄弟 关系查找元素。
语法:
查找后边一个兄弟元素
兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟元素选择器</title>
    <style type="text/css">
        
        /*
        选中后边的所有兄弟元素
            语法：前一个 ~ 后边所有
        */
        span ~ p{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <span>我是一个span</span>
    <div>我是div</div>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
</body>
</html>

9、否定伪类：

作用：可以从已选中的元素中剔除出某些元素
语法：
:not(选择器)

10、样式继承

像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式
但是，并不是所有的样式都会被子元素所继承，比如：背景、边框、定位相关的样式都不会被继承

11、选择器的优先级:

内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配*，优先级0
继承的样式，没有优先级

12、伪类的优先级:

涉及到a的伪类一共有四个
:link
:visited
:hover
:active
而这四个选择器的优先级是一样的,一定要按照顺序来写

练习：

第一题：plate（plate元素）
第二题：bento（bento元素）
第三题：fancy（id为fancy的元素）
第四题：plate apple（plate祖先元素下的apple后代元素）
第五题：#fancy pickle （id为#fancy的祖先元素下的pickle后代元素）
第六题：.small（组为small的元素）
第七题：orange small （组为small的orange元素）
第八题：bento orange.small（bento父元素下的组为small的orange子元素）
第九题：plate,bento,div （plate,bento兄弟元素在div元素中）
第十题：*（代表所有元素）
第十一题：plate> （plate父元素的所有子元素）
第十二题：plate+apple （兄弟元素选择器，plate元素的后一个元素）
第十三题：bento~pickle （兄弟元素选择器,bento元素后的多个pickle元素)
第十四题：plate>apple (plate父元素下的apple子元素)
第十五题：orange:first-child(子元素选择器，plate元素下的第一个orange元素)
第十六题：plate :only-child （所有plate元素下的元素）
第十七题：#fancy :last-child,pickle:last-child（id为fancy的元素的最后一个和pickle元素的最后一个）
第十八题：plate:nth-child(3)（div元素中的第三个plate元素）
第十九题：bento:nth-last-child(4)（div元素中倒数第四个bento元素）
第二十题：apple:first-of-type （第一个apple元素）
第二十一题：plate:nth-of-type(even) （所有偶数个的plate元素）
第二十二题：plate:nth-of-type(3),plate:nth-of-type(5) （plate元素下的第3个和第5个元素）
第二十三题：plate apple:only-of-type （plate元素下满足apple.small元素的唯一一个元素）
第二十四题：orange.small:last-of-type,apple.small:last-of-type （是orange.samll和apple.small元素的最后一个元素）
第二十五题：bento:empty （bento元素里没有包括额外元素）
第二十六题：apple:not(.small)（apple里没有组是.small的元素）
image.png
上一篇下一篇

猜你喜欢

热点阅读