化妆师CSS

最新推荐文章于 2021-02-18 06:53:50 发布

Kring_mzx

最新推荐文章于 2021-02-18 06:53:50 发布

阅读量189

点赞数

分类专栏：前端基础知识

本文链接：https://blog.csdn.net/liumingzhe1/article/details/86302156

版权

前端基础知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css即层叠样式表，网站的美化师
【CSS的基本语法】
CSS的基本语法通常包含两个部分：一个是选择器，一个声明.

选择器{属性:属性值;属性:属性值…}
h1{color:yellow;font-size:20px;}
引入方式：

   行内样式：直接在HTML的元素上使用style属性设置CSS.
        			<h1 style="color:red;font-size:200px ;">标题</h1>
        	页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
        		<style>
        			h1{
        				color:blue;
        				font-size: 40px;
        			}
        		</style>
        
        	外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.  
       			 <link href="../../css/demo1.css" rel="stylesheet" type="text/css" />

css选择器：

【CSS的选择器】
	元素选择器：
div{
	border:1px solid blue;
	width:40px;
	height:45px;
}
	ID选择器:
#d1{
	border:2px solid red;
}
	类选择器：
.divClass{
	border:2px solid yellow;
}
	属性选择器：
		<style>
			input[type="text"]{
				background-color: red;
			}
		</style>

	后代选择器:
div span 查找的是所有div中的所有的span元素.
h1 strong{
   color:red;
}
		<h1>
			This is <strong>very</strong> <strong>very</strong> important.
		</h1>
		
		<h1>This is 
			<strong>very</strong>
			<em>really 
				<strong>very</strong>
			</em> 
				important.
		</h1>
	子元素选择器：
div > span找这个div中的第一层级的span元素.
h1 > strong{
   color:red;
}
		<h1>
			This is <strong>very</strong> <strong>very</strong> important.
		</h1>
		
		<h1>This is 
			<strong>very</strong>
			<em>really 
				<strong>very</strong>
			</em> 
				important.
		</h1>
	并列选择器:
选择器,选择器{
}

使用float属性可以完成DIV的浮动.
清除浮动效果：使用clear属性进行清除:
在这里插入图片描述

【CSS中的定位】
position属性设置定位：