前端——CSS的引入方式、选择器

前端——CSS的引入方式、选择器

什么是CSS？

层叠样式表（就是用来调节标签的样式）

CSS注释

/*单行注释*/

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

注释的使用

css应该是一个独立的文件

/*页面通用样式*/
/*顶部导航栏样式*/
/*侧边菜单栏样式*/
……

css语法结构

选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;……}

css三种引入方式

  • 外部css文件（最正规的书写方式）

    /*mycss*/
/*这是一个非常牛逼的页面的css样式文件*/
/*公共样式*/
p {
    color: aquamarine;
}
/*外部引用css文件*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<p>秦时明月汉时关</p>
</body>
</html>
  • head内style标签内部直接书写css代码 
    /*head内style标签内部直接书写css代码*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
<p>秦时明月汉时关</p>
</body>
</html>
  • 标签内部通过style属性直接书写对应的样式（不推荐） 
    /*标签内部通过style属性直接书写对应的样式*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="color: red">秦时明月汉时关</p>
</body>
</html>

css选择器

基本选择器

  • 标签选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {   /*将页面中所有的div标签内的文本变成红色*/
            color: red;
        }
    </style>
</head>
<body>
<div class="c1">我是div我的class为c1       /*---> 变红色*/
    <span>我是div内部的span</span>     /*---> 变红色*/
</div>
<p id="d1" class="c1">我是p我的id为d1我的class为c1</p>
<div>我是div</div>      /*---> 变红色*/
<span class="c1">我是span我的class为c1</span>
<p>我是p</p>
<span id="d2">我是span我的id为d2</span>
</body>
</html>
  • 类选择器：. 属性值 {css样式} 重点：一定记住是.号 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*类选择器*/
        .c1 {   /*将页面中具有c1类属性值的标签内部文本全部变成蓝色*/
            color: blue;
        }
    </style>
</head>
<body>
<div class="c1">我是div我的class为c1       /*---> 变蓝色*/
    <br>
    <span>我是div内部的span</span>     /*---> 变蓝色*/
</div>
<p id="d1" class="c1">我是p我的id为d1我的class为c1</p>        /*---> 变蓝色*/
<div>我是div</div>
<span class="c1">我是span我的class为c1</span>      /*---> 变蓝色*/
<p>我是p</p>
<span id="d2">我是span我的id为d2</span>
</body>
</html>
  • id选择器：#id值{css样式} 重点：一定记住是#号 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {       /*将页面中id为d1的标签内所有文本变成黄色*/
            color: yellow;
        }
    </style>
</head>
<body>
<div class="c1">我是div我的class为c1
    <br>
    <span>我是div内部的span</span>
</div>
<p id="d1" class="c1">我是p我的id为d1我的class为c1</p>        /*---> 变黄色*/
<div>我是div</div>
<span class="c1">我是span我的class为c1</span>
<p>我是p</p>
<span id="d2">我是span我的id为d2</span>
</body>
</html>
  • 通用选择器：{css样式} 重点：**** 号 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通用选择器*/
        * {     /*将当前页面内的所有标签内所有内容改为绿色*/
            color: green;
        }
    </style>
</head>
<body>
<div class="c1">我是div我的class为c1       /*---> 变绿色*/
    <br>
    <span>我是div内部的span</span>     /*---> 变绿色*/
</div>
<p id="d1" class="c1">我是p我的id为d1我的class为c1</p>    /*---> 变绿色*/
<div>我是div</div>      /*---> 变绿色*/
<span class="c1">我是span我的class为c1</span>      /*---> 变绿色*/
<p>我是p</p>        /*---> 变绿色*/
<span id="d2">我是span我的id为d2</span>        /*---> 绿色*/
</body>
</html>

组合选择器(重点记住特殊符号)

  • 后代选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*后代选择器*/
        div span {      /*空格表示div内部的  没有层级限制*/
            color: red;
        }
    </style>
</head>
<body>
<span>div上面的span</span>
<br>
<span>div上面的span</span>
<div>
    <span>div内部第一个span</span>     /*---> 变红色*/
    <p>div内部的p
        <br>
        <span>div内部的p的span</span> /*---> 变红色*/
    </p>
    <span>div内部最后一个span</span>        /*---> 变红色*/
</div>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<div>弟弟舔她
    <p>放开那个女孩，让我来！</p>
</div>
<span>我会把你活活sao死</span>
</body>
</html>
  • 儿子选择器 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*儿子选择器*/
        div > span {    /*> 表示div内部的儿子  有层级限制*/
            color: blue;
        }
    </style>
</head>
<body>
<span>div上面的span</span>
<br>
<span>div上面的span</span>
<div>
    <span>div内部第一个span</span>     /*---> 变蓝色*/
    <p>div内部的p
        <br>
        <span>div内部的p的span</span>
    </p>
    <span>div内部最后一个span</span>        /*---> 变蓝色*/
</div>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<div>弟弟舔她
    <p>放开那个女孩，让我来！</p>
</div>
<span>我会把你活活sao死</span>
</body>
</html>
  • 毗邻选择器 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*毗邻选择器*/
        div + span {
            color: green;
        }
    </style>
</head>
<body>
<span>div上面的span</span>
<br>
<span>div上面的span</span>
<div>
    <span>div内部第一个span</span>
    <p>div内部的p
        <br>
        <span>div内部的p的span</span>
    </p>
    <span>div内部最后一个span</span>
</div>
<span>div下面的span</span>       /*---> 变绿色*/
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<div>弟弟舔她
    <p>放开那个女孩，让我来！</p>
</div>
<span>我会把你活活sao死</span>       /*---> 变绿色*/
</body>
</html>
  • 弟弟选择器 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*弟弟选择器*/
        div ~ span {        /*同级别下的所有标签*/
            color: yellow;
        }
    </style>
</head>
<body>
<span>div上面的span</span>
<br>
<span>div上面的span</span>
<div>
    <span>div内部第一个span</span>
    <p>div内部的p
        <br>
        <span>div内部的p的span</span>
    </p>
    <span>div内部最后一个span</span>
</div>
<span>div下面的span</span>       /*---> 变黄色*/
<br>
<span>div下面的span</span>       /*---> 变黄色*/
<br>
<span>div下面的span</span>       /*---> 变黄色*/
<br>
<span>div下面的span</span>       /*---> 变黄色*/
<br>
<div>弟弟舔她
    <p>放开那个女孩，让我来！</p>
</div>
<span>我会把你活活sao死</span>       /*---> 变黄色*/
</body>
</html>

属性选择器（根据属性或属性值来选择标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*属性选择器*/
        [username] {    /*找到页面上所有具有username属性名的标签*/
            color: green;
        }

        [username='kang'] {     /*找到页面上所有具有username属性名并且属性值为kang的标签*/
            color: red;
        }

        input[username='a'] {       /*找到页面上所有具有username属性名并且属性值为kang的input标签*/
            background-color: yellow;
        }
    </style>
</head>
<body>
<input type="text" username="a">
<input type="text" username="b">
<input type="text" username="c">
<p username="kang">秦时明月汉时关，万里长征人未还</p>
<div username="zhao">秦时明月汉时关，万里长征人未还</div>
<span username="li">秦时明月汉时关，万里长征人未还</span>
</body>
</html>

分组与嵌套

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分组与嵌套</title>
    <style>
        /*div, span, p {*/
            /*color: blue;*/
        /*}*/

        /*.c1, #d1, p {*/
            /*color: red;*/
        /*}*/

        .c1 h2 {    /*找具有c1属性值标签的后代h2*/
            color: aquamarine;
        }
    </style>
</head>
<body>
<div class="c1">找工作，拿高薪，牛皮~~
    <h2>我是h标签</h2>
</div>
<span id="d1">找工作，拿高薪，牛皮~~</span>
<p>你好骚啊~~</p>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a:link {    /*未点击过为红色*/
            color: red;
        }

        a:hover {   /*鼠标悬浮在上面是绿色*/
            color: green;
        }

        a:active {  /*点击过后为黄色*/
            color: yellow;
        }

        input:focus {   /*聚焦时 背景为粉色*/
            background-color: deeppink;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://lcxy.sougou.com/">搜狗</a>
<a href="https://www.LOL.com">撸啊撸</a>

<input type="text">
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        div:before {    /*在div标签内容前添加*/
            content: '瞬间爆炸';
            color: red;
        }

        div:after {     /*在div标签内容后添加*/
            content: '啊啊啊我死了！';
            color: yellow;
        }
    </style>
</head>
<body>
<div>奥术大师大所大大所大所大所大</div>
</body>
</html>

原文地址：https://www.cnblogs.com/aheng/p/12104002.html

时间： 2024-12-09 01:41:48

前端——CSS的引入方式、选择器的相关文章

前端css的引入方式

!!!前端css的引入方式# 1.css介绍# 现在互联网分为三层:# html:超文本标记语言,从语义的角度描述页面结构.# CSS:层叠样式表,从审美的角度负责页面样式# JavaScript:从交互的角度描述页面行为## css: cascading style sheet, 层叠样式表,CSS作用是给HTML添加各种样式,简单一句话# CSs就是将网页内容和显示样式进行分离,提高显示功能## CSS优点# 使数据和显示分开,# 降低网络流量# 使整个网站视觉效果一致# 是开发效率提高(一

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 ???叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 ????特点: ??????1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠 ??????2.使数据和

css代码引入方式与基本选择器

引子 css功能:对html元素进行渲染布局 1.查找标签元素 2.操作标签(加对应的css属性) 由两个主要的部分构成:选择器,以及多条声明 ==================================== css代码引入方式 一.行内式(不涉及查找,跟html绑定,难维护) <p style="color: red;font-size: 24px">hello world</p> 二.嵌入式:head标签内嵌style标签 选择器 标签选择器 id选

CSS的引入方式及选择器

CSS的引入方式第一种:在head中 <style></style> 嵌入式第二种:在head中 <link href="index.css" rel="stylesheet"> 链接式 (先加载css,再加载html)推荐第三种:在head中 <style>@import "index.css";</style>> 导入式(先加载html,再加载css)第四种:直接在html标签

前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS的三种引入方式 选择器 伪类.伪元素选择器速查 CSS选择器优先级***** 选择器相同的情况下 选择器不同的情况下 选择器权重 样式调整技巧 本篇博客绝大多数内容来源网上,感谢作者的无私分享~ CSS(Cascading Style Sheet) 用来调节标签样式的,又称层叠样式表 CSS注释 /* 单行注释 */ /* 多行注释 */ 经典写法 /* 这是购物车页面的样式表(一般放css文件的第一行

浅谈CSS，引入方式，选择器

全称Cascading Style sheets ,中文名称:层叠样式表/级联样式表.CSS就是给我们的HTML网页加样式的东西,它可以让我们的html网页变得更加绚丽多彩,它有三种引入方式. 第一种内嵌式:直接写在我们的html标签里面的,如:  <div style="属性:属性值;"> </div>        这就是内嵌也叫嵌入. 第二种内联写法:在我们的html网页里面的head里面添加一个style标记,然后在里面写,如: <head>

CSS 引入方式 选择器

---恢复内容开始--- CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 步骤: A.找到标签 B.操作标签 一 CSS四种引入方式 1.行内式 <p style="background-color: rebeccapurple">hello yuan</p> 2.嵌入式 <head> <meta charset="UTF-8">

css的引入方式

一般来说只有3种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下: <link href="css/style.css" rel="stylesheet" type="text/css"> 2.在Html头部用<style></style>包起来,在这里面编写样式: <style type="text/css"> *{ padding: 0;margin: 0 }

CSS 从入门到放弃系列(一)：CSS的引入方式

css的四种引入方式 内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"></div> 这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个<div>拥有相同的样式,你不得不重复地为每个<div>添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码.很显然,内联方式引入 CSS 代码会导致 HTML 代码变