第四章 CSS的深入学习

百密一疏^^

已于 2022-06-07 19:36:41 修改

阅读量121

点赞数 1

分类专栏：前端学习文章标签： linq html css

于 2022-06-07 17:01:37 首次发布

本文链接：https://blog.csdn.net/m0_71674778/article/details/125159792

版权

前端学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.样式优先级

①同类样式符合就近原则；
②选择器有不同权重：
        标签选择器:1
        类选择器: 10
        id选择器: 100
        行内样式: 1000
        !important: 10000(不要乱用)

2.代码调试

浏览器页面右键->检查或F12

练习的代码：

<!DOCTYPE HTML >
<html>
 <head>
  <title>  </title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="">
  <style type="text/css">
	h1{
		text-align:center;
		color:red;
	}
	p{
		color:blue;
		font-family:微软雅黑;
	}
	#zhu{
		color:blue;
	}
	span{
		color:black;
		text-decoration:underline;
		font-size:25px;

	}
	span{
		color:red;
	}
  </style>
 </head>

 <body>
		<h1>人物简介</h1>
		<hr />
		<p><span>孙悟空:</span><b>这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容</b></p>
		<p><span id="zhu">猪八戒:</span>这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容</p>
 </body>
</html>

3.边框 border 练习

3.1 div 中

自身是个块状元素,水平方向上默认会充满容器;多个div之间默认竖着排列

/*所有边框样式*/
border: 宽度 样式 颜色;
/*顶部边框*/
border-top: 宽度 样式 颜色;
/*左边边框*/
border-left: 宽度 样式 颜色;
/*右边边框*/
border-right: 宽度 样式 颜色;
/*底部边框*/
border-bottom: 宽度 样式 颜色;

/*某个边框单独设置*/
/*宽度*/
border-top-width: 宽度;
/*颜色*/
border-top-color:颜色;
/*样式:*/
border-top-style:样式;

/*设置边框的弧度*/
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;

3.2 span 中

<span>标签是一个行内元素，不能设置width和height,能设置padding和margin；多个<span>之间是横向排列的

margin:20px;
padding:20px;
border:2px solid red;

4.字体样式

/*字体样式*/
font-size:30px; /*大小*/
color:green; /*颜色*/
font-family:黑体;/*类型*/
font-style:italic; /*字体风格*/
font-weight:bold; /*粗细*/

5.文本样式

vertical-align:设置文字的行内高度，不能实现div里文字的垂直居中

/*文本阴影*/
/*规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色： */
text-shadow
/*设置文本框阴影*/
text-shadow:2px 2px 5px blue;

/*设置容器阴影:x轴偏移 y轴偏移 模糊度 阴影颜色*/
box-shadow:20px 20px 20px gray;

/* 列表样式（点/数字）:用于列表标签 ul ol */ 
list-style

/*文本水平对齐方式*/
text-align:center;
/*设置文本缩进:em比例单位
text-indent:2em;*/
		
/*内容行高:行高和容器高度一致时，文本会垂直居中*/
line-height:400px;

/*字符间距*/
letter-spacing:10px;

/*文本修饰*/
text-decoration:line-through;

6.背景样式

div标签:

background:背景
background-color:背景颜色
background-image:背景图片
background-repeat:背景平铺方式
background:背景图片位置
background-size:背景图片大小

/*背景样式*/
background:颜色 图片 平铺方式 水平位置 垂直位置 / 宽度 高度;

平铺方式: 
no-repeat(不平铺) repeat(全平铺) repeat-x(水平平铺) repeat-y(垂直平铺)

背景位置：
1.像素值  
2.百分比  
3.关键字（水平:left center right） (垂直:top center bottom)

设置多张背景图片:
background属性后的内容用逗号分隔

/*复合写法设置背景:批量设置样式属性*/
background:颜色 图片 平铺方式 水平位置 垂直位置 / 宽度 高度
background:red url(gif/7.gif) no-repeat -50px -50px / 150px 150px;
/*设置多张图片时不能设置颜色*/
background:url(gif/7.gif) no-repeat 50px 50px / 150px 150px,
		url(gif/4.gif) no-repeat 150px 150px / 150px 150px;

7. 3~6节的综合练习代码：


<!DOCTYPE HTML >
<html>
 <head>
  <title>  </title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="">
  <style type="text/css">
		.circle{
			
			width:200px;
			height:200px;
			background-color:blue;
			border-top-left-radius:100px;
			border-top-right-radius:100px;
			border-bottom-left-radius:100px;
			border-bottom-right-radius:100px;
			text-align:center;
			line-height:200px;
		}
		.box{

			width:200px;
			height:200px;
			border-left:5px solid red;
			border-top:5px dashed blue;
			border-right:5px double green;
			border-bottom:5px solid yellow;

			font-size:30px;
			font-family:黑体;
			color:red;
			font-weight:bold;
			font-style:italic;
			letter-spacing:10px;
			text-decoration:line-through;
		}
		span{
			vertical-align:-10px;
		}
		.left{
			margin:50px;
		}
		#mu{
			border: 5px solid black;
            width: 250px;
            list-style: underline;
            list-style-image: none;

            box-shadow: 5px 5px 5px red;
            text-shadow: 3px 3px 3px gray;
		}
		#taili{
			
			width:600px;
			height:400px;
			border:5px solid black;

			color:red;
			font-size:30px;
			text-align:center;
			font-family:隶书;
			line-height:600px;
			font-style:italic;
			
			background-image:url(1.jpg);
			background-repeat:repeat-y;
		}
		#taili2{
			
			width:600px;
			height:400px;
			border:5px solid black;

			color:red;
			font-size:30px;
			text-align:center;
			font-family:隶书;
			line-height:400px;
			font-style:italic;
			
			background-image:url(2.jpg);
			background-repeat:repeat-x;
		}
  </style>
 </head>

 <body>
	<div class="circle">一个圆</div>
	<div class="box">这是一个框</div>
	
	<div class="left">
		<ul id="mu">
			<li>乌鲁木齐天气晴转阴20℃</li>
			<li>乌鲁木齐天气晴转阴20℃</li>
			<li>乌鲁木齐天气晴转阴20℃</li>
			<li>乌鲁木齐天气晴转阴20℃</li>
			<li>乌鲁木齐天气晴转阴20℃</li>
		</ul>
	</div>

	<p>这里有些字<span>随便说几句话</span>就行</p>

	<div id="taili">精美台历</div>
	<div id="taili2">精美台历</div>
 </body>
</html>

8.动画效果

8.1鼠标悬浮

选择器:hover {
  样式属性:值;
}

8.2过渡效果

transition 过渡是元素从一种样式逐渐改变为另一种的效果，当元素中的某个属性变化的时候，以动画的方式呈现属性的变化过程

选择器{
  transition: 样式属性 时间;
}

overflow：属性规定当内容溢出元素框时发生的事情

练习：滑动菜单

三级菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级滑动菜单</title>
    <style type="text/css">
        ul{
            padding: 0px;
            margin: 0px;

            width: 120px;
            text-align: center;
            background-color: aqua;

            overflow: hidden;
        }
        ul ul{
            display: none;
            background-color: blueviolet;
        }
        .second ul{
            height: 0px;
            background-color: blue;
            transition: height 1s;
        }
        .first:hover ul{
            display: block;
        }
        .second:hover ul{
            height: 63px;
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first">一级菜单01
            <ul>
                <li class="second">二级菜单01
                    <ul>
                        <li>三级菜单01</li>
                        <li>三级菜单02</li>
                        <li>三级菜单03</li>
                    </ul>
                </li>
                <li class="second">二级菜单02
                    <ul>
                        <li>三级菜单01</li>
                        <li>三级菜单02</li>
                        <li>三级菜单03</li>
                    </ul>
                </li>
                <li class="second">二级菜单03
                    <ul>
                        <li>三级菜单01</li>
                        <li>三级菜单02</li>
                        <li>三级菜单03</li>
                    </ul>
                </li>

            </ul>
        </li>
        <li class="first">一级菜单02
            <ul>
                <li class="second">二级菜单
                    <ul>
                        <li>三级菜单01</li>
                        <li>三级菜单02</li>
                        <li>三级菜单03</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="first">一级菜单03
            <ul>
                <li class="second">二级菜单
                    <ul>
                        <li>三级菜单01</li>
                        <li>三级菜单02</li>
                        <li>三级菜单03</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>