基础系列(2)--- css1
程序员文章站
2022-03-22 12:27:40
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
推荐阅读
-
PHP字符串函数系列之nl2br(),在字符串中的每个新行 ( ) 之前插入 HTML 换行符br
-
WebGL2系列之实例数组(Instanced Arrays)
-
5000mAh电池!Redmi 8系列今天宣布:告别2GB内存
-
苹果彻底无视Intel的节奏:下一代Mac系列将首发M2 性能更强劲
-
Spring Boot2 系列教程(一) | 如何使用 IDEA 构建 Spring Boot 工程
-
【OCP|052】OCP最新题库解析系列-2
-
NVIDIA发布六款Quadro系列专业卡:16GB HBM2显存
-
Python2与python3中 for 循环语句基础与实例分析
-
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
-
java基础语法2