CSS样式规则 盒子模型 元素类型转换 伪类选择器

目录

一、CSS样式规则

1.字体样式 

2.列表样式   

3.表格样式

二、伪类选择器

三、盒子模型

1.盒子模型的属性

 2.盒子的宽与高

3.盒子模型新增属性

四、元素类型转换

1.元素的类型

2.div 和 span 标签

3.元素类型转换

---

一、CSS样式规则

1.字体样式 

font-style：	字体样式
font-size：	字号
font-family：	字体
font-weight：	文字的粗细

<style>
        p{
            font-size: 20px;
            font-family: '隶书';
            font-weight: 700;
        }
 </style>

2.列表样式   

list-style-position	设置项目符号和文本的位置
list-style-position	设置项目符号和文本的位置
outside	默认值，列表项目符号放置在文本以外，且环绕文本不根据符号对齐
inside	列表项目符号放置在文本以内，且环绕文本根据符号对齐
list-style-image	指定项目符号的图像
list-style-type	指定项目符号的类型
list-style	指定列表样式

3.表格样式

border-spacing	指定单元格之间的距离,不能是负值
border-collapse	指定单元格的边框是否合并,取值有两个
separate	单元格边框独立,默认值
collapse	相邻单元格的边框合并
border-color	边框颜色
border-width	边框宽度
border-style	边框线的样式
border-radius	边框的弧度

二、伪类选择器

a:link	超链接未被访问的样式
a:visited	表示已经访问过的超链接
a:hover	当鼠标悬停在目标对象上时
a:active	激活超链接时
:only-child	匹配只有一个子元素的元素
:first-child	匹配父元素中的第一个子元素
:last-child	匹配父元素中的最后一个子元素
:nth-child(n)	匹配父元素中正数第n个元素
:nth-last-child(n)	匹配父元素中倒数第n个元素
:before	在匹配的元素之前添加指定的内容,要和content结合使用
:after	在匹配的元素之后添加指定的内容

          顺序：link，visited,hover,active   LVHA

:hover 的用法

a       {
       color: #333;
       text-decoration: none;
        }
 
 a:hover {
            color: #369;
        }

：before 的用法

div::before {
            content: "前";
        }

：after 的用法

 div::after {
            content: "后";
        }

三、盒子模型

1.盒子模型的属性

设置内容	样式属性	常用属性值
边框样式	border-style:上边 [右边 下边 左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度	border-width:上边 [右边 下边 左边];	像素值
边框颜色	border-color:上边 [右边 下边 左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框	border:四边宽度 四边样式 四边颜色;
圆角边框	border-radius:水平半径参数/垂直半径参数;	像素值或百分比
图片边框	border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;

 2.盒子的宽与高

盒子模型的总宽度与总高度

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

3.盒子模型新增属性

为了丰富网页的样式功能，去除一些冗余的样式代码，CSS3中添加了一些新的盒子模型属性，如颜色透明、圆角、阴影、渐变等。 

颜色透明度	rgba(r,g,b,alpha);
	opacity：opacityValue;   【取值0~1之间】
圆角	border-radius:
阴影	box-shadow
渐变	background-image:linear-gradient（参数值）
图片边框	border-image

四、元素类型转换

1.元素的类型

块元素：

在页面中以区域块的形式出现。

每个块元素通常都会独自占据一整行或多整行。

可以对其设置宽度、高度、对齐等属性。

常见块元素：<div> <h1>~<h6><p><ol><ul><li>

行内元素： 

不占有独立的区域。

仅仅靠自身的字体大小和图像尺寸来支撑结构。

一般不可以设置宽度、高度、对齐等属性。 

常见行内元素：<a><strong><b><em><i><ins><u><span>

行内块元素

一行放多个行内块元素

可以设置宽度和高度

默认宽度是它本身内容的宽度 

常见行内块元素：<img><input><td>

2.div 和 span 标签

<div>标签简单而言就是一个块标签，可以实现网页的规划和布局。	<div>标记是一个块容器标记。
	可以将网页分割为独立的部分，以实现网页的规划和布局。
	大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>
	可以替代大多数的块级文本标记。

<span>是行内元素，仅作为只能包含文本和各种行内标签的容器。	<span>标记是一个行内标记
	<span>与</span>之间只能包含文本和各种行内标记
	<span>标记常用于定义网页中某些特殊显示的文本，配合class属性使用
	当其他行内标记都不合适时，就可以使用<span>标记

3.元素类型转换

行内元素  → 块元素：display：block

块元素  → 行内元素：display：inline

行内元素  → 行内块元素：display：inline-block