css基础小结

什么是CSS

CSS是级联样式表的缩写。CSS 用于决定HTML编写的页面内容如何在屏幕上呈现。

CSS语法

一条CSS样式规则由两个主要的部分构成：选择器与以{}包裹的一条或多条声明。

h1{
    color:black;
    font-size:10px;
  }

这条规则表示，该页面上所有的一级标题都为黑色，字体的大小为10像数。

选择器分为标签选择器，id选择器，class选择器，通配符选择器，组合选择器，子选择器。选择器是需要改变样式的对象，。如上面的h1。

html选择器(标签选择器)： p{text-indent: 3em} h1{ color:red }
注：用来改变一个指定标签的样式，任何HTML元素都可以是一个CSS选择器，
用于找到和选择器同名的HTML元素。

通配符选择器：* {margin:0; padding:0} IE6版本浏览器不支持
注：*代表html内的标签（包括本身），
除 和头部标签和头部标签里面的内容

组合选择器： body,h2, {margin:0; padding:0;}
注意：为了减少重复的声明，组合选择器是被允许的，只要用英文逗号隔开选择器就可以了

包含选择器：div a{ width:300px; height:300px; background:red;}
注意：只要网页存在并在它内部也存在,无论是多少层。都可以对它的上级元素进行修饰。

id选择器以"#"来定义，注意ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class选择器以"."来定义，注意类名的第一个字符不能使用数字，它无法在 Mozilla 或 Firefox浏览器中起作用。

每条声明由一个属性和一个值组成，属性与值用冒号分离。无论是一条或多条声明，都需要用{}包裹，且声明之间用;分割

CSS如何生效

一般有三种方法：外部样式表，内部样式表，内联样式。
外部样式表是在同一目录新建一个样式表文件mycss.css（注意后缀为.css）。

内部样式表是将样式放在 HTML 文件中。

内联样式就是直接把样式规则直接写到要应用的元素中。

颜色，尺寸

关于颜色我们可以使用颜色的名称来设置前景或者背景的颜色。
关于尺寸我们可以用 height 与 width来设置元素内容的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
width:auto | 长度值 | 百分比 不允许负值
min-width: 长度值 | 百分比 不允许负值
max-width: 长度值 | 百分比 不允许负值
height: auto | 长度值 | 百分比 不允许负值
min-height: 长度值 | 百分比 不允许负值
max-height: 长度值 | 百分比 不允许负值

布局

width 设置元素(标签)的宽度，如：width:50px;
height 设置元素(标签)的高度，如：height:100px;
background 设置元素背景色或者背景图片，如：background:black; 设置元素背景色为黑色
padding 设置元素包含的内容和元素边框的距离，也叫内边距
margin 设置元素和外界的距离，也叫外边距
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

边框，外边界，内填充

首先，无论是边框、内边距还是外边距，它们都有上下左右四个方向。
border-style属性用来定义边框的样式。border-style 值:

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

margin: auto | 长度值 | 百分比; 允许负值。
margin-top: auto | 长度值 | 百分比; 允许负值。
margin-right: auto | 长度值 | 百分比; 允许负值。
margin_bottom: auto | 长度值 | 百分比; 允许负值。
margin-left: auto | 长度值 | 百分比; 允许负值。
padding: 长度值 | 百分比 ; 不允许负值。
padding-top: 长度值 | 百分比 ; 不允许负值。
padding-right: 长度值 | 百分比 ; 不允许负值。
padding-bottom: 长度值 | 百分比 ; 不允许负值。
padding-left: 长度值 | 百分比 ; 不允许负值。
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

(margin: auto | 长度值 | 百分比; 允许负值。
margin-top: auto | 长度值 | 百分比; 允许负值。
margin-right: auto | 长度值 | 百分比; 允许负值。
margin_bottom: auto | 长度值 | 百分比; 允许负值。
margin-left: auto | 长度值 | 百分比; 允许负值。, padding: 长度值 | 百分比 ; 不允许负值。
padding-top: 长度值 | 百分比 ; 不允许负值。
padding-right: 长度值 | 百分比 ; 不允许负值。
padding-bottom: 长度值 | 百分比 ; 不允许负值。
padding-left: 长度值 | 百分比 ; 不允许负值。)

文本

color 设置文字的颜色，如： color:black;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’;
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗