CSS常用属性｜样式规则 ｜基础巩固

臭奶呆
135 阅读3分钟

一、CSS分类

image.png

以link方式引入，link是外部资源链接标签，规范文档与外部资源的关系，通常在head标签中。href属性指定资源的url，rel属性指定资源类型，如icon为站点图标和stylesheet为css样式

mindmap
      CSS样式规则
          定位（Position）和布局（Layout）
              position
              top/bottom/left/right
              (z-index)
              float/clear
              flexbox
                  (flex-direction)
                  (justify-content)
                  (align-items)
          展示（DisPlay）和可见（Visibility）
              display
              opacity
              visibility
          盒子模型（Box Model）顺序
              margin
              (box-shadow)
              border
              (border-radius)
              width/height
              padding
          背景设置（Background）
              background
          字体（Font）和文本（Text）
              (font-family/font-size/font-weight/font-style)
              (line-height)
              (text-align/text-transform)
              color
          其他属性（Other Property）
              overflow
              clip
              cursor
              transform
              animation/transition
              (white-space)

二、文本、字体、选择器

文本属性

  • text-decoration（常用）
    • none：没有装饰线，可以去除a元素的下划线
    • underline：下划线
    • overline：上划线
    • line-through：中划线（删除线）
  • text-transform
    • capitalize：单词首字母大写
    • uppercase：全部大写
    • lowercase：全部小写
    • none：没有影响
  • text-indent
    • text-indent：2em 缩进2个文字(1em=父元素font-size)
  • text-align（重要）行内级内容相对块父元素对齐
    • left：左对齐
    • right：右对齐
    • center：居中
    • justify：两端对齐
  • word/letter-spacing
    • word-spacing：10px 单词间距
    • letter-spacing：10px 字母间距

字体属性

  • font-size
    • font-size：100px
    • font-size：30%
  • font-family
    • 设置1个或多个字体(逗号分割)，也可以通过@font-face指定网络字体
  • font-style
    • italic：斜体
  • font-variant
    • small-caps：小写字母变成大写，高度和小写一样
  • font-weight
    • font-weight：100|200 -- 800|900 字体粗细程度
    • normal：等于400
    • bold：等于700
  • line-height（重要）
    • line-height：100px 设置行内一行文本高度
    • font-size/line-height：30px/1.5 font-size的1.5倍
    • line-height = height 文本垂直居中
  • font缩写属性
    • font：small-caps italic 700 30px/30px 微软雅黑
    • font-style、font-variant、font-weight 可以随意调换顺序和省略
    • /line-height可以省略，如果不省略一定要在font-size后
    • font-size、font-family不可以调换顺序，不可以省略

选择器

找到特定的元素 class和id 如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以用驼峰 注意：class中多个单词分隔开说明有多个class名

  • 通用选择器
* {
  font-size: 30px;
}
  • 元素选择器
div, a, span {
  font-size: 30px
}
  • 类选择器(可以重复)
.container {
  font-size: 30px;
}
  • id选择器(唯一)
#container {
  font-size: 30px;
}
  • 属性选择器
[title] {
  font-size: 30px;
}
[title=box] {
  color: red;
}
  • 后代选择器
// 所有后代
.home span { 
  font-size: 30px;
}
// 直接后代
.home > span {
  color: red;
}
  • 兄弟选择器
// 相邻兄弟
.one + div {
  font-size: 30px;
}
// 所有兄弟
.one ~ div {
  color: red;
}
  • 选择器组
    • 交集选择器(紧挨着不要有空格)
        div.box {
      color: red;
    }
    // class="box1 box2"
    .box1.box2 {
      color: red;
    }
    • 并集选择器
        div, span, a {
      margin: 0;
    }
  • 伪类选择器(当某个元素处于某种特定状态) image.png
.box:hover { //鼠标放上去时
  color: red;
}
.box {
  &:active { //鼠标按住没松开时
    color: red;
  }
}
.input:focus{ //聚焦的时候
  color: red;
}
  • 伪元素(行内级元素) image.png
// 一定要给content才会生效
.box::after {
  content: '';
}
.box::before {
  content: '';
}

继承、层叠、类型、盒子模型

属性的继承

与文本字体相关的一般可以继承。 cursor/font-size/font-family/font-weight/line-height/color/text-align

// 继承的是计算值
.parent {
  font-size: 2em;(32px)
}
// 儿子的值是32px 不是64px
.son{
  font-size: 2em; (不是设置值)
  font-size: 32px; (计算值)
}

不能继承的属性可以强制继承

.parent{
  border: 1px solid red;
}
.son{
  border: inherit;
}

属性的层叠

avatar
文章
阅读
粉丝