Cascading Style Sheets,层叠样式表。是一种用来结构化文档添加样式的计算机语言。
作用:修饰网页元素
语法(规则):由两个主要部分构成,选择器、声明
行内样式(写在标签上)
内部样式(写head中)
外部样式(创建一个.css文件,使用 link 引入到 html 文件中)
注:三种样式可以同时引用,但是有优先级,采取的规则是就近原则,行内>内部>外部。
2.1 标签选择器
选择元素标签插入样式
2.2 id选择器
标有特定id的元素,css中id选择器以#进行定义,id名必须唯一
#fruit {
font-size: 20px
}
2.3 类选择器
HTML 中以 class 属性表示, 在 CSS 中类选择器以一个点 . 号显示
可以针对不同的标签进行分类,一个标签可以有多个类,多个类之间使用空格分开
.colorCls{
color: pink;
}
选择器优先级:id选择器>类选择器>标签选择器
2.4 后代选择器
后代选择器用于选取某元素的后代元素,以空格分割。
header.nav ul li a {
text-decoration: none;
color: #614e3c;
font-size: 14px;
}
2.5 子元素选择器
>亲儿子选择器—只选择亲儿子,不选择孙子
div > p {
background-color: yellow;
}
2.6 伪类选择器
链接:
:hover—鼠标悬停,就是鼠标经过时
:active—鼠标点击时
:link—鼠标未访问
:visited—鼠标已访问
input表单:
:checked—选择选中的表单元素
:disabled—选择禁用的表单元素
:focus—选择获取焦点的表单元素
:not选择器—排除选择的元素以外的
:nth-child伪类选择器:
first-child:选择第一个子元素
last-child:选择最后一个子元素
nth-child(even):选择偶数行的子元素
nth-child(odd):选择奇数行的子元素
:nth-of-type 伪类选择器:
first-of-type:所选择的元素的父亲的第一个元素。
last-of-type:所选择的元素的父亲的最后一个元素。
nth-of-type(even):所选择的元素的父亲的偶数行的子元素
nth-of-type(odd):所选择的元素的父亲的奇数行的子元素
nth-child和nth-of-child的区别:
nth-child先看nth-child的排序,匹配到的标签如果与的第一个排序的标签不相匹配,不匹配代码执行不成功;
nth-of-type先看前面的HTML标签,在看后面的nth-of-type排序,与排序的标签与前面的HTML标签相匹配,代码执行成功;
:before伪类选择器—在某个元素之前插入内容,其中content必须写在样式中
:after伪类选择器—在某个元素之后插入内容,其中content必须写在样式中
注意:以上before 和 after 插入的都是内联元素
2.7 伪元素选择器
::first-line伪元素: 用于向文本的首行添加特殊样式,只能应用于块级元素。
p::first-line {
color: #ff0000;
}
::first-letter 伪元素:用于向文本的首字母添加特殊样式,只能应用于块级元素。
p::first-letter {
color: #ff0000;
font-size: 20px;
}
::before伪元素:可用于在元素内容之前插入一些内容
::after伪元素:可用于在元素内容之后插入一些内容 ( 伪元素设置的宽高生效的是其父元素 )
::selection伪元素:匹配用户选择的元素部分
2.8 +相邻元素选择器
匹配所有作为指定元素的同级后面的相邻元素。
div + p {
background-color: yellow;
}
2.9 ~通用兄弟选择器
匹配指定元素的同级元素的后面所有元素。
2.10 *通配符选择器
通用选择器(*)选择页面上的所有的 HTML 元素。但仅仅只用于css格式化前去除页面内的内外边距。
* {
padding:0;
margin:0
}
2.11 并集选择器
以英文逗号 (,) 相隔开,可以同时对多个选择器进行相同的操作
div, p {
color: #3377aa;
font-size: 20px
}
2.12 属性选择器
选择所有的类选择器的元素
ul li[class] {
color: #333333;
}
选择所有 class 类名为 nav的元素
ul li[class='nav'] {
font-size: 14px;
}
选择所有class类名中以 th 开头的元素
ul li[class^='th'] {
background-color: #cccccc;
}
选择所有class类名中以 th 结尾的元素
ul li[class$='th'] {
height: 31px;
}
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个选择器,通过不同的方式组合而成的
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
3.1 文本颜色
颜色属性用来设置文字的颜色。
十六进制值—如:#FF0000
一个RGB值—如:RGB(255, 0, 0)
颜色的名称—如:red
ul li {
color: #614e3c;
}
3.2 文本对齐方式
水平方向对齐:text-align —left/center/right
ul li {
text-align: center;
}
垂直方向对齐:line-height
ul li {
line-height: 20px;
}
3.3 文本修饰
text-decoration 属性用来设置或删除文本的装饰。
值 | 描述 |
---|---|
none | 删除文本下方的下划线 |
overline | 在文本上方加入一条线 |
line-through | 在文本中间横穿一条线 |
underline | 在文本下方加入一条线 |
3.4 文本缩进
text-indent 属性时用来指定文本的第一行的缩进。
p {
text-indent: 20px;
}
4.1 背景颜色
background-color 属性定义了元素的背景颜色.
5.1 字体系列
font-family 属性设置文本的字体系列。
p{font-family:"Times New Roman", Times, serif;}
5.2 字体样式
font-style 用于指定斜体文字的字体样式属性。
值 | 描述 |
---|---|
normal | 正常显示文字 |
italic | 斜体,以倾斜字显示的文字 |
oblique | 倾斜的文字,文字向一边倾斜。和斜体非常相似,但不支持 |
p {font-style:normal;}
p {font-style:italic;}
p {font-style:oblique;}
5.3 字体大小
font-size 属性设置文本的大小。
h1, p { font-size: 20px }
5.4 字体粗细
font-weight 属性设置文字的粗细。
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100 200 300 400 500 600 700 800 900 | 定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
p {
font-weight: 700;
}
list-style-type 可以对列表中的 li 元素指定列表项的标记类型。
none表示去掉 li 前面的小圆点或者数字。
li {
list-style-type: none;
}
7.1 表格边框
指定css表格边框,使用 border 属性。
/* 使用语法 */
table, th, td {
border: 边框宽度 边框样式 边框颜色;
}
/* 实例 */
table, th, td {
border: 1px solid #000;
}
7.2 折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:
7.3 表格宽度和高度
width 和 height 属性定义表格的宽度和高度。
table {
width: 100%;
}
th {
height: 50px;
}
7.4 表格文本对齐方式
text-align 属性设置水平对齐方式,left center right
td {
text-align: right;
}
vertical-align 属性设置垂直对齐方式,top center bottom
td
{
height:50px;
vertical-align:bottom;
}
CSS盒子模型本质上就是一个盒子,它包括:边距 (margin),边框 (border),填充 (padding)和实际内容 (content)。
padding
内填充或内边距,设置时可以设置4个方向,按照顺时针方向设置(上右下左)。
padding:50px; /* 四个方向都是50px */
padding:50px 60px; /*上下50px 左右60px */
padding:50px 60px 70px; /*上50px 右60px 下70px 左60px */
padding:50px 60px 70px 80px; /*上50px 右60px 下70px 左80px */
border—边框
三要素:宽度 样式 颜色
设置时,可以设置4个方向,按照顺时针方向设置(上右下左)
/*border-top-style: solid;
border-top-width: 20px;
border-top-color: chocolate; */
/* border-top的简写*/
border-top:20px solid chocolate;
/* border-left的简写*/
border-left:20px solid chocolate;
/* border-right的简写*/
border-right:20px solid chocolate;
/* border-bottom的简写*/
border-bottom:20px solid chocolate;
/* 终极简写 */
border: 1px solid red;
margin—外边距,可以设置四个方向的值(上右下左)
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
/* 简写顺序:上右下左 */
margin: 10px 20px 30px 10px;
CSS 中的盒子模型包括 标准盒子模型 和 IE 盒子模型 。
标准盒模型: 一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)
标准盒子模型添加padding内边距或border边框后,宽高都会进行相应增长;标准盒子模型使用box-sizing: content-box 定义。
怪异盒模型: 一个块的总宽度 = width + margin(左右)( width 包含 padding 和 border 值)
怪异盒子模型添加padding或者border,会从中减少content内容的占据区域,来为padding和border制造空间,宽高不会相对应的进行增长。IE盒子模型使用box-sizing: border-box 定义。
9.1 文本溢出
overflow 属性用于控制内容溢出元素框时显示的方式。
值 | 属性 |
---|---|
visible | 默认值,内容不会被修剪,会呈现在元素框之外 |
hidden | 内容会被修剪,其余内容是不可见的 |
scroll | 内容会被修剪,但是会显示滚动条查看其余内容 |
auto | 如果内容被修剪,则浏览器会显示滚动条查看其余内容 |
inherit | 规定从父元素继承 overflow 属性的值 |
overflow 只在指定高度的块元素上使用。
auto是当内容超出规定宽高的时候出现滚动条
scroll不论内容是否超出都会显示滚动条
9.2 省略号显示
省略号显示满足的四个条件:
容器要是块级元素且有固定的宽高
文本强制在一行显示 white-space: nowrap;
超出的文本隐藏 overflow: hidden;
让隐藏的文本变省略号 text-overflow: ellipsis
文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
10.1 传统网页布局的三种方式
网页布局的本质—用 CSS 来摆盒子,把盒子放到响应的位置。
CSS 提供了三种传统的布局方式:
标准流
浮动
定位
10.2 标准流
所谓标准流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。
10.3 为什么需要浮动
有很多的时候,标准流没有办法完成,此时就可以利用浮动完成布局,因为浮动可以改变元素标签默认的排列方式。最典型的就是多个块级元素一行内排列显示。
10.4 什么是浮动
float 属性用于创建浮动框,将其移动到一遍,直到左边缘或有边缘触及包含块或另一个浮动的边缘。
属性值 | 描述 |
---|---|
none | 元素不浮动(默认) |
left | 元素向左浮动 |
right | 元素向右浮动 |
10.5 浮动的作用
可以让多个块级元素同行使用
用浮动来控制图片,使其可以实现文字环绕的效果
10.6 浮动溢出
浮动溢出 ( 高度塌陷 ) 是因为在很多情况下父元素的盒子不方便直接给高度,但是子盒子在浮动之后不再占据原来标准流的位置了,导致父元素的盒子为0,影响后面元素的布局。
10.7 清除浮动
清除浮动的本质是清除浮动元素造成的影响。如果父盒子本身有高度,可以不用清理。清除浮动之后,父盒子会根据浮动的子盒子自动检测高度,父级有了盒子就不会影响下面的标准流了。
清除浮动的策略是闭合浮动。
10.7.1 额外标签法
额外标签法,也称为隔墙法,是 W3C 推荐的做法。额外标签法会在浮动元素的末尾添加一个空的标签,并添加清除浮动的样式。
原理是:clear的作用是设置元素左右两边不允许存在浮动元素。
语法:选择器{clear:属性值};
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
在实际工作中,几乎只用 clear: both
浮动1
浮动2
10.7.2 父级添加 overflow
可以给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll
原理:因为 overflow: hidden 触发了 BFC,计算BFC高度时,浮动元素也参与计算。
优点:代码简洁。
缺点:无法显示溢出的部分。
10.7.3 ::after 伪元素法
::after 方式是额外标签法的升级版,也是给父元素添加。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
/* 隐藏元素显示,但元素的位置保留. */
visibility: hidden;
}
.clearfix {
/* ICE6、s7专有 */
zoom: 1;
}
优点:没有增加额外标签,结构更简单
缺点:不能照顾低版本浏览器
代表网站:百度、淘宝、网易
10.7.4 双伪元素清除浮动
也是给父元素添加。
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* ICE6、s7专有 */
*zoom: 1;
}
优点:代码更简洁。
缺点:不能照顾低版本浏览器
代表网站:小米、腾讯
11.1 为什么需要定位
某个元素可以自由的在一个盒子内移动位置,并且可以压住其他盒子
当我们滚动窗口时候,盒子是固定在屏幕某个位置的
11.2 定位组成
定位:将盒子定在某一位置,所以定位也是在白方盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式
值 | 语义 |
---|---|
static | 静态定位(默认) |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
sticky | 粘性定位 |
边偏移
偏移量属性 | 描述 |
---|---|
top | 顶端偏移量,相对于其父元素上边线的距离 |
bottom | 底部偏移量,相对于其父元素下边线的距离 |
left | 左侧偏移量,相对于其父元素左边线的距离 |
right | 右侧偏移量,相对于其父元素右边线的距离 |
11.3 静态定位
静态定位时元素的默认定位方式,无定位的意思。(无偏移量)
语法:选择器{ position: static;}
11.4 相对定位
相对定位时元素在移动位置的时候,是相对于它原来的位置来说的。
语法:
选择器{
position: static;
top: xxx;(bottom: xxx)
left: xxx;(right: xxx)
}
特点:
它是相对于自己原来的位置来移动的
相对定位不会脱离标准流
11.5 绝对定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于html
。
语法:
选择器{
position: static;
top: xxx;(bottom: xxx)
left: xxx;(right: xxx)
}
特点:
如果其上面没有父盒子或者父盒子没有定位,则以浏览器为准
如果上面的父盒子有定位(相对、绝对、固定),则以最近一级的父亲为准
绝对定位会脱离标准流
12.1 按钮制作
button 标签
button {
width: 60px;
height: 40px;
font-size: 17px;
border-radius: 3px;
border: 1px solid #ccc;
}
input 标签,将 type 改为 button
input {
width: 70px;
height: 40px;
border-radius: 4px;
font-size: 17px;
border: 1px solid #ccc;
}
12.2 禁用按钮
可以使用 disabled 属性禁用按钮
可以设置opacity
属性为按钮添加透明度 (看起来类似 "disabled" 属性效果,并添加 cursor
属性并设置为 not-allowed
来设置一个禁用的图片
.disabled {
/* 透明度 */
opacity: 0.6;
/* 设置鼠标的样式为不可点 */
cursor: not-allowed;
}
12.3 图像按钮
可以将 input
的 type 属性设置为 image,并为其添加 src
属性添加图片路径。
在 CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法:border-radius:length;
参考值可以是数值或百分比的形式
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius
兼容 ie9+ 浏览器支持,但是不会影响页面布局,可以放心使用
14.1 文字阴影
在 CSS3 中,我们可以使用 text-shadow 属性将阴影应用于文本。
/* 语法*/
text-shadow: h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置,允许负值 |
v-shadow | 必需。垂直阴影的位置,允许负值 |
blur | 可选。模糊的距离 |
color | 可选。阴影的颜色 |
span{
font-weight: 700;
font-size: 26px;
text-shadow: 5px 5px 5px rgb(130, 128, 128);
}
14.2 盒子阴影
在 CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。
/* 语法*/
text-shadow: inset h-shadow v-shadow blur spread color;
值 | 描述 |
---|---|
inset | 可选。将外部阴影outset(默认)改为内部阴影 |
h-shadow | 必需。水平阴影的位置,允许负值 |
v-shadow | 必需。垂直阴影的位置,允许负值 |
blur | 可选。模糊的距离 |
spread | 可选。阴影的尺寸 |
color | 可选。阴影的颜色 |
/* 1. 综合写法 */
div.shadowBox {
width: 300px;
height: 200px;
background-color: #eee;
/* 水平 垂直 模糊距离 颜色 */
box-shadow: 5px 5px 5px #aaa;
margin-top: 20px;
}
/* 2.单边效果 */
.demo1 {
box-shadow:
/* 左边阴影 */
-2px 0 0 green,
/* 顶部阴影 */
0 -2px 0 blue,
/* 底部阴影 */
0 2px 0 red,
/* 右边阴影 */
2px 0 0 yellow;
}
/* 3.四边具有相同的阴影效果*/
/* 只设置模糊半径和颜色值*/
.demo2 {
box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}
/* 4.四边具有相同的阴影效果*/
/* 只设置扩展半径和颜色值 */
.demo3 {
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.5);
}
14.3 图片内阴影
方法1:将 img 放到一个 div 中,对父元素 div 进行 box-shadow 内阴影效果,再对 img 进行相对定位,并让其在父元素下一层。
![](../day02/images/1.jpg)
div.shadowImg {
width: 150px;
height: 210px;
margin-top: 20px;
box-shadow: inset 0px 0px 8px #3b3a3a;
}
div.shadowImg img {
width: 100%;
height: 100%;
position: relative;
z-index: -1;
}
方法2:在 img 父元素上使用 ::before 伪元素实现。
![](../day02/images/2.jpg)
div.shadowImg2 {
width: 150px;
height: 210px;
margin-top: 20px;
position: relative;
}
div.shadowImg2::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
box-shadow: inset 0px 0px 8px #38dc11;
}
div.shadowImg2 img {
width: 100%;
height: 100%;
z-index: -1;
}