当前位置：首页 › 技术 › 前端 › CSS样式表基础（一）

CSS样式表基础（一）

前端, 技术 • 2.14k • 0

yumefx 4年前

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，子元素相对父元素不下移。

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

给父元素定义padding-top（1px即可）。
给父元素定义border-top（1px即可）。
给父元素添加overflow:hidden（推荐，不会影响盒子实际大小）。

注意

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

我们一路奋战，

不是为了改变世界，

而是不让世界改变我们。

——《熔炉》

0 赏

请作者吃个鸡腿！

扫一扫支付

‹ 上一篇

下一篇 ›