css样式标签和js语法属性区别





















































































































































































































盒子标签和属性对照
CSS语法（不区分大小写） JavaScript语法（区分大小写）
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
颜色和背景标签和属性对照
CSS 语法（不区分大小写） JavaScript 语法（区分大小写）
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
 
样式标签和属性对照
CSS语法（不区分大小写） JavaScript 语法（区分大小写）
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
 
文字样式标签和属性对照
CSS 语法（不区分大小写） JavaScript 语法（区分大小写）
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
 
文本标签和属性对照
CSS 语法（不区分大小写） JavaScript 语法（区分大小写）
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align

verticalAlign

赞 (0)

相关推荐

  • js控制不同的时间段显示不同的css样式的实例代码

    js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 复制代码 代码如下: function getCSS(){        datetoday = new Date();        timenow=datetoday.getTime();        datetoday.setTime(timenow);        thehour = datetoday.getHours();        if (thehour<12)            disp

  • css类选择器的使用方法详解

    类选择器 在 CSS 中,类选择器以一个点号显示: 复制代码 代码如下: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中.在下面的 HTML 代码中,h1 和 p 元素都有 center 类.这意味着两者都将遵守 ".center" 选择器中的规则. 复制代码 代码如下: <h1 class="center">     This heading will be center-

  • 纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天给大家带来 CSS 三角形绘制方法 复制代码 代码如下: #triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transpar

  • CSS绘制五角星

    CSS绘制五角星

    1 六角形 复制代码 代码如下: #star-six {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;    position: relative;}#star-six:after {    width: 0;    height: 0;    border-

  • CSS透明属性详解代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 复制代码 代码如下: .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} 上面的几个属性分别是:opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.filter:alpha(opacity=50); 这个是为IE6设的

  • css样式标签和js语法属性区别

    盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft bor

  • vue.js引入外部CSS样式和外部JS文件的方法

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/

  • php完全过滤HTML,JS,CSS等标签

    记得以前写过一篇文章 php有效的过滤html标签,js代码,css样式标签: 复制代码 代码如下: <?php $str = preg_replace( "@<script(.*?)</script>@is", "", $str ); $str = preg_replace( "@<iframe(.*?)</iframe>@is", "", $str ); $str = preg_r

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

  • XML、HTML、CSS与JS的区别整理

    XML、HTML、CSS与JS的区别整理

    在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会. 首次,我们看一下这四项技术都是什么,能干什么? (一)XML-Extensible Markup Language 可扩展标记语言(标准通用标记语言的子集)是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然可扩展标记语言占用的空间比二进制数据要占用更多的空间,但可扩展标记语言极其简单易于掌握和使用. <Hello> <bcd>C

  • JS读写CSS样式的方法汇总

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如:var elm = document.getElementById('test');       elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().remo

  • JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

  • js控制CSS样式属性语法对照表

    CSS与JS紧密配合,为我们的页面增添了很多别致的效果.为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性. 例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于:.ad{ display:none}. 下面就是JS 控制CSS样式表的语法对照: CSS语法 (不区分大小写) JavaScript语法 (区分大小写)  border border  border-bott

  • js + css实现标签内容切换功能(实例讲解)

    js + css实现标签内容切换功能(实例讲解)

    先附上效果图和代码: html 文档: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/tabs_function.js"></scri

  • JavaScript动态添加css样式和script标签

    [动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link'); //创建link元素节点,也就是link标签 link.rel="s

随机推荐