css

Aidy
160 阅读7分钟

css文本

text-decoration

用于设置文字的装饰线

  • none无 （可以去除a元素默认的下划线）
  • underline 下划线
  • overline上划线
  • line-through中划线（删除线）

u、ins元素默认就是设置了text-decoration为underline

letter-word-spacing

letter-spacing 字母间距

word-spacing 单词间距

默认是0，可以设置为负数

text-transform

用于设置文字的大小写转换

  • capitalize将每个单词的首字符变为大写
  • uppercase将每个单词的所有字符变为大写
  • lowercase将每个单词的所有字符变为小写
  • none没有任何影响

text-indent

用于设置第一行内容的缩进

text-indent:2em;刚好是缩进2个文字

text-align

可用于设置元素内容的元素中的水平对齐方式

text-align:left/right/center/justify;

text-align:justify;对最后一行没有用，要设置最后一行两端对齐，用text-align-last:justify.

css字体

font-size

决定文字的大小

常用的设置

  • 具体数值+单位
    • 比如 100px
    • 也可以使用em单位:1em代表100%，2em代表200%，0.5em代表50%
  • 百分比
    • 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

font-family

用于设置文字的字体名称

可以设置1个或者多个字体名称（从左到右按顺序选择字体,直到找到可用的字体为止）

font-family:"微软雅黑",Consolas,Symbol,"microsoft Sans Serif";

一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文

  • 所以，如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面
div{
  font-family:"Courier New","华文彩云"
}

font-weight

用于设置文字的粗细（重量）

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量

strong、b、h1~h6等标的font-weight默认就是bold

  • normal常规显示（等于400）

  • bold（等于700）

font-style

用于设置文字的常规、斜体显示

  • normal常规显示（等于400）
  • italic用字体的斜体显示（前提，是font-family这种字体本身是支持斜体）
  • oblique 文本倾斜显示（让文字倾斜）

em、i、cite、address、var、dfn、等元素等font-style默认就是italic

font-variant

font-variant可以影响小写字母的显示形式

  • normal常规
  • small-caps：将小写字母替换为缩小过的大写字母

line-height

line-height：元素中文字所占据的高度

height：元素的整体高度

  • 让line-height等同于height可以实现垂直居中

font

是一个缩写属性

font-style font-variant font-weight font-size/line-height font-family

  • font-style font-variant font-weight 可以随意调换顺序，也可以省略
  • line-height 可以省略，如果不省略，必须跟在font-size后面
  • font-size font-family 不可以调换顺序，不可以省略

css选择器

属性选择器

拥有title属性的元素

[title] {
     color:red;
}

title属性值恰好等于one的元素

[title="one"] {
     color:red;
}

title属性值包含单词one的元素

[title*="one"] {
      color:red;
}

title属性值以单词One开头的元素

[title^="one"] {
     color:red;
}

title属性值恰好等于one或者以单词one开头且后面紧跟着连字符-的元素

[title |="one] {
  color:red;
}

一般是用在lang属性上面

[lang |= "en"] {
    color:red;
}

title属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开）

[title *= "one"] {
    color:red;
}

title属性值以单词one结尾的元素

[title $= "one"] {
    color:red;
}

后代选择器

div span{
     color:red;
}

div 元素里面的span元素(包括直接、间接子元素)

子选择器

div > span {
   color: red;
}

div元素里面的直接span子元素（不包括间接子元素）

相邻兄弟选择器

div+p {
  color: red;
}

div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）

全体兄弟选择器

div~p {
  color: red;
}

div元素后面的p元素( 且 div、p元素必须是兄弟关系)

选择器组

交集选择器

div.one {
   color:red;
}

必须同时符合所列条件，只有符合其中之一都不是

并集选择器

div, .one , [title="test"] {
   color:red;
}

所有符合所列条件，只要符合其中一个条件都设置相应样式

伪类

动态伪类

a:link 未访问的链接

a:visited已访问的链接

a:hover鼠标挪动到链接上

a:active激活的链接（鼠标在链接上长按住未松开）

注意

  • :hover必须放在:link和:visited后面才能完全生效
  • :active必须放在:hover后面才能完全生效
  • 所以建议的编写顺序是:link、:visited、:hover、:active

除了a元素，:hover、：active也能用在其他元素上

:focus 指当前拥有输入焦点的元素(能接收键盘输入)

  • 动态伪类编写顺序建议为
    • :link :visited :focus :hover :active

细节

去除a元素默认的:focus效果

a:focus {
  outline: none;
}

或者将tabindex属性设置为-1

  • tabindex可以调整tab选中元素的顺序

直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

a{
  color:red;

}

相当于a:link a:visited a:hover a:active a:focus 的color都是red

结构伪类

  • p:nth-child(1)

    • p是父元素中的第1个子元素的被选中

  • :nth-child(n)

    • 父元素中的第n个子元素
    • n代表任意正整数和0

  • :nth-child(2n)

    • 父元素中的偶数子元素
    • 跟:nth-child(even)同义

  • :nth-child(2n+1)

    • 父元素中的奇数子元素
    • 跟:nth-child(odd)同义

  • :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数

    • :nth-last-child(1) 代表倒数的第一个子元素
    • :nth-last-child(-n+2)代表最后2个子元素

  • :nth-of-type()

    • 与:nth-child()类似，不同点:nth-of-type()计数时只计算同种类型的元素

  • :nth-last-of-type()

    • :nth-of-type()类似,不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

  • :first-child等同于:nth-chlid(1)

  • :last-child等同于 :nth-last-child(1)

  • :first-of-type 等同于:nth-of-type(1)

  • last-of-type 等同于 :nth-last-of-type(1)

  • :only-child 是父元素中唯一的子元素

  • :only-of-type 是父元素中唯一的这种类型的子元素

  • :root 根元素，就是HTML元素

  • :empty 代表里面完全空白的元素

否定伪类

  • :not()
    • :not(x) 表示除x以外的元素
    • x 是一个简单选择器：元素选择器，通用选择器，属性选择器，类选择器，id选择器，伪类（除否定伪类），不支持组合

伪元素

  • ::first-line可以针对首行文本设置属性

    • 只可设置下列属性
      • 字体属性、颜色属性、背景属性
      • word-spacing、letter-spacing、text-decoration text-transform line-height

  • ::first-letter 可以针对首字母设置属性

    • 只可设置下列属性
      • 字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
      • text-decoration text-transform letter-spacing（适当的时候）、line-height、float、vertical-align（只有当float是none时）

  • ::before 和 ::after

    • 用于在一个元素的内容之前或之后插入其他内容（可以是文字、图片）
div::after{
 content:url("bg001.png")
}

在CSS属性值中，使用url（图片的URL)来引用图片

目标伪类

  • :target

元素状态伪类

:enabled :disabled :checked

ccs特性

继承

一个元素如果没有设置某属性的值，就会跟随父元素的值

当然，一个元素如果有设置某属性的值，就使用自己设置的值

哪些属性可以继承呢？可查阅官方文档。浏览器的开发者工具也会标识出哪些样式是继承过来的。

不能继承的属性，一般可以使用inherit值强制继承

注意

继承过来的是计算值。

层叠

同一元素可以设置多个css属性，优先级高的生效

优先级

权重

  • !important 10000
  • 内联样式 1000
  • id选择器 100
  • 类选择器、属性选择器、伪类 10
  • 元素选择器、伪元素 1
  • 通配符 0
avatar
文章
阅读
粉丝