首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

CSS知识点简单整理

时间：2021-04-27 14:52:36   收藏：0   阅读：0

CSS引用方式

CSS注释

??不会在页面上展示给用户 , 但是查看源代码会看到 , 用于给其他项目组成员查看或方便后期维护等 , 简单明了

选择器

元素的id和class

??id和class都是HTML元素的两个最基本的公共属性
??id属性被赋予了识别页面元素的唯一身份 如果一个页面出现了多个相同的id属性取值 , CSS选择器或着JavaScript就会控制到最后的那个id
??class , 顾名思义 , 就是个‘类‘ , 它采用的思想跟C java等编程语言的‘类‘相似 , 可以通过一个页面相同的元素或者不同的元素设置相同的class , 然后使得相同的class元素具有相同的CSS样式
??注意 : 一个标签可以同时设置多个class属性值

基本选择器

??选择器就是一种选择元素的方式 , 将一个或一组相同或不同的元素同时选中 , 然后将其设置相同的CSS样式
常见的基本选择器有以下三种 :

高级选择器

补充说明 : 选择器的优先级 : id选择器>类选择器>元素选择器

常见样式

字体样式

??字体的样式属性包括字体 大小 粗细 颜色

字体颜色演示

代码 :

<!--
	font-weight:400; 取值范围100~900，值越大，字体越粗
	font-weight:bold; 经常用到的关键字有ligher、normal、bold、bolder
	一般在我们实际的开发中，都是用关键字来设置
-->
<!--
	color:red;
	color:#cccccc;
-->
<style>
    #p2{
        color:red;
    }
    #p3{
        color:#cccccc;
    }
</style>
<p id="p2">红色字体</p>
<p id="p3">灰色字体</p>

代码效果展示 :

红色字体

灰色字体

字体演示

代码 :

<!--
	font-family:字体1,字体2,字体3,……;
	设置多个字体的目的在于每个人电脑上装的字体不一样，然后设置多个字体，更好的去适配我们的文字效果。
-->
<style>
    #p4{
        font-family：宋体;
    }
    #p5{
        font-family:微软雅黑;
    }
</style>
<p id="p4">字体为宋体</p>
<p id="p5">字体为微软雅黑</p>

代码效果展示 :

宋体

微软雅黑

字体大小演示

代码 :

<!--
	font-size:16px; 单位为px，值越大，字体越大
	font-size:large;
	一般在我们实际的开发中，都是用具体的像素值来进行设置的。
-->
<style>
    #p7{
        font-size:large;
    }
    #p8{
        font-size:32px;
    }
</style>
<p id="p7">大字体</p>
<p id="p8">字体大小为32</p>

代码效果展示 :

大字体

字体大小为32

字体粗细演示

代码 :

<!--
	font-weight:400; 取值范围100~900，值越大，字体越粗
	font-weight:bold; 经常用到的关键字有ligher、normal、bold、bolder
	一般在我们实际的开发中，都是用关键字来设置
-->
<style>
    #p9{
        font-weight:400;
    }
    #p10{
        font-weight:bold;
    }
</style>
<p id="p9">正常字体</p>
<p id="p10">加粗字体</p>

代码效果展示 :

正常字体

加粗字体

字体倾斜演示

代码 :

<!--
	font-style: normal; 正常字体
	font-style: italic; 斜体
-->
<style>
    #p1{
        font-style: normal;
    }
    #p2{
        font-style: italic;
    }
</style>
<p id="p1">正常字体</p>
<p id="p2">倾斜字体</p>

代码效果展示 :

正常字体

倾斜字体

行高演示

代码 :

<style>
    #p11{
        line-height:40px;
    }
</style>
<p>
    我说道：“爸爸，你走吧。”他往车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子往回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
</p>
<p id="p11">
    我说道：“爸爸，你走吧。”他往车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子往回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
</p>

代码效果展示 :

我说道：“爸爸，你走吧。”他往车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子往回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。

我说道：“爸爸，你走吧。”他往车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子往回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。

列表样式

设置列表的常用样式 , 具体如下 :

列表样式演示

代码 :

<!--
	list-style: 设置列表项符号，一般会设置为none不显示，或者通过设置list-style:url(图片地址)，指定具体的列表项符号；
	line-height：行高
	float: 浮动方式，一般配合着宽度使用。
-->
<style>
    .list{
        list-style:none;
    }
    .list li{
        line-height:40px;
        float:left;
        width:25%;
    }
</style>
<ul class="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

代码效果展示 :

  • 列表项1
  • 列表项2
  • 列表项3

表格样式

设置表格的常用样式具体如下 , 具体如下 :

表格样式演示

代码 :

<!--
	border-collapse，通过该样式去除单元格之间的空隙（表格独有的样式）
	border：边框样式，等同于border-width、border-style、border-color
	caption-side：表格标题位置
-->
<style>
	.data{
		/*设置表格边框模型*/
		border-collapse: collapse;
		width: 98%;
		line-height: 40px;
		/*边框样式*/
		border: 1px solid #0000FF;
		/* border: 1px solid blue; */
	}
	.data caption{
		caption-side: top;
		font-weight: bold;
	}
	.data tr:nth-child(odd){
		background-color: pink;
	}
			
	.data td{
		text-align: center;
	}
			
			
</style>
<table class="data" border="1">
	<caption>成绩表</caption>
	<tr>
		<th>姓名</th>
		<th>科目</th>
		<th>成绩</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>HTML</td>
		<td>100</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>HTML</td>
		<td>99</td>
	</tr>
</table>

代码效果展示 :

成绩表
姓名 科目 成绩
张三 HTML 100
李四 HTML 99

盒子模型

技术图片
??在"CSS盒子模型理论中" , 页面中的所有元素都可以看成一个盒子 , 并且占据一定的页面空间. 一个页面由很多这样的盒子组成 , 这些盒子之间相互影响 , 因此掌握盒子模型需要从两个方面来理解 : 一是理解单独一个盒子的内部结构 , 二是理解多个盒子之间的相互关系
??每个元素都看成一个盒子 , 盒子模型是由content(内容) padding(内边距) margin(外边距) border(边框) 这四个属性 , 此外盒子模型中 , 还有宽度width和高度height脸大辅助性属性

计算公式 :
元素的总长度 = width + padding-left + padding-ringt + margin-left + margin-right + border-left-width + border-right-width
元素总高度 = height + padding-top + padding-bottom + margin-top + margin-bottom + border-top-width + border-bottom-width

定位布局

??CSS定位可以讲一个元素精确的放在页面上的指定位置 , 常见的布局定位有4种方式 , 分别是 :

固定位置演示

代码 :

<!--
	postion:fixed;设置固定定位，相对于浏览器而言，配合top、left、right、bottom四个样式属性，来设置元素在页面中的位置，这四个属性不一定全部都用到。
-->
<style>
	#div1{
		width:120px;
		height: 800px;
		border:1px solid #CCCCCC;
		background-color: lightblue;
	}
	#div2{
		position: fixed;
		top: 30px;
		left: 160px;
		width:60px;
		height: 60px;
		border:1px solid #000000;
		background-color: pink;
	}
</style>
<div id="div1">无定位</div>
<div id="div2">固定定位</div>

代码效果展示 :

无定位
固定定位
相对位置演示

代码 :

<!--
	position:relative;设置相对定位，配合top、left、right、bottom四个样式属性，来设置元素在页面中的位置，这四个属性不一定全部都用到。
-->
<style>
	#div3{
		margin: 30px 0px 0px 30px;
		border: 1px solid #ccc;
		background-color: lightblue;
	}
	#div3 div{
		width: 100px;
		height: 60px;
        margin: 10px;
		border: 1px solid #000;
		background-color: pink;
	}
	#div4{
		position: relative;
		top: 20px;
		left: 30px;
	}
</style>
<div id="div3">
	<div>第3个子div</div>
	<div id="div4">第4个子div</div>
	<div>第3个子div</div>
</div>

代码效果展示 :

第3个子div
第4个子div
第3个子div
绝对定位演示

代码 :

<style>
	#div5{
		margin: 30px 0px 0px 30px;
		border: 1px solid #ccc;
		background-color: lightblue;
	}
	#div5 div{
		padding 10px;
		background-color: pink;
		border: 1px dashed red;
	}
	#div6{
		position: absolute;
		buttom:0;
		left:150px;
	}
</style>
<div id="div5">
	<div>第5个子div</div>
	<div id="div6">第6个子div</div>
	<div>第7个子div</div>
</div>

代码效果展示 :

第5个子div
第6个子div
第7个子div

浮动属性 :
??浮动属性float是CSS布局的最佳利器 , 可以通过不同的浮动属相灵活的定位div元素 , 以达到布局网页的目的 , 通过CSS的属性float是元素向左或向右浮动 , 也就是说让盒子及其中的内容浮动道文档的左边或右边 , 以往这个属性总应用于图像 , 使文本围绕在图像周围 , 不过在CSS中 , 任何元素都可以浮动

浮动属性演示

代码 :

<style>
	#father {
		width: 400px;
		background-color: #0C6A9D;
		border: 1px solid silver;
	}
	#father div {
		padding: 10px;
		margin: 15px;
		border: 2px dashed red;
		background-color: #FCD568;
	}

	#son1{
		float: left;
	}
	#son2{
		float: left;
	}
	#son3{
		float: left;
	}
</style>
<div id="father">
	<div id="son1">box1</div>
	<div id="son2">box2</div>
	<div id="son3">box3</div>
</div>

代码效果展示 :

box1
box2
box3
评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！