祈长有-20201028
学习笔记
style 第一部分
/*类选择*/
.box(
width:300px;
height:200px; px分辨率
background-color:red;
)
.box:hover{
}
/*标签选择器*/
h1{
width: 600px;
height: 400px;
background-color: #11aabb;
}
)
/*id选择器*/
#box{
width: 600px;
height: 400px;
background-color: #1112233;
}
li
text
color
/*后代选择器*/
.box ul li
color:
/*伪类选择器*/
a:hover{
鼠标悬停状态
text-decoration: none;
}
/*通用选择器*/
*{
background: gold;
margin: 0;/*外边距*/
padding：0/*内边距*/
border: 0;/*边框*/
}
.box{
width:400px;
height:200px;
border:1px #000000 solid;/*框框*/
}
div{
color: red;/*修饰字体颜色*/
font-size:30px;/*修饰字体的大小*/
font-family:"宋体";/*字体类型*/
font-style: italic;/*字体的样式*/
font-weight: bold;/*字体加粗*/
letter-spacing: 5px;/*字体间距*/
text-align: center;/*对齐方式*/ /*left左对齐*/
line-height:300px;/*行高*/
text-decoration: line-through;/*文本划线*/
text-decoration: overline;/*文本划线*/
text-shadow: 2px 2px 3px yellow;/*字体阴影*/ /*水平距离、垂直距离、模糊距离*/
text-indent：2em；/*首行缩进*/
}
*{
margin: 0;
}
.box{
width:300px;
height:300px;
margin: 0 auto;
}
div{
background-color: red;/*背景颜色*/
background-image: url(/*../返回上级目录*/); /*背景图片*/
background-size: 300px 300px;/*背景图片的大小*/
/*cover 等比例缩放*/
background-repeat:no-repeat repeat-x/-y;/*背景图片平铺*/
background-attachment: fixed;/*背景图片固定*/
background-position: -100px 0;/*背景图片平移 左右/上下*/
opacity: 0-1 取值范围;/*透明度*
}
第二部分
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" /> 将css文件应用
</head>
<!--
可选<style></style>
<body>
<!--
HTML：H5 >标签（快级标签 p ul div 、行级标签 a span img 表单 /与内容无关）
css3.0；层叠样式表 ->修饰网页
选择器（镜子）：精确选中要修饰的标签
常用的选择器：1.类选择器
2.标签选择器（类选择器优先级高于标签）
3.id选择器 （id高于类）
4.后代选择器
5.伪类选择器（鼠标悬停状态）
6.通用选择器
-->
<div class="起名字、例如box"></div>
<div class="box1"></div>
<h1 class="box"></h1>
<h1></h1>
<h1 class="box"></h1>
<p id="box"></p>
<ul>
<li>你好</li>
<li>朋友小明</li>
</ul>
<a href="#">百度一下</a>
</body>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style1.css"/>
<!--
将style1应用到index
-->
</head>
<body>
<!--
修饰字体和文本的常用样式-->
<div class="box">
青海民族大学17通信工程
161
</div>
</body>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
修饰背景的常用样式
-->
<div class="box" >
内容背景不动
</div>
<meta charset="UTF-8">
<title></title>
<style>
span{
color: #000000 / rgb(255,0,0) / rgba(0,255,255,0-1透明度);
background-color: red;
background-color:transparent;/*背景全透明*/
}
</style>
</head>
<body>
<span>颜色的表示方法</span>
</body>
</html>
心得体会
1.背景设置有一定理解
2.修饰字体和文本的常用样式中按照老师练习有一定收获，更加理解图片背景颜色等相关内容配置在前端的实现。
3.将style1应用到index 这条命令会后期加以理解。
4.多个选择器的学习中id选择器练习更加便捷。层叠样式表 ->修饰网页在其明白H5指什么。
5.文本划线、边框设置等相关设置有很好的了解。
点赞
评论留言