前端-02CSS基础知识2

1.css样式书写位置

1. 内嵌式样式表：只作用于当前文件，没有真正实现结构表现分离

<head>
	<style>
		写在这里
	</style>
</head>

2.外链式样式表：作用范围式当前站点，范围广，真正实现结构表现分离。（常用）

<head>
    <link rel="stylesheet" href="外链式.css">
</head>

3.行内样式表：作用范围仅限于当前标签，范围小，结构表现常常混在一起（不推荐使用）

<p style="color:red;font-weight: 700">行内样式</p>

2. 标签分类

1. 块元素标签：div、h1-h6、p、ul、ol、hr、dl、dd、dt、form

特点：①可以设置宽高，自上而下排列；②不受空格影响； ③一般用于其他标签的容器，嵌套（包含）下，子块元素的宽度（在没有定义的情况下）和父块元素的宽度默认一致；④默认宽度为100%（独占一行）。

2. 行内元素标签：span 、i 、a 、 b 、strong 、em 、sub 、sup 、u 、label 、br（作用域文本后面起换行作用）、font

特点：①不能直接设置宽高（宽高根据内容大小自动撑开），自左向右排列；②受空格影响；③不独占一行。

3. 行内块标签：img、textarea、input

特点：①在一行上，支持宽高，自左向右排列；②受空格影响；③不独占一行

3. 元素之间的转换

1. 块元素转换行内元素

display：inline；

2. 行内元素转换为块元素

display：block；

3. 块元素、行内元素转换为行内块元素

display:inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		/*行内元素转换块内元素*/
		div,a,span,strong{
			display: inline-block;
			width: 200px;
			height: 200px;
			background-color: yellow;
			text-align: center;
		}
	</style>
</head>
<body>
	<div>块元素转换</div>
	<a href="#">行内元素转换1</a>
	<span>行内元素转换2</span>
	<strong>行内元素转换3</strong>
</body>
</html>

注意：当元素浮动（float）时会转化成行内块元素特点。

4. css三大特性

标签div快速定义class（id）：.box（#id）+tab键

1.层叠性：当多个样式作用于同一个（同一类）标签时，样式发生改变时，总是执行后边的代码（后面代码层叠前面的代码）

和标签调用选择器的顺序没有关系

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层叠性</title>
	<style type="text/css">
		.box{
			font-size: 24px;
			color: red;
		}
		.box1{
			font-family: 700;
			color: green;
		}
	</style>
</head>
<body>
	<div class="box box1">层叠性111</div>
	<div class="box">层叠性222</div>
</body>
</html>

2. 继承性：

继承发生的前提时包含(嵌套)关系

文字颜色
文字大小
文字字体
文字粗细
文字风格
行高

总结：文字的所有属性都可以继承

特殊情况：h系列的不能继承文字大小；a标签不能继承文字颜色

3. 优先级

默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < !important

对应权重 0 1 10 100 1000 1000以上

结果

优先级特点：继承的权重为0；权重会叠加。

5. 链接伪类

1. a:link{属性：值;} a{属性：值;}效果一样如果伪类都用，需要按照顺序写

a:link{     /*默认  未访问过的链接状态*/
    color:blue;
    text-decoration: none;
}
a:visited{      /*已访问过的链接状态*/
    color:red;
}
a:hover{        /*鼠标经过链接时候的状态 显示*/
    color:red;
}
a:active{       /*鼠标按下链接不动的状态  激活*/
    color:orangered;
}

盒子模型：获得焦点 :focus{属性：值}

2. 链接文本修饰（下划线）

text-decoration-line：none | underline | line-through

链接实战之导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
	<style type="text/css">
		.nav{
			height: 60px;
			background-color: #aaa;
			text-align: center;
		}
		a{
			display: inline-block;
			width: 100px;
			height: 60px;
			text-decoration-line: underline;
			color: #000;
			font-weight: 700;

		}
		/*利用同意类名控制相同颜色*/
		a.public{
			font-weight: 700;
			color: orange;
		}
		a:hover{
			background-color: red;
			text-decoration-line: none;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#" class="public">天猫</a>
		<a href="#" class="public">聚划算</a>
		<a href="#" class="public">超市</a>
		<a href="#">头条</a>
		<a href="#">阿里旅行</a>
		<a href="#">电器城</a>
		<a href="#">淘抢购</a>
	</div>
</body>
</html>

效果

3. 背景属性背景定位默认以顶部对齐（top）

backgroun-color 背景颜色；
background-image 背景图片url(地址)；
background-repeat repeat（默认）| no-repeat | repeat-x | repeat-y 背景平铺
background-position left | center | right | top | bottom 背景定位
1. 方位词只有一个，另一个默认居中
2. 方位词两个，顺序无关
3. 写两个具体值，第一个水平第二个垂直
background-attachment 背景是否滚动 scrol（） | fixed

背景属性连写 对应上面属性顺序

以上属性的顺序可以不考虑，也可以不写全，但是url必选存在

1. 背景实战之搜索框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景</title>
	<style type="text/css">
		input{
			width:200px;
			height: 30px;
			background: url(1.jpg) no-repeat right;
		}
	</style>
</head>
<body>
	<input type="text" value="请输入关键字">
</body>
</html>

效果

2. 背景实战之列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景</title>
	<style type="text/css">
		li{
			list-style: none;
			background: url(li.gif) no-repeat left center;
			/*空出一个放图片*/
			text-indent: 1em;
		}
	</style>
</head>
<body>
	<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>
	</ul>
</body>
</html>

效果

背景实战之购物车

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景</title>
	<style type="text/css">
		/*控制默认只显示上半部分，顶部对齐*/
		a{
			display: inline-block;
			width:67px;
			height: 32px;
			background: url(110.png); 
		}
		/*底部对齐*/
		a:hover{
			background: url(110.png) bottom;
		}
	</style>
</head>
<body>
	<a href="#"> </a>
</body>
</html>

效果

鼠标触及后

天上飞的菜鸟

发布了10 篇原创文章 · 获赞 0 · 访问量 107

私信关注