1.什么是css

  概述 :层叠样式表级联样式表

2.css语法规范

  color:red;  ----------这是最简单的样式规范 

3.css的三种样式

  内联样式 :所有的元素都有style属性 例如 h1 style=“color:red;”

  内联样式不能重复使用,而且在项目中使用很少。

  内联样式的默认优先级最高

  -----------------------------------------------------------------------

  内部样式:在<head>标签中添加<style></style>标签  

  语法: 选择器{样式声明}

  会让样式重复使用 但是重用有局限性;

  ---------------------------------------------------------------------------

  外部样式

  使用link 标签引入 

  在项目中基本都是用外部样式引入 可以最大限度的提高代码的重用性,可维护性;

4.css的特性

  堆叠性 :可以给一个元素设置多个样式属性

  优先级:一个元素在有属性冲突时候,按照内联为最高  内部 和外部样式按照就近原则进行取值。

5.基础选择器

  通用选择器 *{margin:0;padding:0;}  

  很少使用*号   一般都是使用*{margin:0;padding:0;} 做css rest重置

  -----------------------------------------------------------------------------------------------------

  元素选择器  元素关键字  a{样式声明}    p{样式声明}

  p{color:red;}

  ------------------------------------------------------------------------------------------------------------

  ID选择器  :

  一个页面中,不能出现id重复的元素,所以id选择器让当前样式只为一个元素服务

  

  <any id="d1"></any>

  #d1{color:red;}

  ---------------------------------------------------------------------------------------------------------------

  类选择器

  把页面上一些常用的样式封装进一个类名中

  然后在元素中使用class引用   

     .类名{样式声明}

  .font{font-size:50px}           引入 class=“font”

  分类选择器

  在class中引入多个类名  中间不需要,分割   

--------------------------------------------------------------------------

  分类选择器

  .text-red.font36{color:blue;} 同时引用text-red和font36的元素会匹配

  span.font36{background-color: pink;} 所有引用了font36的span元素会匹配

  

  类名的要求,只能有字母,数字_ , -.

            不能用数字开头

            尽量见名知义

  --------------------------------------------------------------------

  群组选择器

  选择器之间用,隔开 与 多类选择器不同

  ------------------------------------------------------------

  后代选择器

  

通过元素的后代关系,来匹配元素

 

后代:一级或者多于一级的关系

 

选择器1  选择器2  选择器3....{样式声明}

--------------------------------------------------------------------

通过元素的子代关系,来匹配元素

子代:一级的嵌套关系

选择器1>选择器2>选择器3{样式声明}

后代选择器和子代选择器可以混用

-----------------------------------------

伪类选择器

a:link{color:red} 

     匹配元素某种状态下的样式

    link:连接未被访问的状态

    visited:匹配元素已经被访问的状态

    hover :匹配鼠标悬停到元素上状态

    active: 匹配元素被激活的状态

    focus: 匹配元素获取焦点的样式  input

 

posted on 2020-07-09 15:02  F_Hark  阅读(107)  评论(0编辑  收藏  举报