通用选择器 css的继承性和叠加性行级标签块级标签行内会计标签 css文字属性

时间：5年前阅读：6209

css部分：

<style ytpe="text/css">    
/*伪类选择器    
同一个html元素在不同状态下的不同样式    
只有a元素和p元素可以使用    
a:visited{color:#ooffoo}   已访问的链接    
a:hover{color:#ffooff}      鼠标移动到链接上    
a:active{color:#ooooff}     选定的链接*/    
/*a{    
	font-size: 50px;    
	color: blue;    
}    
a:hover{    
	font-size: 100px;    
	background: green;    
	color: white;    
}    
*/    
/*css继承性*/    
/*子元素可以继承父元素的文字相关的样式*/    
h1{    
	font-size: 35px;    
	color: blue;    
}    
/*css叠加性：不同选择器给同一个元素加的样式，可以同时生效*/    
#title{    
	color: purple;    
}    
p{    
	border: 3px solid blue;    
	width: 500px;    
	height: 100px;    
	/*首行缩进*/    
	text-indent: 2em;    
/*	文字粗细    
	注意不要加单位  正常状态是400，加粗是700，（800、900差别不大）也可以直接加单词 bold */    
	font-weight: 700;    
	/*文字倾斜*/    
	font-style: italic;    
	/*文字划线*/    
	text-decoration: underline;    
}    
img{    
	width: 300px;    
	height: 300px;    
}    
</style>

HTML部分：

<body>
<a href="http://www.youku.com">优酷有好看的视频</a>


<h1 id="title">这段时间<span>优酷</span>有好看的电视剧</h1>


<!-- /*块级标签*/
/*1、要独占一行，比较霸道，不和其他元素呆在同一行*/
/*2、能设置宽度*/ -->
<!-- 常见的块级标签有：div  p  h1~h6    ul  li  dl  dt  dd -->
<p>我们是p标签</p>
<p>我们是p标签</p>
<p>我们是p标签</p>

<!-- 行级标签 -->
<!-- 1、能和其他元素待在同一行 -->
<!-- 2、不能设置宽高 -->
<!-- 常见的行级标签：a   span  strong u  em -->
<a href="">这个是a标签</a>
<a href="">这个是a标签</a>
<a href="">这个是a标签</a>
<!-- 行内块级标签
1、能待在一行，
2、能设置宽高
常见的行内块级标签有 img  input  textarea -->
<img src="yt01.jpg" alt="" />
<img src="yt02.jpg" alt="" />
</body>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

通用选择器 css的继承性和叠加性 行级标签 块级标签 行内会计标签 css文字属性

网友评论

通用选择器 css的继承性和叠加性行级标签块级标签行内会计标签 css文字属性