初学CSS

最新推荐文章于 2022-10-08 01:14:08 发布

taraex

最新推荐文章于 2022-10-08 01:14:08 发布

阅读量138

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/taraex/article/details/92836169

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是CSS

Cascading Style Sheet 层叠样式表

表现HTML文件样式的语言 u包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的优势

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

基础语法

选择器{
声明1；
声明2；
…
}

h1{
font-size:10px;
color:blue;
}

最后一个声明后的“;”可写可不写，但是建议写上

引入CSS的方式

一.行内样式
使用style属性引入CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1 style="color:red; font-size: xx-large ">行内样式</h1>
</body>
</html>

二.内部样式表
CSS代码写在的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表</title>
    <style>
        h1{
            font-size: xx-large;
            color: red;
        }
        h2{
            font-family: 楷体;
            color:blue;
        }
    </style>
</head>
<body>
<h1>学习CSS</h1>
<h2>使用不同的方法</h2>
</body>
</html>

三.外部样式表
链接式
导入式

CSS文件

h1{
    font-size: xx-large;
    font-family: 华文行楷;
}
h2{
    color:royalblue;
    font-max-size: xx-large;
}

链接式：使用link标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link rel="stylesheet" href="../resources/css/测试.css">
</head>
<body>
<h1>学习CSS</h1>
<h2>使用不同的方法</h2>
</body>
</html>

导入式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <style>
        @import url("../resources/css/测试.css");
    </style>
</head>
<body>
<h1>学习CSS</h1>
<h2>使用不同的方法</h2>
</body>
</html>

这两者的区别：

标签属于XHTML，@import是属于CSS2.1

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

CSS样式优先级（就近原则）

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

CSS基础选择器3-1

标签选择器
HTML标签作为标签选择器的名称
<h1/ >…< h6 >、< p >、< img/>
在这上面的代码中所用到的全都是标签选择器

类选择器
<标签名 class=“类名”>标签内容</标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .otto{
            color: blue;
            font-size: xx-large;
        }

    </style>
</head>
<body>
<h1 class="otto">学习CSS</h1>

</body>
</html>

ID选择器
<标签名 id="">标签内容</标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
        #otto{
            color: black;
            font-size: xx-large;
        }


    </style>
</head>
<body>
<h1 id="otto">学习CSS</h1>

</body>
</html>

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

注意： ID选择器的id不能以数字开头

基本选择器的优先级：
ID选择器>类选择器>标签选择器
基本选择器不遵循 “ 就近原则 ”

CSS高级选择器3-1

层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        p,ul{border: blue 1px solid;}

        body p{
            background: red;
        }


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



</body>
</html>

在这里插入图片描述
子选择器

<style>
        p,ul{border: blue 1px solid;}

        body>p{
            background: red;
        }


    </style>

在这里插入图片描述

相邻兄弟选择器

<style>
        p,ul{border: blue 1px solid;}

      .aaa+p{
          background: yellow;
      }



    </style>

在这里插入图片描述

通用兄弟选择器

<style>
        p,ul{border: blue 1px solid;}

      .aaa~p{
          background: yellow;
      }



    </style>

在这里插入图片描述

CSS高级选择器3-2

结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

E:first-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        p,ul{border: blue 1px solid;}

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

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



</body>
</html>

在这里插入图片描述
E:last-child


<style>
        p,ul{border: blue 1px solid;}

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

    </style>

在这里插入图片描述

E F:nth-child(n)

<style>
        p,ul{border: blue 1px solid;}

      ul li:nth-child(1){
          background: red;
      }

    </style>

在这里插入图片描述

E:first-of-type

<style>
        p,ul{border: blue 1px solid;}

      body p:first-of-type{
          background: black;
      }

    </style>

在这里插入图片描述

E:last-of-type

<style>
        p,ul{border: blue 1px solid;}

      body p:last-of-type{
          background: black;
      }

    </style>

在这里插入图片描述

E F:nth-of-type(n)

<style>
        p,ul{border: blue 1px solid;}
        p:nth-of-type(2){
            background:black;
        }

</style>

在这里插入图片描述

CSS高级选择器3-3

属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

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

    <style>
        a[id]{
            background: black;
        }


        a[id=name]{
            font-size: xx-large;
        }


        a[href^="https"]{
            font-family: 楷体;
        }


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

        a[class]{
            color: white;
        }

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


    </style>




</head>
<body>



<p class="demo">

    <a href="https://www.baidu.com" class="links" id="name">学习</a>
    <a href=""  class="links">睡觉</a>
    <a href="/1.png">玩耍</a>
    <a href="/1.jpg"  class="links">游泳</a>
    <a href="/1.png" id="apple">跑步</a>
    <a href="https://blog.kuangstudy.com"  class="links">打篮球</a>
    <a href="aaa">看电影</a>
    <a href="abc.doc"  class="links">上网</a>
    <a href="abcd.doc" id="">旅游</a>

</p>







</body>
</html>

在这里插入图片描述

taraex

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学CSS

什么是CSSCascading Style Sheet 层叠样式表表现HTML文件样式的语言 u包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定CSS的优势内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网络带宽运用独立于页面的CSS，有利于网页被搜索引擎收录基础语法选择器{声明1；声明2；…}...
复制链接

扫一扫

专栏目录