2021-02-01

2021-02-01 23:58:51 阅读：143 来源： 互联网

标签：02 01 color 元素 but 2021 div 选择器 red

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选择器2……
//**且**既在div标签里有满足class=red
div.red{font-size:30px;}

//“或”
h1,span{color:"yellow";}

//关系选择器
//子元素，父元；<祖先元素，后代元素；兄弟元素
//子元素
div.class>span{}
//后代选择器
div span{}
//兄弟选择器：
p+span{}//p后面下一个span
p~span{}//后边所有

//属性选择器
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%);//色相，饱和度，亮度

标签：02,01,color,元素,but,2021,div,选择器,red
来源： https://blog.csdn.net/c1348208475/article/details/113522770

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021-02-01