css笔记

前端3要素:
html css javascript
css: 层叠样式表,用于修饰文档,标记HTML 特点:从上到下依此解析 css大小写敏感
css语法:
1 属性名和属性值之间使用:隔开,多对属性之间使用;隔开,最后一堆属性可以不加分号。
id=“one” class=“one” style=“根据css语法设置” title=“one”

2 速记写法 简写形式 : border: 1px solid red; 设置一个1像素的实线红色边框
盒子=内容区+内边距(padding)+边框+外边距 (margin)
padding:10px 20px 30px; 上10px 左右20px 下30px padding: 10px 20px 30px 40px;上 右 下 左
注释:
① 注释写法 /**/

  • ② 注释的作用 解释说明 更好的维护和管理
    ③ 注释不能嵌套使用 浏览器只会找开始到结束之间的内容
    3 html中引人css的方式
    1 行内样式 style属性

    2 内联样式 style标签
    3 外部引入 创建.css为后缀的文件 link标签 【@import url() 不建议使用】 区别:link先加载css,再加载html。import反之。
    优先级: 行内>内联/外部引入 就近原则:哪一种设置方式更接近元素,哪一种样式优先级高
    4 选择器 标签选择器/元素选择器 根据标签名称选择 div{}
    id选择器:通过id属性选择一个元素 #value
    #one
    类选择器:通过class属性选择 .wealthy

    普遍选择器: 当前页面所有元素 {}
    后代选择器 selector1>selector2 :选择直接子元素 (某元素之后的元素) selector selector 选择当前元素的所有后代元素,包括孙代元素(某元素之后的元素和本身)
    兄弟选择器 +:选择当前元素之后的一个兄弟元素 #one+div one之后的一个兄弟 ~:选择当前元素之后的所有兄弟元素 #one~div one之后的所有div元素 所有元素#one
    div
    属性选择器: class选择当前页面中具有class属性的元素 class=“one”选择当前元素具有class属性并且值为one的元素 class~=“one”选择当前元素为class属性值其中一个为one的元素
    多选择器使用逗号隔开 div,p{}当前元素中的所有div和p标签
    组合选择器:直接连接到一起使用 div.one{} div中class为one的元素
    伪类选择器: :伪类名称
    :div :first-child{} 有空格说明出现后代选择器 div:first-child 无空格div标签中的第一个子代
    空格 pre标签  
    行内元素不能设置宽高,只能将行内元素放入块级元素来改变
    基础值:style属性:1000 id选择器:100 类/属性/伪类:10 元素/为元素:1
    color:initial 不继承父类颜色 height: inherit; 默认继承父类高度
    颜色单位: 1:关键字 blue 2 rgb(f,b,g,)0-255之间
    ol设置有序
    1. CSS选择器有哪些?分别包括什么?
      答:css的选择器:1.标签选择器/元素选择器(如:body;div;p;ul;li)
      2.类选择器()
      3.ID选择器(如:id=“name”,id=“name _txt”)
      4.普遍选择器
      5.层次选择器:后代选择器;子代选择器;相邻同胞选择器;一般同胞选择器。
      6.多选择器:多选择器;组合选择器。
      7.属性选择器
      8.伪类选择器
      9.伪元素选择器

    选择器优先级是什么?
    答:选择器的优先级既当面对相同元素相同样式时,我们就需要考虑选择器的优先级问题。
    优先级顺序:1.!important
    2.行间样式(内联样式)
    3.ID选择器
    4.class选择器,伪类选择器,属性选择器
    5.元素选择器,伪元素选择器
    6.*(通配符)选择器
    7.元素的默认样式
    优先级需要根据特性值来计算,特性值越大,优先级越高,特性值相同,越靠下优先级越高。
    当元素的优先级相同时,后来居上(后面的代码覆盖前面的代码)。

        style属性中;1000
        ID选择器:100
        类选择器/属性选择器/伪类选择器:10
        元素选择器/伪元素选择器:1
    

    页面导入样式,使用link与@import有什么区别?
    答:1.link是HTML标签,除了加载css外,还能用于定于Rss,定义rel连接属性等作用;
    @import是css提供的,只能用于加载css。
    2.link引用css时,在页面载入时同时加载;
    @import需要页面网页完全载入以后加载。
    3.link是html标签,无兼容问题;
    @import是在css2.1提出的,低版本(IE5及以下)的浏览器不支持。
    4.link支持使用javascript控制DOM去改变样式;
    @import不支持。

    ©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页