css基础知识

kyrie0316

已于 2024-05-25 16:24:52 修改

阅读量826

点赞数 18

分类专栏： html\css 文章标签： css 前端

于 2024-05-25 16:23:06 首次发布

本文链接：https://blog.csdn.net/W1060632133/article/details/139199406

版权

html\css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css引入方式

1.行内样式(内联样式)仅做了解原因是因为把html和css都写在一行上了,比较乱,不好二次修改优点:快速直接对一个标签修饰缺点:结构样式不分离,不易维护,代码复用不强

2.内部样式书写在html页面中的适合案例书写** 优点** : 简化页面结构, 做到了一部分的结构样式分离; 缺点:没有充分做到结构样式分离,还是在一个文件中,代码过多,操作不易

3.外部样式新建一个css文件,把html文件和css文件产生关联适合长页面或者整站开发通过 link标签引入

<link rel="stylesheet" href="路径">

链接一个小图标

<link rel="icon" href="图片路径">

link和import之间的区别
1:语法不同 link是HTML标签的语法 import是css的语法
2:加载顺序不同 link引入的css文件,会把css和html结构一起进行加载,而用import引入的css文件,是会等下面的html结构加载完毕之后再回去加载css,这样的加载方式,在网速比较慢的时候,会出现闪屏
3:浏览器兼容上,link是没有兼容问题,import这样的方式引入css在一些低版本的浏览器上是不支持的
4:js中操作dom修改样式的时候,link可以被操作,import不行

优先级和权重

多个样式表同时使用,当样式发生冲突的时候,语法使用位置的优先级:
行内样式>内部样式>外部样式

行内样式规定了权重是1000 而内部和外部样式{}前面的是类型选择器权重是1 又因为样式遵循的原则:就近原则,根据代码的执行顺序,谁在下面实现谁的样式效果所以行>内>外

以上的结论跟CSS的层叠(覆盖)性有关系
CSS的层叠性规则规定了
如果对同一个标签,设置一样的CSS属性的时候,会发生冲突,解析规则遵循
1:如果权重(特定性)是不一样的,那么解析的规则是高权重的样式覆盖低权重的样式
2:如果权重是一样的,那么解析的规则就是就近原则
权重是浏览器衡量一段css代码冲突的时候,在浏览器中占比的参考值,类似人的体重
css规定了,行内样式的权重是1000 其他样式表内的权重看{}前面的选择器
标签选择器(元素选择器/类型选择器) 权重值是0001 ;类选择器权重是0010 id选择器权重是0100 !import把某样式权重添加到最大

不同的选择器修饰同一个元素的时候, 遵循的是权重值相加的情况

#box ul li a .cur  {color:red;}

#box li .cur {color:green;}

#box ul li a.cur   权重是  100+1+1+1+10 = 113

#box li .cur 权重是  100+1+10  = 111

类选择器

起类名注意:
1)不能以数字开头;
2)不要使用汉字;
3)不要出现特殊符号;
4)可以使用字母数字下划线连接符配合使用;
5)建议使用小写字母;
6)推荐使用语义化命名,做到见名知意;
7)可以使用驼峰命名法

类名可以出现重复的,相同的样式使用同一个类名即可

    多类名使用注意事项:<div class="box1 box2"></div> 多个类名共用一个class多个类名之间使用空格隔开

注:两个类选择器同时使用的时候, 后面的修饰会把前面的修饰覆盖掉, 因为代码从上向下执行, 后面的代码覆盖前面的代码(就近原则)

id选择器

用id进行区分 id只能有1个名字不能用多个名字,但是改名字可以重复使用(仅限css阶段)

              #bobo{样式规则}

类选择器和id选择器的使用场景想要区分多个相同的标签的时候

通配符选择器

{margin:0;padding:0}

!主要作用:取消元素自带的内边距和外边距

但是有些标签没有间距也会执行该代码(权重为0)

群组选择器

把相同样式的选择器修饰放在一起,起到节约代码的作用,降低代码的重复率
基本语法:
选择器1,选择器2,选择器3{样式规则}

层次选择器

后代(包含)选择器

使用场景:想要修改某个父元素内部所有的子元素(包括儿子,孙子,重子等)的时候

基本语法:
选择器1 选择器2{样式规则}

ul li{
            border: 2px solid gray;
        }

子代选择器

使用场景:想要修改某个父元素内部所有的儿子元素的时候

基本语法:
选择器1>选择器2{样式规则}

ul>li>ol>li{
            border: 2px solid red;
        }

相邻选择器

使用场景: 想要修改某个元素1后面紧挨着的某个元素2 后面的紧挨着
语法: 某某1+某某2{}

.box+.box1{
            background-color: red;
        }修改的是类名为box1的样式(必须是兄弟)

毗邻选择器

匹配的是当前元素后面所有符合条件的兄弟元素 后面的所有的

基本语法:
选择器1~选择器2{}

.box1~p{
            background-color: gold;
        }修改的是 类名为box1的元素后面的所有兄弟元素(即box1后面的所有p标签)

伪类选择器

伪类代表的是, 元素本身没有对应的样式, 需要通过鼠标事件等行为触发之后才会出现对应的效果 (权重是0010)
基本语法:
选择器:hover{}

扩展了解的部分
:link{} 链接的初始样式,都是给a标签
:active{} 链接按下不动时候的样式,都是给a标签
:visited{}链接访问过后的样式,都是给a标签
注意点:细节点如果同时使用的话,需要注意顺序问题,顺序不对的话,效果有的会失效,正确的顺序是L-V-H-A 还有需要清除浏览器的缓存(link不清除缓存看不到效果)

  :focus{} 设置input获得焦点时候样式

<style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .box1:hover{
      background-color: blue;
      color: yellow;
    }
    .box2 p{
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    /* 需求,想要p鼠标经过时候背景颜色变粉色 */
   .box2 p:hover{
      background-color: deeppink;
    }
    .box3{
      width: 300px;
      height: 300px;
      background-color: blue;
    }
    .box3 p{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    /* 需求: 想要鼠标经过box3的时候内部的p背景颜色变橘色 */
    .box3:hover p{
      background-color:orange;
    }
    a{
      font-size: 80px;
    }
    a:link{
      color: orange;
    }
    a:visited{
      color: deeppink;
    }
    a:hover{
      color: green;
    }
    a:active{
      color: yellow;
    }
    input{
      width: 400px;
      height: 100px;
    }
    input:focus{
      width: 200px;
      height: 300px;
      /* border 边框 solid 实线  */
      border: 10px solid blue;
    }
  </style>
  <body>
  <div class="box1">我是盒子</div>
  <div class="box2">
    <p>段落p</p>
  </div>
  <div class="box3">
    <p>段落p</p>
  </div>
  <a href="http://www.baidu.com">点我跳转到百度</a>
  <form>
    <input type="text">
  </form>
</body>