尚硅谷html5+css3(2)CSS5基本知识

1.网页分为三个部分:

结构:HTML

表现:CSS

行为JavaScript

CSS:层叠样式表,网页实际上是一个多层结构,通过CSS可以分别为网页的每一个层来设置样式,最终用户只看最上面的一层,总之,CSS用来设置网页中元素的样式

2.使用CSS修改元素的样式:

(1)在标签内部通过style属性设置元素的样式(内联样式,只能对一个标签生效,一般不用)

<p style="color: red;font-size: 60px;"> style </p>

(2)将样式编写到head的style标签中(内部样式表:可以同时为多个标签设置样式,修改时只用修改次此处即可)(但只能对一个页面起作用)

例:使所有p标签都为绿色:


<head>
    <style>
        p { color: green; }
    </style>
</head>

(3)对多个网页起作用(外部样式表)

将CSS样式编写到一个外部CSS文件中,使样式在不同页面复用。还可以使用浏览器的缓存机制,从而加快网页的加载速度,提高用户体验

即创建style.css文件:

 p { color: green; }

通过link标签引入外部CSS文件

<link rel="stylesheet" href="./style.css">

3.CSS的基本语法

在<style>标签中不属于html,所以要用CSS的标准写

<head>
    <style>
        /*CSS注释*/
        /*
        CSS基本语法:
        选择器 声明块
        选择器:通过选择器可以选中页面中指定元素
            例:h1:选中页面所有h1元素
        声明块:通过声明块来指定要为元素设置的格式
            例:color: blue;
            最后一个;可以省略
        */
        h1 {
            color: blue;
        }
    </style>
</head>

<body>
    <h1> 111 </h1>
</body>

4.CSS的常用选择器

(1)元素选择器

<head>
    <style>
        /*
        元素选择器:
            作用:根据标签名选中指定的元素
            语法:标签名+{}
            例子:p{} h1{} div{}
        */
        p {
            color: blue;
        }
    </style>
</head>

<body>
    <h1> 111 </h1>
    <p> p1 </p>
    <p> p2 </p>
</body>

(2)id选择器(设置id时保证唯一性)

<head>
    <style>
        /*若将第二行的p单独设置为红色,则使用id选择器
        作用:根据元素的id属性选中一个元素
        语法:#+id+{}
        例子:#12{color:red}
        */
        #abc {
            color: red
        }
    </style>
</head>

<body>
    <h1> 111 </h1>
    <p> p1 </p>
    <p id="abc"> p2 </p>
</body>

(3)class标签(多个class用空格隔开)

<head>
    <style>
        /*类选择器:
            class是一个标签的属性,他和id相似,不同的是class可以重复使用
            作用:根据元素的class属性值选中一组元素
            语法:.+class+{}
        */
        .abc {color: red}
        .bc {font-size: 50px;}
    </style>
</head>

<body>
    <h1> 111 </h1>
    <p> p1 </p>
    <p class="abc bc"> p2 </p>
    <p class="abc"> p3 </p>
</body>

(4)通配选择器

<head>
    <style>
        /*通配选择器
            作用:选中页面中的所有元素
            语法:*
        */
        *{color: red}
    </style>
</head>
<body>
    <h1> 111 </h1>
    <p> p1 </p>
</body>

5.复合选择器

(1)交集选择器 .

<head>
    <style>
        /*将class为red的div字体大小设置为30px
        使用交集选择器
            作用:选中同时复合多个条件的元素
            语法:选择器1+.+选择器2+{}
            注意:若有元素选择器,则用元素选择器开头
            */
        div.red {font-size: 30px;}
    </style>
</head>

<body>
    <div class="red"> div </div>
    <p class="red"> p </p>
</body>

(2)并集选择器 ,

<head>
    <style>
        /*同时选中h1和span设置为绿色
        使用并集选择器
            作用:同时选择多个选择器对应的元素
            语法:选择器1+,+选择器2+{}
            注意:若有元素选择器,则用元素选择器开头
            */
        h1,span {color: green;}
    </style>
</head>

<body>
    <h1 class="red"> div </h1>
    <span class="red"> p </span>
</body>

6.关系选择器

<body>
    <div>
        我是div
        <p>
            我是div中的p
            <span>我是div-p-span</span>
        </p>
        <span>我是div-span</span>
    </div>
</body>

(1)子元素选择器

<head>
    <style>
    /*为div的子元素span(不是p里的span)设置一个字体颜色:红色
        子元素选择器
            作用:选中指定父元素的指定子元素
    */
        div > span {
            color: red;
        }
    </style>
</head>

(2)后代元素选择器

  /*后代元素选择器*/
        div span {color: red;}

(3)兄弟元素选择器

        /*兄弟元素选择器:(都是选择后面的)
            选择下一个兄弟
                语法:当前+下一个(要修改的)
            选择下面所有兄弟
                语法:兄~弟(要修改的)
         */
        p + span {
            color: red;
        }
        p ~ span {
            color: red;
        }

7.属性选择器

<body>
    <p title="a"> 1</p>
    <p title="ab"> 2</p>
    <p title="c"> 2</p>
    <p> 3</p>
</body>
        /*属性选择器1:
            [属性名],让p标签中有title的颜色变为红色
            (不关注title里的具体值)
            选择含有指定属性的元素 
            */
        p[title] {
            color: red;
        }

 /*属性选择器2:
            [属性名=属性值],让p标签中title=b的颜色变为红色
            选择含有指定属性和属性值的元素
            */
        p[title=a] {
            color: red;
        }

 /*属性选择器3/4/5:
            [属性名^=属性值],选择以属性值开头的元素
            例:选择以a开头的元素
            [属性名¥=属性值],选择以属性值结尾的元素
            [属性名*=属性值],选择属性值中含有某元素的元素
            */
        p[title^=a] {
            color: red;
        }

8.伪类选择器

<head>
    <style>
        /*将ul里的第一个li设置为红色*/
        ul > li.first {color: red;}
    </style>
</head>

<body>
    <!--ul>5*li-->
    <ul>
        <li class="first">第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
</body>

这个将第一个li设置为红色,若添加li在此前面,则新的第一个li不为红色

解决方法:使用伪类选择器

<head>
    <style>
        /*将ul里的第一个li设置为红色*/
        /*使用伪类(用来描述一个元素的特殊状态)
        比如:第一个元素/被点击的元素
        伪类一般情况下用:开头*/
        /*:first-child:冒号前面元素的第一个子元素(总可以确保第一个为红色)*/
        ul>li:first-child {
            color: red;
        }

        /*:last-child:冒号前面元素的最后一个子元素(总可以确保最后一个为绿色)*/
        ul>li:last-child {
            color: green;
        }

        /*:nth-child(n):冒号前面元素的第n个子元素(总可以确保第n个为蓝色)
         若()写n:全选(n取0~正无穷)
         若()写2n/even:选中偶数位的元素
         若()写2n+1/odd:选中偶数位的元素
         */
        ul>li:nth-child(3) {
            color: blue;
        }
        /*这些伪类是根据所有子元素进行排序
        即若最前面加span,则都不生效 要用ul>span:first-child选第一个*/

        /*:first-of-type  :last-of-type  :nth-last-of-type()功能与上述相同
        找相同类型的第?个,即使用:first-of-type可以在span加入的情况下对第一个li进行改变*/
    </style>
</head>

<body>
    <!--ul>5*li-->
    <ul>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
</body>

<head>
    <style>
        /*:not()否定伪类
     将符合条件的元素从选择其中去除*/
        ul>li:not(li:nth-child(2)) {
            color: aqua;
        }
    </style>
</head>

10.超链接的伪类

<head>
    <style>
        /*一般不用*/
        /*link和visited只适用于a*/
        /*:link:表示没访问过的链接*/
        a:link {
            color: red;
        }
        /*:visited:表示访问过的链接,只能改颜色*/
        a:visited {

            color: green;
        }
    </style>
</head>
<!--
    通过伪类区分:
    1.没访问过的链接
    2.访问过的链接
-->

<body>
    <a href="https://www.baidu.com/"> 访问过的链接</a>
    <br>
    <br>
    <a href="https://www.baidu.com/"> 没访问过的链接</a>
</body>

表示鼠标移入的状态:a:hover  表示鼠标点击的状态:a:active(这两个所有元素都可以用)

<head>
    <style>
        /*表示鼠标移入的状态:a:hover*/
        a:hover {
            color: red;
        }

        /*表示鼠标点击的状态:a:active*/
        a:active {
            font-size: 30px;
            color: green;
        }
    </style>
</head>
<!--
    通过伪类区分:
    1.没访问过的链接
    2.访问过的链接
-->

<body>
    <a href="https://www.baidu.com/"> 链接1</a>
    <br>
    <br>
    <a href="https://www.baidu.com/"> 链接2</a>
</body>

11.伪元素选择器

<head>
    <style>
        /*伪元素:表示页面中一些特殊的元素(如首字母)
      ::first-letter:第一个字母
      ::first-line:第一行
      ::selection:鼠标选中的内容
      */
        p::first-letter {
            font-size: 50px;
        }

        p::first-line {
            background-color: yellow;
        }

        p::selection {
           color: green;
        }
    </style>
</head>

<body>
    <!--首字母下沉-->
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima obcaecati iusto, illum sapiente consequatur hic
        harum exercitationem perspiciatis deleniti? Autem ducimus qui recusandae impedit voluptatum voluptate quibusdam
        esse dignissimos pariatur.
    </p>
</body>

<head>
    <style>
        /*伪元素:表示页面中一些特殊的元素(如首字母)
      ::before 元素起始位置  在>和h之间
      ::after 元素最后位置  在u和<之间
      before和after必须结合content使用(添加内容)
      */
        div::before{
            content: 'abc';
            color: red;
        }
        div::after{
            content: 'hhhhh';
            color: green;
        }
    </style>
</head>

<body>
    <div>hello hello how are you</div>
</body>

12.样式的继承

<head>
    <style>
        /*样式的继承:我们为一个元素设置的样式同时也会应用到它的后代上
        并不是所有的样式都会被继承,比如背景、布局相关的不会被继承*/
        p{
            color: red;
        }
    </style>
</head>
<!--span元素继承了父亲p的style-->
<body>
    <p>我是一个p元素
        <span>我是p元素中的span元素</span>
    </p>
</body>

13.选择器的权重

<head>
    <style>
        div {
            color: yellow;
        }
        .red {
            color: red;
        }
    </style>
</head>
<!--样式的冲突:
    当我们通过不同的选择器选中相同的元素,并为相同的样式设置不同的值
    发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
    选择器的权重从高到低:内联样式,id选择器,类和伪类选择器,元素选择器
    若优先级相同,则优先使用下面的样式

    可以在某样式后面加!inportant,则此样式为最高优先级
-->

<body>
    <div id="box1" class="red">我是div
    </div>
</body>

14.像素和百分比

<head>
    <style>
        .box1 {
            /*长度单位:
                像素 px
                百分比
                    */
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .box2 {
            /*百分比:将属性设置为相对于其父元素属性的百分比
            使用百分比可以使子元素跟随父元素的改变而改变
                    */
            width: 50%;
            height: 70%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">11 <div class="box2">22</div>
    </div>
</body>

<head>
    <style>
        html{
            font-size: 50px;
        }
        .box1 {
            /*em:相对于元素的字体大小来计算的
            1em=1font-size
            em会根据字体大小的改变而改变*/
            font-size: 20px;
            width: 10em;
            height: 10em;
            background-color: red;

        }

        .box2 {
            /*rem:相对于根元素(html)的字体大小来计算的
            1em=1font-size
            em会根据字体大小的改变而改变*/
            font-size: 50px;
            width: 10em;
            height: 10em;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1">11 <div class="box2">22</div>
    </div>
</body>

15.RGB/RGBA值:

使用颜色名,比如red,yellow等

使用RGB值,0~255(0%~100%之间)

使用RGBA,A代表不透明度,用.n表示(1表示完全不透明,0表示完全透明)

使用十六进制的RGB值:#红色绿色蓝色,如果两位重复可以简写,例:#ffffff可以简写为#fff

16.HSL/HSLA值:

H:色相  (0-360)

S:饱和度 颜色的浓度(0-100)

L:亮度 (0-100)

相关推荐

  1. 前端知识库Html5CSS3

    2024-04-11 14:38:02       35 阅读
  2. Html_Css问答集(5)

    2024-04-11 14:38:02       8 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-11 14:38:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-11 14:38:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-11 14:38:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-11 14:38:02       20 阅读

热门阅读

  1. 单例模式基本介绍及两种实现方式详解

    2024-04-11 14:38:02       14 阅读
  2. 鸿蒙开发 一 (二)、熟悉鸿蒙之剑 ArkTS

    2024-04-11 14:38:02       18 阅读
  3. 腾讯云短暂崩溃2小时

    2024-04-11 14:38:02       14 阅读
  4. MySQL | 加索引报错

    2024-04-11 14:38:02       14 阅读
  5. 算法刷题day44

    2024-04-11 14:38:02       14 阅读
  6. 如何使用pandoc转word和正确的参考文献格式

    2024-04-11 14:38:02       12 阅读
  7. AcWing 793. 高精度乘法——算法基础课题解

    2024-04-11 14:38:02       13 阅读
  8. node 的路径分析和文件查找策略

    2024-04-11 14:38:02       13 阅读
  9. 问题整理【2024-04-10】

    2024-04-11 14:38:02       14 阅读
  10. 【C++01】吾与C加初相识

    2024-04-11 14:38:02       12 阅读