CSS初学笔记 ②

最新推荐文章于 2024-08-19 18:49:52 发布

原创最新推荐文章于 2024-08-19 18:49:52 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

1.css定位

A.概念：允许对元素进行定位改变位置；分为普通流，浮动和绝对定位；普通流中的元素的位置有元素在HTML中的位置决定

B.position属性:把元素放置到一个静态的、相对的、绝对的或固定的位置

（1）static默认值；没有定位

（2）absolute绝对定位；相对于除static定位以外的第一个，通过绝对定位可以放置元素到任何位置；使用left、right、top、bottom进行定位；如果父级没有设置定位属性，则依据body对象左上角作为参考

（3）relative相对定位；相对于正常位置进行定位，使用left、right、top、bottom进行定位

（4）fixed绝对定位；相对于浏览器窗口进行定位,使用left、right、top、bottom进行定位;相对于浏览器不会因为滚动而滚动

绝对定位和相对定位的区别:

绝对定位对象可以层叠,相对定位的对象不可以

相对定位的对象会占据原来位置,绝对定位不会

C.(1)z-index属性:设置元素的堆叠顺序:如:z-index:3

(2)clip属性:设置元素的形状,元素被剪入这个形状中;语法:clip:rect(top,right,bottom,left)；clip属性只能在元素设置了position：absoulte或position：fixed起作用

D.垂直对齐方式vertical-align属性：设置元素的垂直对齐方式

（1）baseline默认：元素放置在父元素的基线上

（2）top：把元素的顶端于行中最高元素的顶端对齐

（3）middle：把此元素放置在父元素的中部

（4）bottom：把元素的顶端于行中最低的元素的顶端对齐

使用数值（像素）、百分比

（5）text-top：把元素的顶端与父元素字体的顶端对齐

（6）text-bottom：把元素的底端与父元素字体的底端对齐

E.float浮动属性：定义元素在哪个方向浮动

（1）left：向左浮动

（2）right：向右浮动

（3）none默认：不浮动

clear浮动清除：both、right、left、none

2.表格和列表

A.表格有关属性：（1）border-collapse；设置是否把表格边框合并为单一边框，separate默认不合并、collapse合并

（2）border-spacing：设置表格标题的位置：top上 bottom下

（3）empty-cells：设置是否显示空单元格：hide、show默认

（4）table-layout：设置显示长度是否随内容拉伸：auto默认拉伸、fixed列宽度、列长度绝定

B.列表属性：（1）list-style简写属性如：list-style{列表标记类型type 标记位置postion image将图像设为标志}

（2）list-style-type：none无、disc实心圆、circle空心、decimal数字、decimal-leading-zero 0开头数字、lower-roman罗马数、upper-roman大写罗马、lower-alpha小写英文、upper大写英文

（3）position：inside、outside

（4）image：如 list-style-image：url{图片地址}

3.css边框

A.padding属性：元素内边距

padding-top:属性设置元素的上内边距（空白）以此来推right、bottom、left

padding ****上右下左 * 设定四个边距；** 上下左右；***上左右下；

B.border属性：元素边框

border-width 设置边框宽度；border-style（solid 定义实线、dotted定义点状边框、double定义双线、groove定义3D凹槽边框、ridge定义3d垄状边框、outset定义3doutset边框）

border-color 设置颜色

后面还有border-bottom、border-left、border-right的简写属性可以设置color、style、width 以此类推

C.圆角属性border-radius（border-top-left-radius左上、top-right右上、bottom-left（right）左下（右下））

border-radius ****左上右下左下右上 * 设定四个圆角；** 左上右下左下右上；***左上右下左下右下；

可以设置x轴y轴分别的距离：如border-top-left-radius：2px 10px ；x轴距离2px y轴距离10px

D.border-image属性

border-image-source 图像来源路径；border-image-slice 边框背景图的分割方式（通常30px、用fill补全中间图片内容）；border-image-width 边框的宽度；border-image-outset 边框背景图的扩展（边框图像区域超出边框的量）（符合复合属性原则）；border-image-repeat 边框图像的平铺方式：stretch拉伸、repeat重复、round 重复铺满并对图片进行调整repeat升级版（符合复合属性原则）

E.border-shadow属性

none无阴影；其他可以设置水平偏移、垂直偏移、模糊值、外延值、颜色 outset外阴影、intset内阴影（可以设置多个阴影用“，”隔开每一组）

在id选择器后面加入“：hover”鼠标在移动到时出现不同阴影可以设置负值设置x轴y轴0px 0px 外延值不同可以全覆盖

阴影

偏移为0时 outset写与不写效果不同

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <style type="text/css">

 #div1{background: rgba(255,0,0,0.5);width: 500px;height: 400px;border-radius: 30px;box-shadow: 5px 5px 5px rgba(0,0,255,0.5) inset;}
 
#div1:hover{background: rgba(255,0,0,0.5);width: 500px;height: 400px;border-radius: 30px;box-shadow: -5px 5px 5px rgba(0,0,255,0.5) outset;}
  
 </style>
</head>


<body>
<div id = "div1"></div><br>
<div id = "div2"></div><br>


</body>
</html>

4.css背景

A.background-attachment 背景图像是否固定或者随着页面的其余部分不懂；scroll默认、fixed当页面其余部分滚动时，背景图像不会移动；

background-color 设置颜色；background-image 把图像设置被背景；

background-position 设置背景的起始位置

（1）left、right、bottom、center、top 两两组合如果之规定一个后一个关键词为center

（2）x%、y% 水平和垂直位置左上0% 0% 右下100% 100% 如果规定一个后一个为50%

（3）像素值 xpx ypx 与第二点差不多

background-repeat 设置背景图像是否重复；

background-size 规定背景图片的尺寸（cover 把背景图设置足够大覆盖背景、contain 最大尺寸使宽度高度任意一个完全符合）

background-clip 规定背景的绘制区域

（1）border-box 背景被裁剪到边框盒；padding-box 背景被裁剪到内边框距；content背景被裁剪到内容框

background-orgin 规定背景图片的定位区域

（1）border-box 背景图像相对于边框盒定位；padding-box 背景图像相对于内边框距定位；content背景图像相对于内容框定位

练习：制作张信纸

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <style type="text/css">
body{width: 800px;height: 700px}
#div1{
 width: 70%;
 height: 150%;
 line-height:25px;
 border: 20px ridge rgba(255,0,0,0.5) ;
 border-radius: 10px;
 padding: 20px ;
 margin: 50px ;
 background-image: url("D://My Documents/Pictures/11..jpg"),
                   url("D://My Documents/Pictures/四叶草.jpg"),
                  url("D://My Documents/Pictures/gz.jpg");
                
 background-size: 25%;
 background-repeat :no-repeat,no-repeat,repeat; 
 background-position: left top,right bottom,left top;
 background-clip:border-box,border-box,content-box;
  background-origin:border-box,border-box,content-box;
 
}
p{
padding:0px;margin:0px;
text-indent: 4em}
 </style>
</head>
    
<body>
<div id= "div1">
<br><br><br>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>

</div>
</body>
</html>

5.css渐变效果

A.线性渐变

linear-gradient：如例子div1~div7

B.径向渐变

radial-gradient：形状（椭圆ellipse、圆形circle）、发散方向（left、center等）、大小（可用像素、关键字表示：closet-side距离最近的边、farther-side到最远的边、closet-corner最近角、farthest-corner最远角）、起始（终止颜色）、重复渐变：repeating-radial-gradient（）

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>linear-gradient()_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div {
	width: 200px;
	height: 100px;
	margin-top: 10px;
	border: 1px solid #ddd;
}

#div1{background:linear-gradient(red,blue)}
#div2{background:linear-gradient(to right,red,blue)}
#div3{background:linear-gradient(60deg,red,blue)}
#div4{background:linear-gradient(red,blue,orange,gray)}
#div5{background:linear-gradient(red 20%,yellow 40%,blue 60%,green 80%,purple 90%)}
#div6{background:linear-gradient(30deg,red 20px,blue 40px,yellow 60px,orange 20px)}
#div7{background:repeating-linear-gradient(60deg,red 20px,blue 40px)}
#div8{background: radial-gradient(red,blue,orange)}
#div9{background: radial-gradient(circle,red,blue,orange)}
#div10{background: radial-gradient(circle at right,red,blue,orange)}
#div11{background: radial-gradient(circle 50px,red,blue)}
#div12{background: repeating-radial-gradient(circle at right,red 20px,blue 40px)}


</style>
</head>
<body>
<p>线性渐变</p>
<div id="div1"></div>
<div id = "div2"></div>
<div id = "div3"></div>
<div id = "div4"></div>
<div id = "div5"></div>
<div id = "div6"></div>
<div id = "div7"></div><hr>
<p>径向渐变</p>
<div id = "div8"></div>
<div id = "div9"></div>
<div id = "div10"></div>
<div id = "div11"></div>
<div id ="div12"></div>
</body>
</html>

渐变按钮：

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.class1{background: linear-gradient(red,yellow,blue,green);}
input.class1{width: 300px;height: 200px;padding: 10px;font-size: 30px;text-shadow: 20px}
.class2{background: linear-gradient(60deg,yellow,orange);}
.class3{background: radial-gradient(yellow ,red );}
input.class2{width: 300px;height: 200px;padding: 10px;font-size: 30px;border-radius: 20px;text-shadow: 20px}
input.class3{width: 300px;height: 200px;padding: 10px;font-size: 30px;border-radius: 30px;}


</style>
</head>
<body>
<form action="">

<input type = "submit" value ="渐变按钮" class="class1"></input>
<input type = "submit" value ="渐变按钮" class="class2"></input>
<input type = "submit" value ="渐变按钮" class="class3"></input>

</form>
</body>
</html>