CSS 基础

选择器

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

注意

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

继承

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

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

类型权值
继承0.1
标签1
类选择器10
id选择器100
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 相同,但是它是相对于浏览器窗口进行布局,位置不受文档的滚动影响