目录
一、CSS入门
Cascading Style Sheet :关联层叠样式表
我们想要给html标签进行渲染加入一些修饰,达到视觉效果,书写CSS样式!
样式一定是计算机上系统本身的样式表 ;
方式1:行内样式,在每一个html标签是都有style属性
style="样式属性:样式属性值;样式属性2:样式属性值2...."
弊端:一次只能控制某一个标签,如果有同名的标签需要被同时控制,就很麻烦!
开发中,如果某个标签只设置一个样式属性,完全可以使用行内样式方式2(后端人员习惯这种写法):
内联样式(内部样式)
在head标题书写 style标签
style标签体中
选择器{
样式属性:样式属性值;
样式属性2:样式属性值2;
...
}
如果有同名的标签,可以通过选择器来控制所有标签
弊端:
css的样式代码和html标签混合一块,不利于后期管理方式3:外部方式(外联样式)
前端开发人员用的方式,
将css代码单独放在文件名为.css文件中,放在指定css文件夹中
通过在当前html页面中
link 标签
属性 href="css文件"
固定属性 rel="stylesheet" 关联样式表
二、CSS选择器
1、普通选择器
选择器种类：标签选择器、类选择器、id选择器、其他类型选择器（子元素选择器、并集选择器、通配选择器）
<!-- 1)标签选择器
标签名称{
样式属性:属性值;
样式属性2:属性值2;
...
}
2)类选择class 选择器
在标签指定class属性="class属性值"
在同一个页面下,class属性是可以同名的
.class属性值{
样式属性:属性值;
样式属性2:属性值2;
...
}
class选择器 > 标签选择器
3)id选择器,(推荐)
在标签指定id属性 id = "id属性值"
在同一个页面下,id属性值必须唯一!
后面javascript,dom编程,通过id获取标签对象,如果id值重复,获取不到!
#id属性值{
样式属性:属性值;
样式属性2:属性值2;
...
}
常用的选择器优先级
id选择>class选择器>标签名称选择器
其他选择器:
子元素选择器(交集选择器)
选择器1 选择器2 ...{
样式属性:属性值;
样式属性2:属性值2;
...
}
选择器2选中的标签是选择器1里面的子元素
并集选择器
选择器1,选择器2,选择器3...{
样式属性:属性值;
样式属性2:属性值2;
...
}
通配选择器
全部选中
*{
样式属性:属性值;
样式属性2:属性值2;
...
}
-->
<style>
/* a{
color: red;
font-size: 20px;
text-decoration: none;
} */
/* div{
font-size: 35px;
color:skyblue
} */
/*class选择器*/
/* .div{
font-size: 40px;
color:darkorange;
} */
/*id选择器*/
#id1{
font-size: 15px;
color:darkgray; */
/*文本修饰*/
text-decoration: underline;
/*
选择器1 选择器2 ...{
样式属性:属性值;
样式属性2:属性值2;
...
}
/* .div span{
color: green;
} */
/*并集选择器*/
/* span,.div,#myId{
color: darkorchid;
font-size: 20px;
} */
/* *{
font-size: 20px;
/* 字体类型*/
font-family:"新宋体" ;
/* 字体粗细程度*/
font-weight: bold;
} */
}
</style>2、伪类选择器
CSS的伪类:是描述元素的一种状态
状态分类
1)link状态:鼠标没有访问过的状态
2)hover状态:鼠标悬停在元素上的一种状态(经过)
3)active状态:获取元素焦点状态(点击元素了,但是没有松开)
4)visited状态:鼠标访问过的状态,点击了并且松开了
<!--
书写写法:
选择器:状态名称(不区分大写){
样式属性:属性值;
样式属性2:属性值2;
...
}
想不断的出现效果:必须先后顺序
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，
才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。
前端里面css样式,鼠标经过状态使用最多:hover状态
-->
<style>
/*link状态:没有访问的状态*/
a:link{
font-size: 15px;
color: orange;
text-decoration: none;
}
/* visited状态:鼠标访问状态:点击了之后,松开了的状态 */
a:visited{
font-size: 35px;
color: darkgray;
text-decoration: none;
}
/* hover状态:鼠标经过状态 */
a:hover{
font-size: 20px;
color: greenyellow;
/* 去掉下划线 */
text-decoration: none;
}
/* active状态:激活状态(点击了,但是没有松开) */
a:active{
font-size: 25px;
color: blue;
/* 下划线加上 */
text-decoration: underline;
}
</style>三、CSS文本样式、字体样式、边框样式、浮动样式属性
1、CSS文本样式
<style>
body{
/*
color,text-decoration,text-aling,line-height
*/
/*color:文本颜色
颜色名称: 英文单词
十进制进制数据 :#FF0000 红色
#00FF00 绿色
#0000FF 蓝色
*/
color: red;
/*text-align 属性用于设置文本的水平对齐方式。
left:左对齐
right:右对齐
center:中间对齐
*/
text-align: left;
/*text-decoration 属性用于设置或删除文本装饰。
none:不设置任何修饰
underline:设置下划线
overline:上划线
line-through:中划线
*/
text-decoration: underline;
/*text-indent 属性用于指定文本第一行的缩进*/
text-indent: 30px;
/* letter-spacing 属性用于指定文本中字符之间的间距 (字符间距)*/
letter-spacing: 10px;
/* word-spacing:单词间距
浏览器解析:中文来说,两个字组成一个单词,单词和单词之间空格
*/
word-spacing: 20px;
/* 行高:行和行之间的距离 line-height*/
line-height: 10px;
}
.pClass{
/*text-transform:文本转换
lowercase:小写
uppercase：大写
*/
text-transform: lowercase;
}
</style>2、CSS字体样式
<style>
body{
/* font-family:设置字体文本效果:
新宋体,楷体,黑体,宋体...谷歌字体(关联谷歌字体样式)
*/
/* font-family: "楷体"; */
/*font-size:字体大写*/
/* font-size: 40px; */
/* font-style:设置字体样式:
默认值:normal 字体不会倾斜(正常体)
italic:斜体 (推荐)
oblique:倾斜,跟上面很相似
*/
/* font-style: italic; */
/* font-weight 属性指定字体的粗细
normal:默认不加粗
bold:适当加粗
可以指定像素,---700px
*/
/* font-weight:bold ; */
/* 字体的简写属性 */
/* 将所有的字体属性在一个样式代码中写好,方便 */
/* 必须优先顺序 */
/**
* font:
* font-style
font-weight
font-size/line-height
font-family
*/
font:italic bold 30px "楷体" ;
}
</style>3、CSS边框样式
<!--
div标签:块标签 四个边
边框的颜色样式简写属性:
border-color:
边框的宽度样式简写属性:
border-width:
前面两个不行,必须有边框的样式简写属性
border-style:
特点:
1)这些简写属性默认方向：
上 右 下 左
2)某一边如果没有设置边框的颜色,宽度,样式,会补齐对边的颜色,宽度,样式
-->
<style>
div{
/*设置四个边框的颜色*/
/* border-top-color: red;
border-bottom-color: #0000FF;
border-left-color: #ADFF2F;
border-right-color: #FF8C00; */
/* border-color: #FF0000; */
/* 设置四个边框的宽度*/
/* border-top-width: 10px;
border-bottom-width: 20px;
border-left-width: 30px;
border-right-width: 40px; */
/* border-width: 10px; */
/* 设置四个边框的样式
solid:单实线
double:双实线
dotted:点
dashed:虚线
*/
/* border-top-style:solid ;
border-bottom-style: dashed;
border-left-style: double;
border-right-style: dotted; */
/* border-style: solid ; */
/* 边框的简写属性
border:border-width border-style border-color
*/
border: 1px solid #000000 ;
/* 这种div的宽度和高度大小*/
width: 150px;
height: 150px;
}
</style>4、CSS背景样式
<style>
/* css背景属性 */
body{
/* background-image:设置图像
如果这个图像跟屏幕分辨率不同,导致图片x轴和y轴都在重复
*/
/* background-image:url(img/aliyun-12.jpg) ; */
/* background-image: url(img/bg.jpg); */
/* background-repeat:设置背景图像是否重复以及如何重复
默认值:repeat:x轴和y轴重复
no-repeat:不重复
repeat-x:x轴重复
repeat-y:y轴重复
*/
/* background-repeat:no-repeat; */
/* background-position:设置图片的起始位置
图片的位置 图片在浏览器中显示的位置
默认值就是 top left
*/
/* background-position: top left; */
/* 背景颜色 background-color */
/* background-color: orangered; */
/* 背景的简写属性
background: background-color background-image background-repeat background-position
*/
background: darkolivegreen url(img/aliyun-12.jpg) no-repeat top center;
}四、CSS浮动样式属性
CSS浮动:
当为某个标签(div)设置浮动的时候,
此时这个标签就表现的是块框不存在一样(脱离了这个文档流)
它可以向左,向右浮动,直到碰到其它块狂就停止掉
<!--
浮动属性:
float:left/right
left:左浮动
right:右浮动
清除浮动:clear:
left:左边不浮动
right:右边不浮动
both:两边都不浮动(推荐)
-->
<style>
#dl1{
border: 1px solid #000000;
background-color: red;
width: 200px;
height: 200px;
/* 右浮动 */
/* float: right; */
/* 左浮动 */
float:left;
}
#dl2{
border: 1px solid #000000;
background-color: green;
width: 200px;
height: 200px;
/* float: right; */
float:left;
}
#dl3{
border: 1px solid #000000;
background-color: blue;
width: 200px;
height: 200px;
/* float:left; */
float: left;
}
#adv{
width: 220px;
height: 180px;
}
#clear{
/* 清楚浮动 */
clear:both;
}
</style>五、CSS盒子模型
CSS重点中的重点：盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css盒子模型的使用</title>
<style>
/*
border-radius设置圆角边框,指定像素
*/
/* 给外面id="formDiv"加入修饰 */
#formDiv{
border: 1px solid #000;
border-radius: 10px;
width: 420px;
height: 320px;
/* 外边距:margin :上 右 下 左 */
margin: 130px 0 0 400px;
}
/* 设置背景 */
body{
background-image: url(img/bg.jpg);
}
/* id="userDiv"设置样式 */
#userDiv{
margin: 40px 0 0 80px;
}
/* 给id="pwdDiv"设置样式 */
#pwdDiv{
/*外边距*/
margin: 25px 0 0 80px;
}
/* id="rePwdDiv"设置样式 */
#rePwdDiv{
margin: 25px 0 0 80px;
}
/*id="emailDiv"设置样式*/
#emailDiv{
margin: 25px 0 0 80px;
}
/* id="btnDiv" 设置样式*/
#btnDiv{
margin: 40px 0 0 150px;
}
</style>
</head>
<body>
<div id="formDiv">
<form action="#" method="get">
<!-- 表单标签 label 标签 绑定一个表单元素,代表普通文本
for属性是要和它绑定表单元素的name属性值一样
-->
<div id="userDiv">
<label style="margin-right:30px ;" for="username">用户名</label>
<input type="text" name="username" />
</div>
<div id="pwdDiv">
<label for="password" style="margin-right: 30px;">密  码</label>
<input type="password" name="password" />
</div>
<div id="rePwdDiv">
<label for="repassword">确认密码</label>
<input type="password" style="margin-left: 15px;" name="repassword" />
</div>
<div id="emailDiv">
<label style="margin-right:30px ;" for="email">邮  箱</label>
<input type="text" name="email" />
</div>
<div id="btnDiv">
<input type="submit" value="注册" /> <input style="margin-left: 30px;" type="button" value="登录" />
</div>
</form>
</div>
</body>
</html>
六、CSS定位属性
定位属性:position
absolute:绝对定位
当前这个元素根据父元素的位置进行移动
relative:相对定位
当前这个元素根据当前位置进行移动
fixed:固定定位
当前这个元素处在浏览器中的位置,永远处在这个位置
根据top/left设置向下,向右移动的距离(不会随着滚动条的滚动而滚动)
结合left以及top属性进行移动
<style>
#d1{
width:150px;
height: 150px;
border:1px solid #000000;
background-color: aquamarine;
}
#d2{
width:150px;
height: 150px;
border:1px solid #000000;
background-color: #00FF00;
}
#d3{
width:150px;
height: 150px;
border:1px solid #000000;
background-color: #0000FF;
/* 加入定位属性 */
/* position: absolute ;
top: 50px;
left:30px; */
/* position: relative;
top:30px;
left:50px; */
}
#advDiv{
width: 590px;
height: 470px;
/* border: 1px solid #000000; */
/*固定定位*/
position: fixed;
top:50px;
left:400px;
}
</style>
<script >
//网页定时器
function myTest(){
//setInterval:每经过这个毫秒值后,重复执行任务 (函数)
//settimeout:经过毫秒值后,执行一次任务
window.setTimeout("testMouserOver()",3000) ;
}
//js代码
function testMouserOver(){
window.open("adv.html","_self") ;
}
</script>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
<div id="advDiv">
<img onmouseover="myTest()" width="300px" height="300px" src="img/q.jpg" />
</div>
</body>
</html>
扫一扫
3939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
