赵博-20201028
CSS（Cascading Style Sheet）层叠样式表
1. 样式选择器
id选择器：在选择器名称前面加#
格式：#id名{
属性：属性值；
属性：属性值；
……
}
#yyh{
color: red;
font-size: 56px;
}
<p id="yyh">文字描述</p>
标签选择器：选择器名称与HTML标签相同
格式：选择器名称（标签名）{
属性：属性值；
属性：属性值；
}
div{
width: 200px;
height: 400px;
background-color: yellow;
}
<div></div>
<div></div>
<div></div>
class选择器：选择器名称可以自己去定义，不要以数字开头。
在选择器名称前面加.
格式：.className{
属性：属性值；
属性：属性值；
……
}
.zh{
color: greenyellow;
font-size: 56px;
}
<p class="zh">文字描述</p>
通用选择器（适用于所有标签）
格式：*{
属性：属性值；
属性：属性值；
}
*{
color: darkgray;
}
<ul>
<li>文字描述</li>
<li>文字描述</li>
<li>文字描述</li>
</ul>
<ol>
<li>文字描述</li>
<li>文字描述</li>
<li>文字描述</li>
</ol>
<span>文字描述</span>
<h1>文字描述</h1>
伪类选择器
a:link{/*未访问状态*/
color: red;
}
a:hover{/*鼠标悬停状态*/
color: #008000;
}
a:active{/*激活选中状态*/
color: black;
}
a:visited{/*访问过后状态*/
color: #ADFF2F;
}
<a href="#">文字描述</a>
2 .样式的添加方式：3种
(1) 行内样式
<div style="width: 100%;height: 30px;"></div>
(2) 页面内样式
<style type="text/css">
.zh{
color: greenyellow;
font-size: 56px;
}
#yyh{
color: red;
font-size: 56px;
}
</style>
(3) 外部样式
首先需要在css文件中创建css文件，然后需要在html文件中使用link标签进行外部css文件的引用
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/CSSDemo.css" />
</head>
<body>
<div id="qwe">今天被扣分，我很难受</div>
<ul>
<li class="zf">1</li>
<li class="zf">2</li>
<li class="zf">3</li>
<li class="zf">4</li>
</ul>
</body>
(4) 3种添加样式的方式的优先级
就近原则
3. 样式的使用
背景修饰样式
background-color: red;
设置背景颜色
background-image: url(img/favicon.ico);
设置背景图片
background-repeat: no-repeat;
设置背景图片不重复
background-size: 100px 100px;
设置背景图片大小
background-size:cover;
设置背景图片拉伸充满
background-position-x: 150px;
背景图水平方向移动
background-position-y: 100px;
背景图上下方向位移
background-position: 150px 150px ;
背景图斜向上方向位移
鼠标样式
cursor: pointer;
箭头改为手
cursor: url(img/favicon.ico),auto;
图片
透明度
opacity: 0.3;
/*0，完全透明；1,完全不透明*/
background-color: rgba(215,215,215,0.3);
/*设置div透明，显示内容不透明*/
文本样式
颜色 color: red;
/*字体颜色*/
大小 font-size: 20px;
/*字体大小*/
字体 font-family: "宋体";
/*各样式字体*/
粗体 font-weight: 700;
/*字体粗细*/
间距 letter-spacing: 10px;
/*文字间距*/
首行缩进 text-indent: 40px;
/*首行缩进*/
线text-decoration: line-through;
/*删除线*/
text-decoration: underline;
/*下划线*/
text-decoration:overline;
/*上划线*/
阴影text-shadow: 5px 5px 2px red;
/*文字阴影*/
二、心得体会
经过今天的学习，我学到了选择器的使用，选择器就像它的名字一样，选择对应的地方对他进行修改，在这次的实习当中我本着积极肯干，虚心好学、工作认真负责的态度，让自己以最快的速度融入学习当中，发挥自己特长，让我受益匪浅。
近期评论