软件系统开发定制CSS引入方式 Emmet语法 CSS复合选择器

🍓个人主页： 

🍒系列专栏：     

目录

一.CSS软件系统开发定制的撒比中样式表

    按照CSS软件系统开发定制样式书写的位置（软件系统开发定制或者引入的方式）CSS软件系统开发定制分为三大类：

  1. 软件系统开发定制行内样式表（行内式）
  2. 软件系统开发定制软件系统开发定制软件系统开发定制内部样式表（嵌入式）
  3. 软件系统开发定制外部样式表（链接式）

1.2 内部样式表


        内部样式表（软件系统开发定制内嵌样式表）式写到HTML页面内部，软件系统开发定制是将所有的CSS软件系统开发定制代码抽取出来，软件系统开发定制单独放到一个<style>标签中。

  1. <style>
  2.     div {
  3.         color:red;
  4.         font-size: 12px;
  5.         }
  6. </style>
  • <style>软件系统开发定制标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。
  • 通过此种方式，可以方便控制当前整个页面中的元素样式设置。
  • 代码结构清晰，但是并没有实现结构样式完全分离。
  • 使用内部样式表来设定CSS，通常也被称为嵌入式引入，这种方式常用。

1.3表

        行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式适合修改简单的样式。

例如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.     <div style="color: red; font-size: 12px;">行内样式表</div>
  13. </body>
  14.  
  15. </html>
  •  style其实就是标签的属性。
  • 在双引号中间，写法要符合CSS规范。
  • 可以控制当前的标签设置样式
  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
  • 使用行内不样式表设定CSS，通常也被称为行内式引入。

1.4外部样式表

        设计开发中都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用引入外部样式分为两步：

新建一个后缀名为.css 的文件样式，把所有CSS代码都放入该文件中。

在HTML页面中，使用<link> 标签引入这个文件。 <link rel="stylesheet" href="CSS文件路径">

总结：

属性作用
rel定义当前文件与被链接文档之间的关系，在这里需要指定为"style sheet"
href定义所有链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

使用外部样式设定CSS通常也被称为外链接或链接式引入 这种方式式开发中常见的方式。

1.5CSS引入方式的总结

样式表优点缺点使用情况控制范围
行内样式表书写方便权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面
外部样式表完全实现结构样式分离需要引入最多控制多个页面

二.Emmet语法

Emmet语法前身是 zen coding 它使用缩写来提高HTML/CSS 的编写速度。vscode内部已经集成改语法。

  1. 快速生成HTML结构语法
  2. 快速生成CSS样式语法

2.1快速生成HTML结构语法

  1. 生成标签直接按Tab键   div --> Tab --> <div> </div>
  2. 如果想要生成多个相同标签，加上*就可以了。eg: div*3  生成三个div
  3. 如果有父子级关系的标签，可以用 > .比如 ul>li --> <ul> <li> </li> </ul>
  4. 如果有兄弟关系的标签，用+ 就可以了。 比如：div+p --> <div> </div>   <p> </P> 
  5. 如果生成带有类名或者id名字，直接写 .demo或者#two  Tab键就可以了。
  6. 如果生成的div内名是有顺序的，可以用自增符号 $  例如：.demo$*5  生成了五个   <div class="demo"></div>  <div class="demo1"></div>   <div class="demo2"></div>   <div class="demo3"></div>   <div class="demo4"></div>  <div class="demo5"></div>
  7. 如果想要生成的标签内部写内容可以用{ }表示。 例如： div{xxx}   生成 <div>xxx</div>

2.2快速生成CSS样式语法

        CSS基本采取简写形式即可。

  1. 比如w200 按Tab  可生成：width: 200px;
  2. 比如lh26 按Tab    可生成：  line-height: 26;

2.3快速格式化代码

vscode快速格式化代码： shift+alt+f    也可以设置当我们保存页面的时候自动格式化代码。

三.CSS复合选择器

3.1什么是符合选择器

        在CSS中，可以根据选择器的类型把选择器分为  基础选择器和符合选择器

复合选择器建立在基础选择器上，对基本选择器进行组合形成的。

  • 符合选择器可以更准确更高效的选择目标元素(标签)
  • 符合选择器是由,两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的符合选择器包括：后代选择器，子代选择器，并集选择器，伪类选择器等等。

3.2后代选择器

        后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签就成为外层标签的后代。

语法：

元素1  元素2 { 样式声明}

 元素1里面的所有元素2（后代元素）

例如：ul li { 样式声明}  /*选择ul里面所有的li标签元素*/

  • 元素1和元素2中间用空格分隔开来
  • 元素1是父级，元素2 是子级，最终选择的是元素2
  • 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。
  • 元素1与元素2可以是任意基础选择器。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         ol li {
  11.             color: pink;
  12.         }
  13.     </style>
  14. </head>
  15.  
  16. <body>
  17.     <ol>
  18.         <!-- ol 为有序*/ -->
  19.         <li>后代选择器</li>
  20.     </ol>
  21.     <ul>
  22.          <!-- ul为无序  -->
  23.         <li>后代选择器</li>
  24.     </ul>
  25. </body>
  26.  
  27. </html>

3.3子代选择器(重要）

        子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。

语法： 

        元素1 >元素2 { 样式声明}

上述语法表示元素1里面的所有直接后代(子元素) 元素2。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .nav>a {
  11.             color: pink;
  12.         }
  13.     </style>
  14. </head>
  15.  
  16. <body>
  17.     <div class="nav">
  18.         <a href="#">我是儿子</a>
  19.         <p>
  20.             <a href="#">我是孙子</a>
  21.         </p>
  22.     </div>
  23.  
  24. </body>
  25.  
  26. </html>

div>a {样式声明}   /*选择div里面的所有最近一级a标签元素*/

元素1和元素2中间用大于号隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2必须是亲儿子，其孙子，重孙子之类都不归他管，你可以叫它亲儿子选择器。

3.4并集选择器(重要）

        并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div,
  11.         p {
  12.             color: pink;
  13.         }
  14.         /* 将熊大熊二改为红色 */
  15.     </style>
  16. </head>
  17.  
  18. <body>
  19.     <div>熊大</div>
  20.     <p>熊二</p>
  21.     <span>光头强</span>
  22. </body>
  23.  
  24. </html>

并集选择器是各选择器通过英文逗号(,) 链接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法:

       元素1,元素2 {样式声明}

上述语法表示选择元素1和元素2

例如：

ul.div {样式声明}  /*选择u1和div标签元素*/

  • 元素1和元素2中间用逗号隔开
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明

3.5 伪类选择器（鼠标放在文字上面改变颜色）

  • 伪类选择器用于向某些选择器添加特殊的效果。比如：给链接添加特殊效果或者选择第一个，第n个元素。
  • 伪类选择器书写最大的特点是用冒号(:)表示，比如：hover: first-child 
  • 伪类选择器很多，比如 有链接伪类，结构伪类 

3.6链接伪类选择器

a:link选择所有未被访问的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接(鼠标按下未弹起的链接）

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         a:link {
  11.             color: #333;
  12.             text-decoration: none;
  13.         }
  14.     </style>
  15. </head>
  16.  
  17. <body>
  18.     <a href="#">小猪佩奇</a>
  19. </body>
  20.  
  21. </html>

链接伪类选择器注意事项：

  1. 为了确保生效，请按照LVHA的顺序声明  :link-   :visited-    :hover  :active。
  2. 记忆法：love hate 或者 lv宝宝hao
  3. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器在实际中开发的写法：

/*a是标签伪类选择器，所有的链接*/

a {

        color:gray;

}

/* hover 是链接伪类选择器，鼠标经过*/

a:hover {

                color:red;  /*鼠标经过的时候，由原来的灰色变为红色*/

                }        

 3.7 focus 伪类选择器

        :focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况下<input> 类表氮元素才能获取，因此这个选择器也主要争对于表单元素来说。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         input:focus {
  11.             background-color: yellow;
  12.         }
  13.     </style>
  14. </head>
  15.  
  16. <body>
  17.     <input type="text">
  18. </body>
  19.  
  20. </html>

3.8复合选择器总结

选择器作用特征使用情况隔开符号及用法
后代选择器用来选择后代元素可以是子孙后代较多符号是空格 .nav a
后代选择器选择最近一级元素只选亲儿子较少符号是大于 .nav>p
子代选择某些相同样式的元素可用于集体声明较多符号是逗号 .nav;header 实际开发的写法
链接伪类选择不同状态的链接跟链接相关较多重点记住a{}和a:haver
:focus选择获得光标的表单跟表单相关较少input:focus 记住这个写法

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发