CSS和HTML01 选择器

CSS笔记

//第一张方法（行内样式）本行内使用
<p style="color:red; font-size:60px;">行内样式</p>
//第二种方法(将样式写在head中的style标签里)本网页才可使用
<style>//选中p元素，这个区域不同html，没有h1
	p{
		color:gree;
		font-size:60px;
	}
</style>
//第三种方法(将样式写在CSS里)任意网页可使用
//外部文件style.CSS
	p{
		color:gree;
		font-size:60px;
	}
<link rel="stylesheet" href="./style.css">	//内部文件在head（引用）

2.CSS语法

<style>//元素选择器：选中p元素，这个区域语法不同html，没有h1
	p{//声明块：样式
		color:gree;
		font-size:60px;
	}
//id选择器：id唯一，改一个
	#red{color:red;}
//类选择器：class不唯一，改多个
	.blue{color:blue;}
//通配选择器：选中所有元素
	.abc{color:green;}
</style>

<p id="red">床前明月光，</p>
<p class="blue">疑是地上霜。</p>
<p class="blue">举头望明月，</p>
<p>低头思故乡。</p>

//复合选择器（复合多个条件的元素）

//1.交集选择器      选择器1选择器2……
//**且**，既在div标签里有满足class=red
div.red{font-size:30px;}

//2.并集选择器    “或”
h1,span{color:"yellow";}//h1和span

//关系选择器

//子元素；父元素；祖先元素；后代元素；兄弟元素
//子元素选择器
div.box>span{}//div类为box下的span子元素
//后代选择器
div span{}
//兄弟选择器：+表示下一个
p+span{}//p后面下一个span兄弟元素
p~span{}//p后边所有的兄弟元素

//属性选择器
<p title="abc"></p>//标签的标题
p[title]{color:organe;}//有title
p[title="but"]{}//=but的
//p[title^="but"]//but开头
//p[title$="but"]//but结尾
//p[title*="but"]//含有but

//伪类选择器：
//描述一个特殊元素：第一个子元素；被点击的元素；鼠标移入的元素……
ul>li:first-child{color:red;}//ul第一个元素；：last-child最后一个元素
ur>li:nth-child(n){}//第n个元素变；2n（odd）：偶数位
//注：必须是ul的第一个，若第一个不是li则不满足
//ul>li:first-of-type{}//找li同类型的

 ul>li:not(:nth-child(3)){}//除了第3个
 

3.超链接伪指令

a:link{color:red;}//正常链接控制
a:visited{}//只能改颜色
a:hover{color:red;}//鼠标移入
a:active{}://鼠标正在点击
//hover和active:其他元素都有

//伪元素::something
//表示特殊元素，如：开头
p::first-letter{font-size=50px;}
p::first-line{background-color=50px;}
p::section{}//选中元素
div::before{content:'haha'}//无法选中，CSS添加的
//div后文字前加内容；div::after{}

//继承规则
//<div>
	<p></p>
</div>
/*设置祖先样式，后代也会用
*背景，布局相关不继承
*内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器>继承
*同是id选择器，则div.red>.red越具体优先级越高;但‘,’即div,red{}不算
*如果优先级相同，则选择最下面的样式
*!important:优先级最高，不建议使用
*/

4.像素

/*px：不同的屏幕，显示大小不同
*百分比，父元素的百分比
*em:根据字体大小来改变px=px(font-size)*em
*例如：font-size=10px；em=10em（个字）；则div=10*30
*rem：根据字体大小来改变，根据html改变
*/

//颜色
backgrpund-color:rgb(0,0,0);//黑色,红绿蓝
backgrpund-color:rgba(106,153,85,1);//不透明
backgrpund-color:#fff000;
backgrpund-color:hsl(254,90%,60%);//色相，饱和度，亮度