css学习（1）

14、CSS

Web标准：结构（XHTML），表现（CSS），行为（Javascript）

css语法结构：选择符{属性：属性值；}

css控制字体：font-size：12px； font-family:”Arial”,”宋体”;

line-height:150%;font-weight:normal(bold);

<span>控制行内元素<h1>这是<span>标题</span></h1>

div{width:300px;height:50px;line-height:50px;}

<div>让文字在垂直方向上居中，将行高设置为元素高度</div>

15、CSS应用给网页的四种方式

内联式样式表（应用于一个标签）：<p style=”color:read;font-size:2-px;”></p>

嵌入式样式表（应用于一类标签）：<style type=”text/css”>body{background:#ccc;}</style>

外部链接式样式表：<link href=”main.css”  rel=”stylesheet” style=”text/css”/>

导入式样式表：<style type=”text/css”>@importurl(“main.css”)</style>

可以在一个css文件内使用多条@import语句，然后在html文件中用<link>标签导入

16、CSS选择符

标签选择符：<p></p>  p{}

id选择符：#某个标签的id{属性:值}  <p id=”one”>id选择符</p> #one{font-size:20px}

类选择符：.类名{属性：值} <p class=”two”>class选择符</p> .two{color:red;}

给某个元素加多个类<p class=”a1 a2”></p>

通配选择符：*{属性：值}(效率很低)

选择符的嵌套：父元素 子元素{属性：值}

选择符分组： h1,h2,h3{font-weight:normal;}

标签指定式选择符：h1#content{},h1.p1{}

17、CSS样式的特点

继承：子元素会继承父元素的某些样式

层叠：子元素定义了与父元素相同的样式，子元素的样式将覆盖掉父元素的样式

后面的样式会覆盖前面的样式p{color:green;}会被p{color:red:}覆盖

18、CSS样式的优先级

四种方式的优先级：内嵌式>嵌入式>链接式>导入式

CSS优先权：就近原则(距离body标签的距离)

id选择符>class选择符>标签选择符

提升优先权p{color:green; !important; color:gold;}

19、CSS文字控制

设置字体样式：font-style:normal(正常),italic(倾斜)

修饰文字：text-decoration:blink(闪烁，少用)，underline，overline（上划线），line-through（删除线）

字符间距：letter-spacing:normal,length

单词间距：word-spacing:normal,length

文本缩进：text-indent:2em（可以用负数）;

文本对齐：text-align:center（left，right）

空白处理：white-space:normal,nowrap(强制不换行),pre

文本大小写控制：text-transform:none,capitalize(首字母大写)，uppercase，lowercase

垂直对齐：vertical-align:sub（下标），super（上标），top（把元素的顶端与行中最高元素对齐；pic{vertical-align:top;}<div><imgsrc=””  class=”pic”/>我是文字文字</div>），middle（同上）

20、CSS控制链接-伪类

:伪类名称{属性：值}

未访问的链接a:link{text-decoration:none;color:black;}

已访问的链接a:visited{text-decoration:line-through;color:green;}

鼠标移动到链接上a:hover{text-decoration:underline;color:blue;}

鼠标按下链接a:active{text-decoration:overline;color:green;}

21、注册实例

input{width:200px;

height:30px;

border:2px solid gold;

vertical-align:middle;

line-height:30px;}

input:focus{

background:gold;

}

<label >用户名：<input type="text"name="username"/></label>

<label>用户名：<input type="text"name="username"/></label>