陈菊-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) 外部样式
<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; /*文字阴影*/
border: 1px 1000000 solid;
color: red;/*修饰字体的颜色*/
font-size: 30px:/*修饰字体的大小*/
font-family: "宋体";/*字体类型*/
font-style: italio;/*字体的样式*/
font-weight: bold;/*字体加粗*/
letter-3pacing: 5px;/*字体间距*/
text-align: center:/*对齐方式*/
line-height: 300px:/*行高*/
/*text-decoration: overline;*//*文本划线*/
text-indent:2em;/*首行缩进*/
/*background-color: red;/*背景颜色*/
background-image: url(../img/timg. jpg);/*背景图片*/
/*background-size: cover;*//*背景图片的大小*/
/*background-attachoent: fixed;/*背景图片固定*/
/*background-size: 300px 300px;
background-repeat: repeat-x:/*背景图片平铺*/
二、心得体会
通过这几天的学习，我深刻的体会到了在编写程序中，真的是细节决定成败，因为不管程序的语向是多是少，但是只要有一条语句或语法不正确，就不能使程序得到所需要的结果。还有学习过程中那些我们应该注意的事项是平时上课时无法学到的，相信通过后面的学习，我们会有更深层次的收获。
近期评论