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. 利用Monkey进行APP测试

    APP测试策略 功能测试 安装.卸载测试 升级测试(跨版本) 数据丢失 版本兼容 业务逻辑测试 UI测试 异常测试 适配测试 软件 兼容性测试 硬件 性能测试 效率测试 启动时间 响应时间 页面流畅度 ...

  2. springboot学习第一步

    关于springboot的介绍就不多说了,可以去百度. 默认的情况下,springboot1.4.0版本要求Java7以上和spring4.3.2以上,当然你也可以使用java1.6,只不过你需要额外 ...

  3. KiSystemCall64 win10 21h2函数流程分析 3环到0环

    0x00基本信息 系统:windows 10 21h2 工具:ida 7.7 , windbg 10 3环写一个win32k 函数 看访问流程 0x01分析 例如:3环函数 FlattenPath(x ...

  4. 理解Faster R-CNN

    首先放R-CNN的原理图 显然R-CNN的整过过程大致上划分为四步: 1.输入图片 2.生成候选窗口 3.对局部窗口进行特征提取(CNN) 4.分类(Classify regions) 而R-CNN的 ...

  5. suse 12 二进制部署 Kubernetets 1.19.7 - 第13章 - 部署metrics-server插件

    文章目录 1.13.0.创建metrics-server证书和私钥 1.13.1.生成metrics-server证书和私钥 1.13.2.开启kube-apiserver聚合配置 1.13.3.分发 ...

  6. Javers 比较两个类的差异

    Javers 在开发过程中遇到需求,比较数据库中的原数据与新修改要写入库中的数据.这个实体类是比较复杂的.例如有基本类型,BigDecimal类型,自定义类型,Date类型,List集合,Set集合, ...

  7. CUDA01 - 硬件架构、warp调度、指令流水线和cuda并发流

    这一部分打算从头记录一下CUDA的编程方法和一些物理架构上的特点:从硬件入手,写一下包括线程束的划分.流水线的调度等等微结构的问题,以及这些物理设备是如何与软件对应的.下一部分会写一下cuda中的几种 ...

  8. 转载 CoreCLR源码探索(七) JIT的工作原理(入门篇)

    转载自:https://www.cnblogs.com/zkweb/p/7687737.html 很多C#的初学者都会有这么一个疑问, .Net程序代码是如何被机器加载执行的? 最简单的解答是, C# ...

  9. Windows命令（ping、telnet、netstat详解）

    转至:https://www.cnblogs.com/lisuyun/articles/5864744.html netstat详解转自http://wsmajunfeng.iteye.com/blo ...

  10. Centos6.x安装之后的9件事

    Centos6.x安装之后的9件事 这些不是必须都做的,只不过是我个人的习惯,在此记录一下. 1.修改yum源到国内 CentOS系统更换软件安装源 备份你的原镜像文件,以免出错后可以恢复. mv / ...