css

最新推荐文章于 2022-01-29 19:03:32 发布

H4ppyD0g

最新推荐文章于 2022-01-29 19:03:32 发布

阅读量275

点赞数

分类专栏：前端后端文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_42172261/article/details/97554923

版权

前端后端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS(Cascading Style Sheets层叠样式表) 可以同时控制多重网页的样式和布局。

基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
格式：selector {declaration1; declaration2; … declarationN }

选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
如果值是单词的话需要加上双引号。
属性和值被冒号分开。不同的声明用分号隔开。

是否包含空格不会影响 CSS 在浏览器的工作效果，CSS 对大小写不敏感。
不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

选择器的分组
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。h1,h2,h3{css属性}

css简介

css引入方式和书写规范
(1)内嵌样式。在html标签中使用style属性引入css样式
书写规范：都在双引号内。属性:属性值，多个属性之间使用分号。
例：<div style="color:red; font-size:30px;"></div>

(2)内部样式。在head标签中使用<style>标签将css样式包裹
书写规范：选择器{css属性}
例：
<head>
<style type="text/css">
	div{color:red; font-size:30px;}	
	作用于body的所有div标签
</style>
</head>

(3)外部样式。将css写在一个单独的css文件中，谁用谁调用
书写规范：创建.css文件，将css样式写入；在head标签中使用link引入。
rel:relation缩写，引入的这个文件与html本身的关系 样式表
type="text/css":告知浏览器中这段代码需要css解析器进行解析
href：需要引入的css路径
例：
在style.css文件中写div{color:red; font-size:30px;}	
<link rel="stylesheet" type="text/css" href="style.css" />

css选择器

1基本选择器
(1)元素选择器
语法:html标签{css属性}

(2)id选择器(id具有唯一性)
语法:#id的属性值{css属性}
例：
head里写 #div1{css属性}
body里标签<div id="div1"></div>

(3)class选择器
语法：.class属性值{css属性}
head里写
.div1{css属性}
#mydiv{css属性}
body里写
<div id="mydiv" class="div1"></div>

三个基本选择器可以同时使用
基本选择器优先级：id > class > 元素选择器



2属性选择器
语法：在style中写 基本选择器[属性="属性值"]{css属性}



3伪元素选择器
a标签的伪元素选择器
静止状态：a:link{css样式}
悬浮状态：a:hover{css样式}
活动状态：a:active{css样式}
完成状态：a:visited{css样式}



4层级选择器
语法：父选择器 子选择器...
<!DOCTYPE html>
<html>
<head>
	<title></title>
	#div1 .myd2 span{css样式}
</head>
<body>
	<div id="div1">
		<div class="myd1">
			<span>div1下的myd1下的span文字</span>
		</div>
		<div clas="myd2">
			<span>div1下的myd2下的span文字</span>
		</div>
	</div>
	<div id="div2">
		<div class="myd1">
			<span>div2下的myd1下的span文字</span>
		</div>
		<div clas="myd2">
			<span>div2下的myd2下的span文字</span>
		</div>
	</div>
</body>
</html>

css的属性和属性值

1、文字属性
font-size：字号
font-family：字体的类型


2、文本属性
color：颜色
text-align：对齐方式
text-decoration：下划线。  属性值：none、underline



3、背景属性
background-color：背景颜色
background-image：背景图片。	属性值：url路径
background-repeat：平铺方式(默认x和y方向都平铺)。			
				属性值repeat、no-repeat、repeat-x、repeat-y


4、长度宽度属性
width
height


5、列表属性
list-style-type：列表项前的小标志
list-style-image：列表项前的小图片。属性值：url路径


6、显示属性
display：是否让标签元素显示。属性：none、block、inline


7、浮动元素
float：浮动方向。属性值：left、right

css的盒子模型

border：盒子的边框
padding：盒子内部的间隙
margin：盒子外部与其它元素之间的间隙

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#box{
			width:200px;
			height:200px;
			border:10px solid green;
			padding:50px;
		}
		#monncake{
			width: 200px;
			height: 200px;
			background-color: skyblue;
		}
	</style>
</head>

<body>
	<div id="box">
		<div id="monncake">hello world</div>
	</div>
</body>
</html>

H4ppyD0g

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css

CSS(Cascading Style Sheets层叠样式表) 可以同时控制多重网页的样式和布局。基础语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。格式：selector {declaration1; declaration2; … declarationN }选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。如果值是单词的话需要加上双引号...
复制链接

扫一扫