CSS概念及入门

概念

CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表

作用

CSS的作用就是用来规定每个HTML元素表现的样子, 比如

字体的大小
颜色
摆放位置…

CSS也被称为网页的化妆师

区别

与HTML相比，CSS能：
1 能实现html属性所实现不了的样式
2 可以实现标签和样式的分离,提高样式的复用性,页面的其他部分也可以使用

基础语法

CSS由 选择器 + 声明块 组成

<head>
<style>
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

示例:
将h1的字体改成红色

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

CSS引入方式

一.行内样式

<font style="font-size: 1000px; color: green;">新茶上市,欢迎品尝
</font>  (内联样式)
特点:简单,耦合性强,不利于样式和代码的分离,没有复用性

二.内部样式

<style>
    font{
        font-size: 1000px; color: green;   
    }
</style>
<font>新茶上市,欢迎品尝</font> 
特点:实现了代码和样式的分离,可以在当前页面进行复用

三.外部样式

1,将样式抽取到一个font.css文件中
font{
    font-size: 1000px; color: green;   
}
2,在html页面中引入
<link rel="stylesheet" href="./font.css">
<font>新茶上市,欢迎品尝</font>
特点:实现了代码和样式的分离,可以在多个页面进行复用,可以统一网站的风格,
比如换肤

四.三种引入优先级

行内样式的优先级最高的,因为它只为这一行服务

内部样式和外部样式的优先级是一样的,谁最后解析显示谁

CSS基本选择器

作用

选择器的主要作用就是从一堆元素中选出特定的符合要求的元素

id选择器

使用:
通过id属性值来选择元素,一般选择的是唯一一个元素(id就相当于身份证号,同一页面中,id值不要相同)
格式:
#id属性值
语法:

#id名 {
  属性: 值
}

示例:

<p id="username"></p>

类选择器

使用
通过class属性值来选择元素,一般选择的是一批元素
格式
.class属性值
语法:

.类名 {
  属性: 值
}

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>类选择器</title>
  <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
  </style>
</head>
<body>
  <div>Lorem, ipsum dolor.</div>
  <div class="red">Facere, possimus laboriosam.</div>
  <div class="blue">Ducimus, ea perferendis!</div>
  <div class="red">Accusamus, accusantium dolores.</div>
  <div>Eius, eaque magni.</div>
</body>
</html>

元素选择器

使用
通过标签名来选择元素,一般选择的是一批元素
格式
元素名称()
语法:

标签名 {
属性: 值
}

示例: ```html

span01 span02

<a name="Uqpjr"></a>
## 三种优先级
**行内样式>id选择器>类选择器>元素选择器**<br />**结论:越是具体的优先级越高,越是通用模糊的优先级越低**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1{
            color: red;
        }

        .c1{
            color: green;
        }

        div{
            color: yell;
        }
    </style>
</head>
<body>
    <div class="c1" id="d1" style="color: blue;">隔壁老王</div>
</body>
</html>

CSS扩展选择器

并集选择器

作用
同时选择多个选择器
格式
选择器a,选择器b

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 并集选择器 */
        div,p,h1, .c1{
            color: red;
        }
    </style>
</head>
<body>
    <div>有钱人终成眷属</div>
    <p>没钱人亲眼目睹</p>
    <h1>我坐在三轮车上看的清清楚楚</h1>
    <h3 class="c1">没钱人终身痛苦</h3>
</body>

交集选择器

作用
选择同时满足条件的选择器
格式
选择器a.选择器b

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 只让小可爱变成粉红色 -->
    <!-- 找到页面中,既是p标签,又有c1这个类名的标签,设置样式 -->
    <style>
        p.c1{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="c1">小姐姐</div>
    <p>小哥哥</p>
    <p class="c1">小可爱</p>
</body>

后代选择器

作用
选择某一个元素的子孙后代
格式
选择器a 选择器b

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 将h1中的em标签设置成红色 -->
    <style>
        h1 em{
            color: red;
        }
    </style>
</head>
<body>
    <h1>This is a <em>important</em> heading</h1>
    <p>This is a <em>important</em> paragraph.</p>
</body>

子选择器

作用
选择某一个元素的子元素
格式
选择器a>选择器b

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--子选择器-->
    <style>
        h1>strong{
            color: red;
        }
    </style>
</head>
<body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1><!-- strong是h1的儿子 -->
    <h1>This is <em>really <strong>very</strong></em> important.</h1><!-- strong是h1的孙子 -->
</body>

兄弟选择器

作用
选择某一个元素相邻的下一个元素
格式
选择器a+选择器b

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把h1相邻的p标签改成红色 */
        /* 兄弟选择器 */
       h1 + p {color: red;}
    </style>
</head>
<body>
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>

属性选择器

作用
通过属性来选择元素
格式
[属性名] 或者 [属性名=属性值]

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 属性选择器:让密码框里面的光标变成红色 */
        [type=password]{
            color:red;
        }
    </style>

</head>
<body>
    用户名: <input type="text"><br>
    密码: <input type="password">
</body>

伪选择器

作用
选择同一元素的不同状态
格式
a:link {color: red} / 未访问的链接 /
a:visited {color: green} / 已访问的链接 /
a:hover {color: pink} / 鼠标移动到链接上 /
a:active {color: blue} / 选定的链接 /

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {color: red}        /* 未访问的链接 */
        a:visited {color: green}    /* 已访问的链接 */
        a:hover {color: pink}    /* 鼠标移动到链接上 */
        a:active {color: blue}    /* 选中的链接 */
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>

结构伪类选择器

作用
根据元素在html中的结构关系进行直接查找元素
语法
n:关键字取值为 0,1,2,3,4……
通过n可以组成常见的公式
偶数 2n even
奇数 2n+1 2n-1 odd
前5个 -n+5 (注意n必须在前面,不能写成5-n)
从第五个往后 n+5

优势
减少对html中类选择器的依赖,有利于保持代码的间接性
场景
常用于查找父级选择器查找子元素

查找单个元素:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 1、找到第一个子元素，并且为li标签 */
    li:first-child{
      background-color: blue;
    }

    /* 2、找到最后一个子元素，并且为li标签 */
    li:last-child{
      background-color: red;
    }

    /* 3、找到第3个子元素，并且为li标签 */
    li:nth-child(3){
      background-color: aqua;
    }

    /* 4、找到倒数第3个子元素，并且为li标签 */
    li:nth-child(8){
      background-color: green;
    }
    li:nth-last-child(3){
      background-color: blueviolet;
    }

  </style>
</head>
<body>
  <!-- ul>li{我是第$个li}*10 -->
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>
</body>
</html>

查找多个元素:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

    /* 1、找到偶数个li------------------------ */
    li:nth-child(2n){
      background: red;
    }
    li:nth-child(even){
      background: red;
    }


    /* 2、找到奇数个li------------------------ */
    li:nth-child(2n+1){
      background: greenyellow;
    }
    li:nth-child(2n-1){
      background: green;
    }
    li:nth-child(odd){
      background: yellow;
    }


    /* 3、找到前5个------------------------ */
    li:nth-child(-n+5){
      background: blue;
    }


    /* 4、找到从第5个往后(含第5个)-------------------- */
    li:nth-child(n+5){
      background: skyblue;
    }


  </style>
</head>
<body>
  <!-- ul>li{我是第$个li}*10 -->
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>
</body>
</html>

注意事项:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 给第一个a标签设置红色 -->
    <style>
        /* 错误的写法
            :first-child:表示找到当前元素父元素的第一个子元素
        */
        /* li a:first-child{
            color: red;
        } */
        /* 正确的写法:
            先找到第一个li标签,然后在li标签里面找a标签
        */
        li:first-child a{
            color:red;
        }

    </style>
</head>
<body>
    <!-- ul>(li>a{第$个a标签})*10 -->
    <ul>
        <li><a href="">第1个a标签</a></li>
        <li><a href="">第2个a标签</a></li>
        <li><a href="">第3个a标签</a></li>
        <li><a href="">第4个a标签</a></li>
        <li><a href="">第5个a标签</a></li>
        <li><a href="">第6个a标签</a></li>
        <li><a href="">第7个a标签</a></li>
        <li><a href="">第8个a标签</a></li>
        <li><a href="">第9个a标签</a></li>
        <li><a href="">第10个a标签</a></li>
    </ul>
</body>
</html>

emmet语法

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.生成普通的标签,本质上是使用的是标签选择器
           例如: div  p  h1
     -->
     <div></div>
     <p></p>

     <!-- 2,生成div标签+类名,本质上使用的是类选择器 
            例如: .d1 .father .son
    -->
    <div class="d1"></div>
    <div class="father"></div>
    <div class="son"></div>

    <!-- 3.生成div标签+id属性,本质上使用的是id选择器
            例如: #one #d1
    -->
    <div id="one"></div>
    <div id="d1"></div>

    <!-- 4,生成指定标签+类名+属性,本质上使用的交集选择器
            例如: p.red#one
    -->
    <p class="red" id="one"></p>

    <!-- 5,生成带有子元素,本质上使用的是子选择器
            例如:ul>li  .father>.son
    -->
    <ul>
        <li></li>
    </ul>
    <div class="father">
        <div class="son"></div>
    </div>
    <!-- 6,生成内部文本:
            例如 div{我是div}   ul>li{aaa}

    -->
    <div>我是div</div>
    <ul>
        <li>aaa</li>
    </ul>
    <!-- 7,同时生成多个:
        例如 
            p*3
            ul>li*3
            ul>li{aaa}*3

    -->
    <p></p>
    <p></p>
    <p></p>

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>

    <!-- 生成一个单选框:本质上就是使用的是属性选择器
        例如 input[type=radio]
    -->
    <input type="radio">
</body>

CSS常见属性入门

尺寸属性
width 宽度
height 高度
字体属性
font-size 字体大小
边框属性
border 边框
背景属性
background 背景颜色/图片
盒子模型
margin 外边距

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 尺寸属性 */
            width: 200px;
            height:400px;
            /* 背景属性 */
            /* background: pink; */
            background:url(./liuyan.jpg);
            background-size: 100% 100%;
            /* 字体属性 */
            font-size: 30px;
            /* 边框属性 */
            border: 5px solid green;
            /* 盒子模型 */
            margin: 0 auto;/* 水平居中 auto:左边距和右边距自动调节*/
        }
    </style>
</head>
<body>
    <!-- 
        尺寸属性
            width 宽度
            height 高度
        字体属性
            font-size 字体大小
        边框属性
            border 边框
        背景属性
            background 背景颜色/图片
        盒子模型
            margin 外边距
     -->

     <div>李白</div>
</body>

文本相关详细属性

font-size 字体大小
font-weight 字体粗细
默认是normal(400) 700相当于是粗体
font-family 字体系列
微软雅黑宋体楷体隶书
font-style 字体样式
默认是 normal italic:无样式的字体 oblique:倾斜版本

连写: font: normal 700 30px 楷体;

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 

     -->

     <style>
         /*
         font-size 字体大小
         font-weight 字体粗细
            默认是normal(400) 700相当于是粗体
         font-family 字体系列
            微软雅黑 宋体 楷体 隶书
         font-style 字体样式
            默认是 normal italic:无样式的字体  oblique:倾斜版本 
          */
        div{
            font-size:30px;
            font-weight:700;
            font-family:隶书;
            font-style: normal;
         }

         /* 字体的连写
            属性名:font
            属性值:以上单个取值的合写,取值之间通过空格分开

            顺序要求
                style weight size family
                swsf(稍微舒服)
         */
         p{
             font: normal 700 30px 楷体;
         }


    </style>
</head>


<body>
    <div>我是文字</div>

    <p>我是段落</p>
</body>

Web前端

CSS 简介选择器

CSS概念及入门

概念

作用

区别

基础语法

CSS引入方式

一.行内样式

二.内部样式

三.外部样式

四.三种引入优先级

CSS基本选择器

作用

id选择器

类选择器

元素选择器

CSS扩展选择器

并集选择器

交集选择器

后代选择器

子选择器

兄弟选择器

属性选择器

伪选择器

结构伪类选择器

查找单个元素:

查找多个元素:

注意事项:

emmet语法

CSS常见属性入门

文本相关详细属性

CSS 简介 选择器

CSS概念及入门

概念

作用

区别

基础语法

CSS引入方式

一.行内样式

二.内部样式

三.外部样式

四.三种引入优先级

CSS基本选择器

作用

id选择器

类选择器

元素选择器

CSS扩展选择器

并集选择器

交集选择器

后代选择器

子选择器

兄弟选择器

属性选择器

伪选择器

结构伪类选择器

查找单个元素:

查找多个元素:

注意事项:

emmet语法

CSS常见属性入门

文本相关详细属性

CSS 简介选择器