CSS的简介

最新推荐文章于 2024-03-02 14:01:34 发布

进阶的kaola

最新推荐文章于 2024-03-02 14:01:34 发布

阅读量456

点赞数 2

分类专栏：前端学习记录

本文链接：https://blog.csdn.net/qq_41185460/article/details/104173088

版权

前端学习记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS的基本介绍

css是层叠样式表。层叠说明页面显示是一层一层的；样式表说明有很多的属性和属性值。css的出现就是使页面显示效果更加好。css可以将网页内容和显示样式进行分离，提高了显示功能。

CSS和HTML的结合方式(4种)

1.在每个html标签上面都有一个属性 style，把css和html结合在一起

 <div style="background-color:red;color:green;">

2.使用html的一个标签实现 <style>标签，写在head里面

  <style type="text/css">	
	div {
		background-color:green;
		color: red;
	}		
 </style>

3.在style标签里面使用语句

  <style type="text/css">
		@import url(div.css);
  </style>

4.使用头标签 link，引入外部css文件

  <link rel="stylesheet" type="text/css" href="div.css" />

css的基本选择器（三种）

1. 使用标签名作为选择器的名称

	div {
		background-color: red;
	}

	p {
		background-color: green;
	}

2.class选择器。每个html标签都有一个属性 class <div class="haha">aaaaaaa</div>

	.haha {
		background-color: orange;
	}

3. id选择器。每个html标签上面有一个属性 id <div id="hehe">bbbbb</div>

	#hehe {
		background-color: #333300;
	}

注意优先级关系：style > id选择器 > class选择器 > 标签选择器

css的扩展选择器（三种）

1.关联选择器。<div><p>wwwwwwww</p></div>设置div标签里面p标签的样式，嵌套标签里面的样式

		div p {	
			background-color: green;
		}

2.组合选择器。<div>1111</div> <p>22222</p>把div和p标签设置成相同的样式，把不同的标签设置成相同的样式

	    div,p {
			background-color: orange;
		}

3.伪元素选择器。css里面提供了一些定义好的样式，可以拿过来使用。比如超链接，超链接的状态
原始状态鼠标放上去状态点击点击之后
:link :hover :active :visited

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

	/*原始状态*/
	a:link {
		background-color: red;
	}

	/*悬停状态*/
	a:hover {
		background-color: green;
	}
	/*点击状态*/
	a:active {
		background-color: blue;
	}

	/*点击之后的状态*/
	a:visited {
		background-color: gray;
	}

  </style>
 </head>
 <body>

<a href="http://www.sina1.com.cn" target="_blank">CSS概述和与HTML的结合方式超链接一</a>

 </body>
</html>

css的盒子模型

css的盒子模型就是在进行布局前需要把数据封装到一块一块的区域内

1.边框
border: 2px solid blue;
border：统一设置；上 border-top；下 border-bottom；左 border-left；右 border-right

2.内边距
padding:20px;
padding：统一设置，也可以分别设置

3.外边距
margin: 20px;
margin：统一设置，也可以分别设置

	div {
		border: 2px solid blue;
		padding: 20px;
		margin: 20px;
	}

css的布局的漂浮

float：
属性值
left :　文本流向对象的右边
right :　文本流向对象的左边

css的布局的定位

position：
属性值
absolute ：将对象从文档流中拖出，可以用top、bottom等属性进行定位
relative ：不会把对象从文档流中拖出，可以使用top、bottom等属性进行定位

其他css相关操作也可以查找其对应的帮助手册。

进阶的kaola

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS的简介

目录CSS的基本介绍CSS和HTML的结合方式(4种)css的基本选择器（三种）css的扩展选择器（三种）css的盒子模型css的布局的漂浮css的布局的定位CSS的基本介绍css是层叠样式表。层叠说明页面显示是一层一层的；样式表说明有很多的属性和属性值。css的出现就是使页面显示效果更加好。css可以将网页内容和显示样式进行分离，提高了显示功能。...
复制链接

扫一扫