web开发之CSS知识点总结
Posted nuist__NJUPT
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web开发之CSS知识点总结相关的知识，希望对你有一定的参考价值。
CSS通常称为CSS样式或者层叠样式表，主要用于修饰html页面的文本内容(字体，大小，颜色)等，图片的外形(高宽，边框样式，边距)等以及版面的布局等外观样式，CSS可以使得HTML页面更美观，CSS的色调搭配使得用户体验更好，CSS+DIV样式更加灵活，更丰富多彩地展示超文本信息。
目录
1-CSS之元素选择器
以HTML标签名称作为选择器的即为元素选择器，选择CSS样式代码，选择CSS样式名代码，作用于对应的标签名的标签上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css代码格式规范</title>
<style>
/**
这是css标签的规范写法,style标签放到head标签种,
里面是选择器的名称,内部是属性名:属性值
*/
span
color: blue;
font-size: 100px;
border: 1px solid red;
div
color: deepskyblue;
font-size: 100px;
border: 2px solid yellow;
</style>
</head>
<body>
<span>这是行级的块</span>
<div>这是块级的块</div>
</body>
</html>2-CSS元素之类选择器
使用类名作为选择器的名称即为类选择器，一般作用于同一元素的不同类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的类选择器</title>
<style>
.span1
color: red;
font-size: 100px;
.div1
color: blue;
font-size: 40px;
</style>
</head>
<body>
<span class="span1">这是一个行级的块</span>
<span>这也是一个行级的块</span>
<div class="div1">这是一个块级的块</div>
<div >这也是一个块级的块</div>
</body>
</html>3-CSS之ID选择器
该选择器适用于作用在某一个标签上，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的ID选择器</title>
<style>
#span1
color:red;
#div1
color: blue;
#div2
font-size: 100px;
</style>
</head>
<body>
<span id="span1">我是红色</span>
<span>我是黑色</span>
<div id="div1">我是蓝色</div>
<div id="div2">我是100px大小</div>
</body>
</html>4-CSS之组合选择器
组合选择器就是选择器的嵌套形式，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之组合选择器</title>
<style>
div
color: blue;
<!--这是一个组合选择器-->
div font
color: red;
</style>
</head>
<body>
<div>
<font>我是红色</font>
我是蓝色
</div>
</body>
</html>5-CSS之边框属性
常用的边框属性包括边框，宽度，高度，背景颜色等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的边框属性</title>
<style>
/**
四个边框属性：边框线,宽度,高度,背景颜色
*/
div
border: 1px solid red;
width: 100px;
height: 100px;
background-color: aquamarine;
</style>
</head>
<body>
<div>这是一个边框</div>
</body>
</html>6-CSS之常用样式
通常默认的排版方式是从上到下，实际开发中需要左右罗列，需要使用浮动标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之常用样式</title>
<style>
/**
使用float标签设置浮动，可以居左或者居右的浮动
*/
#div1
background-color: red;
width: 100px;
height: 100px;
float: left;
#div2
background-color: green;
width: 100px;
height: 100px;
float: left;
#div3
background-color: blue;
width: 100px;
height: 100px;
float: left;
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>样式转换，使用display一般可以将某种样式转换为另外一种样式，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式之转换</title>
<style>
div
display: inline;
li
display: inline;
span
display: block;
</style>
</head>
<body>
<h1>由块级元素到行级元素</h1>
<div>div1</div>
<div>div2</div>
<h2>块转换成行</h2>
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
</ul>
<h3>行转换成块</h3>
<span>span1</span>
<span>span2</span>
</body>
</html>7-CSS之盒子模型
所有的HTML元素都可以看做成一个盒子，用CSS来设置元素的内边距，边框，内边距等，相当于设置盒子的样式，因此我们称为盒子模型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之盒子模型</title>
<style>
/**
board设置边框,padding设置内边距,margin设置外边距
*/
div
border: 1px solid red;
padding: 10px;
margin: 10px;
</style>
</head>
<body>
<div>内容体</div>
</body>
</html>8-CSS与HTML的结合方式
CSS与HTML的结合方式主要有两种，一种是内部结合方式，另一种是外部结合方式，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之与HTML结合方式</title>
<!--引用外部CSS样式-->
<link rel="stylesheet" type="text/css" href="demo1.css">
<!--这种内部样式适合样式复用-->
<style>
b
color: red;
font-size: 10px;
</style>
</head>
<body>
<!--内部样式,针对性强-->
<a style="color: blue; font-size: 10px">学习编程</a>
<b>好好学习啊</b>
<b>好好学习哦</b>
<!--外部样式修饰-->
<c>外部样式修饰</c>
</body>
</html>以上是关于web开发之CSS知识点总结的主要内容，如果未能解决你的问题，请参考以下文章