张建军-20201028
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
CSS（Cascading Style Sheet）层叠样式表
样式选择器
(1) 标签选择器：选择器名称与HTML标签相同
格式：选择器名称（标签名）{属性：属性值；
属性：属性值；}
div{width: 250px;
height: 350px;
background-color: black; }
<div></div>
<div></div>
<div></div>
id选择器：在选择器名称前面加#
格式：#id名{ 属性：属性值；
属性：属性值；}
#yyh{color: royalblue;
font-size: 56px;}
<p id="yyh">吼吼哈哈嘿</p>
class选择器：选择器名称dont use number
在选择器名称前面加.
格式：.className{属性：属性值；
属性：属性值； }
.zh{color: greenyellow;
font-size: 56px;}
<p class="zh">金刚葫芦娃</p>
通用选择器（适用于所有标签）
格式：*{属性：属性值；属性：属性值； }
*{color: darkgray;}
<ul>
<li>discribe</li>
<li>discribe</li>
<li>discribe</li>
</ul>
<ol>
<li>discribe</li>
<li>discribe</li>
<li>discribe</li>
</ol>
<span>discribe</span>
<h1>discribe</h1>
后代选择器：在后代选择器中，空格代表后代
格式：父标签 子标签{属性：属性值；
属性：属性值； }
ul li{color: red;
font-size: 28px;}
<ul>
<li>discribe</li>
<li>discribe</li>
<li>discribe</li>
</ul>
子选择器
格式:父级标签>子标签{属性：属性值；
属性：属性值； }
ol>li{color: green;
font-size: 35px;}
<ol>
<li>discribe</li>
<li>discribe</li>
<li>discribe</li>
</ol>
组合选择器；选择器之间必须用逗号分隔
#cd,.fd,div>p{color:#00800;
font-size: 20px;}
<p id="cd">discribe</p>
<p class="fd">discribe</p>
<div><p>discribe</p></div>
选择器的优先级
在相同属性下：后代选择器（子选择器）> id选择器 > class选择器 > 标签选择器<br />
伪类选择器
a:link{/*未访问状态*/color: royalblue;}<br />
a:hover{/*鼠标悬停状态*/
color: #008000;}<br />
a:active{/*激活选中状态*/
color: black;}<br />
a:visited{/*访问过后状态*/
color: #ADFF2F;}<br />
<a href="#">文字描述</a>
样式的添加方式：3种
(1) 行内样式
<div style="width: 100%;height: 30px;"></div>
(2) 页面内样式
<style type="text/css">
.zh{color: greenyellow;
font-size: 45px;}
#yyh{color: royalblue;
font-size: 45px;}
</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">nothing
<!--
im late this day,and feel so sad
--></div>
<ul>
<li class="zf">1<a datasrc="50">金</a></li>
<li class="zf">2刚</li>
<li class="zf">3葫</li>
<li class="zf">4芦</li>
<li class="zf">4娃</li>
</ul>
</body>
(4) 3种添加样式的方式的优先级<br />
就近原则<br />
3. 样式的使用<br />
<1>背景修饰样式
background-color: royalblue; <br />
设置背景颜色
background-image: url(img/favicon.ico); <br />
设置背景图片
background-repeat: no-repeat; <br />
设置背景图片不重复
background-size: 100px 100px; <br />
设置背景图片大小
background-size:cover; <br />
设置背景图片拉伸充满
background-position-x: 150px; <br />
背景图水平方向移动
background-position-y: 100px; <br />
背景图上下方向位移
background-position: 150px 150px ; <br />
背景图斜向上方向位移
<2>文本样式
颜色 color: blue;
/*字体颜色*/<br />
大小 font-size: 20px;
/*字体大小*/<br />
字体 font-family: "宋体";
/*各样式字体*/<br />
粗体 font-weight: 700;
/*字体粗细*/<br />
间距 letter-spacing: 10px;
/*文字间距*/<br />
首行缩进 text-indent: 40px;
/*首行缩进*/<br />
线text-decoration: line-through;
/*删除线*/<br />
text-decoration: underline;
/*下划线*/<br />
text-decoration:overline;
/*上划线*/<br />
阴影text-shadow: 5px 5px 2px blue;
/*文字阴影*/<br />
<3> 鼠标样式
cursor: pointer;
箭头改为手<br />
cursor: url(img/favicon.ico),auto;
图片<br />
<4> 透明度
opacity: 0.3;
/*0，完全透明；1,完全不透明*/<br />
background-color: rgba(214,214,214,0.1);
/*设置div透明，显示内容不透明*/<br />
<body>
</body>
</html>
二、心得体会
今天的学习整体上收获比较大，只是被扣分扣得有点头疼，但是没办法，
事情就是那么些事情，该做的还得做，不做又不行，材料还得按时交，学
院还得按时去，事情该自己去做的一件也不能少，明天亦如此，还是得好
好努力的，今天学习的内容挺丰富，听信息管理与信息系统专业的同学说
这是他们半个学期的内容，听电子信息科学与技术班的说这是他们一周的
实训内容，其实要不是这个时间不允许，我还是很愿意学习这门课的，毕
竟感觉还是很有用的，奈何事情太多，太杂，以至于根本没办法去专心的
实习，哎，后边调整好计划，按照节奏一步一步来吧，you have to do it,
and just do it try my best.
近期评论