HTML选择器以及CSS规则

HTML选择器以及CSS规则

1.选择器

1.1.核心选择器

1.1.1 标签选择器

• div {}

1.1.2. id选择器

• #one {}

1.1.3. class选择器

• .second {}

1.1.4. 逗号选择器

• div,#one {}

• ul,ol {}

1.1.5. 组合选择器

• div#one {}

1.1.6. 普遍选择器

• *不单独使用

1.2. 层次选择器

1.2.1 子元素选择器

• .nav > ul > li {}

1.2.2 后代选择器

• .nav li {}

1.2.3 下一个兄弟选择器

• .products > li.ios + *{}

1.2.4 之后所有兄弟选择器

• .products > li.ios ~ *{}

1.3 属性选择器,过滤（表单元素）

1.3.1

selector[]

1.3.2

input[placeholder]

1.3.3

input[type=text]

1.3.4 input[type^=t]

1.3.5

input[type$=t]

1.3.6

input[type*=t]

1.4 伪类选择器,过滤器

1.4.1 与状态相关

• :link a标签还未被访问

• :hover 光标悬浮到元素上

• :active a标签激活

• :visited a标签访问过

1.4.2 与子元素相关

• :first-child

• :last-child

• :nth-child(v)

  v 为数字，公式，关键字

• :first-of-type

• :last-of-type

• :nth-of-type

1.5 伪元素

• ::after

• ::before

  副作用：在dom节点中产生一个新节点

1.6 了解

• ::first-letter

• ::first-line

• ::selection

2. 规则

2.1 字体样式(可以被继承)

• font-family:“微软雅黑”,“Microsoft YaHei”,“宋体”,serif;

• font-size:12px; 字体大小

  • 浏览器默认字体为16px

• font-weight:bold; 字体粗细

  • normal

  • bolder

  • 100~900

• font-style:normal; 是否开启斜体

  • italic 开启斜体

• line-height:2em; 行高【文本垂直居中】

• font:style weight size/line-height family;

  • 例如：italic bold 12px/2em ‘Microsoft YaHei’,serif

• 网络字体

• 主要用于字体图标库（iconfont/fontawesome）

  使用步骤：

1. 在iconfont网站中选择图标，加入项目，产生代码

2. 将产生的代码在html中通过link引用
   http://at.alicdn.com/t/font_1328534_f3dyyeuoew.css

3. 应用css中定义好的类，来使用对应的图标

2.2 文本样式(可以被继承)

• color:#333; 字体颜色

• text-align:center 【文本水平居中】

• text-decoration-line

• underline

• line-through

• overline

• none

• text-decoration-style

  • solid

  • dotted

  • double

  • dashed

  • wavy

  • …

• text-decoration-color 颜色

• text-decoration:none; 字体装饰

• text-indent:2em; 文本缩进

• text-shadow:12px 2px 3px #ccc;

2.3 列表样式

• list-style-type

  • circle

  • square

  • …

• list-style-image

  • url(’’)

• list-style-position

  • outside

  • inside

• list-style:none;

2.4 盒子样式(盒子，块元素)

• width

• height

• margin-top

• margin-right

• margin-bottom

• margin-left

• margin

• margin:10px; 上右下左

  • margin:0 10px; 上下为0，左右10px

  • margin:0 5px 10px; 上0，左右5px，下10px

  • margin:0 5px 10px 15px; 上右下左

• border-top-style 边框线类型

• border-top-width 边框宽度

• border-top-color 边框线颜色

• border-top

  • border-right-style 边框线类型

  • border-right-width 边框宽度

  • border-right-color 边框线颜色

  • border-right

  • border-bottom-style 边框线类型

  • border-bottom-width 边框宽度

  • border-bottom-color 边框线颜色

  • border-bottom

  • border-left-style 边框线类型

  • border-left-width 边框宽度

  • border-left-color 边框线颜色

  • border-left

• border-color

• border-style

• border-width

• border:1px solid #ededed; 【*】

• padding-top

• padding-right

• padding-bottom

• padding-left

• padding

• box-shadow: 5px 5px 10px #ccc;

• box-shadow:inset 0 0 3px lightblue;

• border-radius 圆角半径

• background-origin 背景铺设的起点

  • border-box 边框下

  • padding-box 内边距下

  • content-box 内容下

• background-image 背景图片

  • url

• background-repeat 背景重复方式

  • repeat-x

  • repeat-y

  • no-repeat

• background-color 背景颜色

• background-position 背景位置

• center

• top left

• 10px 20px

• background-clip 背景裁切方式

  • border-box 边框下

  • padding-box 内边距下

  • content-box 内容下

• background 速写

  • background:url(’’) no-repeat center;

  • background-size:cover;

  • =>

  • background:center/cover padding-box url(’’) no-repeat ;

• 一个盒子的组成：

  • 外边距 margin

  • 边框 border

  • 内边距 padding

  • 内容 存放子元素或者内容的区域

• 盒子所占面积？

• 盒子存放内容的区域为多大?

• 盒子计算方式

  • box-sizing:content-box;内容盒子（传统盒子）

    • width = 内容宽

    • height = 内容高

    • 所占的宽 = border + padding + width

    • 所占的高 = border + padding + height

  • box-sizing:border-box;边框盒子（怪异盒子）

    • width = 边框以内所有的和

    • width = border + padding + 内容宽

2.5 单位

• 颜色

  • #333333 => #333

  • #ededed

  • rgb(0,0,0) =>#000000

  • rgba(0,0,0,0.3) 渐变

• 长度

  • 绝对单位

    • px

• 相对单位

  • em 当前元素上的font-size的值

  • font-size:12px ;

  • 1em = 12px;

  • 2em = 24px;

• rem

  • html{font-size:14px}

  • 1rem = 14px;

• %

  • width 相对于父元素

  • border-radius 相对于当前元素的width

  • …

• 关键

  • center

  • border-box

  • content-box

• 函数

  • url()

  • rgb()

  • rgba()

百度脑图-规则

百度脑图-CSS

我回来了！！已经好几天没有更新博客了，今天整理了HTML选择器的相关内容，以及一点CSS的，明天更新更详细的CSS的相关内容~

小可爱们 ~ see you！