Html/Css基础学习一（Css样式）
一、Css简介
-
CSS 指层叠样式表 (Cascading Style Sheets)
-
样式定义如何显示 HTML 元素
-
样式通常存储在样式表中
-
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
-
外部样式表可以极大提高工作效率
-
外部样式表通常存储在 CSS 文件中
-
多个样式定义可层叠为一个
以上解释摘选自http://www.w3school.com.cn/css/css_jianjie.asp。CSS样式其实就是标签里面style元素里面的各种方法，每一个样式用";"分割，如果需要将多个部分定义为同一个样式，可以通过class定位，因为class名称可以重复，于是定义同一个名称可以影响所有该名称的模块。
CSS样式可以在不同的地方进行设置，一共有三种方式：
方式一，在标签内写样式：
<div class="c1" style="background-color: blue;height: 100px;width: 100px"></div>
方式二，在head里通过<style>标签写样式，通过各种选择器定位到body中的模块上：
<style> .c1 { height: 100px; width: 100px; background-color: pink; } </style>
方式三，在head标签中引用css文件，文件中通过选择器为body中的各模块定义样式：
<link rel="stylesheet" href="practice-body.css">
二、一些基础的使用方法
1、id选择器
通过id查找到该模块，然后为该模块定义样式。样式放在head标签中。id选择器定位比较精准，只能对某个模块起效，因为一个HTML文件中id是不能重复的。其基础的使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ height: 100px; width: 100px; background-color: pink; } </style> </head> <body> <div id="i1">用来展示id选择器定义模块样式</div> </body> </html>
以上代码在网页上的效果如下，可以看到为该模块增加了背景色且定义了模块的长和宽。
2、class选择器
和id选择器类似，只不过class选择器是通过class进行定位。class选择器可以通过一个class名定位多个模块，因为HTML文件中class名可以重复，只需要将样式一致的模块class名定义为同一个就可以了。其基础的使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 100px; width: 100px; background-color: sandybrown; } </style> </head> <body> <div class="c1">第一个模块</div> <div class="c1">第二个模块</div> <div class="c1">第三个模块</div> </body> </html>
以上代码在网页上的效果如下，可以看到直接通过名称定义样式后，三个模块都获得了同样的样式：
3、标签选择器
同样的，这代表通过标签进行查找，但是会影响到html网页中的所有的标签（div或者span）。其基础使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 100px; width: 100px; background-color: pink; } </style> </head> <body> <div id="i1">第一个div模块</div> <div id="i2">第二个div模块</div> </body> </html>
以上代码在网页中的呈现效果如下，所有div标签都会受到该样式的影响：
4、标签层级选择器
如果要对标签内的标签定义样式，可以使用标签层级选择器，格式为"标签+空格+标签"。其基础使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div span{ height: 100px; width: 100px; background-color: pink; } </style> </head> <body> <div id="i1"> <span>标签层级选择器展示</span> </div> <div id="i2">第二个div模块</div> </body> </html>
以上代码为div模块下的span标签定义了样式，网页上的展示效果如下所示：
5、class层级选择器
和标签层级选择器类似先通过class标签定位第一层，再通过其他标签定位第二层，其使用方法如下：
class层级选择器同理还有id层级选择器，使用方法类似。
6、id组合选择器
通过id定位多个模块，使这几个模块使用同样的样式，基础使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1,#i2{ height: 100px; width: 100px; background-color: pink; } </style> </head> <body> <div id="i1">第一个div模块</div> <div id="i2">第二个div模块</div> </body> </html>
同理还有class组合选择器，不过这个使用不多，因为class名称可以重复，如果想使用同一个样式，class名称一致就可以了。
7、height/width/font-size/font-weight
一个模块的长和宽可以用height以及width来设置，字体可以用font-size，font-weight等样式来设置，大概使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span style="width: 80px;height: 48px;border: 1px red solid;font-size: 20px">字体大</span> <span style="width: 80px;height: 48px;border: 1px red solid;font-weight: 700;">字体粗</span> </body> </html>
以上代码在网页上的呈现效果如下：
8、文本对齐text-align/line-height
text-align可以调整文字在模块中的位置，比如左对齐，居中或者右对齐；line-height则可以调整文字在模块中的上下位置。基础使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 80px;height: 48px;border: 1px solid red;text-align: center;line-height: 48px">1</div> </body> </html>
- text-align:right：文字右对齐
- text-align:left：文字左对齐
- text-align:center：文字居中
- line-height:48px:因为模块高度是48px，这样定义后，会自动将文字放在高度的中心点。
9、float模块浮动
模块默认是往下堆叠的，通过浮动样式，可以将模块放在同一行，但是模块宽度超过外层模块的100%后还是会自动换行的。基础使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 80px;height: 48px;border: 1px solid red;float: left">左边</div> <div style="width: 80px;height: 48px;border: 1px solid red;float: left">并列左边</div> <div style="width: 80px;height: 48px;border: 1px solid red;float: right">最右边</div> </body> </html>
以上代码在网页上的效果如下：
10、margin/padding外边距和内边距
内外边距是指模块处于某个模块中时，内模块和外模块之间的距离，外边距用于增加两个模块的距离，内边距用于扩展内模块的面积，同理可以减少和外模块的距离。其基础使用方法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div><h4>外边距:自己针对外围的div产生变化,外边距撑大外层 top left right bottom</h4></div> <div style="border: 1px solid red;height: 100px"> <div style="background-color: blue;height: 70px;margin-top: 30px;margin-left: 10px;margin-right: 10px"></div> </div> <div><h4>内边距:自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加</h4></div> <div style="border: 1px solid red;height: 100px"> <div style="background-color: blue;height: 70px;padding: 1px">内边距增加</div> </div> </body> </html>
