CSS3背景
四种背景属性:
background-image:添加背景图片。不同的背景图像和图像用逗号隔开。
background-size:指定背景图像的大小,可指定像素或者百分比的大小,是相对于父元素的宽度和高度的百分比的大小。
background-origin:指定了背景图像的位置区域
background-clip:背景裁剪属性是从指定位置开始绘制。
CSS3渐变
渐变可以让我们在两个或者多个颜色之间显示平稳的过渡。
两种类型的渐变:
Linear Gradients:线性渐变-向下/向上/向左/向右/对角方向
Radial Gradients:径向渐变,由它们的中心定义
线性渐变:
语法:background:linear-gradient(direction, color-stop1, color-stop2, …);
线性渐变默认情况是从上到下。
从左到右的线性渐变:
grad {undefined
background: -webkit-linear-gradient(left, red, blue);
background: -o-liner-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red, blue);/标准语法/
}
从左上角开始到右下角的渐变:
设置方向为:left top/bottom right/to bottom right(标准语法下)
使用角度对方向进行设置:
这里的角度是指水平线和渐变线之间的角度。So 0deg将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变。
使用透明度:
支持透明度,用于创建减弱变淡的效果。
为了添加透明度,使用rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值,它定义了颜色的透明度:0表示完全透明,1表示完全不透明。
<link rel="stylesheet"type="text/css"href="mystyle.css">
href值为外部资源地址,这里是css的地址
rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
type规定被链接文档的MIME类,这里是值为text/css
(首先这是百度说的),第二说说我在做这个部分遇到的几个问题:
第一就是格式,我们在外部建立格式表的时候,一定要记得通过重命名将文本改成.css格式。还有就是与html里建立连接的代码格式一定不要写错。
第二,这个问题我也没有找出原因,按理说<!DOCTYPE html>这行代码存在就是为了提高兼容性,但是我建立了同样的表,在chrome里完全打不开,但是在bing里面就能打开。
行内插入就是像属性的插入方法一样,用style=某些格式来进行插入:
(这是我没有在
标签中链接外表,而是直接在我需要更改的标签格式内容里进行更改)<h1 style="color:blue;text-align:center;">This is a heading</h1>
<--! 这就是直接对h1标签内容进行格式更改,用属性添加的办法>
<p style="color:red;">This is a paragraph.</p>
id选择器和类选择器的区别
① 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 javaScript 搭配使用。