各个浏览器并不兼容,想要兼容css属性,需要添加如下的前缀:
-ms-transform:rotate(-1deg); /* IE 9 旋转1度*/IE浏览器
-moz-transform:rotate(-1deg); /* Firefox 旋转1度*/火狐浏览器
-webkit-transform:rotate(-9deg); /* Safari and Chrome 旋转9度 */谷歌浏览器
-o-transform:rotate(-1deg); /* Opera 旋转1度*/Opera浏览器
transform:rotate(-1deg);//一般写法 旋转-1度
CSS定义:
- CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式。
CSS代码语法:
- css样式选择组成部分:选择符+声明(属性+值)。选择符别名是选择器,可以是标签(p{})、表单、id(#id1{})、css(.css1{})等;声明是在一对大括号{},大括号里面就是属性和值,若是多个属性,就用分号“;”来隔开;CSS注释代码:/**/,例如:/*设置body样式*/body{color:yellowgreen;font-size:20px;}。如下图所示.
引用CSS样式有三种方法(就近原则(离被设置元素越近优先级别越高)级别是 1>2>3
):
- 内嵌式:<p style="color:pink">在标签中直接添加
- 嵌入式:<style type="text/css">p{color:red;}</style> 在HTML页面上<head/>中
- 外部式:<link href="style.css" rel="stylesheet" type="text/css">
选择器:
-
子选择器:在选择器后面添加 “>”之后添加子选择器 .first>span{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ 或者 p>span{border:1px solid red;}/*选择器可以是id、class、标签*/即大于符号(>),用于选择指定标签元素的第一代子元素。如下图
-
包含(后代)选择器: .first span{border:1px solid red;}即加入空格,用于选择指定标签元素下的所有后辈元素。总结:>作用于元素的第一代后代,空格作用于元素的所有后代如下图所示:
-
通用选择器:* {color:red;} 作用是匹配html中所有标签元素,如下图所示:
-
伪类选择符(html不存在的标签的某种状态设置样式)。a:hover{color:red;}/*鼠标滑过字体颜色变为红色特效。*/需要注意的是,伪类选择器很多,但是不能兼容所有的浏览器,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了。如下图所示:
-
分组选择符:为html中多个标签元素设置同一个样式时,可以使用分组选择符(,):h1,span{color:red;}/*等价于h1{color:red;} span{color:red;}*/。
继承
- 颜色具体继承性,但是border没有继承性,如下图所示:其中span就没有继承border属性,只有p有border属性:
特殊性(权重越大,就显示其css样式,id(100)>class(10)>子选择器(1+1+。。。。)>标签(1))
-
span{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
层叠性:内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
重要性:!important(设置具有最高权值)要写在分号的前面:p{color:red!important;},p的权重最大,因此p.first不起作用了。
-
文字排版--字体(font-family)、
-
文字排版--字号、颜色(font-size、color)、
-
文字的样式:粗体、斜体、下划线、删除线(font-weight:normal/*默认值。定义标准的字符。bold:定义粗体字符。bolder:定义更粗的字符。、lighter:定义更细的字符。、inherit:规定应该从父元素继承字体的粗细。100-900:定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。*/)
-
文字排版--斜体{font-style:italic;}
-
文字排版--下划线{text-decoration:underline;}
-
文字排版--删除线{text-decoration:line-through;}
-
段落排版--缩进p{text-indent:2em;}2em指的是文字的两倍大小
-
段落排版--行间距(行高)p{line-height:2em;}行间距(行高)为2em
-
段落排版--中文字间距、字母间距 字母之间的距离{letter-spacing:50px;} 单词之间的距离{word-spacing:50px;}
-
段落排版--对齐div{text-align:center;}center、left、right
元素分类
-
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
-
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素特点:(块级元素可以display:inline 设置成内联元素)
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
-
常用的内联块状元素(inline-block)有:
<img>、<input>,除此之外,还可以设置内联元素变成内联块状元素:{display:inline-block},
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。