一. 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. APP稳定性测试

    APP稳定性测试-monkey测试     第一篇-App稳定性测试-Monkey(基本操作) 准备工作 1.首先下载好adb工具 2.使用数据线连接电脑,打开usb调试 3.使用win+R打开运行, ...

  2. python2.7过渡到python3.6时遇到的差异总结

    1.Python3中print为一个函数,必须用括号括起来而Python2中print为class print('hello') 2.python3将raw_input和input进行了整合,只有in ...

  3. 安装centos8

    一.     镜像下载 国内源下载镜像:(推荐) http://mirrors.aliyun.com/centos/8.0.1905/isos/x86_64/CentOS-8-x86_64-1905- ...

  4. # C# 中的Task创建指南

    本文还处于草稿阶段,难免还有错误修改改正,逻辑还不是很清晰,笔者会努力完善,长期更新! [0000] 前言 标题起得有些"大",意在集大家的力量,总结出来一份关于Task相对&qu ...

  5. java使用POI操作excel文件,实现批量导出,和导入

    一.POI的定义 JAVA中操作Excel的有两种比较主流的工具包: JXL 和 POI .jxl 只能操作Excel 95, 97, 2000也即以.xls为后缀的excel.而poi可以操作Exc ...

  6. Shell之脚本检查与调试

    目录 Shell之脚本检查与调试 参考 脚本语法检查 脚本运行调试 Shell之脚本检查与调试

  7. JAVA TCP/IP网络通讯编程（一）

    一个实例通过client端和server端通讯 客户端发送:“我是客户端,请多关照” 服务端回复:“收到来自于"+s.getInetAddress().getHostName()+" ...

  8. JDK 1.8 之 Map.merge()

    Map 中ConcurrentHashMap是线程安全的,但不是所有操作都是,例如get()之后再put()就不是了,这时使用merge()确保没有更新会丢失. 因为Map.merge()意味着我们可 ...

  9. SpringBootSecurity学习（19）前后端分离版之OAuth2.0 token的存储和管理

    内存中存储token 我们来继续授权服务代码的下一个优化.现在授权服务中,token的存储是存储在内存中的,我们使用的是 InMemoryTokenStore : 图中的tokenStore方法支持很 ...

  10. DDR3 DDR4 FPGA实现

    基于7系列.virtex6等xilinx器件的MIG ip核设计DDR3/4读写控制器,以及基于arria 10器件的DDR4读写控制:DDR3/4的设计,设计的关键点是提高DDR3/4的访问效率,目 ...