CSS初窥......

Posted ethan99

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS初窥......相关的知识,希望对你有一定的参考价值。

CSS的三种引入方式

一. 行间式

  1. 在标签头部的style属性内

  2. 属性值满足的是css语法

  3. 属性值用key:value形式赋值 value具有单位

  4. 属性值之间用;隔开

      <div style="width: 100px; height: 100px; background-color: red"></div>

二. 内联式

  1. 在style标签内(style标签一般作为head的子标签)

  2. 属性值满足的是css语法

  3. 属性值用key:value形式赋值 value具有单位

  4. 属性值之间用;隔开(一般独行分开赋值)

  5. 格式:选择器{样式块}

    <style>
     div{
         width: 200px;
         height: 200px;
         background-color: brown
     }
    </style>

三. 外联式

  1. 在外部css文件中

  2. 属性值满足的是css语法

  3. 属性值用key:value形式赋值 value具有单位

  4. 属性值之间用;隔开(一般独行分开赋值)

  5. 格式:选择器{样式块}
    6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接)

    <link rel="stylesheet" type="text/css" href="css/01.css">

四. 三种引入方式的优先级

注意: 三种方式并没有优先级

  1. 三种方式协同布局:
  2. 不重复的属性一定为唯一位置的唯一值
  3. 重复的属性采用覆盖赋值,保留最后位置的属性值
  4. 行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
  5. !important会影响优先级

CSS 选择器的优先级 ***

一. 组合选择器

  • 特性 : 每一个选择器位均可以为任意合法选择器或选择器组合

1. 群组选择器

  • 一次性控制多个选择器
  • 选择器之间以 , 隔开
div, span, .red, #div {
    color: red;
}

2. 子代与后代选择器

子代选择器用>连接
body > div {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}
  • 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
  • 每一个选择器位均可以为任意合法选择器或选择器组合
  • 子代选择器必须为一级父子嵌套关系,后代选择器可以为一级及多级父子嵌套关系

3、相邻(兄弟)选择器

相邻选择器用+连接
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
    color: red;
}
  • 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
  • 每一个选择器位均可以为任意合法选择器或选择器组合
  • 相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系

4、交集选择器

<div class="d" id="dd"></div>
div.d#dd {
    color: red;
}

<div class="d1 d2 d3"></div>
.d1.d2.d3 {
    color: red;
}

5. 属性选择器

属性选择器权重 == class选择器权重

  • [attr]:匹配拥有attr属性的标签
  • [attr=val]:匹配拥有attr属性,属性值为val的标签
  • [attr^=val]:匹配拥有attr属性,属性值以val开头的标签
  • [attr$=val]:匹配拥有attr属性,属性值以val结尾的标签
  • [attr*=val]:匹配拥有attr属性,属性值包含val的标签
属性以什么开头: ^= 
属性以什么结尾: $= 
属性模糊匹配: *= 

二. 组合选择器优先级

  • 同目录结构下
    1.子代与后代优先级相同
    body > div == body div
    2.相邻与兄弟优先级相同
    div + span == div ~ span
    3.最终样式采用逻辑后的样式值
  • 不同目录结构下
    注:控制的是同一目标,才具有可比性
    1.根据选择器权值进行比较
    2.权值为标签权重之和
    3.权重: *:1 div:10 class:100 id:1000 !important:10000
    4.权值比较时,关心的是值大小,不关心位置与具体选择器名
    5.id永远比class大,class永远比标签大

权重对应关系

选择器 权重
通配 1
标签 10
类、属性 100
id 1000
!important 10000

常用样式(一点点...只是小部分)

1. 字体样式

  • font-family:字体族科,多值?于备用,以,隔开

       font-family: "STSong", "Arial";
  • font-size:字体大小

  • font-style: 字体风格 normal | italic | oblique

  • font-weight:字体重量 normal | bold | lighter | 100~900

  • line-height:行高

  • font:字重 风格 大小/行高 字族

2、文本样式

  • color:文本颜色
  • text-align:横向排列 left 居左 | center 居中 | right 居右
  • vertical-align:纵向排列
baseline:将支持valign特性的对象的内容与基线对齐 

sub:垂直对齐文本的下标 

super:垂直对齐文本的上标 

top:将支持valign特性的对象的内容与对象顶端对齐 

text-top:将支持valign特性的对象的文本与对象顶端对齐 

middle:将支持valign特性的对象的内容与对象中部对齐 

bottom:将支持valign特性的对象的文本与对象底端对齐 

text-bottom:将支持valign特性的对象的文本与对象底端对齐 
  • text-indent:字体缩减
  • text-decoration:字划线 underline,line-through,overline,none
  • letter-spacing:字间距
  • word-spacing:词间距
  • word-break:自动换行 normal默认换行规则 | break-all 允许在单词内换行

3. 背景样式

  • background-color:颜色

  • background-image:图片

    background-image: url(bg.png);
  • background-repeat:重复

    repeat 重复 | no-repeat  不重复  | repeat-x 水平重复| repeat-y 垂直重复
  • background-position:定位 top | bottom | left | right | center
    设置一个值,第二个值默认为center
    第一个值控制水平位置,第二个值控制垂直位置

  • background-attachment:滚动模式 scroll | fixed

以上是关于CSS初窥......的主要内容,如果未能解决你的问题,请参考以下文章

初窥鸿蒙

安全 | XSS漏洞初窥

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画