css的内容

我是打工人

已于 2022-06-13 16:31:10 修改

阅读量576

点赞数

文章标签： css html 前端

于 2022-03-11 08:28:00 首次发布

本文链接：https://blog.csdn.net/szydqq/article/details/123305539

版权

1.css的解释: 修饰/美化页面的

语法组成: 选择器{声明}

声明里面包含属性和属性值

- 选择器{属性1:属性值1;属性2:属性值2}

- 选择器: 修饰对象

- 属性: 描述对象的特征/特点

- 属性值

注意点：

css语法和html语法的区别

① css是有选择器选择器后面有大括号

②大括号内写的是声明

③声明包含属性和属性值

④属性和属性值之间用冒号相连

⑤ 当一个选择器有多个声明的时候属性的顺序是不区分前后的

⑥有多个属性的时候第一个声明结束后面需要加上分号

案例:李同学 身高180cm 体重180kg 长相吴彦祖

- html <李同学 身高="180cm" 体重="180kg" 长相="吴彦祖"></李同学>

- css 李同学{身高:180cm ;体重:180kg; 长相:吴彦祖;}

css概念:层叠样式表

- 一个标签可以有多个选择器：id class 标签包含...

- 多个选择器中属性如果是相同的会覆盖选择权重最高的显示

- 选择器中的属性是不相同的会重叠相加显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            color: red /* 1 */
        }
        #name{
            color: green /* 100 */
        }
        .name{
            color: pink /* 10 */
        }
        /* 1 */
        /* img{} */
        /* 1 + 1 + 1 + 1 */
        /* ul li a img{} */
    </style>
</head>
<body>
    <div id="name" class="name" style="color: purple">胜平同学</div>
    <ul>
        <li>
            <a href="">
                <img src="" alt="">
            </a>
        </li>
    </ul>
    <img src="" alt="">
</body>
</html>

效果图：

2.css样式表的创建方式

css的样式表创建方式：行内式/内嵌式、内部式、外部式

语法组成: 选择器{属性:属性值}

1.行内式的创建方式

- 需要在标签的内部创建样式表

- 在标签内书写一个style属性

- 在style的属性值位置直接书写声明即可

<body>
    <p style="background-color: red;">ssssasda</p>
    <div style="background-color: green; font-size:30px; width:500px;" >asdasdas</div>
</body>

2.内部式的创建方式

- 需要在head标签内创建

- 在head内创建style标签

- 在style标签内书写规范的css语法即可

3.外部式的创建方式

- 需要在外面创建一个.css文件

- 需要让html文件和css文件之间形成关联使用link标签

- link标签建议写在head区域内

拓展: 外部样式表的第二种引入方式

- @import 导入方式目前只做了解后期可以使用这种方式导入模块先加载结构后加载样式

- 需要在style标签中书写

- @import url("路径")

- link 结构文件和样式文件会一起加载

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 头部 描述区域 引入外部的资源进行解析 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <!-- 
        rel:文档关联
        href:路径
     -->
     <!-- <style>
        @import url('css/style.css')
     </style> -->
</head>
<body>
    <!-- 字体颜色属性 color -->
    <div>李同学</div>
</body>

3.样式表的优先级

1.样式表的使用环境

- 行内式: 一般是不用的

- 内部式: demo

- 外部式: 工作中写项目最常用的一种创建方式

2.如果三种样式表同时存在的时候会出现什么问题？

- 浏览器的控制台如果有黑色的横线划掉属性属性值表示有属性冲突

总结样式表优先级

- 行内式的优先级大于内部式行内式的优先级也大于外部式 => 行内式的优先级最高

- 内部和外部的样式表写在下面的优先级会更高

- 结论: 行内样式表的优先级最高内部和外部取决于书写顺序在下面的优先级更高 - 就近原则

注意（只会覆盖相同的央视语句，不同的会保留）

4.css选择器

选择器/选择符的使用:通过一种方式选中你想要修饰的对象

选择器的分类: 标签、id、class（类）、包含、群组、通配符、伪类

①标签选择器

- 通过选择html的标签名称进行修饰

- 所有的html标签都可以作为选择器使用

②.id选择器

- 在标签内添加id属性和属性值

- 在样式表中使用 #id属性值{属性:属性值}

- 作用:id选择器在一块布局中表示最大的并且只能有一个

③class选择器(类选择器)

- 在标签内添加class属性和属性值

- 在样式表中使用 .class属性值{属性:属性值}

- 作用:表示选择到相同一类的标签进行修饰

注意：类名可以重复使用

如果有多个标签的样式完全是一摸一样的，就可以给他们起共同的名字。

命名规则：

1.可以使用字母、数字、_、$

2.数字不允许开头 p1(可以) 1p(不可以)

3.不允许使用关键字（官方已经使用过，并且有特殊含义的单词）

4.最好做到见名知意

类名选择器可以起多个类名

<style>
        .d1{
            color: red;
        }
        .box1{
            color: green;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="d1 box1">类选择器</div>
</body>

④包含选择器:通过父级选择器选择相应的子级选择器

- 写法: 父级选择器子级选择器{声明}

⑤群组选择器:选择中相同的声明进行修饰

- 表示选择器不同但是声明是一样可以把声明简写在一起

- 写法: 选择器1,选择器2,...{声明}

⑥通配符选择器

- 固定用法 * 表示选中当前页面中的所有标签

- *{margin:0;padding:0} 表示清除页面中边距(浏览器默认上下左右是8px的间距)

- margin和padding 标签或者浏览器的内外边距

⑦伪对象/伪元素选择器

①选择器::after{content:''} ===在xx之后

②选择器::before{content:''} ===在xx之前

③选择器::first-line===找到第一行的元素进行操作

④选择器::first-letter===找到第一个元素进行操作

举例：

- cp

- 开端司机+锅姨 = 司锅姨

伪对象和伪类选择器

- 伪类是一个冒号，伪对象在css2中也是一个冒号，在css3中为了区分两者之间的区别建议写成两个冒号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding:0}
        #name,.name,ul li{
           color: red
        }
    </style>
</head>
<body>
    <div>1同学</div>
    <div id="name">2同学</div>
    <div class="name">3同学</div>
    <div class="name">4同学</div>
    <ul>
        <li>文本1</li>
    </ul>
    <ol>
        <li>文本2</li>
    </ol>
</body>
</html>

效果图:

伪类介绍

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div::after {
            content: '你真帅'
        }

        div::before {
            content: '小'
        }

        div {
            /* display: none */
            visibility: hidden;
            /* 隐藏文本显示 结构还是存在的 */
        }
    </style>
</head>

<body>
    <div>
        文帅同学
    </div>
</body>

</html>

结构伪类

 /* ul::before {
      content: '0';
    } */

    /* 用来描述标签处于某一个状态时 */
    /* :first-child 是修饰 li 标签处于第一个元素位置时的状态 */
    /* 既要是 li 标签, 还得是其父元素下的第一个子元素 */
    /* li:first-child {
      color: red;
    } */

    /* li:last-child {
      color: skyblue;
    } */

    /*
      小括号内应该填写一个公式
        + xn + y
        + x 和 y 的取之范围是所有整数
        + n 的取值范围 0 ~ 正无穷
        + 总和的取之范围: 负无穷到正无穷
        + 2n 等价于 even 偶数
        + 2n + 1 等价于 odd 奇数

      问题:
        + 前三个
        + n 取值: 0 ~ 正无穷   0 1 2 3 4 5 6 7 8 9 ...
          => 让 n 改符号变成 -1 * n, 0 -1 -2 -3 -4 -5 -6 ...
        + 需要前三个
          => 让 -1 -2 -3 变成 1 2 3
          => + 3

      注意: 在这个公式内, n 必须在前面
    */
    /* li:nth-child(-n + 3) {
      color: red;
    } */


    /*
      :first-of-type 修饰 li 标签
        + 只要是该父元素下的第一个 li 标签就可以
    */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul, ol, li {
      list-style: none;
    }


    li:first-of-type {
      color: red
    }

    li:last-of-type {
      color: skyblue;
    }

  </style>
</head>
<body>
  <ul>
    <span>0</span>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <span>11</span>
  </ul>
</body>
</html>

效果图：

状态伪类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 当该 input 被选中以后的样式 */
    input:checked {
      width: 100px;
      height: 100px;
    }

    p:empty {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>

  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">

  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p></p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>

</body>
</html>

效果图：

⑧群组选择器：

<style>
        /* p{
            color: red;
        }
        div{
            color: red;
        }
        i{
            color: red;
        }
        s{
            color: red;
        } */
        p,div,i,s{
            color: red;
        }
    </style>
</head>
<body>
    <p>ppppppppppppp</p>
    <div>divdiv</div>
    <h2>hh2h2h2</h2>
    <i>iiiiiiiiii</i>
    <em>emememem</em>
    <s>ssssssssssss</s>
</body>
</html>
<!-- 
    群组选择器：可以一次找到多个标签标签。
    使用群组可以减少代码量
    群组的标志：逗号
 -->

⑨通配符选择器

 <style>
        *{
            color: red;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <p>ppppppppppppp</p>
    <div>divdiv</div>
    <h2>hh2h2h2</h2>
    <i>iiiiiiiiii</i>
    <em>emememem</em>
    <s>ssssssssssss</s>
</body>
</html>
<!-- 
    通配符选择器：可以找到所有的标签
    标志：*
    使用场景：
        清除标签自带的间距的
        *{padding:0;margin:0}
 -->

⑩后代选择器：

<style>
        /* 找类名为d1之下的span标签 */
        /* .d1 span{
            color: red;
        }
        .d2 span{
            color: green;
        } */
        /* .d1 i{
            color: blue;
        } */
        .d1>span{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="d1">
        <span>
            我是d1里面的span
            <i>我是d1的孙子</i>
        </span>
    </div>

    <div class="d2">
        <span>我是d2里面的span</span>
    </div>
</body>
</html>
<!-- 
    后代选择器：
        标志：空格
        只要是后代都能找到。
    子代选择器：
        标志：>
        只能找到儿子

十一：伪类选择器

①伪类选择器的使用:

- :link {color: red;} /* 未访问的链接状态 */

- :visited {color: green;} /* 已访问的链接状态 */

- :hover {color: blue;} /* 鼠标滑过链接状态 */

- :active {color: yellow;} /* 鼠标按下去时的状态 */

②总结

- 使用伪类选择器就必须按照这四个顺序书写不能颠倒

- 伪类花里胡哨使用较少唯一要注意的是关于hover的使用

- 可以单独使用可以一起使用(顺序不可乱)

③伪类选择器常用的有四个重要的有一个 hover 表示鼠标移入时候发生的状态改变

hover伪类的使用: 选择器:hover{}

使用:①改变自己当前自己的选择器:hover{}

② 通过父级改变子级父级选择器:hover 子级选择器{}

③通过自己改变同级

注意: hover不可以通过子级改变父级元素！

拓展：css3中选择器

- > 直接子级元素

- ~ 同级所有

- + 表示同级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a:link{
            color: red
        }
        a:visited{
            color: green
        }
        a:hover{
            color: blue
        }
        a:active{
            color: purple
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">点击跳转到百度首页</a>
</body>
</html>

效果图：

伪类选择器中的hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p:hover ~h1{
            color: red
        }
    </style>
</head>
<body>
    <!-- div p -->
    <div>
       <p>胜平同学</p>
       <h1>
           <p></p>
        </h1>
       <h1>妹妹</h1>
    </div>
</body>
</html>

效果图：

12.css3选择器

1.当所有的标签是一样的时候:直接而选择集合中第几个

- 选择器:nth-child(n){}

2.当所有的标签不一样的时候:先筛选成多个集合再从集合中选择第几个

- 选择器:nth-of-type(n){}

注意

- n 表示默认的选择所有

- 2n 2的倍数

- odd 奇数

- even 偶数

5.选择器的权重

选择器的使用:标签、id、class、包含、群组、通配符、伪类

选择器的权重: 页面中全是div div比较多的时候需要添加不同的选择器使用四位数字表示的

-通配符：0

- 标签：1

- 类选择器（class）===伪类=== 10

- id选择器：100

- 行内样式表 1000

- 后代、子代选择器：里面所有选择器的和

6.文字的设置

css属性值

- 常规属性值 width:100px

- 法定属性值 background-color:red

字体大小的设置

属性:font-size

属性值:

- 设置字体大小的时候需要写数值和单位(html属性值单位是可以省略的)

- 当字体font-size:0 可以不加单位(处理兼容问题)

- 浏览器中默认的字体大小是16px，谷歌中不低于12px，其他的可能为不能低于10px

- 市场上浏览器特别多之间存在差异为了减少差异带来的问题规定12px是浏览器显示的最小值

- 建议设置字体为偶数

- 除了常见的px单位还有以下

- pt 磅硬件设备(了解)

- em 相对单位相对的是父级元素(首航缩进) 1em = 16px

- rem 相对单位相对的根元素html(移动端布局中)

ui提供设计图的时候都会标明字体大小: 蓝湖、pxcook

量取设计图上的字体大小:量取字体的高度即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            font-size: 20px;
        }
        p{
            font-size: 2em;
        }
        span{
            font-size: 40px;
        }
    </style>
</head>
<body>
       <span>同学你真帅 假的</span> 
    <div>
       <p>同学你真帅 假的</p><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            font-size: 20px;
        }
        p{
            font-size: 2em;
        }
        span{
            font-size: 40px;
        }
    </style>
</head>
<body>
       <span>同学你真帅 假的</span> 
    <div>
       <p>同学你真帅 假的</p>
    </div>
</body>
</html>
    </div>
</body>
</html>

效果图：

7.文本颜色

文本颜色的设置

属性: color

属性值

- 法定的属性值: 英文单词 red、green、blue...

书写方式：

①十六进制:

- 以#开头有六位字符(0123456789abcdef) 忽略大小写

- # 00 00 00 三原色

- 当六位字符是一样的时候可以简写为三位 #000000 => #000

取字体颜色: ps 吸管工具

②- rgb(red,green,blue) 0~255之间

- rgba(red,green,blue,alpha) 透明度 0~1

拓展: 透明的使用

- rgba() 某个元素

- opacity（透明度取值） 0~1 所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #000;
            opacity:0.5 ;
        }
    </style>
</head>
<body>
    <div>文本</div>
</body>
</html>

效果图：