CSS和HTML一样,也是一种标记语言,主要用于设置HTML页面中的文本、图片以及版面的显示样式和布局。

 

格式与书写

CSS格式如下:

选择器 {
    属性: 值;
    ...
}

主要有三种书写位置,一种是单独的css文件,叫做外部样式表,然后在html中引入。

<head>
    ...
    <link rel="stylesheet" type="text/css" href="test.css"/>
    ...
</head>

第二种是写到head标签的style标签内,叫做内部样式表。

<head>
    ...
    <style>
        选择器 {
            属性: 值;
            ...
        } 
        ...
    </style>
</head>

第三种是写到网页元素标签内,叫做行内样式表,这种情况下就不需要写选择器,只能控制当前标签,直接写属性和值。

<div style="属性: 值;...">
    ...
</div>

推荐使用第一种,这样可以将css代码和html代码分开管理,也方便查找。

 

CSS选择器

基础选择器

/* 标签选择器 */
div {...}

/* 类选择器 */
.person {...}

/* id选择器 */
#button1 {...}

/* 通配符选择器 */
* {...}

 

复合选择器

/* 后代选择器 */
ul li {...}

/* 子选择器 */
ul>li {...}

/* 并集选择器 */
div,p {...}

/* 伪类选择器:链接伪类选择器 */
a:link {...} /* 未被访问的链接 */
a:visited {...} /* 已被访问的链接 */
a:hover {...} /* 鼠标悬停的链接 */
a:hover b{...} /* 鼠标悬停a,b作出反应 */
a:active {...} /* 鼠标按下的链接 */

/* 伪类选择器:focus伪类选择器 */
input:focus {...} /* 光标所在的表单元素 */

链接伪类选择器书写时必须lvha顺序。

 

CSS3新增选择器

属性选择器
/* 具有某个属性 */
input[value] {...}

/* 某个属性等于某个值 */
input[type=text] {...}

/* 某个属性含有某个值 */
input[class*=slider] {...}
 
结构伪类选择器
/* 第一个子元素 */
ul li:first-child {...}

/* 最后一个子元素 */
ul li:last-child {...}

/* 第n个子元素(起始数为1) */
ul li:nth-child(n) {...}

/* 奇数子元素(起始数为1) */
ul li:nth-child(odd) {...}
ul li:nth-child(2n+1) {...}

/* 偶数子元素 */
ul li:nth-child(even) {...}
ul li:nth-child(2n) {...}

/* 前5个子元素 */
ul li:nth-child(-n+5) {...}

/* 后5个子元素 */
ul li:nth-child(n+5) {...}

/* 特定类型的第n个子元素 */
ul li:first-of-type {...}

当使用nth-child并且括号内是有n的公式时,可以理解为for i in range(n+1),从0开始遍历子元素,第0个和超出子元素个数的值会被忽略。

nth-child首先会先将子元素排号,然后找到符合条件的子元素,最后确认该子元素的类型;nth-of-type首先将特定类型的子元素选出来进行重新排序,然后找到符合条件的子元素。

伪元素选择器

伪元素其实是使用CSS创建的新标签元素(行内元素),并不出现在html结构中。

/* 在元素内部的前面插入内容 */
ul::before {
    content: "";
    ...
}

/* 在元素内部的后面插入内容 */
ul::after {
    content: "";
    ...
}

 

CSS三大特性

层叠性

就近原则,同一元素用同一选择器多次设置同一样式,后者会覆盖前者。

 

继承性

某些样式(text-、font-、line-、color)子元素未设置时,继承父元素的样式。

 

优先级

同一元素用不同选择器多次设置同一样式,则根据选择器权重执行。从低到高分别是:

  • 继承或者*(0,0,0,0)
  • 元素选择器或伪元素选择器(0,0,0,1)
  • 类选择器或伪类选择器(0,0,1,0)
  • ID选择器(0,1,0,0)
  • 行内样式表(1,0,0,0)
  • !important(无穷大)。

当使用复合选择器时,会出现权重叠加问题。

例如ul li的权重是两倍的li的权重,(0,0,0,1)+(0,0,0,1)=(0,0,0,2) > (0,0,0,1)。

a:hover的权重为(0,0,1,1)。

权重可以叠加,不会进位。例如,10层子类选择器的总权重为(0,0,10,0)。

 

元素显示模式

块元素

<div>

  • 独占一行
  • 可以控制宽高、内外边距等
  • 宽度默认是容器(父级宽度)的100%
  • 是一个容器级盒子,里面可以放块级元素或行内元素
  • 文字类元素(<p>等)内不能使用块级元素。

 

行内元素(内联元素)

<span><a>

  • 相邻行内元素同在一行
  • 高宽直接设置无效
  • 默认宽度就是它本身宽度
  • 只能容纳文本或其他行内元素

 

行内块元素

<img><input><td>

  • 相邻行内块元素同在一行,但之间会有空白缝隙。
  • 默认宽度就是本身内容宽度。
  • 宽高、内外边距等可以控制。

 

元素显示模式转换

一种元素获得另一种元素的特性,例如增加<a>的触发范围,转换成块级元素设置更大的宽高:

display: block;

其他可取值为inline、inline-block。

 

font字体属性

font-family

定义文本的字体

div {
    font-family: Arail,"Times New Roman"; /* 赋予多个字体时,用逗号隔开 */
}

一般给body标签使用,由于元素属性继承,这样页面中的所有元素都会以该字体显示。

 

font-size

定义文本大小

p {
    font-size: 30px;
}

谷歌浏览器默认文字大小16px;同样可以给body标签使用,指定页面所有文字大小。

 

font-weight

定义文本粗细

p {
    font-weight: bold;
}

可选值为normal(默认值)、bold(粗体)、bolder(特粗)、lighter(细体)等。

直接写数字也可以,400(默认值)、700(粗体)。

 

font-style

定义文本风格

p {
    font-style: italic;
}

可选值为normal(默认值)、italic(倾斜)。

 

复合属性

p {
    /* font-style font-weight font-size/line-height font-family 顺序不能错,前两个可以省略*/
    font: italic 700 35px/45px "Microsoft Yahei";
}

 

文本属性

color

设置文本颜色

p {
    color: red; /* 或者#ff0000、#f00、rgb(255,0,0)、rgb(100%,0%,0%)、rgba(255,255,255,0.3) */
}

 

text-align

设置文本水平对齐(不能垂直对齐)

p {
    text-align: center;
}

可选值为left(默认值)、center、right。

行内元素或行内块元素如果想要水平居中,可以给父元素添加text-align:center。

 

text-decoration

设置文本装饰线

p {
    text-decoration: underline;
}

可取值为none(默认值)、underline(下划线)、overline(上划线)、line-through(删除线)。

常用来取消<a>下划线。

 

text-indent

设置文本首行缩进

p {
    text-indent: 2em;
}

em是一个相对单位,代表当前元素大小,也可以换成32px这样的具体像素值。

 

line-height

设置文本行高

p {
    line-height: 26px;
}

行高=上间距+文本高度+下间距

行高如果不带单位则代表当前文本高度的倍数。

当文本行高(line-height)等于元素高度(height)时,即可垂直居中。

 

text-shadow

设置文字阴影

h6 {
    text-shadow: 10px 10px 5px rgba(0,0,0,0.3);
}

前两个参数分别是文字阴影的水平位置和垂直位置,必需属性。

第三个参数是模糊的距离,第四个参数是阴影颜色。

 

背景属性

background-color

设置背景颜色,默认transparent透明

div {
    background-color: red;
}

 

background-image

设置背景图片

div {
    background-image: url("logo.ico");
}

同时使用背景颜色和背景图片时,背景图片覆盖在背景颜色上方。

 

background-repeat

设置背景图片平铺

div {
    background-repeat: repeat-x;
}

可取值为repeat(平铺)、no-repeat(不平铺)、repeat-x(横向平铺)、repeat-y(纵向平铺)。

 

background-position

设置背景图片位置

div {
    background-position: x y;
}

x坐标和y坐标取值可以是像素值、百分比、单位表示符,或者方位(top、left、center…)。

当省略y坐标时,默认垂直居中。

 

background-attachment

设置背景图片附着

.bg {
    background-attachment: fixed;
}

可取值为scroll(背景图像随对象内容滚动)、fixed(背景图像固定)。

 

复合属性

div {
    /* 约定顺序为:背景颜色 背景图片 背景平铺 背景图片滚动 背景图片位置,可以省略 */
    background: red url("logo.ico") no-repeat fixed top;
}

 

盒子模型

盒子模型由margin(外边距)、border(边框)、padding(内边框)、content(内容)组成,注意margin和padding的区别。

 

border

设置盒子边框

div {
    border-width: 2px; /* 边框宽度 */
    border-style: solid; /* 边框形式 */
    border-color: red; /* 边框颜色 */
    border: solid 2px red;/* 边框复合属性 */
    border-top: solid 4px red; /* 单独设置某边边框宽度 */
}

border-style的可取值为none、solid(实线)、dashed(虚线)、dotted(点线)等。

表格可以使用border-collapse属性控制浏览器绘制表格边框的方式,值为collapse则相邻单元格边框合并。

 

padding

设置盒子内边距

div {
    padding: 5px 10px 15px 20px; /* 内边距复合属性 */
    padding-left: 20px; /* 单独设置某边内边距宽度 */
}

padding值可以省略,1个(同时设置四内边距宽度),2个(上下x,左右y),3个(上x,左右y,下z),4个(上x,右y,下z,左o)。

在设置盒子宽高后,内边距会影响盒子实际大小;如果宽高是继承了父元素,那么内边距不会影响盒子实际大小。

 

margin

设置盒子外边距

margin的使用方式和padding完全一致,但不会影响盒子大小,而会影响相邻盒子的位置。。

当块级盒子指定了宽度,并且盒子左右外边距设置为auto时,块级盒子就可以水平居中。

 

border-radius

设置盒子圆角

button {
    border-radius: 10px;
}

取值可以为百分比。

当连续设置4个数值时,代表分别设置左上、右上、右下、左下四个角的圆度。

或者写成四个属性,border-top-left-radius、border-bottom-right-radius……

 

box-shadow

设置盒子阴影

div {
    box-shadow: 10px 10px 30px 10px rgba(0,0,0,0.3);
}

前两个参数为阴影的水平位置以及垂直位置,必需属性。

第三个参数是模糊距离,第四个是阴影尺寸,第五个阴影颜色。

第六个参数可设置为inset,可以将默认外部阴影改为内部阴影。

box-shadow不占用空间,不会影响盒子大小和相邻元素位置。

 

CSS3新增属性

在默认情况下,盒子大小=width+padding+border;如果指定box-sizing:border-box,则盒子大小=width,此时更改padding和border则实际width会自动改变。

 

嵌套块元素垂直外边距的合并塌陷问题

当父子块元素同时设置了上外边距时,只有外元素会塌陷较大的外边距值。

例如,父元素margin-top 30px、子元素margin-top 50px,最终结果是父元素下移50px,子元素相对父元素不下移。

这种情况可以有以下三种方法解决:

  1. 给父元素定义padding-top(1px即可)。
  2. 给父元素定义border-top(1px即可)。
  3. 给父元素添加overflow:hidden(推荐,不会影响盒子实际大小)。

 

注意

行内元素为了兼容性,尽量只设置左右内外边距,不要设置上下边距,如果非要设置上下边距,可以转换为块级和行内块级元素。

 


我们一路奋战,

不是为了改变世界,

而是不让世界改变我们。

——《熔炉》