佘慧婕-20201028

一、知识点总结

css 3.0:层叠样式表——修饰网页
选择器(相当于镜子):精确的选中要修饰的目标
一、常用选择器:右键css文件夹,新建css文件,用<link rel="stylesheet" href="css/style.css"  />将css文件应用到html上
  1、类选择器:【.】
class-定义一个位的关键字——相当于给类选择器命名
类选择器可以共用,所有的标签都有类选择器
拿到块级标签先给大小
width: 300px;——一定要带单位
height: 200px;——一定要带单位(px——像素)相当于给div定大小

2、标签选择器【标签名称】
类选择器的优先级要高于标签选择器
<h1 ></h1>/!标签选择器!/——html
h1{
width: 400px;
height: 200px;
background-color: #11aabb;
}——css

3、id选择器【#】
<p id="box"></p>——html
#box{
width: 400px;
height: 200px;
background-color: #123;
}——ccs
id选择器的优先级高于类选择器高于标签选择器

4、后代选择器【 空格】
p ul li{
    color: chocolate;
}——css
p标签不可以将P更换为#box

5、伪类选择器(鼠标悬停状态)【:hover】
ccs——
.box:hover{
background: sandybrown;/*更换颜色 伪类选择器(鼠标悬停)*/
}
text-decoration: none;/*取消下划线*/
html——<!--5、伪类选择器(鼠标悬停状态)-->
<a href="#">百度一下</a>

6、通用选择器【*】
/*通用选择器*/
*{
background: burlywood;
}
取消边距:margin: 0;/*外边距*/    padding: 0;/*内边距*/     border: 0;/*边框*/

二、如何修饰
1、修饰字体和文本的常用样式
ccs内写:
.box{
width: 600px;
height: 300px;/容器行高/
border: 1px #000000 solid;
}
修饰字体常用样式:
color: red;/修饰字体的颜色/
font-size: 30px;/*修饰字体的大小 /
font-family: "宋体";/
字体类型/
font-style: italic;/
字体样式/
font-weight: bold;/
字体加粗/
letter-spacing: 5px;/
字体间距*/

text-align: center;/*对齐方式*/
line-height: ;/*行高,等于容器行高居正中心,大于其偏上,小于其偏下*/
text-decoration: overline;/*文本划线*/
text-shadow: 2px/*水平距离*/ 2px/*垂直阴影距离*/ 3px/*模糊距离*/ yellow;/*字体阴影*/
text-indent: 2em/*em是相对单位,相当于2点几个px*/;/*首行缩进*/

2、修饰背景的样式
修饰背景常用样式:
background-color: red;/背景颜色/
background-image: url(../img/QQ图片20190624091025.jpg)/背景图片//../是返回上一级目录/
background-size: 300px 300px;/背景图片大小/ /cover等比例缩放/
background-repeat: no-repeat;/背景图片平铺/
background-repeat:repeat-x ; /沿x轴平铺/
background-attachment:fixed ; /背景图片固定/
background-position: -100px 0;/图片平移前为x轴,后为y轴/
3、颜色的表示方法:color: #FF0000; color: rgb(255,0,0); color: rgba(0,255,255,1);——最后一位为透明度
4、css中透明度
opacity: 0.5;/透明度/
5、background-color: transparent;/背景全透明/

学习心得
今天展开了css的学习,并且复习了前面的知识,在复习过程中知道了自己掌握了多少知识,还有哪些是还没有掌握的。只是目前还没有能够做到熟练掌握。

标签

评论

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