0
点赞
收藏
分享

微信扫一扫

css的内容

Gaaidou 2022-03-12 阅读 75

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

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

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

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

- 选择器: 修饰对象

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

- 属性值

注意点:

css语法和html语法的区别

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

②大括号内写的是声明

③声明包含属性和属性值

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

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

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

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

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

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

2.css样式表的创建方式

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

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

1.行内式的创建方式

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

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

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

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,...{声明}

⑥通配符

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

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

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

⑦伪对象/伪元素

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

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

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

效果图:

5.选择器的权重

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

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

- 标签 1

- id 100

- class 10

- 包含 ul li 相加

- 群组 a,b,c{} 各自计算

- 通配符 0

- 伪类 10

- 行内样式表 1000

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>

效果图: 

6.伪类选择器

①伪类选择器的使用:

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

效果图:

7.文字的设置

css属性值

        - 常规属性值 width:100px

        - 法定属性值 background-color:red

字体大小的设置        

        属性:font-size

        属性值:

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

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

- 浏览器中默认的字体大小是16px

- 市场上浏览器特别多 之间存在差异 为了减少差异带来的问题 规定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>

效果图:

 8.文本颜色

文本颜色的设置

属性: 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>

效果图:

 

举报

相关推荐

css内容复习

CSS基本内容

前端知识 — CSS内容

CSS基础内容(极简)

css内容复习与提升

0 条评论