什么是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 设置不加粗