2019-10-10发表cs / front-end41 分钟读完 (大约6170个字)0次访问

CSS笔记

CSS的学习记录。

样式属性，学个大致框架，要用还得查，用集成的css框架比较好。比如bootstrap什么的。

CSS单位

绝对：in、cm、mm、pt、pc

相对：px、em：印刷单位，相当于12个点、%

一般用px得了。懒。

CSS语法

键值对。选择器{k: v; k: v;}

注释/*xxxx*/写在<style></style>里

CSS属性

以下属性值中，括号中的内容表示 sublime 中的快捷键。

字体颜色：（c）

1	color:red;

color 属性的值，可以是英语单词，比如 red、blue、yellow 等等；也可以是 rgb、十六进制(后期详细讲)。

字号大小：（fos）

1	font-size:40px;

font 就是“字体”，size 就是“尺寸”。px 是“像素”。单位必须加，不加不行。

背景颜色：（bgc）

1	background-color: blue;

background 就是“背景”。

加粗：（fwb）

1	font-weight: bold;

font 是“字体” weight 是“重量”的意思，bold 粗。

不加粗：（fwn）

1	font-weight: normal;

normal 就是正常的意思。

斜体：（fsi）

1	font-style: italic;

italic 就是“斜体”。

不斜体：（fsn）

1	font-style: normal;

下划线：（tdu）

1	text-decoration: underline;

decoration 就是“装饰”的意思。

没有下划线：（tdn）

1	text-decoration:none;

定位属性

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。

position: absolute; 

position: relative; 

position: fixed; 

相对定位

相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。

背景属性中，是通过如下格式：

1	background-position:向右偏移量向下偏移量;

相对定位属性，是通过如下格式：

1
2
3

position: relative;
left: 50px;
top: 50px;

相对定位的举例：

<!doctype html>
<html lang="en">
 <head>
  <title>Document</title>
	<style type="text/css">
		.div1{
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		.div2{
			position: relative;/*相对定位：相对于自己原来的位置*/
			left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
			top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
	</style>
 </head>
 <body>
	<div class="div1">有生之年</div>
	<div class="div2">狭路相逢</div>
 </body>
</html>

相对定位不脱标

相对定位：不脱标，老家留坑，别人不会把它的位置挤走。

也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。

相对定位的用途

如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：

（1）微调元素
（2）做绝对定位的参考，子绝父相

相对定位的定位值

left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移

PS：负数表示相反的方向。

↘：

1
2
3

position: relative;
left: 40px;
top: 10px;

↙：

1
2
3

position: relative;
right: 100px;
top: 100px;

↖：

1
2
3

position: relative;
right: 100px;
bottom: 100px;

绝对定位

这个可以参考github前端学习

绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。

格式举例如下：

1
2
3

position: absolute;  /*绝对定位*/
left: 10px;  /*横坐标*/
top/bottom: 20px;  /*纵坐标*/

绝对定位脱标

绝对定位的盒子脱离了标准文档流。

所以，所有的标准文档流的性质，绝对定位之后都不遵守了。

绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。

绝对定位的参考点（重要）

（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角：

（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角：

“首屏”就是页面没卷动时的第一页，用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。

以盒子为参考点

一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。

以下几点需要注意。

（1）要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：

<div class="box1">        相对定位
	<div class="box2">    没有定位
		<p></p>           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
	</div>
</div>

再比如：

<div class="box1">        相对定位
	<div class="box2">    相对定位
		<p></p>           绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
	</div>
</div>

（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。

工程应用：

“子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：

父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。

（3）绝对定位的儿子，无视参考的那个盒子的padding：

父亲div的padding，p是div的内容区域。此时，如果div相对定位，p绝对定位，那么，
p将无视父亲的padding，在border内侧为参考点，进行定位

工程应用：

绝对定位非常适合用来做“压盖”效果。

让绝对定位中的盒子在父亲里居中

我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。

可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：

div {
	width: 600px;
	height: 60px;
	position: absolute;  绝对定位的盒子
	left: 50%;           首先，让左边线居中
	top: 0;
	margin-left: -300px;  然后，向左移动宽度（600px）的一半
}

如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。

我们可以总结成一个公式：

left:50%; margin-left:负的宽度的一半

固定定位

固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

用途1：网页右下角的“返回到顶部”

比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。

<style type="text/css">		
    .backtop{			
        position: fixed;			
        bottom: 100px;			
        right: 30px;			
        width: 60px;			
        height: 60px;			
        background-color: gray;			
        text-align: center;			
        line-height:30px;			
        color:white;			
        text-decoration: none;   
        /*去掉超链接的下划线*/		
    }	
</style>

用途2：顶部导航条

我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。

需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。

顶部导航条的实现如下：

顶部导航 >folded

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
body{
			/*为什么要写这个？*/
			/*不希望我们的页面被nav挡住*/
			padding-top: 60px;
			/*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
			_padding-top:0;
		}
		.nav{
			position: fixed;
			top: 0;
			left: 0;
	 		width: 100%;
			height: 60px;
			background-color: #333;
			z-index: 99999999;
		}
		.inner_c{
			width: 1000px;
			height: 60px;
			margin: 0 auto;

		}
		.inner_c ul{
			list-style: none;
		}
		.inner_c ul li{
			float: left;
			width: 100px;
			height: 60px;
			text-align: center;
			line-height: 60px;
		}
		.inner_c ul li a{
			display: block;
			width: 100px;
			height: 60px;
			color:white;
			text-decoration: none;
		}
		.inner_c ul li a:hover{
			background-color: gold;
		}
		p{
			font-size: 30px;
		}
		.btn{
			display: block;
			width: 120px;
			height: 30px;
			background-color: orange;
			position: relative;
			top: 2px;
			left: 1px;
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="inner_c">
			<ul>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

z-index属性：

z-index属性：表示谁压着谁。数值大的压盖住数值小的。

有如下特性：

（1）属性值大的位于上层，属性值小的位于下层。

（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。

（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。

（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。

z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是层级的应用。

层级：

（1）必须有定位（除去static）

（2）用z-index来控制层级数。

CSS float

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动
（2）绝对定位
（3）固定定位

浮动的性质

浮动是css里面布局用的最多的属性。

浮动的元素脱标

脱标即脱离标准流。一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。

浮动的元素互相贴靠

我们给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，div的贴靠效果：如果有足够空间，那么就会靠着。如果没有足够的空间，去贴左墙。

浮动的元素有“字围”效果

让div浮动，p不浮动。div挡住了p，但不会挡住p中的文字，形成“字围”效果。标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）关于浮动，为避免混乱，我们在初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

CSS样式表与选择器

样式表

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

1	<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

内部样式表

<head> 
    <style> 
        hr {color:sienna;} 
        p {margin-left:20px;} 
        body {background-image:url("images/back40.gif");} 
    </style> 
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

内联样式

1	<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式以及优先级

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

多重样式

<head>    
    <!-- 外部样式 style.css -->    
    <link rel="stylesheet" type="text/css" href="style.css"/>    
    <!-- 设置：h3{color:blue;} -->    
    <style type="text/css">      
        /* 内部样式 */      
        h3{color:green;}    
    </style> 
</head> 
<body>    
    <h3>测试！</h3> 
</body>

一般我也不用，用的时候可以查，关于样式表、选择器优先级，有对应的计算公式给出，服务于多个css选择器作用，即为“层叠式”，查阅CSS样式优先级。

选择器

CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS 的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签
ID 选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

标签选择器

标签选择器，选择的是页面上所有这种类型的标签，所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。无论这个标签藏的多深，一定能够被选择上。

1	p{ font-size:14px; }

ID 选择器：

规定用#来定义，针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义。

<style>
    #mytitle{ border:3px dashed green; }
</style>
<body>
    <h1 id="mytitle"></h1>
</body>

类选择器：

规定用圆点.来定义，针对你想要的所有标签使用。优点：灵活。css 中用.来表示类。类选择器可以被多种标签使用，同一个标签也可以使用多个类选择器。用空格隔开。

.css
.one{ width:800px; }

<h1 class=one> </h1>

关于id与类，类上样式，id 上行为，id 是 js 用的。js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，另一层面，我们会认为一个有 id 的元素，有动态效果。

通配符

*，匹配任何标签，不建议用。

高级选择器

后代、交集、并集选择器。我就写个博客玩，不写前端，先不学了。doge.jpg

好像还是得用一下，写一点吧。

后代：用空格隔开，表示所有属于 E 元素后代的 F 元素，有这个样式。

<style type="text/css">
    h3 b i {
        color: red;
    }
    .div1 p {
        color: red;
    }
</style>

空格就表示后代。定义了<h3>标签中的<b>标签中的<i>标签的样式。h3 和 b 和 i 标签不一定是连续紧挨着的，只要保持一个后代的关联即可。即不一定要是儿子。里面可以包含类以及id选择器。只是表示一种祖先结构。

交集：定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如div.haha，再比如p.special。如果后一个选择器是类选择器，则写为div.special；如果后一个选择器 id 选择器，则写为div#special。

1
2
3

h3.special {
    color: red;
}

选择的元素要求同时满足两个条件：必须是 h3 标签，然后必须是 special 标签。

并集：定义的时候用逗号隔开

1
2
3

p,h1,#mytitle,.one {
    color: red;
}

则上述标签都会被渲染。

伪类（伪类选择器）

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

静态伪类和动态伪类

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接a标签

超链接的四种状态

a标签有4种伪类（即对应四种状态），要求背诵。如下：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。

对应的代码如下：

<style type="text/css">
	/*让超链接点击之前是红色*/
	a:link{
		color:red;
	}

	/*让超链接点击之后是绿色*/
	a:visited{
		color:orange;
	}

	/*鼠标悬停，放到标签上的时候*/
	a:hover{
		color:green;
	}

	/*鼠标点击链接，但是不松手的时候*/
	a:active{
		color:black;
	}
</style>

在css中，这四种状态必须按照固定的顺序写：

a:link 、a:visited 、a:hover 、a:active

CSS特性

继承：

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。

层叠：

计算权重和就近。

~~写点小网站就不用管了，反正都是硬编码。~~

CSS盒模型

盒模型，英无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

不写了，一张图的事。

boxmodel

padding

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

小属性的写法：

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

1	padding:30px 20px 40px 100px;

如果写了四个值，则顺序为：上、右、下、左。

如果只写了三个值，则顺序为：上、右、下。左和右一样。

如果只写了两个值，比如说：

1	padding: 30px 40px;

则顺序等价于：30px 40px 30px 40px;

用小属性层叠大属性。比如：

1 2	padding: 20px; padding-left: 30px;

则左30，上右下20。

下面的写法：

1 2	padding-left: 30px; padding: 20px;

第一行的小属性无效，因为被第二行的大属性层叠掉了。

border

border就是边框。边框有三个要素：像素（粗细）、线型、颜色。

.div1{
	width: 10px;
	height: 10px;
	border: 2px solid red;
}

颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。

border属性是能够被拆开的，有两大种拆开的方式：

（1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
（2）按方向拆开：border-top、border-right、border-bottom、border-left。

一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：

1
2
3

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

练习用border画三角形。

Sass 一日游

两种后缀名（两种语法）

sass 有两种后缀名文件：

（1）.sass：对空格敏感。不使用大括号和分号，所以每个属性之间是通过换行来分隔。

比如：

1
2
3

h1
	color: #000
	background: #fff

这种语法是类ruby的语法，和CSS的语法相比，相差较大。所以，在3.0版本中就引入了.scss的语法。

（2）.scss：是css语法的超集，可以使用大括号和分号。

比如：

h1 {
	color: #000;
	background: #fff;
}

注意：一个项目中可以混合使用两种语法，但是一个文件中不能同时使用两种语法。

两种格式之间的转换：

我们在工程目录下新建main.scss，输入如下代码：

*{
    margin: 0;
    padding: 0;
}

然后输入如下命令，就可以将上面的main.scss转化为main.sass：

1	sass-convert main.scss main.sass

打开生成的main.sass，内容如下：

*
  margin: 0
  padding: 0

变量语法

Sass 是通过$符号来声明变量。

（1）我们新建一个文件_variables.scss，这个文件专门用来存放变量，然后在其他的文件中引入_variables.scss即可。

因为这个文件只需要存储变量，并不需要它编译出对应的 css 文件，所以我们给文件名的前面加了下划线，意思是声明为局部文件。

我们在这个文件中，声明两个字体变量：

1
2
3

$font1: Braggadocio, Arial, Verdana, Helvetica, sans-serif;

$font2: Arial, Verdana, Helvetica, sans-serif;

（2）新建文件main.scss，在里面引入步骤（1）中的变量文件：

@import "variables";    // 引入变量文件

.div1{
    font-family: $font1;
}

.div2{
    font-family: $font2;
}

基于 Sass 的既定规则：

没有文件后缀名时，Sass 会自动添加 .scss 或者 .sass 的后缀（具体要看已经存在哪个后缀的文件）。
同一目录下，局部文件和非局部文件不能重名。

对应生成的main.css文件如下：

main.css

/* line 9, ../sass/main.scss */
.div1 {
  font-family: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
}

/* line 13, ../sass/main.scss */
.div2 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

注释语法

单行注释：

//我是单行注释

块级注释：

/*
	我是块级注释
	哈哈
*/

二者的区别是：单行注释不会出现在自动生成的css文件中。

CSS笔记

https://scutlmg.github.io/2019/10/09/css笔记/

作者

ivy

发布于

2019-10-10

更新于

2023-03-25

许可协议

CC BY-NC-SA 4.0

#cs front-end

CSS笔记

CSS单位

CSS语法

CSS属性

定位属性

相对定位

相对定位不脱标

相对定位的用途

相对定位的定位值

绝对定位

绝对定位脱标

绝对定位的参考点（重要）

以盒子为参考点

固定定位

z-index属性：

CSS float

浮动的性质

CSS样式表与选择器

样式表

外部样式表

内部样式表

内联样式

多重样式以及优先级

选择器

标签选择器

ID 选择器：

类选择器：

通配符

高级选择器

伪类（伪类选择器）

静态伪类和动态伪类

超链接a标签

CSS特性

CSS盒模型

padding

border

Sass 一日游

两种后缀名（两种语法）

变量语法

注释语法

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

评论

最新文章

分类

标签

归档

目录