web开发之CSS知识点总结

CSS通常称为CSS样式或者层叠样式表，主要用于修饰HTML页面的文本内容(字体，大小，颜色)等，图片的外形(高宽，边框样式，边距)等以及版面的布局等外观样式，CSS可以使得HTML页面更美观，CSS的色调搭配使得用户体验更好，CSS+DIV样式更加灵活，更丰富多彩地展示超文本信息。

1-CSS之元素选择器

2-CSS元素之类选择器

3-CSS之ID选择器

4-CSS之组合选择器

5-CSS之边框属性

6-CSS之常用样式

7-CSS之盒子模型

8-CSS与HTML的结合方式

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>