web前端的第三天

知识点

1.Css选择器 ：
全局选择器 *{}

组合选择器：
H1,h2,h3,h4,h5,p{}

后代选择器：

<style id="my">
			/*查找p元素的后代span元素  空格就是后代*/
			p span{
				color: green;
			}
			i span{
				color: red;
			}
			.pcolor #my{
				color: lightskyblue;
				font-size: 50px;
			}
		</style>
<p id="my" class="pcolor">段落1</p>
		<p class="pcolor"><span id="my">后代元素</span></p>
		<p>段落2</p>
		<p>开心<span>y<i>u<span>yang</i></span></span>快乐</p>

子元素选择器：

<style type="text/css">
			p>i{
				color: red;
			}
		</style>
<p>lalal</p>
		<p>不<i>爱你</i></p>

嵌套选择器：
选择器1 选择器2{….}
P b{
Color:bule;
}

标签选择器：

 Selector{
{                          property:value1;
                            property:value1;
样式规则        
}   

类选择器：
在网页中书写css代码:

.red{ color:red;}

给h1标签和第三个p标签引入类别选择器red， html代码：

<h1 class="red">我是标题红色</h1>

ID选择器：
#id名{}

伪类选择器 ：

a:link（未被访问过,访问之前的状态）
a:hover （鼠标滑过）  a:hover{text-decoration: underline;};  鼠标放上去后有下划线       
a:active（鼠标按下）
a:visited(访问过后)    

2.CSS引用方式

行内样式表

<p style=”color:red;font-size:36px”></p>
  <h1 style=”font-size:10px;color；blue”>我是一级标题</h1>

内嵌样式
（写在head里边）

  <style type="text/css">
    			h1{
    				color: red;
    				font-size: 20px;
    				font-weight: bold;
    				font-style: italic;/*斜体*/
    			}
    		</style>

导入样式
@import

3.文字属性
color颜色
font-size字号
font-family字体
font-weight字体加粗
font-style字体倾斜

4.段落属性
文字修饰（ text-decoration ） 默认情况下是text-decoration：none；
underline下划线
overline 上划线
line-through删除线
none 无修饰

水平对齐方式（text-align） 默认 left
属性：left、center、right

文本缩进（text-indent）单位（em）

文本行高 (line-height)

5.边框属性【块级标签】
border-style: dashed;/*边框虚线 实心 solid */
border-width:边框宽
border-color:边框颜色
height:高
width: 宽
border-top-style: solid;顶部边框样式

6.背景属性
背景颜色background-color
背景图片background-image:url();
背景重复：background-repeat:
属性值：repeat/no-repeat/repeat-x/repeat-y
背景位置：

                 background-position:水平  垂直; 
                 水平：left  center right（或者数值）
                 垂直：top   center  bottom（或者数值）