三、CSS语言

时间:2021-11-25 06:29:34

CSS语言

1、概述:
CSS (Cascading Style Sheets)是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。

2、CSS和HTML结合的方式
sytle属性方式

style标签方式(内嵌方式)
<style type=”text/css”>

导入方式 @import url(css_3.css);

链接方式
<link rel="stylesheet" type="text/css" href="css_3.css" />

3、CSS样式优先级和代码规范
样式优先级
由上到下,由外到内。优先级由低到高。
代码规范
选择器名称 { 属性名:属性值;属性名:属性值;…….}
属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话,那么多个值用 空格 隔开。

4、CSS选择器
就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
CSS选择器的类型
html标签名选择器。使用的就是html的标签名
class选择器(.)。其实使用的标签中的class属性
id选择器(#)。其实使用的是标签的中的id属性。
优先级:style属性>id>class>标签名

5、CSS拓展选择器
关联选择器:
标签是可以嵌套的,两个或多个选择器之间产生关系,就可以用此选择器。

组合选择器:
对多个不同选择器进行相同样式设置的时候应用此选择器。

伪元素选择器:
其实就在html中预先定义好的一些选择器。或者说当前元素处于的状态。

6、CSS盒子模型
在进行布局前需要把数据封装到一块一块的区域内,这个区域的专业术语叫盒子。
边框(border)分为上 下 左 右
内边距(padding)分为上 下 左 右
外边距(margin)分为上 下 左 右

7、CSS布局漂浮属性
float(漂浮)
none :  默认值。对象不飘浮
left :  文本流向对象的右边
right :  文本流向对象的左边

8、CSS布局定位属性
position
static :  默认值。无特殊定位,对象遵循HTML定位规则
absolute :  将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其进行绝对定位。
relative :  对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置