前端基础-CSS

zoukankan html css js c++ java

前端基础-CSS
引自狂神说Java：https://space.bilibili.com/95256449/video

1. 什么是CSS

层叠样式表 (Cascading Style Sheets)

样式通常存储在样式表中

解决内容与表现分离的问题

多个样式定义可层叠为一个

2. CSS发展史

CSS1.0：基本样式美化

CSS2.0 ：div(块)+css,html与css结构分离

CSS2.1：浮动，定位

CSS3.0：圆角，阴影，动画....

使用CSS的好处：
1. 内容和表现分离
2. 网页结构表现单一，可以实现复用
3. 样式十分丰富
4. 有利于SEO，容易被搜索引擎收录
3. 三种引入CSS的方式
1. 行内样式：在标签元素中，使用style属性，编写样式即可。
2. 内部样式：在head标签中，增加style，声明样式。
3. 外部样式：新建一个css样式表，使用link标签引入。（推荐使用）
```
外部样式导入：<link rel="stylesheet" href="css/index.css">
```
样式优先级：行内样式>内部样式>外部样式，就近原则

4. 选择器

4.1 三种基本选择器

作用：选择页面上某一个或者某一类元素

分类（3种）：
1. 标签选择器：选择一类标签标签{}
2. class选择器：选择所有class属性一致的标签 .类名{}
3. id选择器：全局唯一 #id名{}
优先级：不遵循就近原则，id选择器>class选择器>标签选择器

4.2 高级选择器

1、后代选择器：在某个元素的后面
```
/* 后代选择器 */
body p{
	background-color: #01A252;
}
```
2、子选择器 :一代的所有元素
```
/* 子选择器 */
body>p{
	background-color: red;
}
```
3、相邻兄弟选择器:同辈（向下第一个）
```
/* 相邻兄弟选择器 */
.active + p{
    background-color: green;
}
```
4、通用选择器：选中当前元素向下的所有兄弟元素
```
/* 通用选择器 */
.active~p{
    background-color: blue;
}
```
```
<!DOCTYPE html>
<html>
<head>
	<style>
		/* 后代选择器 */
		/* body p{
			background-color: #01A252;
		} */
		/* 子选择器 */
		/* body>p{
			background-color: red;
		} */
		/* 相邻兄弟选择器 */
		/* .active + p{
			background-color: green;
		} */
		/* 通用选择器 */
		.active~p{
			background-color: blue;
		}
	</style>
</head>

<body>
	<p>p1</p>
	<p class="active">p2</p>
	<p>p3</p>
	<ul>
		<li><p>p4</p></li>
		<li><p>p5</p></li>
		<li><p>p6</p></li>
	</ul>
	<p>p7</p>
</body>
</html>
```
4.3 结构伪类选择器
```
<!DOCTYPE html>
<html>
<head>
	<style>
		/* ul的第一个子元素 */
		ul li:first-child{
			background-color: red;
		}
		/* ul的最后一个子元素 */
		ul li:last-child{
			background-color: red;
		}
		/* 选中p1:定位父元素,选择当前p元素的父级元素,选中父级元素的第一个并且是p元素才生效. 按顺序 */
		p:nth-child(1){
			background-color: green;
		}
		/* 选中p1:定位父元素,选择当前p元素的父级元素,选中父级元素下的第3个p元素生效. 按类型 */
		p:nth-of-type(3){
			background-color: green;
		}
		/* 悬浮变色 */
		a:hover{
			background-color: yellow;
		}
	</style>
</head>

<body>
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>

	<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
	<p>p7</p>
	<ul>
		<li>li4</li>
		<li>li5</li>
		<li>li6</li>
	</ul>
	<a href="">这是一个超链接</a>
</body>
</html>
```
4.4 属性选择器（常用）
```
<!DOCTYPE html>
<html>
<head>
	<style>
		.demo a{
			float:left;
			display: block;
			height: 50px;
			 50px;
			border-radius: 10px;
			background: gray;
			text-align: center;
			color:red;
			text-decoration: none;
			margin-right: 5px;
			font:bold 20px/50px arial;
			/* line-height: 50px; */
		}
		/* 属性名,属性名=属性值(可以使用正则）)
		=绝对等于
		*=包含这个元素
		^=以这个元素开头 
		$=以这个元素结尾 */
		/* 存在id属性的元素 */
		/* a[id]{
			background: green;
		} */
		/* id=last的元素 */
		/* a[id=last]{
			background: green;
		} */
		/* class中包含links的元素 */
		/* a[class*=links]{
			background: green;
		} */
		/* 选中href中以开头的元素 */
		/* a[href^=http]{
			background: green;
		} */
		/* 选中href中以doc结尾的元素 */
		a[href$=pdf]{
			background: green;
		}
	</style>
</head>

<body>
	<p class="demo">
		<a href="1.doc" class="links item first" id="first">1</a>
		<a href="2.doc" class="links item active" title="test" target="_blank">2</a>
		<a href="3.xml" class="links item">3</a>
		<a href="4.xml" class="links item">4</a>
		<a href="http.doc" class="links item">5</a>
		<a href="6.doc" class="links item">6</a>
		<a href="http.jpg" class="links item">7</a>
		<a href="8.jpg" class="links item">8</a>
		<a href="9.pdf" class="links item">9</a>
		<a href="10.pdf" class="links item last" id="last">10</a>
	</p>
</body>
</html>
```
5. 美化网页元素

5.1 为什么要美化网页(span标签)
1. 有效的传递页面信息；
2. 美化网页，吸引用户；
3. 凸显页面的主题；
4. 提升用户体验。
5.2 字体样式
```
font-family:字体种类
font-size:字体大小
font-weight:字体粗细
color:字体颜色
```
5.3 文本样式
1. 颜色：color RGB RGBA
2. 文本对齐方式：text-align:center
3. 段落首行缩进：text-indent:2em
4. 行高：line-height 单行文字上下居中
5. 装饰：text-decoration
6. 文本图片水平对齐：vertical-align:middle
7. 阴影：
```
/* text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径 */
#first{
    text-shadow:#3cc75f 10px -10px 2px;
}
```
1. 超链接伪类：
```
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
```
1. 背景
  
  background-image /*添加背景图片*/ background-size /*规定背景图片的尺寸。*/ background-origin /*规定背景图片的定位区域。*/ background-clip /*规定背景的绘制区域。*/
2. 渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

径向渐变（Radial Gradients）- 由它们的中心定义

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

6. 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
元素大小计算：

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

6.1 margin(外边距)

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
```
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin:25px 50px 75px 100px; /*上右下左 顺时针*/
margin:25px 50px 75px; /*上 左右 下*/
margin:25px 50px; /*上下 左右*/
margin:25px; /*所有4个边距都是25px*/
```
6.2 border(边框)

指定一个元素边框的样式和颜色。
```
border:5px solid red;/*边框的像素 边框的线型 边框的颜色*/
```
6.3 padding(填充)

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。
```
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
padding:25px 50px 75px 100px; /*上右下左 顺时针*/
padding:25px 50px 75px; /*上 左右 下*/
padding:25px 50px; /*上下 左右*/
padding:25px; /*所有4个边距都是25px*/
```
7. display(显示)

块级元素(block)特性：
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
- address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
- a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
- applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：
- display:block -- 显示为块级元素
- display:inline -- 显示为内联元素
- display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有

元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：

display:none 元素不再占用空间。
visibility: hidden 使元素在网页上不可见，但仍占用空间

8. float(浮动)

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

清除浮动：使用clear ，clear 属性指定元素两侧不能出现浮动元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.thumbnail 
{
	float:left;
	110px;
	height:90px;
	margin:5px;
}
.text_line
{
	clear:both;
	margin-bottom:2px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

9. 父级边框塌陷的问题

解决方案：

增加父级元素的高度；（不推荐）

#father{
    border:1px #000 solid;
    height:1000px;
}

增加一个空的div标签，然后清除其浮动；

<div class="clear"></div>
.clear{
    clear:both;
    margin:0;
    padding:0;
}

如果元素设置了固定的高度，就会被限制。

overflow属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow 属性只工作于指定高度的块元素上。

下拉的一些场景避免使用。

在父级元素中增加一个 overflow:hidden;

在父类后面添加一个伪类：after(推荐)

#father:after{
    content:'';
    display:block;
    clear:both;
}

对比：

display:方向不可以控制
float:浮动的话会脱离标准文档流，所以要解决父级边框塌陷问题。

10. position(定位)

10.1 相对定位

相对于原来的位置，进行指定的偏移。相对定位的话，它仍然在标准文档流中，原来的位置会被保留。

<!DOCTYPE html>
<html>
<head>
	<style>
		body{
			padding: 20px;
		}
		div{
			margin:10px;
			padding: 5px;
			font-size: 12px;
			line-height: 25px;
		}
		#father{
			border: 1px solid #666 ;
			padding: 0;
		}
		#first{
			background-color: #D0D0D0;
			border: 1px dashed red ;
			position: relative;
			top: -20px;
			left:20px;
		}
		#second{
			background-color: #A5C25C;
			border: 1px dashed green ;
		}
		#third{
			background-color: #B58900;
			border: 1px dashed blue ;
			position: relative;
			bottom: -10px;
			right:10px;
		}
	</style>
</head>
<body>
	<div id="father">
		<div id="first">第一个盒子</div>
		<div id="second">第二个盒子</div>
		<div id="third">第三个盒子</div>
	</div>
</body>
</html>

练习：方块

<!DOCTYPE html>
<html>
<head>
	<style>
		#box{
			 300px;
			height:300px;
			border: 2px solid red;
			padding: 10px;
		}
		a{
			 100px;
			height: 100px;
			text-decoration: none;
			background: #ffa1f2;
			line-height: 100px;
			text-align: center;
			color: white;
			display: block;
		}
		a:hover{
			background: blue;
		}
		.a2,.a4{
			position: relative;
			left: 200px;
			top:-100px;
		}
		.a5{
			position: relative;
			left: 100px;
			top:-300px;
		}
	</style>
</head>
<body>
	<div id="box">
		<a class="a1" href="#">链接1</a>
		<a class="a2" href="#">链接2</a>
		<a class="a3" href="#">链接3</a>
		<a class="a4" href="#">链接4</a>
		<a class="a5" href="#">链接5</a>
	</div>
</body>
</html>

10.2 绝对定位

基于参考点来定位，上下左右。

没有父级元素定位的前提下，相对于浏览器定位；
假设父级元素存在定位，我们通常会相对于父级元素进行偏移；
在父级元素范围内移动。

相对于父级或者浏览器的位置，进行指定的偏移。绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

10.3 固定定位

元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。

<!DOCTYPE html>
<html>
<head>
	<style>
		body{
			height: 1000px;
		}
		div:nth-of-type(1){ /*相对定位*/
			 100px;
			height: 100px;
			background: red;
			position: absolute;
			right: 0px;
			bottom: 0px;
		}
		div:nth-of-type(2){ /*固定定位*/
			 50px;
			height: 50px;
			background: yellow;
			position: fixed;
			right: 0px;
			bottom: 0px;
		}
	</style>
</head>
<body>
	<div>div1</div>
	<div>div2</div>
</body>
</html>

10.4 z-index

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

<!DOCTYPE html>
<html>
<head>
	<style>
		#content{
			 450px;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
			font-size: 12px;
			line-height: 25px;
			border: 1px solid red;
		}
		ul,li{
			padding: 0px;
			margin: 0px;
			list-style: none;
		}
		#content ul{
			position: relative;
		}
		.tipText,.tipBg{
			position: absolute;
			 450px;
			height: 30px;
			top:300px
		}
		.tipText{
			color: white;
            z-index: 999;
		}
		.tipBg{
			background: #000;
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<div id="content">
		<ul>
			<li> <img src="./blog/static/images/mi.jpg" alt=""></li>
			<li class="tipText">学习微服务，找狂神</li>
			<li class="tipBg"></li>
			<li>时间：2099-01-01</li>
			<li>地点：月球一号基地</li>
		</ul>
	</div>
</body>
</html>

查看全文

相关阅读:
python 远程部署和运行
学习笔记——UML类图
Core Data 多线程操作实战篇
Core Data系列六——Custom Migration
Core Data系列五——数据迁移方案
NSOperation以及NSOperationQueue的使用
Magical Record设计小谈
Core Data系列四——多线程设计
Core Data系列三——基本使用
Core Data系列二——基础概念

原文地址：https://www.cnblogs.com/smalldong/p/14466540.html

1. 什么是CSS

2. CSS发展史

3. 三种引入CSS的方式

4. 选择器

4.1 三种基本选择器

4.2 高级选择器

4.3 结构伪类选择器

4.4 属性选择器（常用）

5. 美化网页元素

5.1 为什么要美化网页(span标签)

5.2 字体样式

5.3 文本样式

6. 盒子模型

6.1 margin(外边距)

6.2 border(边框)

6.3 padding(填充)