设置css样式的方法

html-css023

设置css样式的方法,第1张

有三种方法：

行内样式 直接在标签里面添加style属性，在style属性里面写样式即可；

内部样式 在<head>标签里面通过<style>标签来写入内部样式；

外部样式 通过<link>标签引入外部样式表。

在js中修改css样式，必须通过关键词style。在编辑修改CSS直接设置样式(内联样式)使用JavaScript设置元素样式的最简单方法是使用style属性，在我们通过JavaScript访问的每个HTML元素时都有一个style对象。

写个简单的例子给你吧

htlm如下：

<h4>图片水平居中</h4>

<div class="demo1">

<img src="你的图片" alt="">

</div>

<h4>图片垂直居中</h4>

<div class="demo2">

<div class="imgbox">

<img src="你的图片" alt="">

</div>

</div>

<h4>图片水平垂直居中</h4>

<div class="demo3">

<div class="imgbox">

<img src="你的图片" alt="">

</div>

</div>

css如下：

<style type="text/css">

.demo1{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: inline-blocktext-align: center}

.demo1 img{width: 100pxheight: auto}

.demo2{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: table}

.demo2 .imgbox{display: table-cellvertical-align: middle}

.demo2 .imgbox img{width: 100pxheight: auto}

.demo3{width: 200pxheight: 200pxborder: 1px solid #cccdisplay: table}

.demo3 .imgbox{display: table-cellvertical-align: middletext-align: center}

.demo3 .imgbox img{width: 100pxheight: auto}

</style>