CSS语法详解

来源：互联网发布：淘宝新店查询软件编辑：程序博客网时间：2024/06/16 11:50

一、CSS选择器及语法格式

1.CSS选择器

①ID选择器
#slyle1{
width:100%;
height:100%;
}

②类选择器
.slyle2{
width:100%;
height:100%;
}

③HTML元素选择器
body{
width:100%;
height:100%;
}

④通配符选择器

width:100%;
height:100%;

}

2.CSS选择器的调用

①ID选择器的调用方式：<div ID="slyle1">你好！<div>

②类选择器的调用方式：<div class="slyle2">你好！<div>

③HTML元素选择器：不必手动写调用，所指定的元素会自动调用

④通配符选择器：不必手动写调用，不管有没有指定元素，所有的元素都会自动调用

注：一个HTML元素可以同时调用多个不同的选择器，其中ID选择器只能有一个，类选择器可以有多个

（如：<div ID="slyle1" class="slyle2 slyle3">你好！<div>），那么各选择器之间的优先级为：ID>类>HTML>通配符

二、CSS分类

1.内部CSS

①在元素标签中加入CSS

②在HTML头部加入CSS

<head>

</style>

</head>

2.外部CSS

所谓外部CSS，就是专门创建一个后缀名为CSS的文件，在其中写入CSS代码，然后在HTML页面的头部（<head>）中去引入调用

①link引入调用

 <head>      <link href="my.css" type="text/css" rel="stylesheet"></head>

②import引入调用

 <head>     <style>     @import url(css/my.css);     </style></head>

三、其他选择器

1.父子选择器

.slyle1{
width:100%;
height:100%;
}

.slyle1 table{
width:100%;
height:100%;
}

如果（.slyle1）选择器给一个div元素调用了，那么这个div下面的table元素会自动调用（.slyle1 table）这个选择器

2.共同选择器

.slyle1{
/* width:100%; */
height:80%;
}

.slyle2{
/* width:100%; */
height:50%;
}

如果有两个选择器，里面的属性值有些是一样的，那么可以写一个共同选择器，之后就可以把相同的部分在原来的选择器中去掉。

.slyle1，.slyle2{
width:100%;
}

四、CSS盒子布局

CSS会把每个HTML元素都看作一个盒子来布局。盒子布局会有几个特性

1.margin（边距）

margin-top:10px;/*上边距*/
margin-left:10px;/*左边距*/
margin-bottom:10px;/*下边距*/

margin-right:10px;/*右边距*/

2.padding（填充）

padding-top:10px;/*上填充*/
padding-left:10px;/*左填充*/
padding-bottom:10px;/*下填充*/
padding-right:10px;/*右填充*/

3.border（边框）

border: 1px solid red;/*宽度，样式，颜色*/

五、浮动

.div1{

float:right;/*右浮动，让元素移到父元素的右边界*/
float:left;/*左浮动，让元素移到父元素的左边界，并让出来的空间给下一个元素显示*/

clear:both;/*清除浮动*/
}

六、块元素和行内元素

1.块元素：指一个HTML元素，不管它有多宽，它都会占一正行的空间，后面的元素，会在下一行显示。（如：div）

2.行内元素：指一个HTML元素，它只占自身宽度的行空间，后面的元素，会紧跟着这一行显示。（如：span）

3.CSS里可以将块元素和行内元素可以转换

例1：display:block;/*可以将元素转换成块元素显示*/

例2：display:inline;/*可以将元素转换成行内元素显示*/

七、定位

1.static（静态定位）：标准流，它是默认定位。

2.relative（相对定位）：元素从原来的位置脱离，让出来的空间不会被其他元素占用。

.div{

position:relative;/*相对元素原来的位置定位*/

left:100px;/*相对元素原来左边的位置，向右移动*/

top:100px;/*相对元素原来上边的位置，向下移动*/

}

3.absolute（绝对定位）：元素从原来的位置脱离，后面的元素会占有让出的空间。

.div{

position:absolute;/*离元素自己最近的那个非标准流元素的位置定位，如果没有非标准流元素，则以body为参照点*/

left:100px;/*相对，最近的非标准流元素的左边的位置，向右移动*/

top:100px;/*相对，最近的非标准流元素的上边的位置，向下移动*/

}

4.fixed（固定定位）：与absolute（绝对定位）一样，不过它的定位点，都是以body为参照点

1 0