CSS---学习笔记总结

最新推荐文章于 2021-11-29 16:22:56 发布

原创最新推荐文章于 2021-11-29 16:22:56 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

26 篇文章

订阅专栏

在做项目时，总是被css样式困扰，系统的梳理下：

css---层叠样式表

语法：

内联样式：样式写在标签对中，一般很少使用，尽量不要写在标签内，不利于代码维护。
内部样式：将样式集中写在head标签对中，适用于一个页面。
外部样式：将所有样式放在一个或多个.css为扩展名的外部样式表文件中，通过<link>标签将样式链接到HTML文档中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>

<body>
    <div style="width:100px; height:100px;background:red">内联样式</div>
    <div id="div1" class="d1">内部样式</div>
    <div id="div2">外部样式</div>
</body>

</html>

style.css

#div2{
    width:100px; height:100px;background:yellow;
}

选择器：

通用选择器: *{...}===可以同时选中页面中的所有元素

标签选择器：div{...}===为元素定义统一样式

类选择器：.class{ }===使用“.”进行标识，为元素定义单独或相同的样式

id选择器：#id{...}===使用“#”进行标识，对应于文档中某一个具体的元素

复合选择器：div #box1{...}===可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。

层级选择器：div p {...}

层级选择器	说明
ancestor descentdant	在给定的祖先元素下匹配所有的后代元素（儿子、孙子、重孙子、...）
parent > child	在给定父元素下匹配所有的子元素（儿子）
prev + next	匹配所有紧接在prev元素后的next元素（同桌）
prev ~ siblings	匹配prev元素之后的所有siblings元素（兄弟）

属性选择器：[属性名]或 [属性名=属性值] div[id]{...}

属性选择器	说明
[class^="icon"]	用来匹配属性值以”icon”开头的每个元素
[class*=" icon"]	用来匹配属性值中包含”icon”的每个元素
[class$=" icon"]	用来匹配属性值以”icon”结尾的每个元素

伪类选择器

伪类选择器	说明
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标划入的链接	：hover 非a标签在IE6下是无效的
a:active	选定的链接
input:focus	焦点
div:not(.box)	否定伪类

伪元素选择器

伪元素选择器	说明
.demo::after	内部的后边添加一个微元素，行级元素	content:”内容”
.demo::before	内部的前边添加一个微元素，行级元素	content:”内容”

示例如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <style>
        #div {
            width: 100px;
            height: 100px;
            background: green;
        }

        #div::after {
            content: '伪元素'
        }

        #div::before {
            content: '伪元素';
            background: red;
        }
    </style>
</head>

<body>
    <div id="div">1111</div>

</body>

</html>

效果图：

序号选择器:

类别	序号选择器
不区分类型	:first-child 选中同级别中第一个标签
	:last-child 选中同级别中最后一个标签
	:nth-last-child(n) 选中同级别中倒数第n个标签
	:nth-child(n) 选中同级别中第n个标签
	:only-child 选中同级别中唯一子元素标签
区分类型	:first-of-type 选中同级别中同类型第一个标签
	:last-of-type 选中同级别中同类型最后一个标签
	:nth-of-type(n) 选中同级别中同类型第n个标签
	:nth-last-of-type(n) 选中同级别中同类型倒数第n个标签
	:only-of-type 选中同级别中唯一同类型子元素标签
奇偶选择	:nth-child(odd) 选中级别中所有奇数
	:nth-child(even) 选中同级别中所有的偶数
	:nth-child(xn+y) x,y是用户自定义的 n为计数器,从0开始递增选择, 到元素的总个数停止

css优先级：

等级	类型	权重值
1	important	>1000
2	内联样式	1000
3	id选择器	100
4	class选择器、伪类选择器、属性选择器	10
5	标签选择器、伪元素选择器	1
6	*通配符	0

注意：选择器的权值加到一起, 大的优先; 如果权值相同, 后定义的优先，写在后边的样式会把写在前面的样式覆盖

css属性

属性类别	属性	描述	使用方法
width& height	width	宽	width:100px
width& height	height	高	height:100px
背景相关属性	background	背景复合写法	background:red url(1.jpg) no-repeat 50px 100px;
	background-image	背景图片	background-img:url(1.jpg);
	background-size	背景图片尺寸
	background-repeat	背景图是否重复	background-repeat:no-repeat;
	background-color	背景颜色	background-color:red
	background-attachment	设置背景是否随页面滚动	scroll;默认值，背景图片会随页面一起滚动 fixed;背景图片不随页面滚动，会固定在页面的指定位置,一般这种背景都会设置给body
	background-position	背景图位置	background-position :50px 100px;
	opacity	背景的不透明度	0-1；0表示完全透明，1表示完全不透明
	background-origin	背景图定位区域
display& visibility	display	显示	display:none; 隐藏，不占用空间 display:inline; 行级元素，多个元素占一行，不可以设置宽高 display:block;块级元素，自己占一行，可以设置宽高 display:inline-block;行级块元素，可以多元素占一行，可以设置宽高
display& visibility	visibility		visibility:visible;元素可见 visibility:hidden;元素不可见，但空间占着
文本相关属性	text-indent	首行缩进	text-indent:20px;
	text-align	文本对齐方式	text-align:left;左对齐 text-align:center;居中对齐 text-align:right;右对齐
	letter-spacing	字符间隔	letter-spacing:2px;
	text-transform	字母大小写	text-transform:uppercase;大写 text-tansform:lowercase;小写 text-transform:capitalize;首字母大写 text-transform:none;正常
	text-decoration	文本装饰	text-decoration:none;无 text-decoration:underline;下划线 text-decoration:overline;上划线 text-decoration:line-through;穿过文本的划线
字体相关属性	font	复合样式	font: italic bold 12px arial, sans-serif;
	font-family	类型	“微软雅黑” “宋体”
	font-size	大小	20px
	font-weight	粗细	100-900，700--bold，默认400--normal
	font-style	风格	italic斜体 normal正常
	color	颜色	red, #ccc,...
css盒子模型	padding	内边距	padding: 10px 20px 30px 50px; 上右下左 padding:10px 20px;垂直水平
	padding-top	上内边距	padding-top:10px
	padding-bottom	下内边距	padding-bottom:10px
	padding-left	左内边距	padding-left:10px
	padding-right	右内边距	padding-right:10px
	border	复合样式	border: 1px solid red;
	border-width	边框宽度	border-width:20px
	boeder-style	风格	dashed 虚线 solid 实线
	border-color	颜色	red
	margin	外边距	margin: 10px 20px 30px 50px; 上右下左 margin:10px 20px;垂直水平
	margin-top	上外边距
	margin-bottom	下外边距
	margin-left	左外边距
	margin-right	右外边距
	box-sizing		content-box标准盒模型 border-box怪异盒模型
css定位	position	位置	结合left,right,top,bottom属性使用 relative相对定位，相对于自己的初始位置，定位后空间不释放 absolute绝对定位，相对于最近已定位的祖先元素，如果没有最近已定位的祖先元素，则相对于body，定位后空间被释放 fixed 固定定位，位置相对于可视页面，定位后空间释放
	left	左	left:-10px;
	top	上	top:20px;
	right	右	right:30px
	bottom	下	bottom:20px;
	z-index	设置元素的层级层级：定位元素 > 浮动元素 > 文档流中的元素	当元素开启了定位以后，可以通过z-index来设置元素的层级
浮动	float	浮动	脱离文档流，空间释放 float:left; float:right float:none
浮动	clear	清除浮动	clear:left clear:right clear:both
颜色	color		color:red; color:#fff; color:rgb(255,0,0); color:rgba(255,0,0,0.4);0.4为透明度
光标	cursor	显示光标的类型	cursor: pointer;光标呈现为指示链接的指针（一只手） cursor: move;此光标指示某对象可被移动。 cursor: crosshair;光标呈现为十字线 cursor: help;此光标指示可用的帮助（通常是一个问号或一个气球）。 cursor: wait;此光标指示程序正忙（通常是一只表或沙漏）。
列表	list-style		list-style:none;
处理内容溢出	overflow	控制内容溢出的情况	overflow:visible;默认值 overflow:scrol;添加滚动条 overflow:auto;根据需要添加滚动条 overflow:hidden;隐藏超出盒子的内容
	transition		transition: 0.25s linear;
	box-sizing	绘制元素方式	box-sizing: content-box;在宽度和高度之外绘制元素的内边距和边框 box-sizing: border-box;为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

css盒模型：内容+padding+border+margin

标准盒模型：width属性=内容宽度
怪异盒模型：width属性=内容宽度+padding+border==ie6浏览器及以下浏览器，不写doctype文档声明的时候。

标签元素划分：

标签元素划分	特点	标签
块级元素	独占一行，可以设置宽高	ul、li、form、h1-h6、hr、p、div、table
行级元素	不会独占一行，不可以设置宽高	a、big、br、em、label、span、strong
行级块元素	既可以跟其他元素共占一行，又可以设置宽高	input、select、textarea、button、img