CSS学习

最新推荐文章于 2024-09-19 17:56:22 发布

dingxiaozhuang

最新推荐文章于 2024-09-19 17:56:22 发布

阅读量149

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Judith__/article/details/107870420

版权

CSS的规则特性

1.继承性：父元素的样式（字体，颜色等），可以被子元素继承；
2.层叠性：给一个元素增加不同的声明，效果会叠加；
3.优先级：给一个元素增加相同的声明，效果以后者为准，也就是所谓的就近原则。

CSS的使用

1.内联样式：在元素的style属性写样式
2.内部样式：在head内部或者外部的style标签里写样式；
/CSS注释是这样的/
3.外部样式：在独立的CSS文件内写样式，这是需要引进相关CSS文件
4.优先级排序：内敛样式，内部样式，外部样式；
(1)内联样式无法复用；
(2)内部样式可以在当前网页复用；
(3)外部样式可以在所有网页复用。

选择器

1.元素选择器
h5{
	font-family:华文行楷；
}
2.类选择器
.c{
	color:pink;
}
3.ID选择器
#p1{
	font-size:20px;
}
4.选择器组：写一组选择器，可以选中其中每个选择器所对应的目标
.c1，#p1{
	color:blue;
}
5.派生选择器：
（1）选择某元素的子孙；
#p2 b{
	color:red;
}
（2）选择某元素的儿子；
#p2>b{
	font-size:50px;
}
（3）选择某元素的儿子的儿子；
#p2>u>b{
	font-family:华文行楷；
	}
6.伪类选择器：选择某状态下的元素：
（1）选择为访问的超链接；
a:link{
	color:orange;
}
（2）选择已访问的超链接；
a:visited{
	color:orange;
}
（3）选择激活状态的按钮；
.btn:avtive{
	background-color:red;
}
（4）选择有焦距的框；
.txt:focus{
	background-color:yellow;
}
（5）选择悬停状态的图片；悬停之后的图片大小改变用hover；
img:hover{
	width:500px;
	height:800px;
}
img{
	width:300px;
	height:500px;
}
</style>

<link href="DemoCss.css" rel="stylesheet" />
<body>
	<p class="c">独立寒秋</p>
	<p id="p1">湘江北去</p>
	<p class="c1">橘子洲头</p>
	<p>看万山红遍</p>
	<h5>层林尽染</h5>
	<p id="p2">漫江碧透，<u>百舸争流，<b>鹰击长空，</b>鱼翔浅底，</u>万类霜天竞自由，<b>怅寥廓，问苍茫大地，</b>谁主沉浮。</p>
	<a href="http://www.baidu.com">百度</a>
	<p>
	<input class="btn" type="button" value="注册" />
	<input class="btn" type="button" value="登录" />
	</p>
	<p>
		账号：<input class="txt" type="text" />
	</p>
	<p>
	密码：<input class="txt" type="password" />
	</p>
	<img src="1.jpg" />
	<img src="2.jpg" />
	<img src="3.jpg" />
</body>