一. CSS介绍

CSS定义

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

语法结构

div{
    color: green;
    backgroud-color: black;
}
选择器{css样式:演示对应的值;}

CSS的引用方式

#方式一:(内部样式表)
    head标签中写以下内容:
        <style>
            div{
            color:green;
            background-color: black;
            }
        </style>
#方式二:(行内样式(内联样式))
    <div style="color:blue;backgroud-color:black;">
        少壮不努力,老大徒伤悲.
    </div>
#方式三:(常用的) 外部样式
    第一步: 创建一个css文件
    第二步: 在html文件中引入:<link rel="stylesheet" href="路径">
    第三步: css文件中的样式的写法:
            div{color:green;xx:xx;.....}

二. 选择器

1. 基本选择器

元素选择器:(标签名)
    p {color:"red";}

id选择器:按照id属性来找对应的标签
    # id属性对应的值{css属性:属性值;}
    示例:
    <style>
        #d1 {
            color:red;
        }
    </style>
    ---body部分内容----
    <div id="d1" class="c1">

类选择器:
    .class属性对应的值{css属性:属性值}
    示例:
        <style>
            .c1{
                color:red;
        }
    </style>
    ---body部分内容----
    <div id="d1" class="c1">

2. 组合选择器

后代选择器
选择器 空格 子选择器{属性名:属性值;}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        .c1 a{  /*c1里面的所有的a标签 */
            color:green;
        }
    </style>
</head>
<body>

<p>静夜思</p>
<a href="">床前明月光</a>
<div class="c1">
    <a href="">疑是地上霜</a>
    <div>
        <a href="">举头望明月</a>
        <div>
            <a href="">低头思故乡</a>
        </div>
    </div>
</div>
<a href="">诗人</a>
<div class="c2">
    <a href="">李白</a>
</div>

</body>
</html>
儿子选择器
.c1>a{  /* c1里面的儿子a标签 (子孙a标签不受影响)*/
    color:red;
}
示例:同上
毗邻选择器
.c1+a{  /* 与c1同级的下面的a标签,上面的a标签不会受影响*/
    color:red;
}
找的是紧挨着class属性为c1的标签的下面的标签
示例:同上
弟弟选择器
.c1~p{  /* 与c1同级的下面的所有a标签,上面的a不受影响 */
    color:green;
}
示例:同上

属性选择器

通过标签的属性来找到对应的标签
写法:
    [xxx]{color:red;}   找到xxx属性的所有标签
    [xxx='p2']{color:red;}  找到有xxx属性的并且属性值为p2的所有标签
    p[title]{color:red;}    找到所有有title属性的p标签
    p[title = 'p2'] {color:red;}    找到所有有title属性的并且属性值为p2的p标签
    示例:
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>诗</title>
            <style>
                p[xxx='p2']{
                    color:red;
                }
            </style>
        </head>
        <body>

        <p>p1</p>
        <p xxx="p2">p2</p>
        <p xxx="p3">p3</p>
        </body>
        </html>

组合选择器

写法:
    div,p{
        color:red;
    }
解释:div选择器和p选择器找到所有标签设置共同的样式.
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>hehe</title>
    <style>
        div,p{
            color:red;
        }
    </style>
</head>
<body>

<div>div1</div>
<p>p1</p>

</body>
</html>

伪类选择器

示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>hehe</title>
    <style>
        a:link{  /* a标签访问前设置样式 */
            color:red;
        }
        a:active{   /* a标签鼠标点下去显示样式 */
            color:green;
        }
        a:visited{  /* a标签访问后显示样式 */
            color:blue;
        }
        a:hover{    /* 鼠标悬浮到a标签时显示样式 */
            color:purple;
        }
        div:hover{  /* 鼠标悬浮到div标签时显示样式 */
            background-color: antiquewhite;

        }
        input:focus{    /* input标签捕获光标时的样式显示 */
            background-color: orange;
        }
    </style>
</head>
<body>

<a href="http://www.baidu.com">百度</a>

<div style="width: 200px;height: 200px;"></div>
<input type="text">

</body>
</html>

伪元素选择器

first-letter:文本内容首字母设置
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>努力</title>
    <style>
        div:first-letter {
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div>
    少壮不努力,老大徒伤悲
</div>

</body>

</html>
before示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>奋斗</title>
    <style>
        div:before {
            content: "要努力啊";
            color: antiquewhite;
        }
    </style>
</head>
<body>

<div>
    少壮不努力,老大徒伤悲
</div>

</body>
</html>
after示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>加油</title>
    <style>
        div:after {
            content: "要努力啊";
            color: antiquewhite;
        }
    </style>
</head>
<body>

<div>
    少壮不努力,老大徒伤悲
</div>

</body>
</html>

CSS权重

权重越高,对应选择器的样式会被优先显示
组合选择器,各选择器的权重相加
权重不进位,11类选择器组合到一起,也没有一个id选择器的优先级大,小就是小
默认css样式是可以继承的,继承的权重为0
权重相同的选择器,谁后写的,用谁的

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>美女</title>
    <style>
        div .c1{
            color:red;
        }
        .c2 .c1 {
            color: blue;
        }
        /*#d1{*/
        /*    color:yellow;*/
        /*  }*/
        /*div{*/
        /*    color:green;*/
        /*}*/
        /*.c2{*/
        /*    color: antiquewhite;*/
        /*}*/
    </style>
</head>
<body>

<div class="c2">
    少壮不努力,老大徒伤悲.
<!--    <div class="c1" id="d1" style="color: antiquewhite">-->
    <div class="c1" id="d1" >
        努力啊!兄弟!
    </div>
</div>
</body>
</html>

ps: 特别注意的是 a标签设置样式,需要选中设置,不能继承父级标签的样式

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /*.c3 a{*/
        /*    color:red;*/
        /*}*/
        .c3{
            color:red;
        }
    </style>
</head>
<body>
<div class="c3">
    <a href="">百度</a>
</div>
</body>
</html>

百万年薪python之路 -- 前端CSS基础介绍的更多相关文章

  1. 百万年薪python之路 -- 前端CSS样式

    CSS样式 控制高度和宽度 width宽度 height高度 块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定. 示例: <!DOCTYPE ht ...

  2. 百万年薪python之路 -- 基础数据类型的补充

    基础数据类型的补充 str: 首字母大写 name = 'alexdasx' new_name = name.capitalize() print(new_name) 通过元素查找下标 从左到右 只查 ...

  3. 百万年薪python之路 -- JS基础介绍及数据类型

    JS代码的引入 方式1: <script> alert('兽人永不为奴!') </script> 方式2:外部文件引入 src属性值为js文件路径 <script src ...

  4. 百万年薪python之路 -- HTML基础

    一. Web标准 web标准: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web标准规范的分类:结构标准.表现标准.行为标准. 结构:html.表示:c ...

  5. 百万年薪python之路 -- 基础数据类型的补充练习

    1.看代码写结果 v1 = [1,2,3,4,5] v2 = [v1,v1,v1] v1.append(6) print(v1) print(v2) [1,2,3,4,5,6] [[1,2,3,4,5 ...

  6. 百万年薪python之路 -- 数据库初始

    一. 数据库初始 1. 为什么要有数据库? ​ 先来一个场景: ​ 假设现在你已经是某大型互联网公司的高级程序员,让你写一个火车票购票系统,来hold住十一期间全国的购票需求,你怎么写? 由于在同一时 ...

  7. 百万年薪python之路 -- 面向对象之继承

    面向对象之继承 1.什么是面向对象的继承 继承(英语:inheritance)是面向对象软件技术当中的一个概念. 通俗易懂的理解是:子承父业,合法继承家产 专业的理解是:子类可以完全使用父类的方法和属 ...

  8. 百万年薪python之路 -- 模块二

    1. 序列化模块 什么是序列化呢? 序列化的本质就是将一种数据结构(如字典.列表)等转换成一个特殊的序列(字符串或者bytes)的过程就叫做序列化. 为什么要有序列化模块? 如果你写入文件中的字符串是 ...

  9. 百万年薪python之路 -- 并发编程之 协程

    协程 一. 协程的引入 本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两 ...

随机推荐

  1. 搭建vagrant开发环境

    最近正好用着Vagrant搭建开发环境,写一篇文章记录一下. Vagrant目前是国内互联网公司应用最多的内部开发环境工具. Mac. Windows搭建是一样的,我是在Mac下搭建的环境. vagr ...

  2. ASP.NET Core 3.0 gRPC 双向流

    目录 ASP.NET Core 3.0 使用gRPC ASP.NET Core 3.0 gRPC 双向流 ASP.NET Core 3.0 gRPC 认证授权 一.前言 在前一文 <ASP.NE ...

  3. Mysql - 关于relay_log_recovery参数的测试

    一.概述 官方文档中对relay_log_recovery参数的解释 Enables automatic relay log recovery immediately following server ...

  4. 使用python发邮件（qq邮箱）

    今天打算用QQ邮箱作为示例使用的邮箱,其他邮箱基本操作一样. 第一步:首先获取QQ邮箱授权码 1.进入QQ邮箱首页,点击设置,如图, 2.然后点击账户 3.拉到这个地方,开启POP3/SMTP服务服务 ...

  5. java架构之路-（mysql底层原理）Mysql事务隔离与MVCC

    上几篇博客我们大致讲了一下mysql的底层结构,什么B+tree,什么Hash需要回行啊,再就是讲了mysql优化的explain,这次我们来说说mysql的锁. mysql锁 锁从性能上分为乐观锁( ...

  6. .Net Reactor混淆导致匿名类处理出现的问题处理分析

    .Net Reactor 是一款比较不错的混淆工具,比VS自带的那个好用很多,一直以来也陪伴着我们的成长,虽然没有完美的混淆工具,不过也算还是不错的,至少能在一定程度上对DLL进行一定的保护处理. 不 ...

  7. 将CDH中的hive和hbase相互整合使用

    一..hbase与hive的兼容版本: hive0.90与hbase0.92是兼容的,早期的hive版本与hbase0.89/0.90兼容,不需要自己编译. hive1.x与hbase0.98.x或则 ...

  8. SpringBootSecurity学习（13）前后端分离版之JWT

    JWT 使用 前面简单介绍了把默认的页面登录改为前后端分离的接口异步登录的方法,可以帮我们实现基本的前后端分离登录功能.但是这种基本的登录和前面的页面登录还有一个一样的地方,就是使用session和c ...

  9. Angular 文件上传、下载

    1. 文件上传 本地可同时选择多个文件 将本地所选择的文件列出来 单个文件上传至服务器: 删除本地选择的文件 样式使用了bootstrap的样式 1. html - file.component.ht ...

  10. office2019激活

    这个是在网上偶然看见的一个激活方式,分享一下. 复制如下代码保存后修改文件后缀名为".bat",请注意有一个点,然后保存以管理员身份运行即可: @echo off(cd /d &q ...