马伟婷-20201028
知识总结:
将css文件引用过来
HTML,H5.0标签(块级标签:p ul div)、行级标签a span img)(取决于内容)
表单
CSS3.0层叠样式表-修饰网页
选择器(镜子):精确的选中要修饰的标签
常用的选择器:0、通用选择器1、类选择器2、标签选择器3、id选择器(不能重复)4、后代选择器5、伪类选择器(鼠标悬停状态)
1、、/*通用选择器*/
margin: 0;/*外边距*/
padding:0 ;/*内边距*/
border:0 ;/*边框*/
background-color: papayawhip;
2、/*类选择器,在标签里用class定义*/
.box
width: 300px;
height: 200px;/*样式,px像素*/
background-color: deepskyblue;
.box:hover
background: peru;
3、/*标签选择器*/width: 400px;
height: 200px;
background-color: #11aabb;
4、/*id选择器*/
width: 300px;
height: 200px;
background-color: #233;
color: darkgreen;
5、/*后代选择器,有包含关系的打空格*/
.box ul li
color: mediumpurple;
6、/*伪类选择器(鼠标悬停状态)*/
a:hover
text-decoration: none;
7、<div style=""></div>不推荐
<div class="box"></div>
<div class="box1"></div>类选择器起名字,找到box就可以找到标签,要给大小,像素
<h1 class="box"></h1>优先级高于标签选择器
<div class="box" id="box">允许 p标签被id和类选择器同时修饰,id高于类,类高于标签
8、 <a href="#">点一下</a>鼠标悬停
color:royalblue/*修饰字体颜色*/;
font-size: 30px;/*修饰字体大小*/
font-family: "微软雅黑";/*字体样式*/
font-style: italic;/*字体样式*/
font-weight: bold;/*字体加粗*/
letter-spacing: 5px;/*字体间距*/
9、 text-align: center;/*对齐方式*/
line-height: 300px;/*水平方向 行高*/
text-decoration: overline;/*文本划线*/
text-shadow: 2px 3px goldenrod;/*字体阴影 水平阴影距离 垂直距离 模糊距离 颜色*/
text-indent: 2em;/*首行缩进 em相对单位*/
10、background-color: beige;/*背景颜色*/
background-image: url(../img/cs.jpg);/*背景图片*/
background-position: -100px;/*图片平移/
background-size: cover;/*背景图片大小 cover等比例缩放不失真*/
background-attachment: fixed;
opacity: 0.5;/*透明度*/
background-color: transparent;/*背景全透明*/
/*background-size: 300px 300px;/**/
background-repeat: no-repeat/*repeat-x延x轴平铺*/;
background-size: cover;
background-attachment: ;/*背景图片固定*/
/**/
11、rgb(200,0,0);三元素
心得体会:
今天我们开始学习css,学到了常用的选择器有哪些,还有很多修饰工具,文字的设定,background的一些设定以及修改等等,今天也是同样收获满满的一天。
近期评论