[前端学习笔记] CSS基础笔记01

一、引入样式表的三种方式

1. 行内样式表
   在指定标签中直接加入style属性，适合于修改简单样式。

 <!-- 在双引号里写样式！！ -->
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>

2. 内部样式表
   在html页面内部写样式,但是是单独写到style标签内部。理论上可以放在HTML文档的任何地方，但一般会放在head标签内。
   【优点】可以方便控制当前整个页面中的元素样式设置；结构代码清晰。
   【缺点】并没有实现结构与样式完全分离。

<!-- 1。内部样式表：style标签内编写css代码 -->
<style>
      div {
    
         color: pink;
      }
</style>

3. 外部样式表
   写入CSS文件中，在实际开发中用，适合样式比较多的情况，实现结构与样式分离。

<link rel="stylesheet" href="style.css">

优先级：行内样式>内部样式表>外部样式表

二、选择器

选择器的权重如下：
伪元素选择器、标签选择器——权重为1
类选择器、属性选择器、伪类选择器——权重为10

1. 标签选择器

/* 标签选择器 : 写上标签名 */
<style>
    p {
    
        color: green;
    }
    div {
    
        color: pink;
    }
</style>

2. 类选择器

<div class="red">我想变红色</div>

<style>
/* 类选择器口诀: 样式点定义,结构class调用,一个或多个,开发最常用 */
.red {
    
          color: red;
      }
</style>

3. id选择器

<div id="pink">迈克尔·杰克逊</div>

<style>
/* id选择器的口诀: 样式#定义,结构id调用,只能调用一次,别人切勿使用 */
      #pink {
    
          color: pink;
      }
</style>

4. 通配符选择器

<style>
/* 把所有标签文本颜色都改为红色 */
     * {
    
         color: red;
     }
</style>

5. 属性选择器

<style>
	/* input有value属性的 */
    input[value] {
    
        color: pink;
    }
    
/* 正则表达式 =是绝对等于；*=是包含这个元素；^=以这个开头；$=以这个结尾 */
	/* input type=text */
    input[type=text] {
    
        color: orange;
    }
    /* class 以icon开头的 */
    div[class^=icon] {
    
        color: red;
    }
    /* class 以data结尾的 */
    section[class$=data] {
    
        color: blue;
    }
    /* class 包含icon1的 */
    section[class*=icon1]{
    
        background-color: blueviolet;
    }
</style>

6. 后代兄弟选择器

<style>
/* 1. 全部后代 */
 	ul li {
    
         background-color: pink;