CSS（Cascading Style Sheets），层叠样式表，用来渲染页面
CSS的代码规则：
选择器{
属性名:属性值;
属性名:属性值;
}
HTML中如何使用CSS
a、行内样式：在标签的style属性值中写CSS代码,注意,此时选择器和大括号不用写,只需要 属性名:属性值;属性名:属性值只对该标签有效
<div style="background: red"></div>
b、内部样式: 在head标签的子标签<style>中写, 注意不能省略选择器和大括号
<head>
<style>
.content {
background: red;
}
</style>
</head>
c、外部样式: 在另外一个文件中写,这文件他的后缀必须是.css 注意不能省略选择器和大括号，通过head标签的另外一个子标签 <link>标签引入刚刚写的xxx.css
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
d、导入方式，使用css规则引入外部css文件
<style>
@import url(style.css);
</style>
如果出现，那么会遵循就近原则
CSS的选择器格式：
标签选择器/标记选择器/元素选择器: 选中了我们指定名字的所有标签
格式: 标签名{
属性名:属性值;
}
id选择器: 选中标签,id值是指定值的标签
格式:
#id值{
属性名:属性值;
}
class选择器:选中标签,class值是指定值的标签
格式:
.类名{
属性名:属性值;
}
属性选择器:只选中符合我们要求属性值的标签
格式:
选择器[属性名=属性值]{
属性名:属性值;
}
包含选择器/后代选择器:
格式:
选择器1 选择器2{
属性名:属性值;
}
是选中选择器2的标签,但是这个标签必须包含在选择器1中,而且可以是直接子元素,可以是孙子元素
CSS中的常用属性：
1.border:边框样式
border:边框的宽度 边框的样子 边框颜色;
单位是px double:双线边框 英文单词red,blue
solid:实线边框 #RGB 比如 #FF0000
2.width:宽度 单位px
height:高度 单位px
3.color:内容的颜色 英文单词red,blue #RGB 比如 #FF0000
font-size:内容的文字大小 单位px
4.background-color:设置标签的背景色
5.display: 转换样式, 把一个块级元素转成行内元素
值: block(转成块级元素) inline(转成行内元素) none(隐藏)
6.float: 浮动,设置元素的浮动效果,让元素浮起来
值: left 漂起来向左
right 漂起来向右
clear: 清楚元素两边的浮动效果
值both 清楚该元素左右两边的浮动效果
CSS的盒子模型：
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
1880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
