CSS(day01)

CSS 概述

  1. 什么是 css

    css: cascading style sheets (层叠样式表 | 级联样式表) 简称样式表

  2. css 作用

    设置 html 网页中元素的样式

  3. HTML 于 CSS 的关系

    HTML: 负责网页的搭建, 内容的展示
    CSS: 负责网页的修饰
    对于元素样式的修饰建议使用 css 而不使用 html 的属性
    html的属性, 代码不能能重用, 没有维护性

CSS 的语法规范

  1. 使用 css 的方式
    ① 行内样式(内联样式)

    将 css 的样式写在元素的 style 属性中

    color: white; 字体颜色

    background-color: gary; 背景颜色

    font-size: 30px; 字号大小

    语法:

    <any style="样式声明"></any> 样式声明 由 样式属性和样式值组成, 样式属性: 值;

    内联样式不能重用

    内联样式的优先级是最高的

    在项目中基本不用, 只有在学习和测试中使用

    ② 内部样式

    在 head 标签内, 使用 < style > 定义内部样式

    语法:

    <head>
       <style>
          选择器 { 属性: 属性值; }
       </style>
    </head>
    

    选择器就是页面能够使用当前样式条件 div{} p{} img{} span{}

    总结: 内部样式只能在本页面使用

    内部样式在项目中用的少, 主要用户学习和测试

    ③ 外部样式

    单独创建一个 css 文件, 在 html 文件中的 head 里使用 link 标签 引入 css 文件 rel 属性必须写, 不写没有效果

    项目中大量的使用外部样式, 学习中用的少

  2. css 样式的特性
    ① 继承性

    大部分的CSS效果是可以直接被子元素继承的
    必须是有层级嵌套关系的元素, 才能继承。孩子继承父亲
    a 标签的字体颜色是不继承的

    ② 层叠性

    可以为同一个元素定义多个样式
    如果样式属性不冲突时可以同时作用到这个元素上

    ③ 优先级

    样式属性冲突时, 根据优先级去应用样式

    默认优先级, 由高到低

    1 内联样式
    2 内部样式和外部样式, 使用就近原则
    3 浏览器默认样式

    解释型语言: 代码逐行往下依次运行, 后执行会覆盖之前执行的

    ④ 调整优先级

    !important 规则
    选择器 { 属性:值 !important; } 写在值和 分号 之间, 前面要有空格
    意义, 我这个值是最重要的, 其它的值不要覆盖
    如果有多个 !important; 那么还是遵循就近原则

基础选择器(重点)

  1. 选择器的作用

规范了页面中哪些元素能够使用定义好的样式
选择器就是一个定义好的条件, 符合这个条件的元素, 可以应用这个样式

  1. 选择器详解
    ① 通用选择器(通配符选择器)

    * { 样式声明 }
    * { margin: 0; padding: 0; } 所有元素内外边距清 0
    如果取值为 0, 可以省略单位

    ② 元素选择器(标签选择器)

    元素 { 样式声明 } 页面中所有对应元素, 都使用这个样式, 设置页面中某种元素的默认样式
    特殊用法: body { margin: 0; padding: 0; } body 及 body 内元素, 都会内外边距清 0

    ③ ID选择器, 专属定制

    只对当前页面, 一个元素生效
    <any id="id值"></any>
    #id 值 {}
    总结: 一般 id 选择器在项目中很少单独使用, 通常会作为子代选择器和后代选择器的一部分

    ④ 类选择器

    定义页面上某个或某类元素的样式
    是一个公共的样式, 谁想使用, 就用 class 调用一下

    类名的声明

    声明类选择器 .类名 { 样式声明 }

    类名的特点

    1、必须有点
    2、类名不能以数字开头
    3、只能使用 -_ 两种符号

    引用类名

    <any class="类名">

    特殊用法

    1、多类选择器(一个元素引入多个选择器) <any class="类1 类2..">

    2、分类选择器(更精准的确定这个样式元素, 增加了选择器的权值)
    .类名1.类名2 { 样式声明 } 匹配同时引用 类名1 和 类名2 的元素
    元素名.类名 匹配指定元素引用了某个类名的元素

    ⑤ 群组选择器(分组选择器, 选择器之间使用逗号连接)

    将多个选择器放在一起, 定义公共样式
    选择器1, 选择器2, .. { 样式声明 }

    ⑥ 后代选择器

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

    语法

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

    ⑦ 子代选择器

    子代关系: 就是一级嵌套关系

    语法:

    选择器 > 选择器 >... { 样式声明 } 子代选择器和后代选择器可以混写

    ⑧ 伪类选择器(匹配元素不同状态的选择器)

    伪类选择器, 都是以冒号开头

    1、匹配为访问的链接 选择器:link

    2、匹配访问后的链接 选择器:visited

    3、匹配鼠标悬停时的状态 选择器:hover

    4、元素激活状态, 鼠标按住不松开 选择器:active

    以上四个伪类同时作用在一个元素上时需要有严格的书写顺序 l o v e & h a t e

    link visited haver active

    :focus 匹配获取焦点时的状态

    ⑨ 选择器的权值问题

    选择器默认自带权值, 权值越高优先级越高

    权值

    属性
    !important> 1000
    内联样式= 1000
    ID 选择器= 100
    类 与 伪类= 10
    元素 选择器= 1
    通配符= 0
    继承的样式无权值

    当一个选择器有多个选择器组成时, 需要将所有的选择器进行相加, 然后比较, 权值最大的 优先显示

    权值相同, 就近原则

    群组选择器的权值, 单独计算, 不能相加

    样式后边添加 !important, 直接获取最高权重

    内联样式不能添加 !important

    选择器权值的计算, 不会超过 自己最大数量级 (100个元素选择器不会大于 10)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值