css 基础

前端

学习记录 - css基础

选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*标签选择器     Tagname */
div{}
/*类名选择器     .xxx    */
.className{}
/*id选择器     #xxx   */
#idName{}
/*通配符     *  （全部） */
*{}
/*并集选择器      .xxx,.xxx (同时选择多个) */
.className,#idName{}
/*交集选择器     Tagname.xxx (精确选择到其中一个) */
div.className{}
/*后代选择器     .xxx .xxx (指定一个里面所有的) */
div span{}
/*子代选择器     .xxx>.xxx （指定一个里面的第一层）*/
div>a{}
/*相邻兄弟选择器     .xxx + .xxx （选择同一个老爸的跟在自己屁股后面的兄弟） */
/*专业点就是 （1）紧接在另一元素后；（2）二者有相同父元素*/
div+div{}
/*兄弟选择器     .xxa ~ .xxb  (选择.xxa的屁股后面的叫.xxb的兄弟)*/
/*专业点就是 （1）紧接在另一元素后叫指定的名；（2）二者有相同父元素*/
div ～ div{}
/*伪类选择器 详情见下文*/
Tip:
  • 不建议嵌套过长，解析CSS需要耗费更多的时间

特殊符

一般用于 content属性，也可以用于html/js

1
2
3
4
5
6
7
8
9
/*空格      */

/*大于     >*/

/*小于     <*/

/*商标     ®*/

/*版权     ©*/

属性

字体

  • color 字体颜色

    • #00000 16进制
    • black
    • rgb(0,0,0)
    • rgba(0,0,0,0.0)

  • font-size 字体大小

  • font-weight 字体粗细

    • bold (等于700) 加粗
    • bolder (等于600)
    • normal (等于400) 默认

  • font-style 字体样式

    • italic 斜体
    • normal 默认

  • font-family 字体系列

背景

  • background 背景 （下列background-× 的简写）

  • background-color 背景颜色

  • background-image 背景图片

    • url(“ “)

  • background-repeat 背景是否平铺

    • no-repeat 不平铺
    • repeat-y 沿y轴平铺
    • repeat 平铺
    • repeat-x 沿x轴平铺

  • background-position(x,y) 背景图像开始的位置

    • center
    • left center
    • 10px 20px
    • ……

  • background-size

    容器

  • width 宽

  • height 高

  • display 表现形式

    • none 不显示(不占位置，但实际是存在的)
    • block 块级
    • inline-block 行内块
    • inline 行内
    • flex
    • grid
    • table
    • table-cell

  • text-indent 首字母缩进

    • px
    • em 相对于当前对象内文本的字体尺寸
    • rem 相对于整个html
    • %

  • text-align 水平对齐方式

    • center 居中
    • left 左
    • right 右
    • justify 实现两端对齐文本效果

  • text-decoration 规定添加到文本的装饰效果

    • none
    • underline 定义文本下的一条线
    • overline 定义文本上的一条线
    • line-through 定义穿过文本下的一条线
    • blink 定义闪烁的文本

  • line-height 行高

  • list-style 在一个声明中设置所有的列表属性

  • list-style-type 列表标记类型

  • overflow 规定当内容溢出元素框时发生的事情

    • hidden 隐藏
    • scroll 出现滚动条
    • auto

  • visibility 规定元素是否可见(占位置)

    • visible 可见
    • hidden 隐藏

  • opacity 透明度(存在兼容问题)

  • word-break 规定自动换行

    • normal 默认
    • break-all 允许在单词内换行
    • keep-all 只能在半角空格或连字符处换行

  • transition 过渡

  • cursor 规定要显示的光标的类型（形状）

    • pointer 一只手
    • default 默认
    • crosshair 十字
    • move 可被移动
    • text 文本光标

  • content 内容,与 :before 以及 :after 伪元素配合使用，来插入生成内容

  • vertical-align 基线对齐

  • user-select 文本是否能选中

边距

  • margin 外边距（下列margin-×的简写）

  • margin-top 上外边距

  • margin-right 右外边距

  • margin-bottom 下外边距

  • margin-left 左外边距

  • padding 内边距（下列padding-×的简写）

  • padding-top 上内边距

  • padding-right 右内边距

  • padding-bottom 下内边距

  • padding-left 左内边距

边框

  • border 边框（下列border-×的简写）

  • border-width 边框大小

  • border-style 边框样式

    • none 无
    • dotted 点
    • dashed 虚线
    • solid 实线
    • double 双线

  • border-color 边框颜色

  • border-radius 为元素添加圆角边框

  • outline 边框轮廓(外边框，简写)

  • outline-color

  • outline-style

  • outline-width

位置（脱离文档流）

  • float 浮动

    • left
    • right

  • clear 规定元素的哪一侧不允许其他浮动元素（用于清除浮动）

    • left
    • right
    • both 两边
    • none

  • position 定位

    • relative 相对定位
    • absolute 绝对定位
    • fixed 固定定位
    • static 回归文档流

  • （配合定位后使用最佳）

    • top 顶
    • right 右
    • bottom 底
    • left 左
    • z-index 设置元素的堆叠顺序

伪类

  • :link 选择所有未被访问的链接(仅a标签)

  • :visited 选择所有已被访问的链接(仅a标签)

  • :active 当您在一个链接上点击时，它就会成为活动的（激活的）

  • :hover 用于选择鼠标指针浮动在上面的元素

  • :after 选择器在被选元素的内容后面插入内容

  • :before 选择器在被选元素的内容前面插入内容

  • :focus 选择器用于选取获得焦点的元素

  • :first-child 选择第一个子元素

  • :last-child 选择最后一个子元素

  • :nth-child(num) 选择第 num 个子元素

  • :nth-of-type() 选择指定的元素

  • :empty 选择的元素里面没有任何内容

样式优先级

  • !important>行内样式>id选择器>类选择器>标签选择器>通配符>继承（部分样式属性可继承）
  • 默认继承
1
2
3
div{
    color: #fff !important;
}
1
<div style="color: #000"></div>