周仁敏-20201028
知识总结
(回顾)表格:表格的行列合并
表单:action method
input type name value数据回显 submit提交按钮 img按钮
(今日学习) css3.0:层叠样式表->修饰网页
选择器=>镜子:精确选中修饰的目标
常用的选择器:0、通用择器
margin:0;/*外边距*/
padding:0;/*内边距*/
border:0;/*边框*/
1、类选择器
1/*类选择器*/
2.box
3 width:300px;
4 height:200px;
5 backgroud-color:red;
2、标签选择器
1/*标签选择器*/
2 width:400px;
3 height:200px;
4 backgroud-color:#11aabb;
3、标签选择器
1/*id选择器*/
2.#box
3 width:400px;
4 height:200px;
5 backgroud-color:#123;
4、后代选择器
1/*后代选择器*/
2.box ul li;(p标签不好使)
3 color:friebrick;
5、伪类选择器(鼠标悬停状态hovre)
1/*伪类选择器*/
2.a:hover
3 text-decoration:(取消下划线)
新建css不用style
<link rel="stylesheet" href="css/style.css"/>
<div class="box"></div>
<div class="box1"></div>
<h1 class="box"></h1>
<div class="box"></div>
<h1></h1>
<h1 class="box"></h1>
类选择的优先级高于标签选择器
<span></span>
<span></span>
<p class="box"id="box"></p>
id高于类 类高于标签
<li>XX</li>
<li class="text">XX</li>
<li id="text">XX</li>
.text也可以
#text
<p class="box"="box"></p>
<a href="#">百度一下</a>
.box:hover
background:sienna:(搭配类)
(下午) 修饰字体文本的常用样式
<div class="box">
.box
width:400px;
height:300px
border:1px #000000 solid;
div
color:red;/*修饰字体的颜色*/
font-size;30px;/*修饰字体大小*/
font-family;"宋体"/*字体类型*/
font-style;italic;/*字体的样式*/
font-weight:bold;/*字体加粗*/
letter-spacing:5px;/*字体间距*/
text-align:center;/*对齐方式*/
line-height;300px;/*行高*/
text-decoration:overline(上划线);/*文本划线*/
underline(下划线)
line-through(划错)
text-shadow:2px (水平)2px(垂直) 3px(模糊) yellow;/*字体阴影*/
text-indent;2em;/*首行缩进*/
div
baxkground-color:red;/*背景颜色*/
baxkground-image:url(../img/icon.jpg); /*背景图片*/
background-size:/cover; /*对比图片的大小*/
baxkground-size:300px 300px;
baxkground-repeat-x;/*背景图片平铺*/
baxkground-attachment:fixed;/*背景图片固定*/
baxkground-position:-100px 0; /*背景图片平移*/
color:#0000ff;
什么数都可以
rgb(255,0,0)
rgba(0,255,255,1)(透明度)
学习心得
今天的实训听的很认真,不过今天的内容感觉挺难的,但是当我自己打了一遍其实也没有那么难,其实自己动手
打一遍真的很有效果,早上讲了好几个选择器,下午讲了很多修饰字体文本的常用样式,只要自己过一遍就会明白哪
里出错,最终自己也会发现原因,然后更改自己的错误,一个空格都会使整个出错,希望明天的实训我依然可以像今
天这样。
近期评论