CSS---学习笔记总结

在做项目时，总是被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 p {...}

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

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

伪类选择器

伪类选择器	说明
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标划入的链接	：hover 非a标签在IE6下是无效的
a:active	选定的链接

伪元素选择器

伪元素选择器	说明
.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>

效果图：

css优先级：

等级	类型	权重值
1	内联样式	1000
2	id选择器	100
3	class选择器、伪类选择器、属性选择器	10
4	标签选择器、伪元素选择器	1

注意：权重值相同的情况下，写在后边的样式会把写在前面的样式覆盖

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-repeat	背景图是否重复	background-repeat:no-repeat;
	background-color	背景颜色	background-color:red
	background-position	背景图位置	background-position :50px 100px;
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-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-top:10px;
	margin-bottom	下外边距	margin-bottom:10px;
	margin-left	左外边距	margin-left:10px;
	margin-right	右外边距	margin-right:10px;
	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;
浮动	float	浮动	脱离文档流，空间释放 float:left; float:right float:none
浮动	clear	清除浮动	clear:left clear:right clear:both

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

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

行级元素：span a strong

块级元素：div h1-h6 ul li table

行级块元素：img input button 既可以跟其他元素共占一行，又可以设置宽高

CSS---学习笔记总结

css---层叠样式表

语法：

选择器：

css优先级：

css属性

猜你喜欢