css文件类型怎么更改

html-css031

css文件类型怎么更改,第1张

1、首先找到需要修改的css文件

2、然后双击打开

如果你没有安装相应的代码编辑器,那只能使用记事本打开了,没有语法高亮和代码提示。

3、这里我们使用Sublime Text这款代码编辑器进行编辑。

4、我们可以看见,css文件的规则是,选择器{属性名:属性值}的形式,下面我们增加一个img的样式

选择器是img,样式是width: 100px;

通过js来改变CSS属性,使用jQuery可以很方便的实现,像这样:

$("img").css('border-color','red')

就可以把边框颜色都变成红色。

这是针对此问题的测试页面

2、这是3张图片

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=975878983,2392470128&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=61343736,951557457&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1354592590,1762022981&fm=11&gp=0.jpg'>

3、这是图片的样式,边框默认为灰色。

img{

max-width:200px

border-color:gray

border-width:10px

border-style:solid

}

4、现在通过这几行用到jQuery的代码,控制图片边框根据鼠标移入移出边框变灰和变红。

$(function(){

$("img").on('mouseover',function(){

$(this).css('border-color','red')

}).on('mouseout',function(){

$(this).css('border-color','gray')

})

})

5、效果如图