快速了解CSS常用样式(上)

1. CSS简介：

1.1 css

Cascading Style Sheets，层叠样式表。是一种用来结构化文档添加样式的计算机语言。

作用：修饰网页元素

语法（规则）：由两个主要部分构成，选择器、声明

1.2 插入样式表的三种方式

• 行内样式（写在标签上）

• 内部样式（写head中）

• 外部样式（创建一个.css文件，使用 link 引入到 html 文件中）

注：三种样式可以同时引用，但是有优先级，采取的规则是就近原则，行内>内部>外部。

2. 选择器

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. 文本格式

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. 背景

4.1 背景颜色

background-color 属性定义了元素的背景颜色.

5. 字体

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;
}

6. 列表

list-style-type 可以对列表中的 li 元素指定列表项的标记类型。

none表示去掉 li 前面的小圆点或者数字。

li {
	list-style-type: none;
}

7. 表格

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;
}

8. 盒子模型

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. 文本溢出

9.1 文本溢出

overflow 属性用于控制内容溢出元素框时显示的方式。

值	属性
visible	默认值，内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，其余内容是不可见的
scroll	内容会被修剪，但是会显示滚动条查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条查看其余内容
inherit	规定从父元素继承 overflow 属性的值

overflow 只在指定高度的块元素上使用。

auto是当内容超出规定宽高的时候出现滚动条

scroll不论内容是否超出都会显示滚动条

9.2 省略号显示

省略号显示满足的四个条件：

• 容器要是块级元素且有固定的宽高

• 文本强制在一行显示 white-space: nowrap;

• 超出的文本隐藏 overflow: hidden;

• 让隐藏的文本变省略号 text-overflow: ellipsis

        文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
        文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
        文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
        文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
        文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出
        文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出

10. 浮动

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. 定位

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. 按钮

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 属性添加图片路径。

13. 圆角

在 CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法：border-radius:length;

• 参考值可以是数值或百分比的形式

• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

• 兼容 ie9+ 浏览器支持，但是不会影响页面布局，可以放心使用

14. 阴影（图片、文字、盒子）

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 进行相对定位，并让其在父元素下一层。

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 伪元素实现。

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;
}