CSS基础

---

复习昨天知识

1. Css层叠样式表&＃xff08;级联样式表&＃xff09;

Css的作用就是美好html标签。

     2.书写位置

选择器

选择器是一个选择器谁的过程。

    1、基础选择器

◆标签选择器

    标签(属性:值;)

◆类选择器

.    自定义类名(属性:值;)

    特点:谁调用&＃xff0c;谁生效.

         一个标签可以多个类选择器。

        多个标签可以调用同一个类选择器。

  ★类选择器命名规则&＃xff1a;

    不能用纯数字或者数字开头来定义类名。

    不能使用特殊符号(_ 除外)来定义类名。

    不推荐使用汉字来定义类名。

    不推荐使用标签名、属性、属性值来定义类名。

◆id选择器

    #自定义名{属性:值;}

    特点:谁调用&＃xff0c;谁生效。

         一个标签只能调用一个id选择器。

        一个id选择器在一个页面只能调用一次。

◆通配符选择器

    *{属性:值&＃xff1b;}

    2、复合选择器

◆交集选择器

    标签&＃43;类(id)选择器{属性:值;}

    特点:即是某个标签&＃xff0c;而且这个标签调用了类&＃xff08;id&＃xff09;选择器

◆后代选择器

      选择器&＃43;空格&＃43;选择器{属性:值;}

     后代选择器的基本要求&＃xff1a;包含(嵌套)关系。

     特点:  父在前,子在后。

       无限制隔代。

       只要能代表这个标签&＃xff0c;可以是标签选择器、类选择器、id选择器自由组合。

◆子代选择器

    选择器>选择器{属性:值;}

    特点&＃xff1a;选择的是直接下一代.

◆并集选择器

    选择器&＃43;,&＃43;选择器&＃43;,&＃43;选择器{属性:值;}

    3、样式表书写位置

◆内嵌式写法   

◆外链式写法

写在head里&＃xff0c;

◆行内样式表

◆三种写法特点:

    ★内嵌式写法&＃xff0c;样式只作用于当前文件&＃xff0c;没有真正实现结构表现分离。

    ★外链式写法&＃xff0c;作用范围是当前站点&＃xff0c;谁调用谁生效&＃xff0c;范围广&＃xff0c;真正实现结构表现分离。

    ★行内样式表&＃xff0c;作用范围仅限于当前标签&＃xff0c;范围小&＃xff0c;结构表现混在一起。  &＃xff08;不推荐使用&＃xff09;

4、标签分类(显示方式)

1. 块元素

典型代表,Div,h1-h6,p,ul,li

特点: ★独占一行

      ★可以设置宽高

     ★ 嵌套&＃xff08;包含&＃xff09;下&＃xff0c;子块元素宽度&＃xff08;没有定义情况下&＃xff09;和父块元素宽度默认一致。

    2.行内元素

典型代表 span  ,a,  ,strong , em,  del,  ins

特点&＃xff1a;★在一行上显示

      ★不能直接设置宽高

      ★元素的宽和高就是内容撑开的宽高。​​​​​​​

    3.行内块元素(内联元素)

典型代表  input  img

特点&＃xff1a;★在一行上显示

      ★可以设置宽高      ​​​​​​​

    4.块元素、行内元素

◆块元素转行内元素

display:inline;

◆行内元素转块元素

display:block;

◆块和行内元素转行内块元素

display:inline-block;

5、css三大特性

    1.层叠性

当多个样式作用于同一个&＃xff08;同一类&＃xff09;标签时&＃xff0c;样式发生了冲突&＃xff0c;总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

​​​​​​​

    2. 继承性

   继承性发生的前提是包含&＃xff08;嵌套关系&＃xff09;

   ★文字颜色可以继承

   ★文字大小可以继承

   ★字体可以继续

   ★字体粗细可以继承

   ★文字风格可以继承

   ★行高可以继承

   总结&＃xff1a;文字的所有属性都可以继承。

◆特殊情况&＃xff1a;

h系列不能继承文字大小。

a标签不能继承文字颜色。

    3.优先级

 默认样式<标签选择器<类选择器         0               1             10            100          1000      1000以上

◆优先级特点

★继承的权重为0

★权重会叠加

六、链接伪类

a:link{属性:值;}  a{属性:值}效果是一样的。

    a:link{属性:值;}       链接默认状态

    a:visited{属性:值;}     链接访问之后的状态

    a:hover{属性:值;}      鼠标放到链接上显示的状态      a:active{属性:值;}      链接激活的状态

    &＃xff1a;focus{属性:值&＃xff1b;}     获取焦点

    1、文本修饰

text-decoration: none  |   underline   |     line-through

七、背景属性

1. background-color     背景颜色

2. background-image    背景图片

3. Background-repeat    repeat(默认)  |  no-repeat |   repeat-x   |  repeat-y     背景平铺

4. Background-position  left  |  right  |  center  |  top  | bottom  背景定位

★方位值只写一个的时候&＃xff0c;另外一个值默认居中。

★写2个方位值的时候&＃xff0c;顺序没有要求。

★写2个具体值的时候&＃xff0c;第一个值代表水平方向&＃xff0c;第二个值代表垂直方向。​​​​​​​

    5.Background-attachment   背景是否滚动   scroll  |  fixed

    6.背景属性连写

    ★&＃xff1a;连写的时候没有顺序要求&＃xff0c;url为必写项。

如果有疑问联系博主&＃xff1a;y19970821ywty

要用到的工具&＃xff0c;视频教程&＃xff0c;关注公众号&＃xff08;Java学习之乐&＃xff09;直接免费获取&＃xff1a;