课堂笔记2

CSS优先级和层叠

<div id="jack" class="tom"></div>

.tom{

background-color:blue;

}

#jack{

backgroud:red;

}

id和class优先选择id

行内样式>id选择器>类、伪类和属性选择器>标签选择器和伪元素选择器

<div id="jack" class="tom">

<p>文本</p>

</div>

.tom{

backgroud-color:blue;

color:green;

}

#jack{

backgroud-color:red;

}

Jack会继承tom设置的绿色

背景

背景颜色background-color（页面的背景颜色使用在body的选择器中）

背景图片background-image(默认平铺)

背景平铺重复设置background-repeat:no-repeat(图片不重复)

                                                          :repeat-x(x轴复制图片)

背景图片固定

body{

background-attachment:fixed;

}

背景图片的定位background-position

背景图片大小background-size

<div>{

background:url(img/peng.jpg);

background-size:80px 60px;/cover/contain

}

背景简写属性 顺序：color,image,repeat,attachment,position

文本对齐方式

text-align:center(居中)

               :justify(两端对齐)

删除链接下划线

<style>

a{

text-decoration:none;

}

</style>

<boby>

<a href="#">文本<a>

</boby>

文本转换

text-transform:uppercase;(字母大写)

                       :lowercase;(字母小写)

                       :capitalize;(首字母大写)

文本缩进：text-indent(属性值可以是固定值包括负数，也可以是百分比。2em代表缩进两个字符)

字符间距：letter-spacing

字间距：word-spacing

行间距：line-height

元素的垂直对齐方式：vertical-align

CSS列表

list-style-type改变列表项标记（circle,square,upper-roman,lower-alpha）

使用图片作为列表项list-style-image

<style>

ul{list-style-image:url('square.jpg')}

</style>

<ul>

<li>coffee</li>

<li>tea</li>

<li>coca cola</li>

</ul>

区块元素

特征：1、总是在新的一行上显示

          2、高度、行高、宽度、内边距、外边距等都是可控制的

          3、高度默认为0，是根据元素内的内容而决定的，宽度是父元素的宽度，但是可以通过css控制它，显示指定的宽度和高度，可以利用浮动和定位来将他与其他块元素显示在一行。

常用区块元素

address，div，form，h1，menu，ol，p，table，ul

内联元素

特征：1、内联元素和其他元素显示在一行上

          2、上下边距、高度、宽度都是不可改变的，宽度根据显示文本和图像宽度

常用内联元素：a，br，em（强调），img，input，select（项目选择），span

<div>元素

块级元素，无特定含义，与css一同使用可用于对大的内容块设置样式属性

<span>元素

内联元素，作文本容器，无特定含义，与css一同使用时，可用于文本设置样式属性