html元素使用CSS渲染标签的样式,可以通过
内联式
、嵌套式
、外联式
来将CSS样式添加到html中。有时候涉及到动态的参数,或者在事件中需要修改不同元素的CSS样式时,可以通过js获取目标元素,再其修改CSS样式。
嵌套式通过style属性设置元素样式
<p style="font-size: 18px;color: pink; padding: 0;float: right;" >this is a p</p>
内联式在head标签中使用style元素包含css代码
<style>/*设置class为number的元素的CSS样式*//*有没有注意到style标签里面的注释方式和外部html代码的注释方式都不一样:)*/.number{width:120px; height:80px;background-color:#B46381;margin: 0;display: block;}</style>
外联式通过link标签来引入外部的css文件
<link rel="stylesheet" type="text/css" href="myCss.css">
jQuery设置css样式用css()设置样式
//1.设置单个样式$('div1').css("color","pink");//2.设置多个样式//这里要注意和CSS写法的区别,属性名和值用引号括起来,多个属性值之间以逗号间隔$('.number').css({"width":"60px","height":"40px","background-color":"#B46381","margin":0,"display": "block"});//换个写法可能更容易理解,这不就是个json对象哇。。。var numberCss = {"width":"60px","height":"40px","background-color": "#B46381","margin":0,"display": "block"};$('.number').css(numberCss);
如何通过jQuery动态设置元素CSS的样式 以及HTML中CSS “内联式” “嵌套式” “外联式”使用方法