震惊!!!CSS他这样学一次就会了!

css层叠样式表

    为html中的元素添加样式
        相同的样式多个,会覆盖
        不同的样式多个,会叠加
目标: 学习常用的样式属性***,选择器***

语法:
    选择器 {
        样式;
        样式;
        样式;
        ...
    }
    样式 :
        属性名  :  属性值 ;

注意 : 为元素设置样式建议使用css

使用方式:
    行内样式表 : 在元素的开始标签上添加一个style属性,样式定义在style属性值中
    内部样式表 : head中定义style标签对,标签对中定义css样式
    外部样式表 : 在外部定义一个css文件,在要使用的html中通过link标签引入

样式表的优先级: 优先显示谁
    谁离元素近就优先显示谁2

路径:
    回到上一层../
    进入某一个路径  路径名/

基础选择器

 css选择器 : 选中一个或者一组元素,方便为元素添加样式
      基础选择器  ****
      组合选择器  ****
      群组选择器  ****
      属性选择器  ***
      伪列选择器  ****
      微元素选择器

 基础选择器 :
      #id选择器 : 根据元素id属性值,选中一个元素
      .class|类选择器 :  根据元素的class属性值,选中一个或者组员元素
      标签|元素选择器 :  根据标签名选中一个或者一组元素
      *通配符 : 选中所有元素

  基础选择器的优先级:
      id>class>元素>通配符

 注意:
  元素的class属性值可以相同,并且值列表可以存在多个值

  群组选择器 : 通过多种选择器匹配到多个元素同时选中

使用方式

CSS 层叠样式表
    为html中的元素添加样式
        相同的样式多个,会覆盖
        不同的样式多个,会叠加
目标: 学习常用的样式属性***,选择器***

语法:
    选择器 {
        样式;
        样式;
        样式;
        ...
    }
    样式 :
        属性名  :  属性值 ;

注意 : 为元素设置样式建议使用css

使用方式:
    行内样式表 : 在元素的开始标签上添加一个style属性,样式定义在style属性值中
    内部样式表 : head中定义style标签对,标签对中定义css样式
    外部样式表 : 在外部定义一个css文件,在要使用的html中通过link标签引入

样式表的优先级: 优先显示谁
    谁离元素近就优先显示谁2

路径:
    回到上一层../
    进入某一个路径  路径名/

组合选择器

    后代选择器 空格
    子元素选择器 >
        选中第一层直接子元素,不包含孙子元素等
    相邻兄弟 +
    普通兄弟 ~

样式:
    可以继承的样式 : 字体样式 文本样式  背景样式等...
    不可以继承的样式 : 边框,内外边距的样式等

属性选择器[ ]

    根据元素的属性与属性值选中一个或者一组元素
  [属性名] : 包含这个属性的元素被选中
  元素名[属性名] : 指定元素中具有这个属性的元素被选中
  元素名[属性名='属性值'] : 指定元素中具有这个属性并且属性值为定值的的元素被选中

伪类选择器

hover : 当鼠标悬停在元素上时候选中元素添加样式
first-child : 作为第一个子元素
last-child: : 作为最后一个子元素
nth-child(2) : 作为第几个子元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值