目录
样式表回顾
1.样式表的三种选择器
-
标签选择器
代码示例如下:
<style>
input{
width:120px;
border:solid 1px #ff0000;
}
</style>
-
Id选择器
代码示例如下:
<style>
#flow{
color:#ff0000
}
</style>
-
类选择器
代码示例如下:
<style>
.center{
text-align:center;
font-weight:bold;
}
</style>
2.样式常见属性
类别 | 属性 | 描述 |
边框属性 | border | 设置四个边框所有的属性 |
border-width | 设置边框的高度 | |
border-style | 设置边框的样式 | |
border-color | 设置边框的颜色 | |
边界属性 | margin | 设置所有外边框属性 |
margin-left margin-right margin-top margin-bottom | 分别设置元素的左、右、上、下外边距 | |
填充属性 | padding | 设置元素的所有内边距 |
padding-left padding-right padding-top padding-bottom | 分别设置元素的左、右、上、下内边距 | |
文本属性 | font-size | 字体大小 |
font-family | 字体类型 | |
font-style | 字体样式 | |
color | 设置或检索文本的颜色 | |
text-align | 文本对齐 | |
line-height | 行高 | |
背景属性 | background-color | 设置背景颜色 |
background-image | 设置背景图像 | |
background-repeat | 设置一个指定的图像如何被重复 |
3.样式表
-
内部样式表
在<head>与</head>标签之间的style样式
<html>
<head>
<title>内部样式表</title>
<style type="text/css">
body{
font-size:12px;
line-height:20px;
}
.video{
margin: 3px;
float: left;
}
</style>
</head>
-
外部样式表
- 使用<link>标签链接到外部样式文件
- 使用@import方法导入外部样式表
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
……
</body>
</html>
案例1:动态改变图片的边框样式
要求:根据不同按钮点击出现不一样的边框效果
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a{
border: 10px solid peachpuff;
box-shadow: 0px 0px 10px aliceblue;//阴影
}
.b{
border-radius: 20px;//弧度
border: 10px solid lightcoral;
box-shadow: 0px 0px 10px aliceblue;//阴影
}
</style>
</head>
<body>
<img id="m1" src="img/book2.jpg" width="100" height="100">
<img id="m2" src="img/top1.jpg" width="100" height="100">
<img id="m3" src="img/a1.jpg" width="100" height="100">
<p>
<button type="button" onclick="fn1()">点我添加边框1</button>
<button type="button" onclick="fn2()">点我添加边框2</button>
<button type="button" onclick="fn3()">点我添加边框3</button>
</p>
<script type="text/javascript">
function fn1(){
//操作css的第一种方式 :直接操作style
m1.style.border="2px solid black"
m1.style.width="150px"//调整图片宽度
m1.style.opacity=.5//透明度
}
function fn2(){
m2.setAttribute("class","a")
}
function fn3(){
//class是关键字 标签中的class属性在js中都叫能className
m3.className="b"
}
</script>
</body>
</html>
效果图如下:
案例2:随鼠标滚动的广告图片
要求:当鼠标上下滚动的时候,页面里面的小广告会跟着鼠标上下滚动
案例需要使用的新方法如下(window对象函数):
属性 | 描述 |
scrollTop | 设置或获取元素中滚动条的垂直偏移话题 |
scrollLeft | 设置或获取元素中滚动条左右偏移距离 |
clientWidth | 浏览器中可见内容的高度,不包括滚动条等边线,会随窗口的显示大小变化 |
clientHeigth | 浏览器中可以看到内容的区域的高度 |
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 2px solid black;
/*绝对布局的特点:可以随便调整位置*/
position: absolute;
/*top bottom left right*/
right: 20px;
top: 40px;
transition: .1s;
}
</style>
</head>
<body>
<div id="ad">
<button onclick="ad.style.display='none'">x</button>
<br>
<img src="img/top1.jpg" alt=""width="100" height="100" >
</div>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<p>淘宝,淘你所爱</p>
<script>
//窗口的滑动事件
window.onscroll=()=> {
//获取到窗口滚动的距离 scrollTop
ad.style.top=40+document.documentElement.scrollTop+"px"
}
</script>
</body>
</html>
注:如果要小广告图片浮在文字上那么需要设置小广告图片在其div的位置属性position设置绝对定位absolute
onscroll事件:当页面滚动条的时候触发 通过window对象来调用
效果图如下:
案例3:图片放大镜效果
要求:鼠标移入图片时出现放大图片
需要用到的方法如下
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 250px;
height: 250px;
background: #FFDAB9;
position: absolute;
}
</style>
</head>
<body>
<img id="m1" src="images/show5_big.jpg" width="150" height="150" >
<div id="div"></div>
<script type="text/javascript">
//onclick 点击事件
//ondblclick 双击事件
//onmouseover 鼠标移入事件
//onmouseout 鼠标移出事件
//onmousemove 鼠标移出事件
m1.onmouseover=function(){//鼠标移入
div.style.display="block"
}
m1.onmouseout=function(){//鼠标移出
div.style.display="none"
}
m1.onmousemove=(e)=>{
//需要事件对象 Event
div.style.left=e.clientX-50+"px"//拿到位置后让鼠标在图片上居中
div.style.top=e.clientY-50+"px"
div.style.background="url("+m1.src+") center/cover" //放大的tupian
}
</script>
</body>
</html>
效果图如下:
总结:
以上就是关于JavaScript和css的交互的一些内容之后还会跟新更多关于JavaScript的内容
欢迎大家关注!!!