Skip to content

Latest commit

 

History

History
213 lines (140 loc) · 5.71 KB

2016-06-05 CSS 基础.md

File metadata and controls

213 lines (140 loc) · 5.71 KB
  • tags: web
  • date: 2016-06-05

CSS 基础

选择器

  • 标签选择器：p{ }
  • 类选择器：.class{ }
  • id 选择器：#id{ }
  • 子选择器：.parent>child{ }
  • 包含选择器：.parent children{ }
  • 通用选择器：*{ }
  • 伪类选择器：a:hover{ }
  • 分组选择器：p,.class,#id{ }

注意

  • id 选择器是唯一的，即一个标签不能有多个 id，同一个 id 也不能对应多个标签
  • 子选择器指与父选择器相邻的下一级元素，包含选择器没有这一限制
  • 伪类选择器的使用需要注意浏览器兼容问题
  • 分组选择器使用逗号隔开，逗号之间的选择是平行关系，旨在能够复用样式

继承

CSS 的某些样式具有继承性，比如 p 标签的 color 属性可以继承，但是 border 属性就不会继承

不同选择器设置的 CSS 属性是有权值的，浏览器回优先使用权值高的样式

Untitled Database

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

具有相同权重值的样式采用后面覆盖前面的策略

因此：內联样式（标签内） > 嵌入样式（当前文件header头中） > 外部样式（外部文件）

!important 标记的样式权重值更高，不遵循覆盖策略

!important 要写在分号前面：

p{color:red!important;}

用户自己设置样式更高

用户设置的样式 > 网页制作者样式 > 浏览器默认样式

比如 Chrome 浏览器可以设置最小字号，那么这个样式优先级最高

排版

文字排版

body{
font-family:"Microsoft Yahei"; /*字体*/
font-size:12px; /*字号*/
color:#666; /*颜色*/
font-weight:bold; /*设置粗体*/
font-style:italic; /*设置斜体*/
text-decoration:underline; /*设置下划线*/
text-decoration:line-through; /*设置删除线*/
}

缩写:

body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}

可缩写为：

body{
font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

其中：

  • 缩写时 font-size 与 line-height 中间要加入“/”斜扛
  • 使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值

段落排版

p{
text-indent:2em /*设置首行缩进，2em表示两个字符大小*/
line-height:2em /*设置行间距*/
letter-spacing:20px; /*设置字母间距*/
word-spacing:20px; /*设置单词间距*/
text-align:center; /*为块元素的文字，图片设置居中样式*/
}

元素分类

html 标签分为：块状元素、內联元素（又叫行内元素）、內联块状元素。表示为 display: block; 或 inline; 或 inline-block;

块状元素

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 等
  • 每个块状元素都新起一行并且结尾处换行
  • 元素的高度，宽度行高以及顶和底边距都可以设置
  • 元素的宽度在不设置的情况下是其父容器的 100%

内联元素

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 等
  • 和其他元素在同一行中
  • 元素的高度，宽度以及顶和底部边距均不可设置
  • 元素的宽度就是它包含文字或图片的宽度，不可改变

内联块状元素

<img>、<input>
  • 和其他元素在同一行中
  • 元素的高度、宽度、行高以及顶和底边距都可设置

盒子模型

即对 padding margin border ... 等的理解，与 Android 系统一样。只是多加了一个 border 的概念，width 中不包含 border

div{
border: 2px solid red;
}

也可以分开写：

div{
border-width:2px;
border-style:solid;
border-color:red;
}

border-style 常见样式：

dash (虚线) | dotted (点线) | solid (实线)

若想单独设置某一方向的边框可以使用： border-top:2px solid red; border-right, ...

border padding margin 都有如下缩写方法：

  • 如果 top、right、bottom、left的值相同：margin:10px 10px 10px 10px; => margin:10px;
  • 如果 top 和 bottom、left和 right的值相同: margin:10px 20px 10px 20px; => margin:10px 20px;
  • 如果left和right的值相同: margin:10px 20px 30px 20px; => margin:10px 20px 30px;

布局模型

CSS 的布局模型有：流动模型（flow）、浮动模型（float）、层模型（layer）

流动模型

浏览器默认布局模型，块元素都会自上而下垂直延伸，占宽 100%，内联元素都会从左至右排列

浮动模型

比如使两个块元素并排左对齐： div{float:left}

层模型

层模型有三种形式：

  • 绝对定位（position:absolute)
  • 相对定位（position:relative）
  • 固定定位（position:fixed）

absolute 模式将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

relative 会先用 float 属性布局，然后相对原来的位置根据left、right、top、bottom布局，但是元素原来的位置仍然保留不变，其它元素根据原来的位置布局

fixed 的布局原理与 absolute 相同，但是它是相对于浏览器窗口进行布局，位置不受文档的滚动影响