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. 父级边框塌陷的问题

    解决方案：

    1. 增加父级元素的高度；（不推荐）
    #father{
    border:1px #000 solid;
    height:1000px;
}
    1. 增加一个空的div标签，然后清除其浮动；
    <div class="clear"></div>
.clear{
    clear:both;
    margin:0;
    padding:0;
}

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

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

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

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

    在父级元素中增加一个 overflow:hidden;
    1. 在父类后面添加一个伪类：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 绝对定位

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

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

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

    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>
查看全文
  • 相关阅读:
    【lc-database】595. 大的国家
    Visual Studio 2010软件安装教程
    Win10系统下安装VC6.0教程
    HTTP协议
    正则表达式
    类装饰器
    装饰器工厂函数
    装饰器函数
    闭包
    web服务器
  • 原文地址：https://www.cnblogs.com/smalldong/p/14466540.html
    • Copyright © 2011-2022 走看看