一. 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. 第八届蓝桥杯java b组第五题

    标题:取数位 求1个整数的第k位数字有很多种方法.以下的方法就是一种. 对于题目中的测试数据,应该打印5. 请仔细分析源码,并补充划线部分所缺少的代码. 注意:只提交缺失的代码,不要填写任何已有内容或 ...

  2. SpringBootSecurity学习（01）网页版登录入门介绍

    Web应用安全管理 Web应用的安全管理,主要包括两个方面的内容,一个是用户身份的认证,即用户登录的设计,二是用户授权,即一个用户在一个应用系统中能够执行哪些操作的权限管理.权限管理的设计一般使用角色 ...

  3. Flume和Kafka完成实时数据的采集

    Flume和Kafka完成实时数据的采集 写在前面 Flume和Kafka在生产环境中,一般都是结合起来使用的.可以使用它们两者结合起来收集实时产生日志信息,这一点是很重要的.如果,你不了解flume ...

  4. chsime.exe cpu占用高

    打开管理员的命令提示符,运行 if exist "%SystemRoot%\System32\InputMethod\CHS\ChsIME.exe" (takeown /f &qu ...

  5. Python2与Python3的map()

    1. map()函数 Python2中,map(func, seq1[,seq2[...[,seqn)将func作用于seq*的每个序列的索引相同的元素,并最终生成一个[func(seq1[0], s ...

  6. Spring 梳理-el表达式和jstl

    JSP中有这么几种元素 1: Scriptlet <% ... %> 2: 声明元素 <%! ... %> 3: Java表达式 <%= ... %> 4: 指令元 ...

  7. Julia初学备忘

    println("hello!") println("hello!") print("hello!") print("hello! ...

  8. Kotlin基本语法和使用技巧

    基本语法 val value: String? = "HelloWorld" val name: String = getName() ?: return //如果是null就re ...

  9. 教老婆学Linux运维（二）Linux常用命令指南【上】

    目录 教老婆学Linux(二)Linux常用命令指南[上] 一.概述 二.常用命令 教老婆学Linux(二)Linux常用命令指南[上] 作者:姚毛毛的博客 tips:文章太长,分两篇发出,本篇发前三 ...

  10. windows下python和pycharm安装及其使用

    1.python安装及环境变量配置 1.1 python安装 1.1.1 python下载 官网下载:https://www.python.org/ Downloads-Windows(Mac os ...