CSS(Cascading Style Sheets的缩写)也称级联样式表,他是用来表现HTML或XML等文件的计算机语言。网页的布局就是通过Css编写的。说白一点CSS就是用户打开网站所看到网页的布局。
Css特点:
它是实现了网页内容与样式的分离。
Css的选择器:
ID选择器>类选择器>元素选择器
在对ID选择器进行编写时,我们要在ID选择器前“#”
例:
#intro{font-weight:bold;}
注:ID选择器在使用时必须保持字段唯一性。同时ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox浏览器中不起作用。
而我们在对类选择器时进行编写时,要在类选择器的前面加“.”
例:
.important {color:red;}
注:class选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。类名的第一个字符不能使用数字!它无法在 Mozilla 或Firefox 中起作用。
Css核心内容:
其中标准流是指:页面显示的顺序与代码的编写顺序呢相一致。
盒子模型:个人理解就是大方框套小方框。每个方框之间又用不同的名称来区别。如图所示:
定位则是对于盒子模型进行的一系列的操作。
定位包括:相对定位、绝对定位和浮动。
相对定位:
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
定位属性为:
#box_relative {
position: relative; /*相对定位*/
left: 30px;/*在原先位置上向右移30像素*/
top: 20px;/*在原先位置上向下移动20像素*/
}
要注意的是:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
绝对定位:
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
定位属性为:
#box_relative {
position: absolute;/*绝对定位*/
left: 30px;/*距离包含框的左边的距离*/
top: 20px;/*距离包含框的顶部的距离*/
}
浮动:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
Css中我们通过float属性进行实现浮动的。
Css样式设计 :
空格代表父子。
例:h1em {color:red;}
逗号“,”表示并列。
例:h1,me{color:red;}
Css页面是用户直接看到的,所以在设计CSS时一定要设计的美观。因为给用户第一印象很重要。以上是我对CSS的理解,有不对的地方,请多指教。