我是靠谱客的博主 缓慢菠萝，最近开发中收集的这篇文章主要介绍css 基本使用一、css 简介二、HTML 引入 css三、css 选择器四、css 盒子模型五、css 布局的定位六、图文混排案例，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
目录
一、css 简介
二、HTML 引入 css
1、行内样式引入
2、内嵌样式引入
3、外部样式引入（style标签里面）
4、外部样式引入（link标签里面）
三、css 选择器
1、基本选择器
2、扩展选择器
四、css 盒子模型
1、边框
2、内边距
3、外边距
五、css 布局的定位
六、图文混排案例
一、css 简介
css 是一种层叠样式表，是 HTML 页面的样式，用于将页面效果显示的更加美观，将网页内容和显示样式进行分离，提高了显示的功能。
二、HTML 引入 css
1、行内样式引入
<html>
<head>
<title>oneStar</title>
</head>
<body>
<div style="background-color:red;color:green">让生活变的更有意义！</div> <!--行内样式引入-->
</body>
</html>2、内嵌样式引入
<html>
<head>
<title>oneStar</title>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>让生活变的更有价值！</div> <!--内嵌样式引入-->
</body>
</html>3、外部样式引入（style标签里面）
<html>
<head>
<title>oneStar</title>
<style type="text/css">
@import url(p.css)
</style>
</head>
<body>
<p>让生活变的更有意义！</p> <!--外部样式引入（style标签里面）-->
</body>
</html>
<!--p.css文件-->
p{
background-color:yellow;
color:black;
}4、外部样式引入（link标签里面）
<link rel="stylesheet" type="text/css" href="css/style.css"/> <!--href="引入外部样式文件"--><html>
<head>
<title>oneStar</title>
<link rel="stylesheet" type="text/css" href="p.css"/>
</head>
<body>
<p>让生活变的更有意义！</p> <!--外部样式引入（link标签里面）-->
</body>
</html>注：
- 第三种方法在有些浏览器不能使用，第四种方法最为常用！
- 优先级：（一般情况）由上到下，由外到内，优先级由低到高，后加载的优先级高
三、css 选择器
1、基本选择器
【1】标签选择器
使用标签名作为选择器
<html>
<head>
<title>oneStar</title>
<style type="text/css">
p{
background-color:red
}
div{
background-color:gray
}
</style>
</head>
<body>
<p>让生活变的更有意义！</p> <!--行内样式引入-->
<div>让生活变的更有价值！</div> <!--行内样式引入-->
</body>
</html>【2】class 选择器
每个 HTML 标签都有属性 class，可以对 class 进行设置
<html>
<head>
<title>oneStar</title>
<style type="text/css">
div.oneStar{
background-color:red;
}
p.oneStar{
background-color:gray;
}
</style>
</head>
<body>
<div class="oneStar">让生活变的更有意义！</div> <!--行内样式引入-->
<p class="oneStar">让生活变的更有价值！</p> <!--行内样式引入-->
</body>
</html>【3】id 选择器
每个 HTML 标签都有属性 id，可以对 id进行设置
<html>
<head>
<title>oneStar</title>
<style type="text/css">
div#oneStar{
background-color:red;
}
p#oneStar{
background-color:yellow;
}
</style>
</head>
<body>
<div id="oneStar">让生活变的更有意义！</div> <!--行内样式引入-->
<p id="oneStar">让生活变的更有价值！</p> <!--行内样式引入-->
</body>
</html>基本选择器的优先级：style > id 选择器 > class 选择器 > 标签选择器
2、扩展选择器
【1】关联选择器
对嵌套标签里面的样式进行设置
<html>
<head>
<title>oneStar</title>
<style type="text/css">
div p{
background-color:green;
}
</style>
</head>
<body>
<div><p>让生活变的更有意义！</p></div> <!--行内样式引入-->
<p>让生活变的更有价值！</p> <!--行内样式引入-->
</body>
</html>【2】组合选择器
把不同的标签设置成相同的样式
<html>
<head>
<title>oneStar</title>
<style type="text/css">
div,p{
background-color:green;
}
</style>
</head>
<body>
<div>让生活变的更有意义！</div> <!--行内样式引入-->
<p>让生活变的更有价值！</p> <!--行内样式引入-->
</body>
</html>【3】伪元素选择器
css 里面提供了一些定义好的样式，可以直接使用，以超链接为例，点击超链接有四种状态
- 原始状态： :link
- 悬停状态： :hover
- 点击状态： :active
- 点击之后的状态： :visited
<html>
<head>
<title>oneStar</title>
<style type="text/css">
/*原始状态*/
a:link{
background-color:red;
}
/*悬停状态*/
a:hover{
background-color:green;
}
/*点击状态*/
a:active{
background-color:black;
}
/*点击之后的状态*/
a:visited{
background-color:white;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_self">生活依然苦涩！</a>
</body>
</html>四、css 盒子模型
1、边框
- border：2px solid blue; ==>统一设置
- border-top：上边
- border-bottom：下边
- border-left：左边
- border-right：右边
2、内边距
- padding：统一设置
- padding-top：上边
- padding-bottom：下边
- padding-left：左边
- padding-right：右边
3、外边距
- margin：统一设置
- margin-top：上边
- margin-bottom：下边
- margin-left：左边
- margin-right：右边
<html>
<head>
<title>oneStar</title>
<style type="text/css">
div#oneStar{
/*边框*/
border-top:4px solid red;
border-bottom:4px solid black;
border-left:4px solid green;
border-right:4px solid blue;
/*内边距*/
padding-top:20px;
padding-bottom:20px;
padding-left:200px;
padding-right:20px;
/*外边距*/
margin-top:200px;
margin-bottom:200px;
margin-left:200px;
margin-right:200px;
}
</style>
</head>
<body>
<div id="oneStar">世界很美好！</div>
</body>
</html>五、css 布局的定位
基本属性：position，属性值有：
- absolute：将对象从文档流中拖出，可以使用 top、left、bottom 进行定位
- relative：不会将对象从文档流中拖出，可以使用 top、left、bottom 进行定位
<html>
<head>
<title>oneStar</title>
<style type="text/css">
#oneStar{
width:400px;
height:400px;
border:4px solid red;
position:absolute;
top:100px;
left:100px;
}
#twoStar{
width:400px;
height:400px;
border:4px solid red;
position:relative;
top:400px;
left:400px;
}
}
</style>
</head>
<body>
<div id="oneStar">夜空中最亮的星</div>
<div id="twoStar">能否听清</div>
</body>
</html>六、图文混排案例
<html>
<head>
<title>oneStar</title>
<style type="text/css">
#oneStar{
width:1000px;
height:1000px;
border:4px solid red;
position:absolute;
top:100px;
left:100px;
}
#twoStar{
float:left;
}
</style>
</head>
<body>
<div id="oneStar">
<div id="twoStar"><img src="09.jpg"></div>
<div id="threeStar">操作系统中 heap 和 stack 的区别什么是基于注解的切面实现什么是 对象/关系 映射集成模块什么是 Java
的反射机制什么是 ACIDS与CS的联系与区别Cookie 和 Session的区别fail-fast 与 fail-safe 机制有什么区别get 和post请求的区别
Interface 与 abstract 类的区别IOC的优点是什么IO 和 NIO的区别，NIO优点Java 8 / Java 7 为我们提供了什么新功能什么是竞态条
件？ 举个例子说明。JRE、JDK、JVM 及 JIT 之间有什么不同MVC的各个部分都有那些技术来实现?如何实现?RPC 通信和 RMI 区别什么
是 Web Service（Web服务）JSWDL开发包的介绍。JAXP、JAXM的解释。SOAP、UDDI,WSDL解释。WEB容器主要有哪些功能? 并请列出一些
常见的WEB容器名字。一个”.java”源文件中是否可以包含多个类（不是内部类）？有什么限制简单说说你了解的类加载器。是否实现过
类加载器解释一下什么叫AOP（面向切面编程）请简述 Servlet 的生命周期及其相关的方法请简述一下 Ajax 的原理及实现步骤简单描
述Struts的主要功能什么是 N 层架构什么是CORBA？用途是什么什么是Java虚拟机？为什么Java被称作是“平台无关的编程语言”什么是
正则表达式？用途是什么？哪个包使用正则表达式来实现模式匹配什么是懒加载（Lazy Loading）什么是尾递归，为什么需要尾递归什么
是控制反转（Inversion of Control）与依赖注入（Dependency Injection）Thread的 start方法只能启动一次，启动多次会出现异常，那
么线程池是怎么实现复用Thread的</div>
</div>
</body>
</html>
最后
以上就是缓慢菠萝为你收集整理的css 基本使用一、css 简介二、HTML 引入 css三、css 选择器四、css 盒子模型五、css 布局的定位六、图文混排案例的全部内容，希望文章能够帮你解决css 基本使用一、css 简介二、HTML 引入 css三、css 选择器四、css 盒子模型五、css 布局的定位六、图文混排案例所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复