周玉莲-20201028

一、知识总结


1.选择器
HTML5.0:H5标签(块级标签:P、UL、DIV、行级标签:a.span.img.表单)
css3.0:层叠样式表  作用:修饰网页、
<link rel="stylesheet" href="css/stydle.css" />:将CSS代码引用 
选择器(镜子):精确选中要修饰的目标
(1)常用的选择器:
0:通用选择器 (优先级最低)
 /*通用选择器*/
 *{
    margin:0;/*外边距*/
    padding: 0;/*内边距*/
    border: 0;/*边框*/
}
1.类选择器(class:类选择器的关键字)
/*类选择器*/
.box{       
    width: 300px;
    height: 200px;
    background-color: red;
}
2.标签选择器
/*标签选择器*/
h1{
   width:400px;
   height: 200;
   background-color:blueviolet;
}
3.id选择器
/*id选择器*/
#box{       
         width:400px;
         height: 200;
         background-color:  gold;
}
4.后代选择器
  /*后代选择器*/  
.box ul li{     ;空格
    color: red;
}
5.伪类选择器(鼠标悬停状态)
/*伪类选择器*/
a:hover{
    text-decoration: none;
}
hover:鼠标悬停状态
类选择器的优先级高于标签选择器
id选择器的优先级高于类选择器
2.修饰字体和文本的常用样式
.box{
    width: 400;
    height: 400;
    border: 1px #0000000 solid;
}
div{
    color: red;/*修饰字体的颜色*/ 
    font-size: 30px;/*修饰字体的大小*/ 
    font-family: 宋体;/*字体类型*/ 
    font-style: italic;/*字体的样式*/
    font-weight: bold;/*字体加粗*/
    letter-spacing: 5px; /*字体间距*/ 
    text-align: center(居中)left(左对齐)right(右对齐);/*对齐方式*/
    line-height: 300px;/*行高*/
    text-decoration: overline;/*文本的划线*/
    text-shadow: 2px (水平距离) 2px(垂直阴影距离) 3px(模糊距离) yellow;/*字体阴影*/
    text-indent: 2em;/*首行缩进*/
}
3.修饰背景的常用样式
div{
    background-color: red;/*背景颜色*/
    background-image: url(../img/icon.jpg);../:返回上级目录/*背景图片*/ 
    background-position:-100px 0;/*背景图片平移*/
    opacity:0.5;/*透明度*/
    background-size:300px 300px;/*背景图片的大小*/
    background-attachment:fixed;/*背景图片的固定*/
                          cover:覆盖;
    background-size:300px 300px;                     
    background-repeat;repeat-x;/*背景图片平铺*/
}
4.颜色的表示方法
color:#0000FF/rgb{0-moz-animation-delay:255.,0,0;} rgba{0,255,255,0-1(透明度);};
RGB与RGBA的区别与转换
RGB 是代表Red(红色) 、Green(绿色)、 Blue(蓝色)三个单词的缩写。
RGBA 颜色值是 RGB 颜色值的扩展,添加了一个 alpha 通道, 它规定了对象的不透明度。
Alpha透明度。取值0~1之间。(颜色的透明度)此色彩模式与RGB相同,RGB定义了颜色的红
绿蓝值,在RGB模式上新增了Alpha透明度.alpha通道一般用作不透明度参数。如果一个像素
的alpha通道数值为0%,那它就是完全透明的(也就是看不见的),而数值为100%则意味
着一个完全不透明的像素(传统的数字图像)。在0%和100%之间的值则使得像素可以透过
背景显示出来,就像透过玻璃(半透明性),这种效果是简单的二元透明性(透明或不透明)
做不到的。它使数码合成变得容易。alpha通道值可以用百分比、整数或者像RGB参数那样用
0到1的实数表示。
1、 基本语法:
R:红色值。 正整数(0~255)或 百分数(0.0% - 100.0%)
G:绿色值。 正整数(0~255)或 百分数(0.0% - 100.0%)
B:蓝色值。 正整数(0~255)或 百分数(0.0% - 100.0%)
A:透明度。取值0~1之间,不可为负值
RGBA 比元素设置 CSS 的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,
他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。
使用 Opacity 来做透明,在父元素中使用了 Opacity,那么其它子元素都会受到影响。

background-color:transparent;/*背景全透明*/

二、心得体会
一天的学习时间又过去了,学习的东西也在慢慢从简单变复杂。比起昨天,今天我的学习效率
不是很高。从id选择器开始我输入的代码运行跟老师的运行不一样。今天老师稍微讲的有点快,
一直都是跟不上的状态。但认真的听讲记笔记,在课下多多练习应该没有什么问题。跟着老师
的节奏,相信两周结束会有不错的收获。人生也许不尽完美,正因为不完美,我们才要不断的
努力创造,努力奋斗,时间确实是生命,所以我们必须珍惜宝贵的生命。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1