CSS(Cascading Style Sheet)Style标签,引入Css方式,Css选择器

初识CSS

什么是CSS

  • CSS的概念
  1. Cascading Style Sheet 层叠样式表
  2. 表现HTML文件样式的语言
  3. 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
  4. 聊聊网页中的CSS
    在这里插入图片描述

CSS的发展史

  • 1996年 CSS1.0
  • 1998年 CSS2.0
  • 融入了DIV+CSS的概念,提出了HTML结构与CSS样式表的分离
  • 2004年 CSS2.1
  • 融入了更多高级的用法,如浮动,定位等。
  • 2010年 CSS3.0
    它包括了CSS2.1下的所有功能, 是目前最新的版本, 它向着模块化的趋势发展,又加了很多使用的新技术, 如字体、 多背景、 圆角、 阴影、 动画等高级属性,但是它需要高级浏览器的支持。 由于现在IE 6、 IE 7使用比例已经很少, 对市场企业进行调研发现使用CSS3的频率大幅增加, 学习CSS3已经成为一种趋势.

CSS的优势

  • 内容与表现分离
  • 网页的表现统一 , 容易修改
  • 丰富的样式 , 使得页面布局更加灵活
  • 减少网页的代码量 , 增加网页的浏览速度 , 节省网络带宽
  • 运用独立于页面的CSS , 有利于网页被搜索引擎收录

CSS的基础语法

选择器{
声明1;
声明2;
...
}

在这里插入图片描述
CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;” 都要写上

Style标签

Style 标签在HTML文档中的位置 , 在<head 和 </head之间
在这里插入图片描述
案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgba(224, 183, 134, 0.69);
        }
        h2{
            font-size: 200px;
        }
    </style>

</head>
<body>
<h1>你是谁啊</h1>
<h2>我是你爸爸</h2>
</body>
</html>

引入CSS的方式

  1. 行内样式
    使用style属性引入CSS样式
  2. 内部样式表
    CSS代码写在<head的<style标签中
  3. 外部样式表
    链接式
    导入式

案例一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式表
    需要使用style标签
    格式 :

        选择器 {
              属性 : 属性值
        }

    -->
    <style>
        a{
            font-size: 50px;
        }

    </style>




</head>
<body>

<!--行内样式
style属性引入 ,
行内样式如果要添加多个样式 , 中间使用分号隔开
-->
<h1 style="color: #96ffe6">Hello,css</h1>
<p style="color: #ff5f5d;font-weight: bold">Hello,css</p>

<p>Hello,css</p>

<hr/>


<a href="">Goodbye,world</a>




</body>
</html>

案例二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--第三种导入方式:外部导入式
    需要使用  link标签
    -->
    <!--<link rel="stylesheet" href="../resources/css/Style.css">-->


    <style>
        @import url("resources/css/Style.css");
    </style>


</head>
<body>


<div>
    认真学习的样式很Cool
</div>



</body>
</html>

其中Css文件内为:

div{
    color: #ff5f5d;
    font-size: 100px;
}

span{
    color: #ff5f5d;
    font-size: 50px;
}

链接式与导入式的区别

  • <link/标签属于XHTML,@import是属于CSS2.1
  • 使用<link/链接的CSS文件先加载到网页当中,再进行编译显示
  • 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
  • @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

CSS样式优先级(就近原则)

行内样式 > 内部样式表 > 外部样式表

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <link rel="stylesheet" href="resources/css/Style.css">


    <style>
        span{
            color: blue;
            font-family: 楷体;
        }
    </style>


</head>
<body>



<span style="color: green">

    IT梦想

</span>




</body>
</html>

CSS基础选择器

  1. 标签选择器
    uHTML标签作为标签选择器的名称
    <h1…<h6、<p、<img/
    在这里插入图片描述
  2. 类选择器
    类选择器
    <标签名 class= “类名称”>标签内容</标签名>
    在这里插入图片描述
    案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*   类选择器
         思考 : 需要一类 ?  类在标签中定义, 使用class属性
          然后使用类选择器选择到指定的标签元素

          .类名称{
               属性:属性值
          }

        */

        .a{
            font-family: 宋体;
        }

        .b{
            font-style: italic;
        }

    </style>

</head>
<body>


<p class="a">来西部开源</p>
<a href="" class="a">成就IT梦想</a>
<div class="a">好好学习,天天向上</div>
<span class="b">cool</span>
<br>
<qinjiang class="b">你好啊</qinjiang>


</body>
</html>
  1. ID 选择器
    在这里插入图片描述
    案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>


        /*id属性全局唯一 , 不能同名*/
        /*ID选择器
        需要一个iD --> 在标签中定义ID
        格式:

        #id名字{

        }

        */

        #goods{
            font-size: 200px;
        }

        #aaa{
            color: yellow;
        }


    </style>


</head>
<body>


<p class="a" id="aaa">1</p>
<a href=""  class="a">2</a>
<div  class="a">3</div>
<span  class="a" id="goods">4</span>



</body>
</html>

总结

  • 标签选择器直接应用于HTML标签
  • 类选择器可在页面中多次使用
  • ID选择器在同一个页面中只能使用一次

基本选择器的优先级

  • ID选择器>类选择器>标签选择器
  • 基本选择器不遵循 “ 就近原则 "

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .test1{
            color: blue;
        }

        h1{
            color: red;
        }

        #test2{
            color: green;
        }


    </style>


</head>
<body>


<h1 class="test1" id="test2">hello,kitty!</h1>

</body>
</html>

CSS高级选择器3-1

  1. 层次选择器
    在这里插入图片描述
  2. 后代选择器
    在这里插入图片描述
    案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }

        /*后代选择器
        需求 : 获取body下面的所有p标签
        使用空格隔开*/

        body p{
            background-color: green;
        }
</style>


</head>
<body>



<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>3</p>


</body>
</html>

  1. 子选择器
    在这里插入图片描述
    案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }


        /*子选择器
        需求 : 只获得body下面的第一层元素
        */
        body>p{
            background: slateblue;
        }
         </style>


</head>
<body>



<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>3</p>


</body>
</html>
  1. 相邻兄弟选择器
    在这里插入图片描述
    案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }




        /*相邻兄弟选择器  , 向下 ...
        前提 : 定位到一个元素 E
        需求 : 获取指定元素的相邻兄弟元素
                */

        #a+p{
            background: yellow;
        }
        </style>


</head>
<body>



<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>3</p>


</body>
</html>
  1. 通用兄弟选择器
    在这里插入图片描述
    案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }





        /*兄弟选择器
        前提 : 定位到一个元素 E
        需求 : 想获取指定元素的所有(指定元素下面的)兄弟元素

        格式 :

        E ~ F {
        }
        表示 : 获取指定E元素的同级元素的F标签*/

        .aaa~p{
            background: #ff524d;
        }



    </style>


</head>
<body>



<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>3</p>


</body>
</html>

CSS高级选择器3-2

  1. 结构伪类选择器
    在这里插入图片描述
  2. 结构伪类选择器
    在这里插入图片描述
    案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        p,li{
            border: 1px solid red;
        }

        /*
        结构伪类选择器 :

        概念 :  伪元素和伪选择器 是CSS已经定义好的 ,我们拿来就可以用

        格式 :

        选择器 :伪元素{

        }

        伪元素 :
            :first-child -->父类的第一个子元素
            :last-child
            :
        ul li:first-child{
            background: yellow;
        }

        ul li:last-child{
            background: red;
        }

        /*需求:选择body下面的第二个元素
        E:nth-child(n) --> 需要找到E元素的父级元素 , 寻找父级元素的第n个子元素 ,
       判断他是不是E元素 , 如果不是,就不会被选择.
*/

        p:nth-child(2){
            background: blue;
        }


        /*请你选择body下面的第二个p元素
        E : nth-of-type(n)  --->找到E的父级元素 , 然后在他的父级元素中去找第n个E元素
        */
        p:nth-of-type(3){
            background: brown;
        }


    </style>



</head>
<body>

<h1>adsdas</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>




</body>
</html>

在这里插入图片描述

CSS高级选择器3-3

  1. 属性选择器
    在这里插入图片描述
    案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*给基础代码添加样式*/
        .demo a{
            float: left; /*浮动*/
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: white;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            margin: 5px;
        }


        /*属性选择器
        需要一个什么 : 属性


        a[id]{
            background: red;
        }


        a[id=name]{
            background: red;
        }


        a[href^="https"]{
            background: red;
        }


        a[href$="png"]{
            background: red;
        }

        a[class]{
            background: yellow;
        }

        a[href*="."]{
            background: yellow;
        }

*/


    </style>




</head>
<body>



<p class="demo">

    <a href="https://www.baidu.com" class="links" id="name">1</a>
    <a href=""  class="links">2</a>
    <a href="/1.png">3</a>
    <a href="/1.jpg"  class="links">4</a>
    <a href="/1.png" id="apple">5</a>
    <a href="https://blog.kuangstudy.com"  class="links">6</a>
    <a href="aaa">7</a>
    <a href="abc.doc"  class="links">8</a>
    <a href="abcd.doc" id="">9</a>

</p>


</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值