第三次网页前端培训笔记(HTML)

A.   css的基本使用
         一 、cSS的定义
                选择器名{
                                 属性名:属性值;
                                 属性名:属性值;
                                       }
                注意点：
                    1.声明需要便用{}括起来，每个声明以分号;结尾
                    2.一行建议一个声明
                    3．如果样式的属性值由多个单词组成，则用引号引起来

            二、css的三种使用方式:
                1．行内样式
                        直接写在标签上的样式，在标签上通过style属性定义的样式
                2．内部样式
                        定义在style标签中的样式,style标签一般设置在head标签中
                3．外部样式
                        定义在外部的css文件中,通过link标签引入

<style>
		/* 设置所有的h2标签的文本为红色 */
			h2{
				color: red;
				font-family: "arial black";
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
<h2>hello world</h2>
		 <h2 style="color: red;font-family:楷体 ;"> hello world</h2>
		 <h2>你好啊</h2>

B.  css基本选择器
                1．通用选择器
                    *{
                        属性值;
                            ...
                    }
                2．元素选择器
                    元素名/标签名{
                        属性名:属性值;
                            ---
                            }
                3. ID选择器#
                    #id属性值{
                    属性名:属性值;
                    }
                4．类选则器-
                    .class属性值{
                    属性名:属性值;
                --
                }
                5. 分组选择器
                    选择器1,选择器2,选择器3...{
                    属性名：属性值；
                }
                
                css样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高——
                       元素选择器:1
                       类选择器:10
                       id选择器:100
                       内联样式:1000

<style type="text/css">
		/* 通用选择器  */
		*{
			color: #00FFFF;
		}
		/*元素选择器*/
		div {
			font-size: 30px;
        }
		/* ID选择器 # */
		#p1{
			background-color: #FF0000;
		}
		/* 类选择器 */
		.cls1{
			font-family: 黑体;
			color: black;
		}
		/*   分组选择器 */
		#p1,cls1,font,div{
			text-decoration: line-through;
		}
		</style>

<div>这是一个div1</div>
		<div>这是一个div2</div>
		<p id="p1">这是一个p</p>
		<span class="cls1"> 这是一个span</span>
		<br>
		<font >这是一个font</font>
		<br>
		hello

C . 组合选择器
            后代选择器
                选择指定元素的所有指定后代元素，以空格隔开
                选择器 指定元素{
                    属性名:属性值;
                }
            子代选择器
                  选择指定元素的第一代子元素，以大于号>隔开选择器·指定元素·{
                  属性名:属性值;
            }
            相邻兄弟选择器
                  选择指定元素的下一个指定元素，只会找一个，两者有相同的父元素，以加号+隔开
            
            普通兄弟选择器
                选择指正元系后面的所有指定元系，两者有相同的父元系，以波浪号隔开
                选择器＋指定元素{
                属性名:属性值;
                }

<style type="text/css">
		/* 后代选择器 */
		.food li{
			border: blueviolet solid 2px;
		}
		/* 子代选择器 */
		.food2 > li{
			border: #FF0000 dotted 2px;
		}
		/* 相邻兄弟选择器 */
		#mydiv + div{
			background-color: #8A2BE2;
		}
		#mydiv2 ~ div{
			background-color: aquamarine;
		}
		</style>

 <ul class="food">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li></ul>
		 </ li>
		 <li>蔬菜
			<ul>
				<li>白菜</li>
				<li>油菜</li>
				<li>卷心菜</li>
				</ul>
		 </li>
		</ul>
		<hr>
		<ul class="food2">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li></ul>
		 </ li>
		 <li>蔬菜
			<ul>
				<li>白菜</li>
				<li>油菜</li>
				<li>卷心菜</li>
				</ul>
		 </li>
		</ul>
		<hr>
		<div>相邻兄弟选择器1</div>
		<div>相邻兄弟选择器2</div>
		<div id="mydiv">相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>
		<div>相邻兄弟选择器5</div>
		<div>相邻兄弟选择器6</div>
		<hr>
		<div>相邻兄弟选择器1</div>
		<div>相邻兄弟选择器2</div>
		<div id="mydiv2">相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>
		<div>相邻兄弟选择器5</div>
		<div>相邻兄弟选择器6</div>