欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基础系列(2)--- css1

程序员文章站 2022-06-29 08:06:19
css组成 css样式表 权重关系 内联样式表 > 内部样式表 和 外部样式表(具体权重看在html中的顺序,后面覆盖前面的相同属性) 内联样式表只作用在当前元素上 css选择器 1.类型选择符(标签选择符) 2.id选择符 3.类选择符 4.包含选择符 语法:符元素选择符 子元素选择符{css语法 ......

css组成

1 css语法组成
2    选择器 和 声明 (多个声明用分号隔开)
3        声明包括 属性和属性值(多个属性值用空格隔开)
4 
5    语法:
6        选择器{
7            属性: 属性值;
8            属性: 属性值1 属性值2;
9        }

 css样式表

1.内部样式表
    通常放在head标签内

2.外部样式表
    a: <link rel="stylesheet" href="url" type="text/css">
        rel:连接css和html
        href: css样式表的路径
        type: 定义文档类型,h5通常省略不写
    b. <style>
            @import url("")
       </style>
       通常不用这种方式

3.内联样式表(行内样式表)

link 和 @import区别
    (1)本质差别: link属于html语言,@import是css定义的方式
    (2)加载顺序: link导入的css是和结构一起加载,@import是结构加载完再执行的
    (3)兼容: link无兼容问题,@import 低版本ie不兼容
    (4)js控制dom样式的区别

权重关系

内联样式表 > 内部样式表 和 外部样式表(具体权重看在html中的顺序,后面覆盖前面的相同属性)

内联样式表只作用在当前元素上

css选择器

1.类型选择符(标签选择符)

html中所有标签都可以直接对元素选择
特点:对页面中所有当前类型元素有效
应用:清除某个元素默认样式、统一某个元素样式

2.id选择符

 特点:id名字在一个页面中唯一
 应用:用来划分网页外围结构!

3.类选择符

特点:一个元素可以有多个class名称
应用:可以定义一类样式

4.包含选择符

    语法:符元素选择符  子元素选择符{css语法}(中间用空格隔开)

5.群组选择符

    语法: 选择符1,选择符2, 选择符3{css语法} (中间用逗号隔开)

6.伪类选择符

a:link、a:visited、a:hover(常用)、a:active

7.通配符

 *

选择符权重

内联样式表  >  id  >  class、伪类  >  标签 

 (1000)     (100)      (10)         (1)

包含选择符权重等于各个权重之和

群组选择符权重各自不变

 命名规范

1.不能是关键字
2.字母开头,后面可接 字母、数字、下划线、连字符

连字符:
  box-left    box-right    box-center
下划线
 box_left    box_right    box_center
驼峰式
 boxleft    boxright    boxcenter

 

上一篇: 标签

下一篇: Vue 生命周期