CSS初探学习总结提高 一

Posted xj_love

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS初探学习总结提高 一相关的知识,希望对你有一定的参考价值。

进入CSS之后,我们的标签属性,要换一种风格来写了。这一块内容比较多,笔者会分几块来记录,方便大家学习参考探讨。

一.CSS3字体样式和属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3字体样式属性</title>
	<style type="text/css">
		h5 
			color: orange;
			font-size: 30px;
			font-family: "微软雅黑",serif,tahoma; /*注释*/
			font-weight: 20;
			font-style: italic;
		
		span 
			font-weight: bolder;
		
		strong 
			font-weight: normal,italic(斜体),olique; /*让粗体变得不加粗*/
		
		h2 
			font:italic bold 14px "微软雅黑";
		
	</style>
</head>
<body>

	<h5>我是字体样式</h5>
	<fieldset>
		<legend>字体</legend>
		<ul>
			<li>font-size 字号大小</li>
			<li>font-family 字体 可以多个字体,逗号隔开;中文引号,多个英文要用引号,unicode字体(推荐,宋体,微软雅黑)</li>
			<li>font-weight 字体粗细 normal,bold,bolder lighter,也可以数字</li>
			<li>font-style 字体风格 normal,italic(斜体),olique</li>
	</ul>

	<p><span>测试测</span>试测试测试测<strong>试测试</strong>测试测试测试测试测试</p>

	<h2>综合设置字体样式,按照顺序来,至少有字号font-size,字体font-family</h2>
	</fieldset>
	
</body>
</html>

二.选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<style type="text/css">
		span                 /*标签选择器*/
			font-size: 30px;
		
		.blue 
			color: blue; /*类选择器*/
		
		.red 
			color: red;
		
		.orange 
			color: orange;
		
		.green 
			color: green;
		
		.font20 
			font-size: 20px;
		
		#pink 
			color: pink;  /*id选择器*/
		
		/** 
			color: blue; /*通配符选择器*/
		/**/
		a:hover 
			color: red;
		
	</style>
</head>
<body>
	<fieldset>
		<legend>标签选择器</legend>
		<p>系统的标签</p>
	</fieldset>

	<fieldset>
		<legend>类选择器</legend>
		<p>自定义的名字,.开头,英文做名字,简单明了,调用class</p><br>
		<span class="blue">G</span>
		<span class="red">o</span>
		<span class="orange">o</span>
		<span class="blue">g</span>
		<span class="green">l</span>
		<span class="red">e</span>
	</fieldset>

	<fieldset>
		<legend>多类名选择器</legend>
		<p></p>
		<span class="red font20">多类名选择器</span>
	</fieldset>

	<fieldset>
		<legend>id选择器</legend>
		<p>自定义的名字,#开头,英文做名字,简单明了,调用id</p><br>
		<p>id和类选择器的区别:</p>
		<ul>
			<li>类选择器可以重复使用</li>
			<li>id选择器不可以重复使用,只能用一次</li>
		</ul>
		<span id="pink">id选择器</span>
	</fieldset>

	<fieldset>
		<legend>通配符选择器</legend>
		<p>*号表示,表示所有标签,一般测试时用</p>
		<span>通配符选择器</span>
	</fieldset>

	<fieldset>
		<legend>伪类选择器</legend>
		<ul>
			<li><h3>链接伪类选择器</h3></li>
			<li>:link 未访问的链接</li>
			<li>:visited 已访问的选择器</li>
			<li>:hover 鼠标移动到链接上</li>
			<li>:active 选择的链接</li>
			<li>严格按照顺序来 定义 a:link</li>
		</ul>
		<a href="#">链接伪类选择器</a>
		<br>

		<ul>
			<li><h3>结构伪类选择器</h3></li>
			<li>li:first-child 选择第一个</li>
			<li>li:last-child 选择最后一个</li>
			<li>li:nth-child(1) 选择第1个,</li>
			<li>li:nth-child(1n) 1n个全选,n从1开始</li>
			<li>li:nth-child(2n),从上往下数,2n个全选</li>
			<li>li:nth-child(2n+1) 2n+1个全选,</li>
			<li>li:nth-child(odd) 选择奇数</li>
			<li>li:nth-child(even) 选择偶数</li>
			<li>li:nth-last-child(even) 从最后一个孩子往上数</li>
		</ul>
		<br>

		<ul>
			<li><h3>目标伪类选择器</h3></li>
			<li>:target 选中谁,谁变,配合a标签</li>
		</ul>

	</fieldset>

</body>
</html>

三.CSS外观属及应用

<head>
	<meta charset="UTF-8">
	<title>CSS外观属及应用</title>
	<style type="text/css">
		h3 
			text-align: center; /*水平对齐方式*/
		
		p 
			line-height: 25px; /*行间距*/
			text-indent: 2em; /*首行缩进,em两个中文字符*/
		
		div 
			letter-spacing: 15px; /*字间距*/
			word-spacing: 20; /*单词间距,相对英文*/
		
		h4 
			color: rgba(0,0,0,0.5);     /* 透明色*/
		
		h1 
			text-shadow: 5px 2px 3px rgba(0,0,0,0.5); /*文字阴影: 水平距离,处置距离,模糊距离,颜色,前两个必须写: */
		
	</style>
</head>

四.标签样式表

<fieldset>
		<legend>块级标签</legend>
		<ol>
			<li>总是从新开始</li>
			<li>高度,宽度,外边距都可以控制</li>
			<li>宽度默认是容器的100%>
			<li>可以容乃内联元素和其他块元素</li>
			<li></li>
		</ol>
	</fieldset>
	<br>
	<fieldset>
		<legend>行内标签</legend>
		<ol>
			<li>和相邻行内元素在一行上/li>
			<li>设置宽高无效,但水平的padding和margin可以设置,垂直方向的无效</li>
			<li>默认宽度是内容本身</li>
			<li>行内元素只能容乃文本或者其他行内元素</li>
			<li>注意:p,h1,这些文字块级标签,里面里面不能再放其他块级元素</li>
			<li>注意:链接里面不能再放链接</li>
		</ol>
	</fieldset>
	<br>
	<fieldset>
		<legend>标签相互转换</legend>
		<ol>
			<li>display:inline; 块级元素转为行内元素</li>
			<li>display:block;  行内元素转为块级元素</li>
			<li>display:inline-block 行内标签转为行内块标签</li>
		</ol>
	</fieldset>

五. 复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>复合选择器</title>
	<style type="text/css">
		/*div.color            交集选择器
			font-weight: 700;
		*/
		/*.color 
			color: red;
		*/
		/*em,.hehe              并集选择器
			color: blue;
		*/
		/*.demo ul li       后代选择器,带class
			color: red;
		
		div ul li 
			color: pink;    后代选择器,层层寻找,找到最后要的那个标签改变,
		*/

		/*.child li      .child所有子类都变
			color: red;
		

		.child > li    加了>号后,只有.child的一级类变
			color: green;
		*/

	</style>
</head>
<body>
	<!-- <h3>-----交集选择器-----</h3>
	<div class="color">我是交集选择器,标签加类或者id选择器</div>
	<p class="color">没有交集的</p>
	<hr> -->

	<!-- <h3>-----并集选择器-----</h3>
	<em>并集选择器,逗号隔开,一起定义</em>
	<br>
	<span class="hehe">并集选择器</span> -->
<!-- 
	<hr>
	<h3>-----后代选择器,带class-----</h3>
	<div class="demo">
		<ul>
			<li>首页</li>
			<li>导航</li>
		</ul>
	</div>
	<hr>
	<h3>-----后代选择器-----</h3>
	<div>
		<ul>
			<li>百度</li>
			<li>新浪</li>
		</ul>
	</div> -->

	<!-- <h3>-----子元素选择器-----</h3>
	<ul class="child">
		<li>一级菜单变色,二级不变
			<ul>
				<li>二级菜单</li>
			</ul>
		</li>
	</ul> -->

	<!-- <h3>-----属性选择器-----</h3>
	<ul>
		<li>input[type] input里面有type属性的改动</li>
		<li>input[type=text] input里面有type等于text的属性改动</li>
		<li>input[type^=text] input里面有type等于text开头的属性改动</li>
		<li>input[type$=text] input里面有type等于text结尾的属性改动</li>
		<li>input[type*=text] input里面有type包含text的属性改动</li>
	</ul> -->

	<h3>-----伪元素选择器-----</h3>
	<ol>
		<li>p::first-letter 段落第一个字选中改变</li>
		<li>p::first-line 段落第一行选中改变</li>
		<li>p::first-selection 选中文字时可变的样式</li>
		<li>div::beforecontent:"加字" 盒子内部前面加字</li>
		<li>p::aftercontent:"加字" 盒子内部后面加字</li>
	</ol>

</body>
</html>

以上是关于CSS初探学习总结提高 一的主要内容,如果未能解决你的问题,请参考以下文章

CSS初探学习总结提高 六

CSS初探学习总结提高 五

CSS初探学习总结提高 三

CSS初探学习总结提高 四

HTML5初探学习总结提高

java初探之登录总结

初探Java设计模式4:JDK中的设计模式

初探UE4中的Profiling

CSS世界(张鑫旭)系列学习总结

css 雪碧图