前端之css（一）

目录

• 什么是css
• 注释
• CSS三种引入方式
• 基本选择器
  • 元素选择器
  • id选择器
  • 类选择器
  • 通用选择器
• 组合选择器
  • 后代选择器
  • 儿子选择器
  • 弟弟选择器
  • 毗邻选择器
• 属性选择器
• 分组与嵌套
• 伪类选择器
• 伪元素选择器
  • first-letter
  • before
  • after
• 选择器优先级

什么是css

css： 层叠样式表

css语法结构：

选择器 {属性1：属性值1}

注释

/*单行注释*/

/*
多行注释1
多行注释2
*/

CSS三种引入方式

• 经过link标签引入外部的css文件（最正规用法）

<link rel="stylesheet" href="01%20css简介.css">

• 直接在html页面上的head内经过style标签直接书写css代码

<style>
    h1 {
        color: red;
    }
</style>

• 行内标签（直接在标签内部经过style标签写）（不推荐使用）

<h1 style="color: yellow">文本信息</h1>

基本选择器

元素选择器

/*让全部的span标签变成红色*/

<style>
    span {
        color: red;
    }
</style>

id选择器

<style>

        #d2 {
            color: gold;
        }
    </style>

类选择器

<style>
        .c1 {
            color: red;
        }
    </style>

通用选择器

选择全部

<style>
        * {
            color: orchid;
        }
    </style>

组合选择器

后代选择器

儿子选择器

弟弟选择器

毗邻选择器

属性选择器

1. 找含有某个属性名的标签

1. 找含有某个属性名而且属性值是什么的标签

1. 找p标签 含有某个属性名而且属性值是什么 的标签

• 任何的标签都有本身的默认的属性 id class
• 标签支持自定义任何多的属性（也就意味着能够让标签帮你携带一些额外的数据）

分组与嵌套

分组

嵌套

伪类选择器

a标签有四种状态

• 没有被点击过
• 鼠标悬浮在上面
• 点击以后不松手
• 点击以后 再回到原来的页面

咱们将input框鼠标带你进去以后的那个状态叫作input获取焦点，

鼠标移出去以后的状态叫作input框失去焦点

<style>
        a:link {    /*没有点击为红色*/
            color: red;
        }
        a:hover {   /*鼠标悬浮以后为蓝色*/
            color: blue;
        }
        a:active {  /*点击以后不放手为黄色*/
            color: yellow;
        }
        a:visited {     /*点击以后回到原来的页面 显示为绿色*/
            color: green;
        }
    </style>

伪元素选择器

能够清除浮动带来的负面影响，能够经过css添加文本内容

first-letter

经常使用的给首字母设置特殊样式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每一个<p>元素以前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每一个<p>元素以后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

选择器优先级

1. 选择器相同的状况下， 引入方式不一样

   遵循就近原则， 谁离标签更近，就听谁的

2. 选择器不一样的状况下

   行内选择器 > id选择器 > 类选择器 > 元素选择器