一、基本语法
放在< style type=“text/css”>< /style>中
1. 标记选择器
例子(下面为将p标签统一设置属性):
2. 类别选择器
例子(下面为设置了两个类别选择器 r 和 b 使用直接 class=“r” 即代表使用类 r,多个):
3 .id选择器
例子(先给标签赋值id ,再对id 单独设置样式 ):
二、在html中引入CSS的方法
1. 行内样式(直接在标签中使用)
2. 内嵌式( 一 中的三种选择器)
3.链接式(加载网页时,在遇到需要的地方才引入,效率高 )
- 先单独创建一个css文件,将样式写入(如上面的三种选择器)
- 再在需要使用的文件中引入css文件
4. 导入式(加载网页前先引入,效率低)
-
先单独创建一个css文件,将样式写入(如上面的三种选择器)
-
再在需要使用的文件引入
三、复合选择器
1.交集选择器
例子(意思是在 在是p 标签且具有c类的标签中增加属性)
2.并集选择器
例子(意思是对用逗号隔开的id或类或标签都增添属性)
3.后代选择器
例子(意思是只对 p 后面的 span 增添样式)
4.子选择器
例子:(意思是只对直接后代儿子有影响,隔代的就不会有影响,这里像孙子就没有颜色)
四、CSS继承特性(父代有的类属性会继承给子代,有少数的属性不能继承)
例子:这里HTML、CSS、JavaScript都有c类属性。
五、层叠特性(样式覆盖规则)
六、CSS常用的相关修饰
七、设置图像效果
八、设置背景颜色及图像
九、盒模型
1.三个基本名词理解:
相关属性解释:
border:边框
margin: 外边距
padding:内边距
2.一个标准的dom节点:(可以针对每个属性单独设置)
3.盒子浮动
默认块级元素是竖直排列,浮动属性float:none; 如果改为left 将改变排列规则,变为向左悬浮的横向排列,且其他内容会撑满空隙。
relative例子(下面的意思就是,标签相对原来的位置,做间隙增加30px,上间隙增加30px)
absolute例子(以外边框(父节点有position相关属性的)为参考点,便宜对应距离)
fixed例子(以浏览器为参考点偏移对应距离)
z-index空间位置(若两个块重叠,默认是后面覆盖前面,也就是默认z-index=0,当设置等于-1时,可以将前面的覆盖后面,z-index 越大,显示越靠前)
十、网页布局
1.元素种类
注意:行内元素左右之间的距离是左边的加右边的。块级元素上下间的距离是以大的为准。margin可以为负值(重叠显示)
行内元素又称内联元素。
2.display 属性(可以改变元素的类型,就是块级可以内联元素,或 反之)
例子(下面div变为了内联元素,而span变为了块级元素)