Css的复合选择器 ,特性,符合属性以及盒子模型

一 复合选择器

  1. 标签指定式(也叫交集选择器)

    用法:标签名.类名{} 例:div.box{属性名:属性值;} (标签名和类名中间不用加空格)

  2. 选择符分组(也叫并集选择器)

    用法:选择符,选择符,选择符{属性名:属性值;} 例:h1,h2,h2{}(选择符与选择符之间必须加逗号,不用空格)

  3. 后代选择器 用法:父级 子级{属性名:属性值;} 例:ul li{属性名:属性值;}(父级和子级中间必须加空格)

二 css的特性

  1. 层叠性:后写的样式会覆盖先写的。
  2. 继承性:子级会继承父级的属性,但不是所有的属性都有继承性。(比如:font-size属性虽然有继承性,但H标记不管用, A标记没有继承性。)

三 css的权限:

  1. 基本权限:

    行内式>id选择器>类选择器>标签选择器

  2. 高级权限:
    1. 权重值:行内式1000,id选择器100,类选择器10,标签选择器1,通配符选择器0.
    2. 原则:就近原则大于所有权限,
    3. 提权:(!important),权限不够的时候可以使用; 但是就近原则比提权的权限大。

四 一行文本垂直居中:盒子的高度=行高。

五 a链接里的四种状态(也叫伪类)

  1. a:link 未访问时
  2. a:visited 访问后
  3. a:hover 鼠标悬停时
  4. a:active 鼠标点击不动时

当四种状态时同时存在时,必须区分先后顺序(未访问时-访问后-悬停时-点击不动时)

六 复合属性

  1. border里的属性值: border-width边框宽度 border-style边框样式 border-color边框颜色

    缩写形式: border:边框大小 边框的虚实 颜色;例 border:1px solid #000 (三个属性值必须写全,位置可以调换, 中间加空格)

单独控制边框的方向:

  1. border-top上边框 例 border-top:1px solid #000
  2. border-bottom下边框 例 border-bottom:1px solid #000
  3. border-left左边框 例 border-left:1px solid #000
  4. border-right右边框 例 border-right:1px solid #000
  1. background里的属性值:background-color背景色 background-image背景图 background-repeat背景图片的平铺方式(repeat里的属性值:no-repeat不平铺 repeat-x 水平铺 repeat-y 垂直铺 center中 top上 bottom下)

    缩写形式: background:颜色 图片 平铺 平铺方式;例 background:#000 url(图片的路径) repeat center top;(中间加空格,属性值可以调换,只出现一个属性值也可以)

  2. font里的属性值:font-size字号 font-style(normal正常 italic倾斜)字体样式 font-weight(bold加粗 normal正常)字体粗细 line-height行高 font-family字体 font-variant(small-caps)字母小写变大写

    缩写形式:font:样式 小写 粗细 字号/行高 "字体";例 font:italic small-caps bold 1px/20px "宋体";(属性值的位置不可以调换, 至少有两个属性值:字号和字体)。

七 代码里的长度单位和颜色单位

1 长度单位

1)相对长度: px像素 em相对于当前对象的倍数;

2) 绝对长度:cm mm

2 颜色单位:

  1. 颜色名 例 color:red;
  2. 十六进制:#000000 缩写:#000 取值范围:1-9; a-f;
  3. 三原色:RGB(230,0,0 取值范围:0-255;)

八:盒子的模型

1 盒子的组成

左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距=盒子的宽度;

上外边距+上边框+上内边距+内容+下内边距+下边框+下外边距=盒子的高度;

2 内边距:padding

单独控制方向:padding-left/right/top/bottom;

缩写形式:padding:1px; 1个值 上下左右

padding:1px 2px; 2个值 上下 左右

padding:1px 2px 3px; 3个值 上 左右 下

padding:1px 2px 3px 4px; 4个值 上 右 下 左(顺时针方向)

3 外边距:margin

单独控制方向:margin-left/right/top/bottom;

缩写形式:margin:1px; 1个值 上下左右

margin:1px 2px; 2个值 上下 左右

margin:1px 2px 3px; 3个值 上 左右 下

margin:1px 2px 3px 4px; 4个值 上 右 下 左

自动居中:margin:0 auto;

外边距的特性:水平盒子的外边距会相加;垂直盒子的外边距会取大值;

 

 


 

小温

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: