Web网页开发-CSS层叠样式表1-笔记

1.CSS的引入方式
(1)内嵌式:把style双标签写在head标签里面,可以影响同种标签
(2)行内式:把style写在标签内部,只能影响当前标签
(3)外链式:创建css文件,使用link将html文件和css文件连接起来
(4)导入式:@import url();将css文件中的内容导入到style标签中


2.CSS的四种基础选择器
(1)标签选择器:使用标签名设置样式,给同标签
(2)类选择器:通过".类名"的方式进行调用,通过类名设置设置样式
(3)id选择器:唯一的,不允许重复,使用"#id名"进行调用
(4)全局选择器:所有标签的样式


3.十六进制表示颜色前需要加#
4.优先级:id选择器>类选择器>标签>全局
5.文本的水平位置:text-align[标题、段落]
6.文本的首行缩进:text-indent:数值+em/px;
   文本装饰:text-decoration:cssnderline[下划线] line-through[删除线] overline[上划线]
7.行高:line-height


8.CSS的五种复合选择器
(1)后代选择器:中间用空格隔开[父-子]
(2)子元素选择器:中间用>隔开,只能选择前面标签的儿子
(3)并集选择器:中间用,隔开,表示和
(4)交集选择器:前面是标签名,后面是类名[.类名],中间不能有空格,既...又...
(5)伪类选择器:hover表示鼠标滑过或者鼠标悬停


9. 超链接:<a></a>
属性:
inherit:继承
text-decoration:去除文本装饰
鼠标滑过 a:hover{

}


10.CSS的三大特征
(1)继承性:子级会继承父级的样式,color,font-,line-height
                   超链接自带颜色和下划线,不会继承父级的样式,用color:inherit;去除
(2)层叠性:对于同一个选择器,设置相同样式,后面的样式会把前面的样式层叠掉
(3)优先级:
                   id>类>标签>全局
                   权重:全局[0]  标签[1]    类[10]   id[100]  行内式[1000]  !important[无穷大]
                   优先级:!important>行内式>id>类和伪类>标签>全局和继承

相关推荐

  1. Web网页开发-CSS层叠样式1-笔记

    2024-01-07 02:26:02       53 阅读
  2. CSS层叠样式)选择器

    2024-01-07 02:26:02       23 阅读
  3. Web网页开发-CSS高级技巧1-笔记

    2024-01-07 02:26:02       61 阅读
  4. css层叠样式——基础css面试题

    2024-01-07 02:26:02       27 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-07 02:26:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-07 02:26:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-07 02:26:02       82 阅读
  4. Python语言-面向对象

    2024-01-07 02:26:02       91 阅读

热门阅读

  1. JVM虚拟机内存区域详情

    2024-01-07 02:26:02       48 阅读
  2. 医院信息系统集成平台—安全保障体系

    2024-01-07 02:26:02       55 阅读
  3. Centos的网络配置

    2024-01-07 02:26:02       54 阅读
  4. day07、SQL语言之复杂查询与视图

    2024-01-07 02:26:02       58 阅读
  5. 大数据开发-某外包公司

    2024-01-07 02:26:02       54 阅读
  6. 动态内存管理:malloc free

    2024-01-07 02:26:02       52 阅读
  7. LeetCode //C - 394. Decode String

    2024-01-07 02:26:02       53 阅读
  8. vue3中的watch

    2024-01-07 02:26:02       58 阅读
  9. 移动端-vue-BScroll用法教程

    2024-01-07 02:26:02       59 阅读
  10. vue3组件数据双向绑定

    2024-01-07 02:26:02       53 阅读