1. CSS是什么

层叠样式表 --> 给HTML添加样式的

2. CSS的语法

选择器 {

        属性1：值1;

        属性2：值2;

    }

3. CSS引入方式

1. 直接写在HTMl标签里面

<p style="color: red;font-size: 50px;text-align: center">直接写在HTMl标签里面</p>

　　2. 写在style标签里面的

第一种

<head>

    <style>

        p {

            color: red;

            font-size: 50px;

            text-align: center

        }

    </style>

</head>        

第二种

<head>

    <style>

        /*形式一：*/

        /*@import "css/mystyle.css";*/

        /*形式二：*/

        @import url("css/mystyle.css");

    </style>

</head>

　　3. 写在单独的css文件

<head>

    <link rel="stylesheet" href="css/mystyle.css">

</head>

4. CSS选择器

　　1. 基本选择器

1. ID选择器 --> #d1 {}

2. 类选择器 --> .c1 {}

3. 标签选择器 --> a {}

4. 通用选择器 --> * {}

2. 层级选择器

后代选择器     --> div .c1 {}    下一级 后面的所有

儿子选择器     --> div>.c1 {}     下一级 紧挨在后边的那个

毗邻选择器     --> div+.c1 {} 同一级 紧挨着我的那个标签

弟弟选择器     --> div~.c1 {} 同一级后面所有的

　　3. 属性选择器

有某个属性值的   --> div["title"]

属性等于某个值的 --> input["type"="button"]

　　4. 交集、并集选择器

交集：p.c1

并集：p,.c1

　　5. 伪类选择器

#1.1 没有访问的超链接a标签样式：

a:link {

  color: blue;

}

#1.2 访问过的超链接a标签样式：

a:visited {

  color: gray;

}

#1.3 鼠标悬浮在元素上应用样式：

a:hover {

  background-color: #eee;

}

#1.4 鼠标点击瞬间的样式：

a:active {

  color: green;

}

#1.5 input输入框获取焦点时样式：

input:focus {

  outline: none;

  background-color: #eee;

}

#2 注意：

1 a标签的伪类选择器可以单独出现，也可以一起出现

2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效

    link，visited，hover，active

3 hover是所有其他标签都可以使用的

4 focus只给input标签使用

　　6. 伪元素选择器

p:before {}

p:after {}

p:first-child

p:last-child

p:first-child    同级别的第一个

:last-child      同级别的最后一个

:nth-child(n)       同级别的第n个

:nth-last-child(n)  同级别的倒数第n个

#2.2 同级别同类型

:first-of-type         同级别同类型的第一个

:last-of-type          同级别同类型的最后一个

:nth-of-type(n)        同级别同类型的第n个

:nth-last-of-type(n)   同级别同类型的倒数第n个

#2.3 其他

:only-of-type         同类型的唯一一个

:only-child           同级别的唯一一个

5. CSS选择器的优先级

1. CSS选择器相同时： 距离标签越近，权重越高！

2. CSS选择器不同时：

    内联 > ID选择器 > 类选择器 > 元素选择器 > 继承的样式

3. !important   火烧眉毛才用！

6. 三大特性

1. 继承
2. 层叠
3. 优先级

5月28日 python学习总结 CSS学习（一）的更多相关文章

  1. 5月28日 python学习总结 CSS学习（二）

    CSS属性相关 宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family可以把多 ...

  2. 2017年6月28日 python爬虫学习

    1.写入csv文件2.lxml的用法3.自定义字典类的方法4.bytes解码得到str,str编码得到bytes5.json 1 import csv import lxml.html class S ...

  3. 4月28日 python学习总结 线程与协程

    一. 异步与回调机制 问题: 1.任务的返回值不能得到及时的处理,必须等到所有任务都运行完毕才能统一进行处理 2.解析的过程是串行执行的,如果解析一次需要花费2s,解析9次则需要花费18s 解决一: ...

  4. 2016年12月28日 星期三 --出埃及记 Exodus 21:23

    2016年12月28日 星期三 --出埃及记 Exodus 21:23 But if there is serious injury, you are to take life for life,若有 ...

  5. 无插件的大模型浏览器Autodesk Viewer开发培训-武汉-2014年8月28日 9:00 – 12:00

    武汉附近的同学们有福了,这是全球第一次关于Autodesk viewer的教室培训. :) 你可能已经在各种场合听过或看过Autodesk最新推出的大模型浏览器,这是无需插件的浏览器模型,支持几十种数 ...

  6. 2015年12月28日 Java基础系列（六）流

    2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流

  7. 2016年11月28日 星期一 --出埃及记 Exodus 20:19

    2016年11月28日 星期一 --出埃及记 Exodus 20:19 and said to Moses, "Speak to us yourself and we will listen ...

  8. 2016年10月28日 星期五 --出埃及记 Exodus 19:13

    2016年10月28日 星期五 --出埃及记 Exodus 19:13 He shall surely be stoned or shot with arrows; not a hand is to ...

  9. 2016年6月28日 星期二 --出埃及记 Exodus 14:25

    2016年6月28日 星期二 --出埃及记 Exodus 14:25 He made the wheels of their chariots come off so that they had di ...

随机推荐

  1. .NET 云原生架构师训练营（权限系统 代码实现 ActionAccess）--学习笔记

    目录 开发任务 代码实现 开发任务 DotNetNB.Security.Core:定义 core,models,Istore:实现 default memory store DotNetNB.Secu ...

  2. 35、python并发编程之多线程（理论篇）

    一 什么是线程 二 线程的创建开销小 三 线程与进程的区别 四 为何要用多线程 五 多线程的应用举例 六 经典的线程模型(了解) 七 POSIX线程(了解) 八 在用户空间实现的线程(了解) 九 在内 ...

  3. Note -「Lagrange 插值」学习笔记

    目录 问题引入 思考 Lagrange 插值法 插值过程 代码实现 实际应用 「洛谷 P4781」「模板」拉格朗日插值 「洛谷 P4463」calc 题意简述 数据规模 Solution Step 1 ...

  4. Solution -「POI 2011」「洛谷 P3527」MET-Meteors

    \(\mathcal{Description}\)   Link.   给定一个大小为 \(n\) 的环,每个结点有一个所属国家.\(k\) 次事件,每次对 \([l,r]\) 区间上的每个点点权加上 ...

  5. 《操作系统导论》第14章 | 内存操作API

    内存类型 在运行一个C程序的时候,会分配两种类型的内存.第一种称为栈内存,它的申请和释放操作是编译器来隐式管理的,所以有时也称为自动内存.假设需要在func()函数中为一个整形变量x申请空间,我们只需 ...

  6. iNeuOS工业互联网操作系统，顺利从NetCore3.1升级到Net6的过程汇报

    目       录 1..... 概述... 1 2..... 升级的工程... 3 3..... 升级的代码差异... 4 4..... 系统运行... 5 1.   概述 我们团队一直在工业领域从 ...

  7. [VM trunk ports]opensatck VM 单网卡,多VLAN配置

    描述 需求产生场景 1.用户在虚机运行 K8S ,采用 VLAN 模式组网,要求 VM 端口要支持 trunk,支持多个 VLAN 网络数据在同一虚拟网卡上传输. 2.需要动态的增删虚拟机上的网络接口 ...

  8. NSSCTF-原来你也玩原神

    是一个杂项的题目,看到题目名字的时候,以为是和之前遇到的一个杂项题里面的原神的编码有关,然后发现不是的,给的是一个压缩包文件,使用winhex打开,并没有看到压缩包的文件头也没有看到,使用一般常用的b ...

  9. [题解]UVA11029 Leading and Trailing

    链接:http://vjudge.net/problem/viewProblem.action?id=19597 描述:求n^k的前三位数字和后三位数字 思路:题目要解决两个问题.后三位数字可以一边求 ...

  10. 开源绘画应用 Pinta 已移植到GTK 3和.NET 6

    Pinta 是一款开源绘画应用,适用于 Linux.Windows 和 macOS.你可以用它来进行自由手绘/素描.你也可以用它在现有的图片上添加箭头.方框.文字等. 年初发布了 Pinta 2.0. ...