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

css基础知识

程序员文章站 2022-03-27 09:17:40
...

css 基础知识

  • css 是什么?层叠样式表
  • css 主要功能是什么? 元素样式和元素布局
css 定义 功能 备注
css 是什么? 层叠样式表 元素长什么样
css 主要功能 元素样式和元素布局
css 样式来源 用户代理样式和用户自定义样式 用户代理样式为浏览器默认,用户自定义样式是用户可修改的样式

样式的来源

  • 1、浏览器默认:用户代理样式
  • 2、用户自定义样式
用户自定义样式 使用方式
行内样式 style=”color=”red””
文档样式 <style>h1{color:red;}</style>
外部样式 <link rel="stylesheet" href="css/style.css" >
继承样式 子元素继承父元素部分元素可被继承如 color 和 background-color: red;
样式优先级 行内样式>文档样式>外部样式>代理样式>继承样式
样式书写顺序 写在后面的会覆盖前面的
  • 1 行内样式
  1. <!-- 行内样式 -->
  2. <h1 color="red">hello word</h1>
  • 2 文档样式也叫内部样式
  1. <h1>hello word</h1>
  2. <!-- 内部样式也叫文档样式 -->
  3. <style>
  4. h1 {
  5. color: red;
  6. }
  7. </style>
  • 3 外连样式也叫外部样式
  1. <!-- 外连样式 -->
  2. <link rel="stylesheet" href="css/style.css" />
  3. <h1>hello word</h1>

更改元素样式需要通过以下方法

  • 1 使用元素选择器查找元素
  • 2 更改元素样式规则
基本选择器 使用说明 上下文选择器 使用说明
元素或标签 如 h1、p、div…等 子元素> .list>li{}
属性选择器 如 h1[hello=”world”] 后代元素(空格) .list li{}
群组选择器 如 h1,h2{color:red;}用逗号分隔 相邻兄弟+ .list+li{}
通配选择器 *表示所有元素!important *别 所有兄弟~ .list ~{}

基本选择器实例

  1. <!-- 元素或标签选择器使用方法h1{color:red;} -->
  2. <h1>hello world</h1>
  3. <p>p标签选择器</p>
  4. <style>
  5. h1 {
  6. color: red;
  7. }
  8. </style>
  9. <!-- 属性选择器使用方法h1[hello="world"]{color:red} -->
  10. <h1 hello="world"></h1>
  11. <style>
  12. h1[hello="world"] {
  13. color: red;
  14. }
  15. </style>
  16. <!-- 群组选择器h1#title,h2.title{color:red;} -->
  17. <h1 id="title">hello world</h1>
  18. <h2 class="title">hello world</h2>
  19. <style>
  20. h1#title,
  21. h2.title {
  22. color: red;
  23. }
  24. </style>
  25. <!-- 通配选择器*加上!important为*别 -->
  26. <style>
  27. html body * {
  28. color: red !important;
  29. }
  30. </style>

上下文选择器(根据位置或者特征选择)

  1. <ul class="list">
  2. <li class="item">item1</li>
  3. <li class="item second">item2</li>
  4. <li class="item">item3</li>
  5. <li class="item">item4</li>
  6. <li class="item">item5</li>
  7. <li class="item">item6</li>
  8. <li class="item">item7</li>
  9. <li class="item">item8</li>
  10. </ul>
  11. <style>
  12. /* 上下文选择器,1 子元素> */
  13. .list > li {
  14. border: 1px solid #ccc;
  15. }
  16. /* 上下文选择器,2 后代选择器 空格 */
  17. .list li {
  18. border: 2px solid #bbcc;
  19. }
  20. /* 上下文选择器,3 相邻兄弟选择器+ */
  21. .item.second + li {
  22. background-color: darkorange;
  23. }
  24. /* 上下文选择器,4 所有兄弟选择器 ~ */
  25. .item.second ~ li {
  26. color: darkseagreen;
  27. }
  28. </style>

选择器的权重 Selector Specificity: (0, 0, 1)

  • 1 标签选择器权重是个位(0,0,1)表示标签数量为 1,十位 class 为 0,百位 id 为 0
  • 2 class 属性选择器权重是十位(0,1,0)表示十位 class 数量为 1,百位 id 为 0,标签为 0
  • 3 id 属性选择器权重是百位(1,0,0)表示百位 id 数量为 1,class 为 0,标签为 0
  1. <h1 class="title">item</h2>
  2. <div class="title vip">增加class数量以提升选择器权重</div>
  3. <style>
  4. /* 标签选择器,权重为(0,0,1) */
  5. h1{
  6. color:red;
  7. }
  8. /* class选择器,权重为(0,1,0) */
  9. .title{
  10. color:red;
  11. }
  12. /* 增加选择器权重也就是增加class的数量,权重为(0,2,0) */
  13. .title.vip{
  14. color:red;
  15. }
  16. </style>
  • 由于 id 属性的选择器为百位,权重太高,不方便做层叠样式覆盖,所以不建议使用 id 属性,tag 标签的数量有限,所以一般也不采用此属性来做选择器,class 可以任意命名无限增加,为了代码更具有弹性,所以建议尽量选择它来做开发